web前端学习-html标签

Posted 2022-03-02 GY-93

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端学习-html标签相关的知识，希望对你有一定的参考价值。

web前端学习-html标签

1. HTML的基础知识

1. HTML的基础知识

1.1 排版标签

1.1.1 标签标题

场景：在新闻和文章的网页中，都离不开标题，用来突出显示文章的标题

h系列标签： 1~6级标题，重要程度依次递减
特点：文字都有加粗，文字都有变大，并且从h1->h6文字逐渐减小，独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5> 
    <h6>六级标题</h6>
</body>
</html>

运行结果：

command + D：快速选中相同的内容

1.1.2 文本格式化标签

场景：在新闻和文章的页面中，用于分段显示

特点：表示段落，段落之间存在间隙，独占一行

1.1.3 换行标签和分割线标签

<br>：表示换行标签，强制让文字换行
<hr>：分割线标签，分割不同主题的水平线
- 单标签，在页面中显示一条水平线

1.1.4 文本格式化标签

场景：需要让文字加粗，下划线、倾斜、删除线等效果
代码：
- b、strong都是表示文本加粗的效果
- u、ins:表示文本下划线
- i 、em:字体倾斜
- s、del删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>b表示的字体加粗</b>
    <strong>strong表示的字体加粗</strong> <br>
    <u>u表示的文本下划线</u>
    <ins>ins表示文本下划线</ins><br>
    <i>i表示字体倾斜</i>
    <em>em表示字体倾斜</em><br>
    <s>s表示删除线</s>
    <del>del表示删除线</del>
</body>
</html>

1.2 媒体标签

1.2.1 图片标签

场景：在网页中显示图片
代码：<img src="./test.png" alt="图片加载失败时显示文本" title="鼠标悬浮在图片上时显示文本" width="400">
特点：
- 单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置
- scr:表示的图片的路径
- alt:表示替换文本，当图片加载失败的时候显示的文本，图片加载成功则不会显示
- title：提示文本，当鼠标悬停在图片上时，才显示的文本
- width、height:宽度和高度(数字)，如果只设置其中一个属性，另一个没有设置，图片会自动等比例缩放（此时图片不会变形），但是如果两个属性都设置了，若设置不当此时图片可能会变形
属性注意点：
- 标签的属性写在开始标签的内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性名之间必须以空格隔开
- 属性之间没有顺序之分

1.2.2 路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：/Users/dyc/Desktop/test.png
相对路径：从当前文件出发寻找目标文件的过程
- ./：表示当前目录
- ../：上级目录

1.2.3 音频标签

场景：在页面中插入音频
代码：<audio src="./test.mp3" controls></audio>
常见属性：
- src：音频的路径
- controls：显示音频的播放控件
- autoplay : 自动播放（部分浏览器不支持这个属性，也就是设置了也没有效果）
- loop：表示循环播放
- 注意点：音频标签目前只支持三种格式：MP3、Wav、Ogg

1.2.4 视频标签

场景：在页面中插入视频
代码：<video src="./test.mp4" controls autoplay loop></video>
常见属性：
- src：音频的路径
- controls：显示视频的播放控件
- autoplay : 自动播放（谷歌浏览器中需要配合mute实现静音的自动播放）
- loop：表示循环播放

1.2.5 链接标签

1.2.5.1 链接标签的基础介绍

场景：点击之后，从一个静态页面跳转到另外一个页面
称呼： a标签、超链接、锚链接
代码：<a href="https://www.baidu.com">点击跳转到百度一下</a>
特点：双标签，内部可以包裹内容，如果需要点击a标签去指定页面，需要设置a标签的href属性，当你不知道这个链接需要填写啥时，你可以先填写一个#表示一个空链接，等确定正确的地址在修改

1.2.5.2 链接标签的target属性

target：表示目标网页的打开形式
- _self:默认值，在当前窗口中跳转（覆盖原网页）
- _blank:在新窗口中跳转（保留原网页）
- 代码：<a href="https://www.baidu.com" target="_blank">点击跳转到百度一下</a>

3. 列表标签

学习列表标签的目的：能够使用无序列表、有序列表、自定义列表标签，实现网页中的列表结构的搭建

3.1 无序列表

无序列表的应用场景很多，比如在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

其特点是按照行的方式，整齐显示内容

无序列表的组成标签：
- ul:表示无列表的整体，用于包裹的标签
- li:表示无序列表的每一项。用于包含每一行的内容
- 特点：列表的每一项前都默认的显示圆点标识（后面可以通过css去掉）
- 注意点：ul标签内只能包含li标签，li标签可以包含任何内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>水果列表</p>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>
</body>
</html>

3.2 有序列表

