标签语义化之常用HTML标签

8/31/2015来源:CSS教程人气:884

标签语义化之常用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>定义框架集的窗口或框架。