web前端学习

HTML语义化标签

语义化标签是 HTML5 中新增的标签。这些标签跟普通的 HTML 标签用法同样，不一样的在于它们的名字与它们的结构有着相对应的含义。在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签。语义化标签的优势主要有： (1) 比div标签有更加丰富的含义，方便开发与维护 (2) 搜索引擎能更方便的识别页面的每个部分 (3) 方便其他设备解析（如移动设备、盲人阅读器等）

1.区块语义化标签

1. 头部标签 <header> 元素表明 “ 网页 ” 或 “section” 的页眉（头部）。 2. 脚部标签 <footer> 元素表明 “ 网页 ” 或 “section” 的页脚（底部）。 3. 导航标签 <nav> 元素表明页面的导航连接区域。用于定义页面的主要导航部分。 4. 区段标签 <section> 元素表明文档中的 “ 节 ” 或 “ 段 ” 。 5. 文章标签 <article> 元素表明一个在文档、页面或者网站中自成一体的内容。 6. 附属信息标签 <aside> 元素被包含在 article 元素中做为主要内容的附属信息部分。 7. 表格的语义化 <table>标签：定义一个表格； <tr>标签：定义行； <th>标签：定义表格头部内容的列； <td>标签：定义表格的单元格； <thead>标签：定义表格头部； <tbody>标签：定义表格主体部分； <tfoot>标签：定义表格尾部；

网页头部内容

网页区段内容

网页里独立的文章

姓名	年龄
张三	18
李四	22
合计	40

	
<header> 网页头部内容 </header>
<footer> 网页底部内容 </footer>
<nav> 页面导航内容 </nav>
<section> 网页区段内容 </section>
<article> 网页里独立的文章 </article>
<aside> 网页附属信息 </aside>
<table>
	<thead>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>张三</td>
			<td>18</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>22</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>合计</td>
			<td>40</td>
		</tr>
	</tfoot>
</table>

2.区块语义化标签使用示例

下图为使用<article> <section> <nav> <aside>、<header> <footer>等HTML5新增区块语义化标签来进行页面规划的示例。

	
<!-- 区块语义化标签使用示例代码 -->
<body>
	<header>
		<nav></nav>
	</header>
	<main>
		<section>
			<article></article>
			<article></article>
		</section>
		<aside></aside>
	</main>
	<footer></footer>
</body>

3.<figure>和<figcaption>

<figure>即流标签，用于定义独立的流内容（如图像、图表、代码等）。它的内容应该与主内容相关，但如果被删除，不会对文档流产生影响，该标签是块标签。 <figcaption>即流标题标签，与<figure>标签配合，通常作为<figure>标签内的第一个元素或最后一个元素，用于描述诸如图像、图表、代码等的标题部分。

流内容标题

独立的流内容

	
<figure>
	<figcaption>流内容标题</figcaption>
	独立的流内容
</figure>

4.<details>和<summary>

<details>即细节标签，用于描述文档或文档某个部分的细节。 <summary>即细节标题标签，用于为<details>标签的内容定义标题。两者配合使用，即<details>中的内容初始状态不可见，用户需要单击<summary>标签的内容，页面中才会显示出<details>标签中的其他内容；若用户再次单击<summary>标签的内容，则<details>标签中的其他内容又会折叠进去，页面还原到初始状态。

总结

详细内容

	
<details>
	<summary>总结</summary>
	详细内容
</details>