H5新增
一、语义化标签
描述
在H5之前我们都是使用div来表示页面的章节、头部、尾部、页脚等,但是这些都是div没有实际意义,在H5中引入了一些有语法意义的标签,分别表示页面中的某个部分,默认没有任何效果,主要是为了人们辨识和搜素引擎
语义化标签
<hgroup>、<header>、<nav>、<section>、<article>、<aside>、<footer>
-
hgroup表示对页面中的标题进行分组、
-
如果只需要一个H1到H6标签就不需要group]
-
如果有连续多个h标签就使用hgrou
-
-
section区域的划分,代表网页中的节点段,例如div是省,section则可以表示为市
-
section:表示网页中的比较小的区域划分,比如段、节
-
section不是一般意义上的容器元素,、如果使用大范围的容器元素则使用div
-
可以使用article、nav、aside就不用section,没有实际意义就用div
-
-
article:代表一个文档在页面中自称一体的内容
-
单独文字使用:article
-
单独模块使用:section
-
没有语义使用:div
-
-
aside:作为主要内容的附属信息部分,或者侧边栏信息
-
footer:表示页脚,比如版权啊等等
-
footer也可以作为section的底部信息
-
H5表单元素
Html5 Forms概述,在Html5中:
-
表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性 form的action指向一个服务器地址(接口)
-
当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值注意表单项的name属性必须有值,服务器才能获取表单
-
所有之前的表单控件都保持不变
-
仍然可以使用脚本操作表单控件
Htnl5之前的表单
-
标签为input
-
type:text:文本框
-
type:password:密码框
-
type📻单选框
-
注意以name分组,确保单选关系,也为了后台能成功获取
-
必须有value属性,为了后台获取后的识别(不写统一为on)
-
-
type:checkbox:复选框
-
注意以name分组,确保为一组,也为了后台能成功获取
-
必须有value属性,为了后台获取后的识别(不写统一为on)
-
-
type:submit:提交按钮
-
type:reset:重置按钮
-
type:button:普通按钮
-
标签为select:下拉框
-
name属性在select标签上
-
multiple:可选多项
-
子项可以通过optgroup来进行分组
-
label属性用来定义组名
-
子项为option标签
-
selected属性,选中控制
-
必须有value属性,为了后台获取后的识别
-
标签为textarea:文本域
-
标签为lable:控制文本与表单的关系
-
for属性指向一个input的id
-
-
标签fieldset 标签legend:来为表单分组
-
属性
-
checked属性,选中控制
-
value:表单里存储的值
H5新增表单控件
-
type:email :email地址类型
-
当格式不符合email格式时,提交是不会成功的,会出现提示;只有当格式相符时,提交才会通过 在移动端获焦的时候会切换到英文键盘
-
-
type:tel :电话类型
-
在移动端获焦的时候会切换到数字键盘
-
-
type:url :url类型
-
当格式不符合url格式时,提交是不会成功的,会出现提示;只有当格式相符时,提交才会通过
-
-
type:search :搜索类型
-
有清空文本的按钮
-
-
type:range : 特定范围内的数值选择器
-
属性:min、max、step
-
-
type:number : 只能包含数字的输入框
-
type:color : 颜色选择器
-
type:datetime : 显示完整日期(移动端浏览器支持)
-
type:datetime-local : 显示完整日期,不含时区
-
type:time : 显示时间,不含时区
-
type:date : 显示日期
-
type:week : 显示周
-
type:month : 显示月
h5新增表单属性
-
placeholder : 输入框提示信息
-
适用于form,以及type为text,search,url,tel,email,password类型的input
-
-
autofocus : 指定表单获取输入焦点
-
required : 此项必填,不能为空
-
pattern : 正则验证 pattern="\d{1,5}
-
formaction 在submit里定义提交地址
-
list和datalist : 为输入框构造一个选择列表
-
list值为datalist标签的id
表单注意事项
-
表单元素默认自带蓝色边框,给表单元素添加outline:0;或者outline:none;即可去掉默认边框
-
防止文本域(textarea)标签防止文本域拖拽
-
实际开发中,我们文本域右下角是不可以拖拽的。
-
设置:textarea {resize:none;}
-
-
CSS3的verticle-align属性使用场景:经常用于设置图片(行内块元素)和文字垂直对齐
-
官方解释:用于设置一个元素的垂直对齐方式,但他只针对行内元素或者行内快元素有效
-
可选值:top\middle\bottom\baseline\数字
-
-
图片默认与文字的基线对齐,所以图片的底部会有一个空白缝隙,解决方法
-
给图片添加verticle-align:top\bottom\middele\数字
-
把图片转换为快级元素,没有了verticle-align属性,也就没有了基线对齐(baseline)
-
-
鼠标样式cursor
-
属性值:default(默认|)/pointer(小手)/move(移动)/text(文本)/not-allowed(禁止)
-