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

好好学习，天天向上


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

1. 标题标签

…

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

-

2. 段落和换行标签

段落标签：

在HTML标签中,

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

换行标签：


在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望
某段文本强制换行显示，就需要使用换行标签


3. 文本格式化标签

加粗： 或者

倾斜： 或者

删除线： 或者

下划线： 或者

4.

和

是大盒子，一行只能放一个大盒子

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

是小盒子，一行可以放多个

5. 图像标签

图像标签：

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

6. 超链接标签

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

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

7. 锚点链接

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

8. 注释和特殊字符

注释以“”结束。

特殊字符：

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和	&
￥	人名币	¥
©	版权	©
®	注册商标	®
℃	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方上标2	²
³	立方上标3	³

9. 表格标签

是用于定义表格的标签。

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

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

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

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

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

一些常用的属性：

属性名	属性值	描述
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>表头1th>
            <th>表头2th>
            <th>表头3th>
        tr>
    thead>
    <tbody align="center">
        <tr>
            <td align="left" rowspan="2">111td>
            <td colspan="2">222td>
        tr>
        <tr>
            <td>555td>
            <td>666td>
        tr>
    tbody>
table>

10. 列表标签

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

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

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

：定义自定义列表，里面只能包含 dt 和 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. 表单标签

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

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

标签常用属性：

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

：输入表单元素

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

：下拉表单元素，用于定义一个下拉列表

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

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

标签的常用属性：

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

标签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="images/man.jpg"> 男 label>
                <input type="radio" id="women" name="sex"/> 
                <label for="women"><img src="images/women.jpg"> 女 label>
            td>
        tr>
        <tr>
            <td>生日td>
            <td>
                <select name="year">
                    <option selected="selected">--请选择年--option>
                    <option>1990option>
                    <option>2000option>
                    <option>2010option>
                select>
                <select name="month">
                    <option selected="selected">--请选择月--option>
                    <option>1option>
                    <option>2option>
                    <option>3option>
                select>
                <select name="day">
                    <option selected="selected">--请选择日--option>
                    <option>11option>
                    <option>12option>
                    <option>13option>
                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 』