语义化标签
- 尽量减少使用无意义标签,如
span
和div
- 尽量不使用标签本身的CSS属性,如
b
、font
、s
- 需要强调的部分,使用
strong
、em
- 表格搭建时,使用
<thead>
表格头部</thead>
、<tbody>
表格主体</tbody>
、<tfoot>
表格尾部</tfoot>
- 列表搭建时,使用
<ul>
无序列表</ul>
、<ol>
有序列表</ol>
、<dl>
定义列表</dl>
section
:划分网页,表示页面中的一个内容区块,比如章节、页眉、页脚或页面其它部分。可以和h1,h2,h3...
等其他标签结合使用,表示文档结构。hgroup
:对整个页面/页面中的一个内容区块的标题进行组合。header
:一个内容区块或整个页面的头部部分。footer
:整个页面或页面区块的尾部。nav
:页面中导航连接的部分。article
:独立于内容其余部分的完整独立内容块。article
元素专门为摘要设计。aside
:表示article
标签内容之外的,与article
标签内容相关的辅助信息,aside
元素被用于无关内容。- 应该与主内容分开的内容
aside
元素中的内容可以被独立开来而不会影响文档或section
中主内容的含义- 可以用在主要内容相关的引用,如侧边栏、广告、
nav
元素组等 aside
的内容如果被删除,剩下的内容仍然很合理
figure
:表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元(figure
元素经常用于图片)figcaption
:- 一个图例的说明
figure
元素的一个标题或相关解释- 使用
figcaption
时,最好是figure
块的第一个或最后一个元素
新增标签的兼容问题
- HTML5语义化标签在IE6-8下,默认当成行内元素展示。
- 通过引入
js
解决IE9以下新增标签的兼容问题
Forms
- 新增
input
元素的种类:search
:搜索输入框tel
:电话号码输入框url
:输入URL地址email
:邮件输入框number
:数字输入框rang
:特定范围内的数值选择器color
:颜色选择器 只在Opera和Blackberry浏览器datetime
:显示完整日期和时间 UTC标准时间datetime-local
:显示完整日期和时间time
:显示时间month
:显示月份week
:显示周
- 表单新特性:
placeholder
:输入框占位符,用作输入提示autocomplete
:是否保存用户输入值,默认为on
,关闭为off
autofocus
:自动聚焦required
:此项必填,不能为空pattern
:正则验证pattern="\d{1,5}"
form
:加上form
属性,表单元素可以放在页面的任意位置formnovalidate/novalidate
:- 表示不需要验证表单,直接提交(
novalidate
用户form
标签) formnovalidate
用于submit
类型的提交按钮
- 表示不需要验证表单,直接提交(
- 表单验证
validity
对象,通过下面的valid
可以查看验证是否通过oText.addEventListener("invalid"fn1,false);
valid
:验证不通过时返回false
valueMissing
:输入值为空时typeMismatch
:控件值与预期类型不匹配patternMismatch
:输入值不满足pattern
正则customError
:不符合自定义验证setCustomValidity();
自定义验证
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。