所谓语义化就是一看就知道是做什么的。以前布局只有div,span,ul,li等,div,span对于搜索引擎来说是不具有语义的。
- 说明
新增的布局类标签,更加具有语义性:
<div class='header'></div>
<div class='nav'></div>
<div class='content'></div>
<div class='footer'></div>
- 新增的语义化标签:
w3c 手册中文官网 : http://w3school.com.cn/
<header>头部标签:定义文档的页眉</header>
<nav>导航标签:定义导航链接的部分</nav>
<article>内容标签:标签规定独立的自包含内容</article>
<section>块级标签:定义文档中的节、区段</section>
<aside>侧边栏标签:定义其所处内容之外的内容</aside>
<footer>底部标签:定义文档或节的页脚</footer>
- datalist 定义下拉列表,请与 input 元素配合使用该元素
<input type="text" value="输入水果名称" list="star"/> <!-- input里面用 list -->
<datalist id="star"> <!-- datalist 里面用 id 来实现和 input 链接 -->
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
<option>Grape</option>
<option>Pear</option>
</datalist>
- fieldset 定义围绕表单中元素的边框,可将表单内的相关元素分组,打包 legend 搭配使用
<fieldset>
<legend>用户登录</legend>
用户名: <input type="text"><br /><br />
密 码: <input type="password">
</fieldset>