html5的语义化标签有哪些及其作用?

发布网友发布时间：2022-04-26 05:47

我来回答

共3个回答

热心网友时间：2022-04-19 06:25

<header>元素描述了文档的头部区域

<nav>

标签定义导航链接的部分。

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<article> 标签定义独立的内容。

<aside>

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<footer> 元素描述了文档的底部区域.

热心网友时间：2022-04-19 07:43

　　一：(理论)语义化标签是什么？
语义化标签就是尽量使用有相对应的结构的含义的Html的标签，以Table为例：
<table>

<tr>

<td>消费项目</td>

<td>消费金额</td>

</tr>

<tr>

<td>吃饭</td>

<td>20元</td>

</tr>

</table>
　　你看出了上面的Table有什么毛病吗？嘿嘿，那你看这个语义化的标签
<table>

<caption>花费记账</caption>

<thead>

<tr>

<th>消费项目</th>

<th>消费金额</th>

</tr>

</thead>

<tbody>

<td>吃饭</td>

<td>20元</td>

</tbody>

</table>
　　这两块代码的标签不一样，第二个表格的这些标签代码，无疑更符合Web标准.
<caption>:表格的标题;
<thead>:一表格的表头;
<th>:表的某一列的列头。

再说我们习以为常的
<title>博客园简介</title><body>博客园是一个软件开发的技术乐园，它于2004年创办，这里...</body>
　　你看，为什么我们看一篇文章，一下就知道标题在哪呢？在浏览器的顶端。那为什么搜索引擎能抓取呢？就是它知道这个语义化标签<title>里的就是文章标题，要是我们不遵守这个，而是：
<span>博客园简介</span><span>博客园是一个软件开发的技术乐园，它于2004年创办，这里...<span>
　　那搜索引擎怎么就知道谁是标题，谁是内容了呢？它又靠什么去抓取标题呢?其实语义化不仅可以是标签语义化,还可以延伸成结构语义化.举例:
#left{float:left;margging-left:50px;}

#right{float:right;margin-top:100px;}

<div id="left">content..</div>

<div id="right">content..</div>
　　这个例子里对id的命名稍微有点夸张,但是类似的情况却使有的,当我们想把#left这个div放到页面的右边,和#right调换位置时,难道你可以把样式改成这样?
#left{float:right;margin-left:50px;}

#right{float:left;margin-top:100px;}
　　那样看着多别扭,多误导人这两个div的布局啊.
应该写成这样.
<div id="main">content..</div>

<div id="sidebar">content..</div>
　　那样既一目了然这几个div里是什么内容也方便对其中的样式进行修改.

二：(理论)语义化标签怎么样？
1.结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,so易于阅读)。
2.更有利于特殊终端的阅读(手机，个人助理等）。

三：(行动)语义化标签怎么办？
尽量用有结构含义的,少用无语义的，如<span>,<div>无意义，看不出是什么东西,可是<address>一看就知道这里面的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。

那么，怎么判断你的页面是否符合Web标准之一：语义化标签呢？你可以把你的页面暂时去掉样式后看可读性怎么样，如果这个时候感觉你的页面很乱，那就说明的的页面的语义化标签不怎么样，而如果你的页面去掉样式了感觉依然不是杂乱无章的，那么，就说明你的页面结构清晰，语义化标签比较可以了。

热心网友时间：2022-04-19 09:17

html5语义化标签有这些及其作用 - https://21xrx.com/full_stack/Html/html5_semantics.html