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>