标题标签

用于新闻标题、文章标题、产品名称、区域名称等

标签名：h1~h6

显示特点

  • 文字自带加粗效果
  • 字号逐级减小（h1最大，h6最小）
  • 独占一行
1
2
3
4
5
6
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

小Tips

  • h1标签在一个网页中最好只用一次，一般用于放置logo或者标题
  • h2~h6无限制

段落标签

作用：一般用在新闻段落、文章段落、产品描述信息等等。

标签名：p

1
<p>这是一个段落</P>

显示特点：

  • 独占一行
  • 段落之间存在间隙

换行与水平线标签

1
2
3
<br>  <!-- 换行标签 -->

<hr>   <!-- 水平线标签 -->

他们两均为单标签

文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

标签名 效果
strong 加粗
em 倾斜
ins 下划线
del 删除线

图像标签

作用：在网页中插入图片。

1
<img src="URL" alt="显示的文字" title="提示文字">

src属性可以是本地图片地址，也可以是网络地址[必填]

alt属性是在图片加载不出来的时候显示的文字信息

title属性是显示图片的提示文字

超链接标签

作用：跳转到其他页面

1
<a href="url">文字信息</a>

target=”_blank” 添加这个属性可以新建窗口跳转页面

跳转地址填写为#表示空链接，不会跳转

音频标签

作用：在网页中播放音频

1
<audio src="url"></audio>

controls：显示音频控制面板

loop：循环播放

autoplay：自动播放 [浏览器禁用自动播放]

视频标签

作用：在网页中插入视频

1
<video src="url"></video>

controls：显示音频控制面板

loop：循环播放

muted：静音播放

autoplay：自动播放 [浏览器允许静音状态下自动播放]

列表标签

作用：使内容排列整齐

分类：无序列表、有序列表、定义列表

无序列表

作用：一般用于不需要排列顺序的内容

标签：ul嵌套li，ul是无序列表，li是列表条目

1
2
3
4
5
<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>

小Tips

  • ul标签内只能包含li标签
  • li标签内可以包含任何内容

有序列表

作用：一般用于需要整齐排列顺序的内容

标签：ol嵌套li，ol是有序列表，li是列表条目

1
2
3
4
5
<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

小Tips

  • ol标签内只能包含li标签
  • li标签内可以包含任何内容

定义列表

标签：dl嵌套dt与dd，dt是定于列表的标题，dd是定义列表内容

表格标签

标签：table嵌套tr，tr嵌套td、th

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table border="1">
        <tr>
            <!-- 标头使用th -->
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>88</td>
            <td>75</td>
            <td>80</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>95</td>
            <td>64</td>
            <td>72</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>66</td>
            <td>73</td>
            <td>62</td>
        </tr>
    </table>

border：设置表格边框的宽度，不写默认没有边框

合并单元格

跨行合并

属性：rowspan

取值是数字，表示需要合并的单元格数量

被合并的值需要删除掉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table border="1">
    <tr>
        <!-- 标头使用th -->
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <tr>
        <td>张三</td>
        <td rowspan="2">88</td>
        <td>75</td>
        <td>80</td>
    </tr>
    <tr>
        <td>李四</td>
        <!-- <td>95</td> -->
        <td>64</td>
        <td>72</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>66</td>
        <td>73</td>
        <td>62</td>
    </tr>
</table>
跨列合并

属性：colspan

取值是数字，表示需要合并的单元格数量

被合并的值需要删除掉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table border="1">
    <tr>
        <!-- 标头使用th -->
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <tr>
        <td>张三</td>
        <td colspan="2">88</td>
        <!-- <td>75</td> -->
        <td>80</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>95</td>
        <td>64</td>
        <td>72</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>66</td>
        <td>73</td>
        <td>62</td>
    </tr>
</table>

表单标签

Form标签

1
<form action=""></form>

被这个嵌套住的标签都是表单的一部分

input标签

功能：输入框标签，属性不同功能不同

1
<input type="">
type属性值 说明
text 文本框
password 密码框
radio 单选框
checkbox 多选框
file 上传文件
文本框
1
<input type="text">

input提示文字

placeholder="提示文字"

1
<input type="text" placeholder=请输入账号">
密码框
1
<input type="password">

input提示文字属性

placeholder="提示文字"

1
<input type="password" placeholder=请输入密码">
单选框
1
<input type="radio">
属性名 作用 特殊说明
name 设置控件名称 控件分组，同组只能选择一个（实现单选功能）
checked 默认选择 
1
2
<input type="radio" name="gender" checked>男
<input type="radio" name="sex">女
多选框
1
<input type="checkbox">
上传文件
1
<input type="file">

上传多个文件

multiple

1
<input type="file" multiple>

下拉菜单标签

select 嵌套option，select是下拉菜单的主体，option是下拉菜单的每一项

1
2
3
4
5
6
<select>
    <option>北京</option>
    <option>上海</option>
    <option selected>重庆</option>
    <option>天津</option>
</select>

selected：设置默认选中的属性

文本域标签

作用：多行输入文本时使用

标签：textarea

属性 作用
cols 设置每行输入多少个字后换行
rows 设置可以输入多少行的文字
placeholder 提示文字

Tips：

一般是使用css设置文本域的尺寸

Lable标签

作用：网页中设置某一个标签的说明文本

1
<label>选择您的城市：</label>

Tips：

可以使用lable标签增大表单控件的点击范围

1
2
<label><input type="radio" name="gender" checked>男</label>
<label><input type="radio" name="gender" >女</label>

这样当用户点击”男”或者”女”这个字的时候也可以直接勾选上

按钮标签

1
<button type="">点我呀</button>
type属性值 作用
submit 提交按钮[默认功能]
reset 重置按钮
button 普通按钮，配合JavaScript使用

布局标签

作用：布局网页（划分网页区域）

  • div：独占一行（大盒子标签）
  • span：不换行
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~