HTML语义化案例分析：浏览器内核检测网页 ｜ 青训营

快乐小牛
105 阅读1分钟

语义化在HTML中的好处

  • 影响SEO的搜索排名；
  • 对于无障碍用户，有利于屏幕阅读器的解析和作用；
  • 比起搜索无休止的带有或不带有语义/命名空间类的 div，找到有意义的代码块显然容易得多。
  • 向开发人员建议将要填充的数据类型。
  • 语义命名反映了正确的自定义元素/组件命名。

分析的网页地址：ie.icoa.cn

打开网页，右键-查看源代码。我们主要对body部分进行语义分析。

<body>
<div id="box_shade" class="width_944_px">
<div align="center" id="show_pc">
<ul class="button-group">
<li><a href="https://ie.icoa.cn"><button class="color blue button">浏览器内核检测</button></a></li>
<li><a href="https://bra.icoa.cn/socks/"><button class=" button">袜子尺码表</button></a></li>
</ul>
</div>

顶部Tab部分，可以看到是用了ul和li形成一个列表，外面再使用div包裹。

<h1 class="width_250_px">浏览器内核版本检测<div id="ver">2.6</div></h1>

标题区域，用了h1.

<p id="center">Browser kernel version detection</p>

标题下面的文字用了p标签。

</div>
<div id="box_shadow" class="width_960_px">

下面是一个表格，用于展示检测结果的主体内容。

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="zebra">
<thead>
	<tr>
		<th></th>
		<th><li style="text-align:right;" class="none"><a href="https://ie.icoa.cn/iphone">iPhone 真假检测</a> | <a href="https://bra.icoa.cn">文胸尺寸计算</a> | <a href="https://dns.icoa.cn">公共 DNS 地址</a> | <a href="https://icoa.vip">给我留言</a></li></th>
	</tr>
</thead>

表头部分用作了广告展示，thead和tr标签。

<tfoot>
	<tr>
		<td align="right"><i>来访IP和时间 (IP & Time)</i></td>
		<td>
			<input type="checkbox" id="hid" checked>
			<div class="no"><i>
			中国 浙江&nbsp[124.160.215.*]
			</i>
			</div>
			<div style="float:right;margin:0 20px;"><i>
			2023-Jul-30 15:27:51			</i>
			</div>
		</td>
	</tr>
</tfoot>
  <tr>
    <td width="25%" align="right">操作系统 (OS)</td>
    <td><img src=//ie.icoa.cn/img/win.ico width=16px height=16px /> Windows 10 / 11 / Server 2016 / 2019 / 2022</td>
  </tr>

表格主体部分，tfoot,tr,td,div，input标签用于展示勾选框，控制内容是否展示；img展示图标。

</table>
</body>

结语：通过对本网站HTML的标签进行分析，发现主要包含导航栏，底栏，主题部分等内容，合理使用标签，使得整个文档条理清晰，展示了语义化的好处。

avatar
文章
阅读
粉丝