标签组成：
- ol：表示有序列表的整体，用于包裹li标签
- li:表示有序列表的每一项。用于包含每一行的内容
- 特点：列表的每一项前面都有序号
- 注意：ol标签只允许包含li标签，li标签可以包含任何内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>成绩排行榜</p>
    <ol>
        <li>小姐姐：100分</li>
        <li>小帅哥：80分</li>
        <li>小可爱：60分</li>
    </ol>
</body>
</html>

3.3 自定义列表

场景：在网页的地步导航栏中通常会使用自定义列表的实现
标签组成：
- dl :表示自定义列表的整体，用于包裹dt/dd标签
- dt：表示自定义列表的主题
- dd：表示自定义列表的每一项内容
- 注意点：dl标签内只允许包含dt/dd标签，dt/dd标签可以包含任意内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格的整体 -->
    <dl> 
        <!-- 表格的标题 -->
        <dt>帮助中心</dt>
        <!-- 表格的每一行的内容  前面默认显示缩进效果 -->
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
</body>
</html>

4 .表格标签

4.1表格的基本标签

场景：在网页中已行+列的单元格的方式整齐展示数据，如：学生成绩表
基本标签：
- table：表格整体，可用于包裹多个tr
- tr：表格每行，可用于包裹td
- td:表格单元格，可用于包裹内容
- 注意点：标签的嵌套关系：table>tr>td

4.2 表格的相关属性

border：表格的边框宽度（数字）
width：表格宽度（数字）
height: 表格高度（数字）
但是我们在实际开发过程中，对于样式效果设置推荐使用CSS设置

4.3 表格的标题和表头单元格标签

caption：表格大标题，表示表格整体的大标题，默认在表格整体的顶部居中显示
th:表头单元格，表示一列小标题，通常用于表哥的第一行，默认内部文字加粗并居中显示
注意点：caption标签书写在table标签内部，th标签书写在tr内部（用于替换td标签）

4.4 表格的结构标签

让表格的内容结果分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
thead:表格头部
tbody:表格主体
tfoot：表格底部
注意点：表格结果标签内部用于包裹tr标签，表格的结构标签可以省略，该结构标签对于显示效果没有说明作用，但是加上了结构标签，对于浏览器来说结构就比较清晰，执行起来效率会比较高，而且代码的结构也比较侵清晰

4.5 合并单元格

场景：将水平或垂直多个单元格合并成一个单元格
标签属性：
- rowspan:合并单元格的个数，跨行合并，将多行的单元格垂直合并
- colspan: 合并单元格的个数，跨列合并，将多列的单元格水平合并
- 合并原则：左上原则（上下合并，保留最上的，删除其它，左右合并，保留最左边的，删除其她的）
- 注意点：只能同一个结构标签中的单元格才能合并

5. 表单标签

5.1 inpu系列标签

input标签可以通过type属性值的不同展示不同效果
type属性值如下:

5.2 input系列标签-文本框

placeholder：占位符，提示童虎输入内容的文本

5.3 input系列标签-单选框

通过上面的例子，我们可以发现上面的单选框好像不能单选，并且没有一个默认选中状态，是因为没有设置下面两个属性

name：分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked：默认选中

5.4 文件选择

对于文件的选择，我们还可以设置多文件的选择

multiple:多文件选择

5.5 input系列-按钮标签

场景：在网页中显示不同功能的按钮表单控件
type属性值：
- submit:提交按钮，点击之后提交数据给后端服务器
- reset：重置按钮，点击之后恢复表单默认值
- button：普通按钮，默认无功能，之后配合js添加功能
- 注意点：如果需要实现以上按钮功能，需要配合form标签使用，form的使用方法，用form标签把标签表单标签一起包裹起来即可

5.6 按钮标签

场景：在网页中显示用户点击的按钮
标签名：button
type属性值（同input的按钮系列）：
- submit:提交按钮，点击之后提交数据给后端服务器
- reset：重置按钮，点击之后恢复表单默认值
- button：普通按钮，默认无功能，之后配合js添加功能
- 注意点：谷歌浏览器中button默认是提交按钮，button标签是双标签，便于包裹其她内容：文字，图片等

5.7 select下拉菜单标签

场景：在网页中提供多个选这项的下拉菜单表单控件
标签组成：
- select:下拉菜单的整体
- option:下拉菜单的每一项
- selected:下拉菜单的默认选中
快捷键：alt +shift+ ↓ ：快速创建复制一行内容到下一行

5.8 textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
- cols:规定了文本域内可见宽度
- rows：规定了文本宽度可见行数
- 注意点：右下角可以拖拽改变大小（后期开发中一般会禁掉），实际开发中正对样式效果推荐使用CSS设置

5.9 lable 标签

场景：常用于绑定内容和表单标签的关系
标签名:lable
使用方法：
- 使用lable标签把内容（文本）包裹起来，在表单标签上添加id属性，在lable标签的for属性中设置对应的id的属性值
- 直接使用lable标签把内容（文本）和表单标签一起包裹起来，需要把lable标签的for属性删除即可