一、元素分类
HTML5的元素按优先级定义为结构性元素、级块性元素、行内语义性元素和交互元素4大类:
1.结构性元素
主要负责Web的上下文结构的定义,确保HTML文档的完整性,这类元素包括以下几个:
section、header(与head不同,内容是可见的)、footer(一般放置关于我们、法律声明、版权等信息)、nav(导航元素,navigator缩写)、article(一篇文章的主体内容,一般为文字集中显示的区域)
关于Section
1)不要将section元素用作设置样式的页面容器,那是div元素的工作。
2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。
3)不要为没有标题的内容区块使用section元素。
何时用section何时用article?
article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。
具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。
2.级块性元素
aside、figure、code、dialog
3.行内语义性元素
meter、time、progress、video(视频元素,用于支持和实现视频文件的直接播放、缓冲预载和多种视频媒体格式)、audio(用于支持和实现音频文件的直接播放、缓冲预载和多种音频媒体格式)
4.交互性元素
details(表示一段具体的内容,只有通过如单击才会显示出来)、datagrid(控制客户端数据与现实)、menu(用于交互菜单)、command(处理命令)
二、常见属性
1.autofocus-让元素在页面打开时自动获得焦点
2.placeholder-未输入时提示用户可以输入的内容
3.required-声明必须输入内容
4.novalidate-声明该项在表单提交时不检查
5.manifest-离线Web应用程序时,指定的URL用来描述文档的缓存信息
6.其他:autocomplete、min、max、multiple、pattern和step。
三、div、article、section、nav
1. div
无语义,一般用作布局
2.section
相当于带语义的div,对网页上的内容进行分块处理,通常带标题。下面一篇文章:
<article>
<h1>2015涨薪最新消息</h1>
<p>
本站记者近日采访了多名员工及领导,关于涨薪消息,请大家详细查看下文:
</p>
<section>
<h1>员工:据说大家要加薪</h1>
<p>
据不可靠消息,大家要加薪啦!
</p>
</section>
<section>
<h1>领导回应:未接到通知</h1>
<p>
未接到上级通知,请大家持续关注。
</p>
</section>
</article>
3.article
代表文档、页面或者程序中独立完整的,可以被外部引用的内容。前面一段HTML,最外层是个article,表示这段是一段完整的消息。
4.aside
当前页面或文章的附属信息部分,包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条及其他类似的有别于主要内容的部分。
4.nav
用于设计导航元素
<nav>
<a href="home.html">首页</a>
<a href="about.html">关于我们</a>
<a href="join.html">加入我们</a>
<nav>
5. header
通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容如logo图片、搜索表单等。
6. footer
作为内容块的注脚,如作者、相关阅读链接及版权信息等。