最常用的HTML标签 总结整理

• body:在网页上要展示出来的页面内容一定要放在body标签中
• p:如果想在网页上显示文章，这时就需要p标签了，把文章的段落放到p标签中。标签的默认样式，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。
• hx:标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级。
• strong em:标签是为了强调一段话中的关键字时使用，它们的语义是强调。但两者在强调的语气上有区别:em 表示强调，strong 表示更强烈的强调。并且在浏览器中em 默认用斜体表示，strong 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用strong表示强调。
• span:标签是没有语义的，它的作用就是为了设置单独的样式用的。
• q:标签是对简短文本的引用，比如说引用一句话就用到q标签。用q标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。
• blockquote:blockquote的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。浏览器对

  标签的解析是缩进样式。

• br:在需要加回车换行的地方加入br /，br /标签作用相当于word文档中的回车。在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入br /。没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有br /、hr /和img /。
• &nbsp:在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入nbsp;。
• hr:在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。
• address:一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以
  标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
• code:在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用code标签了.如果是多行代码，可以使用pre标签。
• pre:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。pre 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是pre标签的一个常见应用就是用来展示计算机的源代码。
• ul:ul-li是没有前后顺序的信息列表。每项li前都自带一个圆点
• ol:在网页中展示有前后顺序的信息列表,这类信息展示就可以使用ol标签来制作有序列表来展示。每项li前都自带一个序号，序号默认从1开始.
• div:在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个div标签的作用就相当于一个容器。什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。用id属性来为div提供唯一的名称，必须唯一.

---

• 表格
• table:table…/table：整个表格以table标记开始、/table标记结束。
• tbody:tbody…/tbody：当表格内容非常多时，表格会下载一点显示一点，但如果加上tbody标签后，这个表格就要等表格内容全部下载完才会显示。
• tr:tr…/tr：表格的一行，所以有几对tr表格就有几行。表格中列的个数，取决于一行中数据单元格的个数。
• td:td…/td：表格的一个单元格，一行中包含几对td…/td，说明一行中就有几列。

• th:th…/th：表格的头部的一个单元格，表格表头。表头，也就是th标签中的文本默认为粗体并且居中显示

• caption:添加标题和摘要,标题用以描述表格内容，标题的显示位置：表格上方。摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容

---

• a:实现超链接 a href=”目标网址” title=”鼠标滑过显示的文本” 链接显示的文本 /a .title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。主要方便搜索引擎了解链接地址的内容（语义化更友好） a href=”目标网址” target=”_blank” click here! /a在新的网页中打开
• mailto:使用mailto能让访问者便捷向网站管理者发送电子邮件,如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
• img:插入图片,img src=”图片地址” alt=”下载失败时的替换文本” title = “提示文本” src：标识图像的位置；alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；图像可以是GIF，PNG，JPEG格式的图像文件。

---

表单

• form:可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。form method=”传送方式” action=”服务器文件” . form标签是成对出现的，以form开始，以/form结束。action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。method ： 数据传送的方式（get/post）。所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间

<form   method="传送方式"   action="服务器文件">

• input:当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。input type=”text/password” name=”名称” value=”文本” / 当type=”text”时，输入框为文本输入框;当type=”password”时, 输入框为密码输入框。name：为文本框命名，以备后台程序ASP 、PHP使用。value：为文本输入框设置默认值。(一般起到提示作用)

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

• textarea:当用户需要在表单中输入大段文字时，需要用到文本输入域。textarea rows=”行数” cols=”列数” 文本 /textarea rows ：多行输入域的行数。cols ：多行输入域的列数。在textarea /textarea 标签之间可以输入默认值。

<textarea  rows="行数" cols="列数">文本</textarea>

• radio/checkbox:使用单选框、复选框，让用户选择,input type=”radio/checkbox” value=”值” name=”名称” checked=”checked”/> 当 type=”radio” 时，控件为单选框,当 type=”checkbox” 时，控件为复选框,value：提交数据到服务器的值（后台程序PHP使用）,name：为控件命名，以备后台程序 ASP、PHP 使用,checked：当设置 checked=”checked” 时，该选项被默认选中,同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

• option:下拉列表框,设置selected=”selected”属性，则该选项就被默认选中。

<select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>

• multiple:下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能,在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击

 <select multiple="multiple">

• submit:使用提交按钮，提交数据,input type=”submit” value=”提交”> type：只有当type值设置为submit时，按钮才有提交作用,value：按钮上显示的文字

<input   type="submit"   value="提交">

• reset:重置按钮，重置表单信息,input type=”reset” value=”重置”>type：只有当type值设置为reset时，按钮才有重置作用,value：按钮上显示的文字

<input type="reset" value="重置">

• label:为鼠标用户改进了可用性。当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。label for=”控件id名称”>标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<label for="控件id名称">

---