HTML常用标签详解，想写前端，必须要会的标签有哪些？几句大白话来总结，一看就明白

别的不多说，直接就奔主题写正文啦，不明白的可以看上一篇文章。

HTML常用的一些标签不是很多，主要包括：

<div>、<a>、<img>、<h1>-<h6>、<p>、<table>、<form>、<ul>、<ol>、<dl>

- HTML属性

在介绍具体标签之前，我先介绍一下标签的属性，标签是可以设置属性的，属性一般设置在开始标签里，一个标签可以设置多个属性，多个属性用空格隔开，属性包括两部分，名称和值，格式为：名称=“值”。
举个例子：

<a href="http://www.baidu.com" target="_blank">我是刘小妞</a>

<a>标签里设置了两个属性，href和target是名称，后面双引号里面的内容是对应的值。

- <div>标签

<div>这个标签没什么含义，就是一个空白标签，可以理解为一个空盒子，所有的标签都可以理解为空盒子，只不过，有的标签有具体用途或者具体含义。
<div>主要用于网页布局，最初人们写网页的时候，特别爱用<table>布局，但是<table>相比较div+css布局，不是很灵活，也不利于网页渲染，所以，现在都是用div+css来布局，关于网页布局，我们在后面介绍css的时候再说。

- <a>标签

<a>标签是链接标签，大部分网页是有链接的，通过点击一段文字或者一张图片跳转到别的页面，就是用到的 <a>标签。
<a>标签比较常用的两个属性就是上面提到的，href和target，href设置跳转的链接地址，地址可以是相对的，也可以是绝对的。target设置打开新页面的方式，默认是在当前页面打开，我上面设置的_blank是在新窗口打开。

<a>标签的内容可以是文字也可以是图片，文字就像我们上面的例子，图片的话，就是包含一个 <img>标签。比如：

<a href="http://www.baidu.com"><img src="1.png"><a/>

- <img>标签

<img>标签是图像标签，它是个单标签，单标签的意思就是只有开始标签，没有结束标签，设置图像地址的属性是src，图像地址可以是相对地址，也可以是绝对地址。一般我们还会给图像标签设置宽(width)高(height)属性，这个图片显示的时候，就会按照我们设置的宽高来显示，还有一个可用可不用的属性alt，它是用来描述图片的，当浏览器无法载入图片时，会显示alt里设置的内容。举个例子：

<img src="1.jpg" alt="我是刘小妞" width="30" height="30">

会显示一个宽30像素，高30像素的图片，当图片加载不出来的时候，图片的位置会显示“我是刘小妞”这五个字。

- <h1>-<h6>标签

<h1>-<h6>这6个标签是标题标签，这6个标签的字号依次变小，h1的最大，h6的最小，默认都是加粗字体，字号具体多大，我也没测过，实际运用的时候，一般是按照设计稿的字号大小，来匹配标签设置字号大小。

- <p>标签

<p>段落标签，一般网页里成段的文字都是被这个标签标记。<p>和<h1>-<h6>这两种标签主要是为了增强网页的可读性，其实，如果不严谨的话，<div>都可以替代它们，用这两种标签的时候不用太纠结。不过，随着HTML5的兴起，越来越提倡网页的可读性，对标签的使用要求也严格了些。

- <table>标签

<table>表格标签，先来看一个表格的示例，如下图。

表格是由若干行若干列组成的，我们在写表格的时候，先写行，再写列。

举个例子：

<table border="1" cellpadding="10" cellspacing="10">
    <tr>
        <th>First Name</th><th>Last Name</th><th>Points</th>
    </tr>

    <tr>
        <td>Jill</td> <td>Smith</td> <td>50</td>
    </tr>
</table>

以上是一个两行三列的表格。

<tr>标签是标记行的。
<th>是标记表头的，表头默认居中加粗。
<td>是标记列的，也叫单元格。

说一下表格常用的几个属性。

border 边框属性，如果不设置，表格默认是没有边框的；border=“1”，是有边框的。
cellpadding 单元格边沿与其内容之间的空隙。
cellspacing 单元格之间的空隙。

cellpadding 和 cellspacing，HTML5已经不支持了，可以用css来设置。

- <form>标签

<form>表单标签。表单标签一般不会单独使用，它里面会包含各种表单标签。最常用的包括<input>、<textarea>、<select>、<option>、<button>。

<input>输入框，用的最多的一个表单标签。它有一个属性type，可以通过设置type值，来得到想要的输入框。最常用的type值有 checkbox（复选框）、file（文件上传）、hidden（隐藏输入框）、password（密码输入框）、radio（单选框）、text（默认输入框）。

<input>为单标签，它还有个常用属性是placeholder，输入框的提示信息。

<textarea>多行文本输入框，一般需要输入的文字比较多的时候，会用到它，<input>只能输入一行。

<textarea>常用的属性有cols（文本区域内可见的宽度）、rows（文本区域内可见的行数）、readonly(文本区域内为只读)。

<select>下拉列表，它也不会单独使用，它会包含着<option>（下拉列表项）使用。

写个例子：

<select name='zhushi'>
    <option value='mianbao'>面包</option>
    <option value='pisa'>比萨</option>
</select>

所有的表单标签都有name和value属性。表单的数据是要提交给服务器的，所以，服务器那边需要知道每个表单项对应的值，name属性是告诉服务器每个表单项的名字，value是告诉服务器每个表单项对应的值。

<button>按钮标签。在一个完整的表单里，通常会有一个提交按钮，就是用的<button>。它有一个type属性，type的值为submit（提交按钮）、reset（重置按钮）、button（默认普通按钮）。

写个表单的示例吧：

<form action="" method="post">
    <input name="phone" value="" placeholder="请输入手机号">
    <input type="password" name="pwd" value="" placeholder="请输入密码">
    <button type="submit">提交</button>
</form>

form的两个属性，action是表单提交时的服务器地址，method是提交数据的HTTP方法，一般是post或者get。

如果表单中有文件上传，还需要在form标签上设置enctype=“multipart/form-data”。

- <ul>、<ol>、<dl>标签

先看一张图片示例：

<ul>无序列表，<ol>有序列表。他们俩也不会单独使用，都会包含列表项<li>。

写两种列表示例：

1. 无序列表

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

2. 有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

有序列表项前面会自动生成1、2、3数字，无序列表项前面会显示一个小圆点。

<dl>自定义列表，它也不会单独使用，它的列表项比前两个多一个标签，它的每个列表项包含两个标签， <dt>(自定义列表项)、 <dd>（自定义列表项的描述），多了一个描述项。 <dd>的字号要比 <dt>的字号小。

写个小示例：

<dl>
    <dt>刘小妞</dt>
    <dd>喜欢记录生活的小女生</dd>

    <dt>刘工</dt>
    <dd>苦逼程序员</dd>
</dl>

这三个标签，常用程度依次为<ul> ><ol>> <dl>。

今天要写的大概就是这些，稍微麻烦点的是表单标签。不过，也不用怕，不是所有的页面都需要表单，用的最多的还是<div>。

文章更新的可能不是很快，着急的朋友可以先通过搜公众号“刘小妞的栖息地”，或者扫下图看其他技术文章，都是从工作中摸索总结出来的经验，写的不好的地方欢迎大家指教。