HTML常用标签
0.思维导图大纲
1.基本标签
详细介绍
注意
- 不要用 br 来增加文本之间的行间隔,应使用 p 元素,或后面即将学到的 CSS margin 属性
- hr 的语义是分隔,如果不想要语义,只是想画一条水平线,那么应当使用 CSS 完成
2.排版标签
介绍
标签名 | 标签含义 | 单/双标签 |
---|---|---|
h1 ~ h6 | 标题 | 双 |
p | 段落 | 双 |
div | 没有任何含义 | 双 |
注意
- h1 一个网页最好只写一个,h2 ~ h6 能适当多写
- h1 ~ h6 不能相互嵌套
- p 标签很特殊!它里面不能有:h1 ~ h6,p,div 标签
3.文本标签
介绍
- 用于包裹:词汇,短语等
- 通常写在排版标签里面
- 排版标签更宏观(大段的文字),文本标签更围观(词汇,短语)
- 文本标签通常都是行内元素
常用的
标签名 | 标签含义 | 单/双标签 |
---|---|---|
em | 要着重阅读的内容 | 双 |
strong | 十分重要的内容(语气比em要强) | 双 |
span | 没有语义,用于包裹短语的通用容器 | 双 |
不常用的
标签名 | 标签含义 | 单/双标签 |
---|---|---|
cite | 作品标题(书籍、歌曲、电影、电视节目、绘画、雕塑) | 双 |
dfn | 特殊术语 ,或专属名词 | 双 |
del 与 ins | 删除的文本 【与】 插入的文本 | 双 |
sub 与 sup | 下标文字 【与】 上标文字 | 双 |
code | 一段代码 | 双 |
samp | 从正常的上下文中,将某些内容提取出来,例如:标识设备输出 | 双 |
kbd | 键盘文本,表示文本是通过键盘输入的,经常用在与计算机相关的手册中 | 双 |
abbr | 缩写,最好配合上 title 属性 | 双 |
bdo | 更改文本方向,要配合 dir 属性,可选值: ltr (默认值)、rtl | 双 |
var | 标记变量,可以与 code 标签一起使用 | 双 |
small | 附属细则,例如:包括版权、法律文本。—— 很少使用 | 双 |
b | 摘要中的关键字、评论中的产品名称。—— 很少使用 | 双 |
i | 本意是:人物的思想活动、所说的话等等。现在多用于:呈现字体图标(后面要讲的内容) | 双 |
u | 与正常内容有反差文本,例如:错的单词、不合适的描述等。——很少使用 | 双 |
q | 短引用 —— 很少使用 | 双 |
blockquote | 长引用 —— 很少使用 | 双 |
address | 地址信息 | 双 |
3.图片标签
介绍
可以用来显示图片,不属于行内元素,但是类似,也不是块级元素,是单标签
标签常用属性
注意
- 尽量不同时修改图片的宽和高,可能会造成比例失调
- 像素( px )是一种单位,学到 CSS 时,我们会详细讲解
- 暂且认为 img 是行内元素(学到 CSS 时,会认识一个新的元素分类)
4.音频标签
介绍
显示音频,是双标签,音频文件支持很多格式
注意
音频加载后不会自动显示播放器的控制条,需要使用 controls 属性进行设置,属性值也是 controlso
常用属性
- src:音频路径
- controls:显示播放器控制条
代码示例
<audio src="audio.mp3" controls="controls"></audio>
5.视频标签
介绍
播放视频,是双标签,视频文件支持很多格式
注意
视频加载后不会自动显示播放器的控制条,需要使用 controls 属性进行设置,属性值也是 controlso
常用属性
- src:音频路径
- controls:显示播放器控制条
代码示例
<video src="audio.mp3" controls="controls"></audio>
6.超链接标签
介绍
HTML 使用超级链接与网络上的另一个文档相连。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分
可以实现的功能
- 跳转到指定页面
- 跳转到指定文件(也可触发下载)
- 跳转到描点位置
- 唤起指定应用
标签常用属性
跳转页面
<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a><!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>
跳转到文件
代码
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a><!-- 浏览器不能打开的文件,会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a><!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
注意
- 若浏览器无法打开文件,则会引导用户下载
- 若想强制触发下载,请使用 download 属性,属性值即为下载文件的名称
跳转到锚点
介绍
什么是锚点?网页中的一个标记点
使用步骤
- 设置锚点
- 跳转锚点
设置锚点
<!-- 第一种方式:a标签配合name属性 -->
<a name="test1"></a><!-- 第二种方式:其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
注意点
- 具有 href 属性的 a 标签是超链接,具有 name 属性的 a 标签是锚点
- name 和 id 都是区分大小写的,且 id 最好别是数字开头
跳转锚点
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a><!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a><!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a><!-- 刷新本页面 -->
<a href="">刷新本页面</a><!-- 执行一段js,如果还不知道执行什么,可以留空,javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>
唤起指定应用
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
7.列表标签
有几种列表标签
- 有序列表
- 无序列表
- 自定义列表
有序列表
<h2>要把大象放冰箱总共分几步</h2>
<ol><li>把冰箱门打开</li><li>把大象放进去</li><li>把冰箱门关上</li>
</ol>
无序列表
<h2>要把大象放冰箱总共分几步</h2>
<ul><li>把冰箱门打开</li><li>把大象放进去</li><li>把冰箱门关上</li>
</ul>
自定义列表
<h2>如何高效的学习?</h2>
<dl><dt>做好笔记</dt><dd>笔记是我们以后复习的一个抓手</dd><dd>笔记可以是电子版,也可以是纸质版</dd><dt>多加练习</dt><dd>只有敲出来的代码,才是自己的</dd><dt>别怕出错</dt><dd>错很正常,改正后并记住,就是经验</dd>
</dl>
注意
- 列表可以嵌套,比如 li 里面在嵌套一个列表
- li 标签最好写在 ul 或 ol 中,不要单独使用
8.表格标签
构成
相关标签
- table:表格
- caption:表格标题
- thead:表格头部
- tbody:表格主题
- tfoot:表格注脚
- tr:每一行
- th,td:每一个单元格
代码
<table border="1"><!-- 表格标题 --><caption>学生信息</caption><!-- 表格头部 --><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><!-- 表格主体 --><tbody><tr><td>张三</td><td>男</td><td>18</td><td>汉族</td><td>团员</td></tr><tr><td>李四</td><td>女</td><td>20</td><td>满族</td><td>群众</td></tr><tr><td>王五</td><td>男</td><td>20</td><td>回族</td><td>党员</td></tr><tr><td>赵六</td><td>女</td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><!-- 表格脚注 --><tfoot><tr><td></td><td></td><td></td><td></td><td>共计:4人</td></tr></tfoot>
</table>
标签常用属性
注意
- table 元素的 border 属性可以控制表格边框,但 border 值的大小,并不控制单元格边框的宽度只能控制表格最外侧边框的宽度
- 默认情况下,每列的宽度,得看这一列单元格最长的那个文字
- 给某个 th 或 td 设置了宽度之后,他们所在的那一列的宽度就确定了
- 给某个 th 或 td 设置了高度之后,他们所在的那一行的高度就确定了
10.表单标签
介绍
一个包含交互的区域,用于收集用户提供的数据
标签介绍以及常用属性
form标签
<form action="https://www.baidu.com/s" target="_blank" method="get"><input type="text" name="wd"><button>去百度搜索</button>
</from>
文本输入狂
代码
<input type="text">
常用属性
- name:数据的名称
- value:输入框的默认值
- maxlength:输入框可输入最大长度
密码输入框
代码
<input type="password">
常用属性
- name:数据的名称
- value:输入框的默认值
- maxlength:输入框可输入最大长度
单选框
代码
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
常用属性
- name:数据的名称,想要单选效果,多个 redio 的 name 属性需要保持一致
- value:提交的数据值
- checked:让该单选按钮默认选中
复选框
代码
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
常用属性
- name:数据的名称
- value:提交的数据值
- checked:让该复选框默认选中
隐藏域
介绍
用户不可见的一个输入区域,作用是: 提交表单的时候,携带一些固定的数据
代码
<input type="hidden" name="tag" value="100">
常用属性
- name:指定数据的名称
- value:指定的是真正提交的数据
提交按钮
代码
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
注意
- button 标签 type 属性的默认值是 submit
- button 不要指定 name 属性
- input 标签编写的按钮,使用 value 属性指定按钮文字
重置按钮
代码
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
注意
- button 不要指定 name 属性
- input 标签编写的按钮,使用 value 属性指定按钮文字
普通按钮
代码
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
注意
普通按钮的 type 值为 button ,若不写 type 值是 submit 会引起表单的提交
文本域
代码
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
常用属性
- rows 属性:指定默认显示的行数,会影响文本域的高度
- cols 属性:指定默认显示的列数,会影响文本域的宽度
- 不能编写 type 属性,其他属性,与普通文本输入框一致
下拉框
代码
<select name="from"><option value="黑">黑龙江</option><option value="辽">辽宁</option><option value="吉">吉林</option><option value="粤" selected>广东</option>
</select>
常用属性
- name:指定数据的名称
- value:提交的数据
- selected:默认选中
注意
option 标签设置 value 属性, 如果没有 value 属性,提交的数据是 option 中间的文字;如果设置了 value 属性,提交的数据就是 value 的值(建议设置 value 属性)
lable
介绍
label 标签可与表单控件相关联,关联之后点击文字,与之对应的表单控件就会获取焦点
两种使用方式
- 让 label 标签的 for 属性的值等于表单控件的 id
- 把表单控件套在 label 标签的里面
fieldset 与 legend
介绍
fieldset 可以为表单控件分组、 legend 标签是分组的标题
代码
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户:</label>
<input id="zhanghu" type="text" name="account" maxlength="10"><br>
<label>
密码:
<input id="mima" type="password" name="pwd" maxlength="6">
</label>
<br>
性别:
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="female" id="nv">女
</label>
</fieldset>
11.iframe
介绍
实际应用
- 在网页中嵌入广告
- 与超链接或表单的 target 配合,展示不同的内容