H5新增（附加）

sayyesb

于 2021-09-03 11:03:45 发布

阅读量515

点赞数

分类专栏： HTML及CSS 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/sayyesb/article/details/120077286

版权

18 篇文章 0 订阅

订阅专栏

H5新增

描述

在H5之前我们都是使用div来表示页面的章节、头部、尾部、页脚等，但是这些都是div没有实际意义，在H5中引入了一些有语法意义的标签，分别表示页面中的某个部分，默认没有任何效果，主要是为了人们辨识和搜素引擎

<hgroup>、<header>、<nav>、<section>、<article>、<aside>、<footer>

section区域的划分，代表网页中的节点段，例如div是省，section则可以表示为市
section：表示网页中的比较小的区域划分，比如段、节
- section不是一般意义上的容器元素，、如果使用大范围的容器元素则使用div
- 可以使用article、nav、aside就不用section，没有实际意义就用div

Html5 Forms概述,在Html5中:

Htnl5之前的表单

属性

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（禁止）

关注