HTML常用标签（示范加说明）
站长
· 阅读数 9
HTML常用标签
标题标签
<h1>-<h6>
- H标签为head的缩写，作为网页标题使用
- 依据1-6字号缩减
代码范例：
<h1>一级标题</h1>注意：
- 加了h标签的字体会加粗
- 一个标题独占一行
段落标签
<p>
- P标签为网页中的段落标签，独占一行上下有空白行
代码范例：
<p>段落</p>注意：
- 上下有空白行
- 根据浏览器窗口大小自动换行
换行标签
<br />
- br是用于强制换行的单标签
代码范例：
<p>段落</p>注意：
- 单标签
文本格式化标签
- 文本格式化标签用于设置文本加粗、斜体、下划线等效果
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong>或者<b></b> |
| 倾斜 | <em></em>或者<i></i> |
| 删除线 | <del></del>或者<s></s> |
| 下划线 | <ins></ins>或者<u></u> |
注意：
- 常用为“加粗”和“倾斜”
盒子标签
<div>与<span>
- 用来装内容的盒子标签，用于网页分区使用
代码范例：
<div>每日要点</div>
<span>今日头条</span>注意：
- div每行只能放一个
- span一行可以放多个
图片标签
<img>
- 用来往网页中插入图片
代码范例：
<img src="logo.jpg"/>img标签属性:
| 属性 | 属性值 | 属性说明 |
|---|---|---|
| src | 图片路径 | 指定图片文件路径，必须值 |
| alt | 文本 | 图片不能显示时显示的文本 |
| title | 文本 | 指针放置图像上显示的文字 |
| width | 像素值 | 图像宽度 |
| height | 像素值 | 图像高度 |
| border | 像素值 | 设置图像边框粗细 |
注意：
- src为必须属性，用于指定图片文件路径
- 图像标签可以有多个属性，属性不分前后顺序，多个属性之间以空格分开
img的相对路径：
| 路径 | 符号 |
|---|---|
| 同级 | 文件名 |
| 下一级 | / |
| 上一级 | ../ |
音频与视频标签
<audio>与<video>
- 用来在网页中插入音频的标签
代码范例：
<audio src="url"></audio>
<video src="url"></video> 注意：
- src为必须属性，用于指定音视频文件路径
音视频标签可以有多个属性，属性不分前后顺序，多个属性之间以空格分开
属性：
| 属性 | 说明 |
|---|---|
| autoplay | 自动播放 |
| controls | 播放控件 |
| loop | 循环播放 |
| muted | 静音 |
- 以上属性可不以键值对输入，直接加属性就可以
- “autoplay自动播放”属性在谷歌浏览器无效，配合“muted静音”属性可自动播放
- 不加“controls播放控件”网页为空
超链接标签
<a>
- 用来添加网页超链接元素
- 使用“href”属性设置目标路径
| 属性 | 说明 |
|---|---|
| href | 链接目标路径 |
| target | 点击链接打开方式 |
代码范例：
<a href="url">百度</a>注意：
- “href”属性必填
- 可设置内部链接和外部链接
- “href”属性内填写“#”可设置空链接
- 默认为“_self”在当前窗口打开，设置“_blank”可在新窗口打开
表格标签
<table>
- 用来制作网页中的表格
- 用来展示数据使用
表格内属性：
| 属性 | 说明 |
|---|---|
| border | 边框 |
| width | 宽 |
| height | 高 |
| cellspacing | 单元格与单元格的距离 |
| height | 单元格与内容的距离 |
table标签内结构：
- thead 表格头部
- tbody 表格主体
- tfoot 表格尾部
- 表格使用tr设定行
- td设定单元格
- th替换首行td设定表首行，td会居中并加粗
代码范例：
<table border="1" width="100" height="100">
<tr>
<th>首行<th>
</tr>
<tr>
<td>第二行<td>
</tr>
</table>注意：
- 跨行合并：使用rowspan属性写在合并的第一个单元格中，再删除合并的单元格
- 跨列合并：使用colspan写在合并的第一个单元格中，再删除合并的单元格
表单标签
<input>
- 写在form里用来收集用户信息的一系列表单控件
- 用来展示数据使用
input属性：
| 属性 | 说明 |
|---|---|
| type | 决定使用那种表单类型 |
| name | 设定name值，设定单选框时使用 |
| id | 设定id值，设定label绑定使用 |
type属性内容：
| type属性内容 | 说明 | input附加属性作用 |
|---|---|---|
| text | 文本输入框 | placeholder属性可设置提示文本 |
| password | 密码输入框 | placeholder属性可设置提示文本 |
| radio | 单选框 | 设置相同name属性之能选择一项，checked设置默认选中项目 |
| checkbox | checked设置默认选中项目 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| file | 文件上传控件 | multiple属性可多文件上传 |
表单相关标签：
select 下拉框双标签
- 标签内使用option设置下拉选项
- textarea 文本域双标签
label 绑定控件标签
- 使用for属性与input中id属性进行绑定
- 使用标签包含控件，删除for属性
代码范例：
<form>
文本框：<input type="text">
多选框：<input type="radio">
</form>