HTML常用标签总结 [建议收藏]

好好学习，天天向上

本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star

1. 标题标签

<h1> </h1> ...... <h6> </h6>

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题

即<h1>-<h6>

2. 段落和换行标签

段落标签：<p> </p>

在HTML标签中,

标签用于定义段落,它可以将整个网页分为若千个段落

换行标签：<br/>

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望

某段文本强制换行显示，就需要使用换行标签<br/>

3. 文本格式化标签

加粗：<strong> </strong>或者<b> </b>

倾斜：<em>    </em>或者<i> </i>

删除线：<del>    </del>或者<s>    </s>

下划线：<ins>      </ins>或者<u> </u>

4. <div></div>和<span></span>

<div></div>是大盒子，一行只能放一个大盒子

<div style="background-color: brown;">111</div>
<div style="background-color: bisque;">222</div>
<div style="background-color: aqua;">333</div>

<span></span>是小盒子，一行可以放多个

5. 图像标签

图像标签：<img src="xxxxxx" 属性2="xxxxxx">

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

6. 超链接标签

< a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的ur地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能； href=“#”表示这是一个空链接； 如果href里面地址是—个文件或者压缩包,会下载这个文件
target	用于指定链接页面的打开方式，其中_self为默认值(在本窗口中打开)， _ blank为在新窗口中打开方式

7. 锚点链接

<a href="#要跳转的元素的id"></a>

点击链接的时候，会跳转到指定元素所在的位置。

8. 注释和特殊字符

注释以“<!-”开头，以“->”结束。

特殊字符：

特殊字符	描述	字符的代码
	空格符	 
<	小于号	&lt;
>	大于号	&gt;
&	和	&amp;
￥	人名币	&yen;
	版权	&copy;
	注册商标	&reg;
℃	摄氏度	&deg;
±	正负号	&plusmn;
×	乘号	&times;
÷	除号	&divide;
²	平方上标2	&sup2;
³	立方上标3	&sup3;

9. 表格标签

<table></tabe>是用于定义表格的标签。

<tr></tr>标签用于定义表格中的行,必须嵌套在< table></ table>标签中

<td></td>用于定义表格中的单元格，必须嵌套在< tr></ tr>标签中

<th></th>表示表格的表头部分，表示表格的第一行或第一列，其中的文本内容加粗居中显示

<thead></thead>用于定义表格的头部。< thead>内部必须拥有< tr>标签，一般是位于第一行

<tbody></tbody>用于定义表格的主体，主要用于放数据本体。

一些常用的属性：

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1 或 “”	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白,默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度
rowspan	要合并的单元格个数	合并行单元格，记得要删除多余的单元格
colspan	要合并的单元格个数	合并列单元格，记得要删除多余的单元格

<table border="1" cellspacing="0" width="500" height="250">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody align="center">
        <tr>
            <td align="left" rowspan="2">111</td>
            <td colspan="2">222</td>
        </tr>
        <tr>
            <td>555</td>
            <td>666</td>
        </tr>
    </tbody>
</table>

10. 列表标签

<ul></ul>：定义无序列表，里面只能放 li 标签，其它标签不被允许

<ol></ol>：定义有序列表，里面只能放 li 标签，其它标签不被允许

<li></li>：有序列表和无序列表中的列表项，相当于一个容器，里面可以放其它标签

<dl></dl>：定义自定义列表，里面只能包含 dt 和 dd 标签

<dt></dt>：定义自定义列表中的项目

<dd></dd>：描述自定义列表中的每一个项目

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
    <dt>服务支持</dt>
    <dd>售后政策</dd>
    <dd>自助服务</dd>
    <dd>相关下载</dd>
</dl>

11. 表单标签

通常一个表单由一个大的表单域构成，表单域里面又包含表单元素和提示信息。

<form></form>：表单域标签，表单域就是一个包含表单元素的区域

<form></form>标签常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get / post	用于设定表单数据的提交方式
name	名称	用于指定表单的名称，以区分用一个页面中的多个表单域

<input/>：输入表单元素

<lable></lable>：绑定一个表单元素，当点击 lable 标签内的文本时，会自动将焦点转到对应的表单元素上，lable 标签的for属性必须得与相关元素的id属性相同

<select></select>：下拉表单元素，用于定义一个下拉列表

<option></option>：下拉列表中的元素，定义selected=“selected”属性时，当前项为默认选中项

<textarea></textarea>文本域元素，用于定义一个多行文本输入框，cols属性规定每行的字符数，rows属性规定显示的行数

<input/>标签的常用属性：

属性	属性值	描述
type	见下表	用于设置<input/>标签的不同形式
name	用户自定义	定义input元素的名称
value	用户自定义	设置input元素的默认值
checked	checked	设置此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

<input/>标签type属性值：

属性值	描述
button	定义可点击按钮
checkbox	定义复选框，一组复选框name属性必须相同
file	定义输入字段和 “浏览” 按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮，一组单选按钮的name属性值必须相同
reset	定义重置按钮，清除表单中的所有数据
submit	定义提交按钮，提交到action属性指定的地址
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符

<form action="xxx.jsp" method="GET">
    <table width="500">
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" id="man" name="sex"/>
                <label for="man"><img src="data:images/man.jpg"> 男 </label>
                <input type="radio" id="women" name="sex"/>
                <label for="women"><img src="data:images/women.jpg"> 女 </label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select name="year">
                    <option selected="selected">--请选择年--</option>
                    <option>1990</option>
                    <option>2000</option>
                    <option>2010</option>
                </select>
                <select name="month">
                    <option selected="selected">--请选择月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select name="day">
                    <option selected="selected">--请选择日--</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="安徽" name="area">
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marital_status" id="spinsterhood">
                <label for="spinsterhood"> 未婚 </label>
                <input type="radio" name="marital_status" id="married">
                <label for="married"> 已婚 </label>
                <input type="radio" name="marital_status" id="divorce">
                <label for="divorce"> 离婚 </label>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" name="edu_bg"></td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="like_type" id="wumei">
                <label for="wumei"> 妩媚的 </label>
                <input type="checkbox" name="like_type" id="keai">
                <label for="keai"> 可爱的 </label>
                <input type="checkbox" name="like_type" id="xiaoxianrou">
                <label for="xiaoxianrou"> 小鲜肉 </label>
                <input type="checkbox" name="like_type" id="laolarou">
                <label for="laolarou"> 老腊肉 </label>
                <input type="checkbox" name="like_type" id="douxihuan">
                <label for="douxihuan"> 都喜欢 </label>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea cols="30" rows="10" name="self_introduction"></textarea>
            </td>
        </tr>
        <tr>
            <td> </td>
            <td>
                <input type="submit" value=" 免费注册 ">
            </td>
        </tr>
    </table>
</form>

码字不易，可以的话，给我来个点赞，收藏，关注

如果你喜欢我的文章，欢迎关注微信公众号 『 R o b o d 』