标签语义化之常用HTML标签

2024-04-27 14:37:26

字体：大中小

来源：转载

供稿：网友

标签语义化之常用HTML标签

一、布局的理解误区

网络上流行管新型的布局方式叫“DIV+CSS”，其实是一个错误的理解，导致了很多人过度依赖与滥用DIV标签， HTML提供了我们一共七八十个标签，其中常用的有三十个左右，DIV不过是一个相对的空标签而已，在很多情况下，我们可以使用其他更合适且更简洁的标签可以替代它。

二、标签的差异

共性：都是一个容器，可以在其中放置内容

差异：分为行内和块级两个大类，且不同便签有相应含义上的预设，如：h-标题，p-段落，a-链接，等等

三、标签语义化的好处

　　a、让结构更简洁，让搜索引擎更友好

　　b、通过多重组合，减少不必要的CSS命名

四、语义化标签的使用

　　a、列表：ul、ol、li、dl、dt、dd

　　b、标题：h1~h6

　　c、段落：p

　　d、强调：strong

　　e、表格：table、tr、td，以及表格的其他成员th、thead、tbody、tfood

附录：常用HTML标签表

红色：结构标签黑色：行内元素蓝色：块级元素绿色：表格元素灰色：其他标签

<!--...-->	定义注释。
<body>	定义文档的主体，默认有外边距，注意清除。
<head>	定义页面的信息。
<html>	定义 HTML 文档。
<meta>	定义页面的描述信息，便于搜索优化。
<title>	定义文档的标题。
<link />	定义引用外部文件，如联入CSS样式表。
<style>	定义内联的CSS样式信息。
<script>	定义内联或外联的客户端脚本，如JS。
<a>	定义锚链接或其他链接，行内元素。
<img />	定义引入一张图片，行内元素。
<strong>	定义强调文本，样式为加粗，行内元素。
<span>	定义一个行内元素的空盒子。
<div>	定义一个块级元素的空盒子。
<h1> to <h6>	定义标题部分，默认有外边距，块级元素。
<ul>	定义无序列表，默认有外边距和内边距，块级元素。
<ol>	定义有序列表，即数字列表，默认有内外边距，块级元素。
<li>	定义列表的项目，一般被嵌套在<ul>和<ol>内，块级元素。
<dl>	自定义列表的项目，默认有外边距和内边距，块级元素。
<dt>	自定义列表的标题，嵌套在<dl>内，与<dd>区别，块级元素。
<dd>	自定义列表的内容，嵌套在<dl>内，与<dt>区别，块级元素。
<p>	定义段落，默认有一个行高的外边距。
<table>	定义表格。
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<th>	定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<tbody>	定义表格中的主体内容。
<tfoot>	定义表格中的表注内容（脚注）。
<br />	定义一个回车换行。
<map>	定义图像映射，即鼠标热区。
<area>	定义图像映射内部的区域。
<form>	定义输入提交的表单。
<button>	定义表单中的按钮 (push button)。
<input>	定义表单中的输入控件。
<select>	定义表单中的选择列表（下拉列表）。
<frame>	定义框架集的窗口或框架。