一、HTML语义化结构标签
1.<header>标记
HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。
例如：
<body>
<header>
<h1>夏天</h1>
<h3>夏天它是炎热的，但是微风拂过，也有着那一丝丝凉意...</h3>
</header>
</body>
2.<nav>标记
nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的予以更加明确，主要应用于传统导航条，侧边栏导航，页内导航，翻页导航。
例如：
<body>
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JS</a>
<a href="/jquery/">jQuery</a>
</nav>
</body>
自动横向显示成导航栏样式
3.<article>标记
article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。
例如：
<body>
<article>
<h2>第一章</h2>
<section>
<h2>第一节</h2>
</section>
<section>
<h2>第二节</h2>
</section>
<article>
<h2>第二章</h2>
</article>
</body>
4.<aside>标记
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside元素的用法主要包含两种：
1>被包含在article元素内作为主要内容的附属信息。
2>在article元素之外使用，作为页面或站点全局的附属信息部分。
例如：
<body>
<article>
<header><h1>标题</h1></header>
<section>文章主要内容</section>
<aside>其他相关文章</aside>
</article>
<aside>右侧菜单</aside>
</body>
5.<section>标记
section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。在使用section元素时，需要注意以下3点：
- 不要将section元素用作设置样式的页面容器，那是div的特点。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。
- 如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
- 没有标题的内容区块不要使用section元素定义。
例如：
6<footer>标记
footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。在HTML5之前，一般使用
二、分组元素
1<figure>标记
figure元素用于定义独立的流内容（图像、图表、照片、代码等等），一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。 figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个元素的位置。
<body>
<p>jksdjaldjlahsfhlahsdlasljflahslknchasdlnh</p>
<figure>
<figcaption>背景鸟巢</figcaption>
<p>拍摄者：传智播客</p>\
</figure>
</body>2.<hgroup>标记
hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。
在使用hgroup元素时要注意以下几点：
1.。如果只有一个标题元素不建议使用hgroup元素。
2.。当出现一个或者一个以上的标题与元素时，推荐使用hgroup元素作为标题元素。
3.。当一个标题元素包含副标题、section或者article元素时，建议将hgroup元素和标题相关元素存放到header元素容器中。
例如：
<body>
<header>
<hgroup>
<h1>我的个人网站</h1>
<h2>我的个人作品</h2>
</hgroup>
<p>开心快乐每一天</p>
</header>
</body>三、页面交互元素
1.<details>标记和<summary>标记
details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏detail中的其他内容。
details在外面，summary在里面
例如：
<body>
<details>
<summary>显示列表</summary>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</details>
</body>2.<progress>标记
progress元素用于表示一个任务的完成进度。这个进度可以时不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。
progress元素的常用属性值有两个，具体如下。
1.。value: 已完成的工作量。
2.。max: 总共有多少工作量。
3.。min: 默认为0。
例如：
<body>
<h1>我的工作进展</h1>
<p><progress min="0" max="100" value="50"></progress></p>
</body>3.<meter>标记
meter元素用于指定范围内的数值。例如，显示硬盘容量或者对某个候选者的投票人数占投票总人数的比例等，都可以使用meter元素。
meter元素有多个常用的属性：
1.。high：定义度量的值我i与哪个点被界定为高的值。
2.。low：定义度量的值位于哪个点被界定为低大的值。
3.。max：定义最大值，默认值为1.
4.。min：定义最小值，默认值为0.
5.。optimum：定义什么样的度量值是最佳的值。如果该值高于high属性，则以为着值越高越好。如果该值低于low属性的值，则以为着值越低越好。
6.。value：定义度量的值。
例如：
<body>
<h1>学生成绩列表</h1>
<p>
小红：<meter value="59" min="0" max="100" high="80" title="65分" optimum="100">65</meter><br/>
小明：<meter value="80" min="0" max="100" high="80" title="80分" optimum="100">80</meter><br/>
小李：<meter value="75" min="0" max="100" high="80" title="75分" optimum="100">75</meter><br/>
</p>
</body>四、文本层次语义元素
1.<time>标记
time元素用于定义时间或日期，可以代表24小时中的某一段时间。
time元素有两个属性：
1.。datatime：用于定义相应的时间或日期。取值为具体时间（例如：14：00）或具体日期（例如：2015-0901），不定义该属性时，由元素的内容给定日期/时间。
2.。pubdate：用于定义time元素中的日期/时间时文档（或article元素）的发布日期。取值一般为“pubdate”。
例如：
<body>
<p>我们早上<time>9:00</time>开始上班</p>
<p>今年的<time datetime="2015-10-01">十一</time>我们准备去旅游</p>
<time datetime="2015-08-15" pubdate="true">
本消息发布于2015年8月15日
</time>
</body>2.<mark>标记
mark元素的主要功能时在文本中高亮显示某些字符，以引起用户注意。该元素的用法与em和strong有相似之处u，但是使用mark元素在突出显示样式时更随意灵活。
例如：
<body>
<p>中国专业<mark>IT社区</mark>CSDN (Chinese Software Developer Network) 创立于<mark>1999年</mark>，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。</p>
</body>
3.<cite>标记
cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
例如：
<body>
<p>也许愈时美丽就愈时脆弱，就像盛夏的泡沫。</p>
<cite>——明晓溪《泡沫之夏》</cite>
</body>五、全局属性
1.draggable属性
draggable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false，当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。
例如：
<body>
<h3>元素拖动属性</h3>
<article draggable="true">这些字符可以拖动</article>
可拖动的图片<img src="../images/td.jpg" draggable="true">
</body>2.hidden属性
在H5中，大多数元素都支持hidden属性，该属性有两个属性值：true和false。当hidden属性取值为true时，元素将会被隐藏，反之则会显示。元素中的内容时通过浏览器创建的，页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。
3.spellcheck属性
spellcheck属性主要针对input元素和textarea文本输入框，对于用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值：true（默认）和false，值为true时检测输入框中的值，反之不检测。
在处理的时候才会有区别，外表显示没区别.
例如：
<body>
<h3>输入框语法检测</h3>
<p>spellcheck属性值为true<br />
<textarea spellcheck="true">html5</textarea>
</p>
<p>spellcheck属性值为false<br />
<textarea spellcheck="false" >html5</textarea></p>
</body>4.contenteditable属性
contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。该属性有两个值，如果为true表示可编辑，为false表示不可编辑。
例如：
<h3>可编辑列表</h3>
<ul contenteditable="true">
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
</ul>
扫一扫
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
