一：(理论)语义化标签是什么？
语义化标签就是尽量使用有相对应的结构的含义的Html的标签，以Table为例：
你看出了上面的Table有什么毛病吗？嘿嘿，那你看这个语义化的标签
这两块代码的标签不一样，第二个表格的这些标签代码，无疑更符合Web标准.
:表格的标题;
:一表格的表头;
:表的某一列的列头。
再说我们习以为常的
博客园简介博客园是一个软件开发的技术乐园，它于2004年创办，这里...
你看，为什么我们看一篇文章，一下就知道标题在哪呢？在浏览器的顶端。那为什么搜索引擎能抓取呢？就是它知道这个语义化标签里的就是文章标题，要是我们不遵守这个，而是：<br><span>博客园简介</span><span>博客园是一个软件开发的技术乐园，它于2004年创办，这里...<span><br> 那搜索引擎怎么就知道谁是标题，谁是内容了呢？它又靠什么去抓取标题呢?其实语义化不仅可以是标签语义化,还可以延伸成结构语义化.举例:<br>#left{float:left;margging-left:50px;}<br> <br>#right{float:right;margin-top:100px;}<br> <br><div id="left">content..</div><br> <br><div id="right">content..</div><br> 这个例子里对id的命名稍微有点夸张,但是类似的情况却使有的,当我们想把#left这个div放到页面的右边,和#right调换位置时,难道你可以把样式改成这样?<br>#left{float:right;margin-left:50px;}<br> <br>#right{float:left;margin-top:100px;}<br> 那样看着多别扭,多误导人这两个div的布局啊.<br>应该写成这样.<br><div id="main">content..</div><br> <br><div id="sidebar">content..</div><br> 那样既一目了然这几个div里是什么内容也方便对其中的样式进行修改.<br><br>二：(理论)语义化标签怎么样？<br>1.结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,so易于阅读)。 <br>2.更有利于特殊终端的阅读(手机，个人助理等）。 <br><br>三：(行动)语义化标签怎么办？<br>尽量用有结构含义的,少用无语义的，如<span>,<div>无意义，看不出是什么东西,可是<address>一看就知道这里面的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。<br><br>那么，怎么判断你的页面是否符合Web标准之一：语义化标签呢？你可以把你的页面暂时去掉样式后看可读性怎么样，如果这个时候感觉你的页面很乱，那就说明的的页面的语义化标签不怎么样，而如果你的页面去掉样式了感觉依然不是杂乱无章的，那么，就说明你的页面结构清晰，语义化标签比较可以了。</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="wdhdnr">
<div class="huidanrtop">
<div class="wdhuidaxinx">
<div class="wdhuidaxm">回答3：</div>
</div>
</div>
<div class="clear"></div>
<div class="wdhuidanrmid">
<div class="zuijiacont">
<p><p> html5语义化标签有这些及其作用 - https://21xrx.com/full_stack/Html/html5_semantics.html</p></p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="wendaright">
<div class="wdluluerwema">
<div class="wdxgwttop">相关问答</div>
<div class="wdxgwtnr">
</div>
<div class="clear"></div>
</div>
<!-- 其他随机问答['id'=>alphaID($like['zid'])] -->
<div class="wdluluerwema">
<div class="wdxgwttop">最新问答</div>
<div class="wdxgwtnr">
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/815997174588363172.html">CT扫描所见:右肺中叶外侧段见一磨玻璃密度结节影</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/1795864712082628507.html">请大家看看这碗是什么年代 “永”又有什么寓意</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/625145745594907164.html">—Who’s that boy reading in the study ? Is it David?—It __________ be David. I saw him go home j</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/695469173477934804.html">2002年11月18日出生的我是什么星座？11月18是农历</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/248261508.html">我是做手袋的，现在每个款式的包都要拿去SGS检测含铅量过高，有没有什么办法降低PU料的含铅量</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/1244485291195136259.html">湖南到广东交界的收费站是哪个站？</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/1887202294489161548.html">囡字五行属什么</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/1817617077527237068.html">补过的牙齿疼怎么办</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/1517227364803533380.html">形容一个人野心明显时，为什么常说司马昭之心路人皆知?</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://191i.com/i/1833590652611307340.html">高考分数310可以上哪所幼师学校</a></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer">
<!-- 移动底部导航 -->
<div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://191i.com/static/old/img/fhtop.png"
title="返回顶部"></a></div>
<div class="dibu">
<div class="dibu">
</div>
</div>
<div class="banquan">
<p>内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024</p>
</div>
</div>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?530214f19d678452e8fa4098a936ce38";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
| 