HTML5的语义化及新增和废弃元素属性详细总结

目录

 

HTML5的语义化

常用节点元素标签：

分组内容元素

文本层次语义标记

嵌入内容

公共属性

input元素

新增表单元素

---

• HTML5的语义化

HTML5在继承了原有的标签的基础上，还添加了很多带有语义性的标记，比如<header>、<article>、<footer>等标记。那么为什么要增加这些标记呢？在以往的编程习惯中，我们可能会比较常用<div>来标记元素，虽然这并不会存在任何的错误，但这种页面结构的很多部分对于浏览器来说都是未知的，这是因为浏览器是通过id号来定位元素。因此，只要开发者不同，那么就允许元素的id号各异，这对浏览器来说，不能很好地表明元素在页面中的位置，必然影响页面解析的速度。而HTML5中的新增元素<header>,明确的告诉浏览器此处是页头，<nav>标记用于构建页面的导航，<article>标记用于构建页面内容的一部分，<footer>表明页面已到也页脚或根元素部分，并且这些标记都可以重复使用，极大地提高了开发者的工作效率、浏览器的解析速度，同时有利于SEO（搜索引擎）优化。

• 常用节点元素标签：

页头:<header>

导航:<nav>

文章：<article>

侧边栏：<aside>

分段章节：<section>

菜单：<menu>

搜索：<search>

页面主体：<main>

内容：<content>

媒体流内容：<figure>

标签页：<tab>

文章列表：<list>

联系方式：<address>

栏目标题：<title>

标题组合：<hgroup>

• 分组内容元素

<ul>元素用于定义页面中的无序列表，其用法与HTML4类似，区别在于，HTML5不再支持"type"和"compact"两个属性，同时也不再支持<li>元素的"type"属性，而是改用CSS样式来定义列表的类型。

<ol>元素用于页面中有序列表的创建。新增"start"属性和"reversed"属性，前者用于自定义列表项开始的编号，后者用于设置列表是否进行反向排序。

<dl>元素用于创建一个术语列表。HTML5允许在一个<dl>元素表中包含多个带名字的术语<dt>元素，每个术语元素后面可以跟一个或多个定义<dd>元素，并且术语元素<dt>与定义元素<dd>都不允许重复出现。例如：

<dl>
   <dt>苹果</dt>
   <dd>一种好吃的水果</dd>
   <dt>小龙虾</dt>
   <dd>一种美味的食物</dd>
</dl>