03.HTML常用标签

HTML常用标签

0.思维导图大纲

1.基本标签

详细介绍

注意

1. 不要用 br 来增加文本之间的行间隔，应使用 p 元素，或后面即将学到的 CSS margin 属性
2. hr 的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成

2.排版标签

介绍

标签名	标签含义	单/双标签
h1 ~ h6	标题	双
p	段落	双
div	没有任何含义	双

注意

1. h1 一个网页最好只写一个，h2 ~ h6 能适当多写
2. h1 ~ h6 不能相互嵌套
3. p 标签很特殊！它里面不能有：h1 ~ h6，p，div 标签

3.文本标签

介绍

1. 用于包裹：词汇，短语等
2. 通常写在排版标签里面
3. 排版标签更宏观（大段的文字），文本标签更围观（词汇，短语）
4. 文本标签通常都是行内元素

常用的

标签名	标签含义	单/双标签
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 使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分

可以实现的功能

1. 跳转到指定页面
2. 跳转到指定文件（也可触发下载）
3. 跳转到描点位置
4. 唤起指定应用

标签常用属性

跳转页面

<!-- 跳转其他网页 -->
<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>

注意

1. 若浏览器无法打开文件，则会引导用户下载
2. 若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称

跳转到锚点

介绍

什么是锚点？网页中的一个标记点

使用步骤

1. 设置锚点
2. 跳转锚点

设置锚点

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>

<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>

注意点

1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点
2. 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.列表标签

有几种列表标签

1. 有序列表
2. 无序列表
3. 自定义列表

有序列表

<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>

注意

1. 列表可以嵌套，比如 li 里面在嵌套一个列表
2. 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>

标签常用属性

注意

1. table 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度只能控制表格最外侧边框的宽度
2. 默认情况下，每列的宽度，得看这一列单元格最长的那个文字
3. 给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了
4. 给某个 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">

常用属性

1. name：数据的名称
2. value：输入框的默认值
3. maxlength：输入框可输入最大长度

密码输入框

代码

<input type="password">

常用属性

1. name：数据的名称
2. value：输入框的默认值
3. maxlength：输入框可输入最大长度

单选框

代码

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性

1. name：数据的名称，想要单选效果，多个 redio 的 name 属性需要保持一致
2. value：提交的数据值
3. checked：让该单选按钮默认选中

复选框

代码

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性

1. name：数据的名称
2. value：提交的数据值
3. 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 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点

两种使用方式

1. 让 label 标签的 for 属性的值等于表单控件的 id
2. 把表单控件套在 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

介绍

实际应用

1. 在网页中嵌入广告
2. 与超链接或表单的 target 配合，展示不同的内容