HTML5元素&属性

一、元素分类

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

作为内容块的注脚，如作者、相关阅读链接及版权信息等。