认识HTML标签

1.段落标签：<p>内容</p>。使用段落标签，段前段后会有一段空白距离，可用CSS删除或改变它。

2.标题标签：<hx>内容</hx>。标题标签一共有6个，h1、h2、h3、h4、h5、h6，重要性依次递减。<h1>是最高等级，常被用于网站名称。

3.强调标签：<strong>内容</strong>和<em>内容</em>。用以强调一段话中的某个关键字，在浏览器中<em>默认用斜体表示，<strong>默认用粗体表示。目前国内前端程序员更喜欢用<strong>表示。

4.为文字设置单独的样式：<span>文字</span>。<span>标签本身并没有语义，他的作用就是设置单独的样式，并不是为了起强调作用。

5.短文本引用：<q>引用的文本内容</q>。注意引用的文本不用加双引号，浏览器会自动对q标签添加双引号。但<q>标签的真正关键点不是它的默认样式双引号，而是它的语义：引用别人的话。

6.长文本引用：<blockquote>引用文本</blockquote>。该标签是对长文本的引用，如在文章中引入大段某知名作家的文字。浏览器对<blockquote>标签的解析是缩进样式。

7.分行显示标签：<br>或<br/>。

8.添加空格的标签：&nbsp;

9.添加水平分隔线：<hr/>标签。该标签在浏览器中的默认样式线条比较粗，颜色为灰色。

10.为网页添加地址信息：<address>联系地址</address>。一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。该标签在浏览器上显示的样式为斜体。

11.网页中加入一行代码：<code>代码语言</code>。适用于在网页中显示一些计算机专业的编程代码。但是如果要插入多行代码就不能使用该标签了，此时可以使用<pre>标签。

12.网页中插入大段的代码：<pre>编程代码段</pre>。<pre>标签的主要作用：预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。只要是需要在网页中预显示格式化时都可以使用该标签，通常用来显示计算机的源代码。

13.无序列表标签：ul。网页上很多信息的列表，如新闻列表、图片列表可以使用ul-li标签来完成。ui-li是没有先后顺序的信息列表，在网页中显示的默认样式一般为：每项li前带有一个圆点。语法：

    <ul type="列表前符号的样式">     <!--一般有disc;circle;square;-->    

           <li>信息</li>

            <li>信息</li>

       </ul>

14.有序列表标签：ol。语法：

    <ol type="列表前符号的样式">     <!--默认样式为数值递增-->

            <li>信息</li>

            <li>信息</li>

    <ol>

15.盒子/容器<div>……</div>。使用div标签可以为网页划分出独立的版块，它将网页的版块看成一个个盒子。将一些标签放进<div>里，可以划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用 id 属性来为<div>提供一个唯一的名称，就像每个人的身份证号。语法： <div   id="版块名称">……</div>

16.表格标签：table标签。

创建表格的四个元素：table、tbody、tr、th、td

(1)<table>……</table>：整个表格以<table>标记开始，以</table>标记结束。

(2)<tbody>……</tbody>：如果不加<thead><tbody><tfoot>，table表格加载完后才会显示。加上这些表格结构，tbody包含行的结构下载完优先显示，不必等待表格结束后再显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。即使用tbody可以让表格按结构一块一块的显示。

(3)<tr>……</tr>：表格的一行，所以有几对tr，表格就有几行。

(4)<td>……</td>：表格的一个单元格，一行中包含几对<td>……</td>，说明一行就有几列。

(5)<th>……</th>：表格的头部的一个单元格，表格表头。

table表格在没有添加CSS样式之前，在浏览器中显示是没有表格线的。

如：<style  type="text/css">

       table tr td,th{border:1px;solid #000;}

       </style>

表头，也即<th>标签中的文本默认为粗体并居中显示。

17.为表格添加标题和摘要：caption标签和summary标签。

(1)摘要标签语法：<table  summary="表格简介文本">。

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

(2)标题标签语法：<caption>标题文本</caption>。

标题标签显示的位置在表格的上方，用以描述表格的内容。它的标签放在<table>和<tr>之间。

18.超链接标签：<a>标签。语法：<a    href="要链接到的网址"    title="鼠标滑过时显示的文本">链接显示的文本</a>。

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，如果需要在新的浏览器窗口中打开，可以在标签中使用target属性，一共有5种属性值。

如：<a    href="目标网址"    target="_blank">click here!</a>。

19.在网页中链接Email地址：mailto。语法如下：

20.为网页插入图片：<img>。语法：<img    src="图片地址"    alt="下载失败时的替换文本"    title="提示文本">

图像可以是GIF、PNG、JPEG格式的图形文件。