HTML(Hyper Text Markup Language) 超文本标记语言
一、基础认知
Web标准
-
为什么需要Web标准？
不同的浏览器渲染引擎不同，对于相同的代码解析的效果会存在差异。如果用户使用不同的浏览器打开我们的网页时所展示的效果是不同的就则体验极差，所以我们才需要Web标准。
-
Web标准分三个构成：
构成 语言 说明 结构 HTML 页面元素和内容 表现 CSS 网页元素的外观和位置等页面样式 行为 JavaScript 网页模型的定义与页面交互
HTML骨架结构
- 网页中的固定结构是要通过HTML标签进行描述的
-
<html></html>标签是html文件的跟标签 -
<head></head>网页的头 -
<title><title>网页的标题，需要放置在<head></head>标签内 -
<body></body>网页的主题内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页的标题</title>
</head>
<body>
网页的主题内容
</body>
</html>
二、标签
标题标签：h1~h6
场景：
在新闻和文章的页面中都离不开标题，用来突出显示文章的主题。
代码：
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
标题标签
语义：
1~6级标题的重要程度依次递减
特点：
- 文字都有加粗
- 文字都有变大，并且h1->h6文字逐渐减小
- 独占一行
段落标签：p
场景：
在新闻和文章的页面中，用于分段显示
代码：
<p>我是一段文字</p>
段落标签
语义：
段落
特点：
- 段落之间存在间隙
- 独占一行
换行标签：br
场景：
让文字强制换行显示
代码：
<br>
语义：
换行
特点：
- 单标签
- 让文字强制换行
水平线标签：hr
场景：
分隔不同主题内容的水平线
代码：
<hr>
语义：
主题的分隔转换
特点：
- 单标签
- 在页面中显示一条水平线
文本格式化标签
场景：
需要让文字加粗、下划线等效果
代码：
| 标签 | 说明 |
|---|---|
<b></b> 或 <strong></strong>
|
加粗 |
<u></u> 或 <ins></ins>
|
下划线 |
<i></i> 或 <em></em>
|
倾斜 |
<s></s> 或 <del></del>
|
删除线 |
文本格式化标签
语义：
突出重要性的强调语境
图片标签：img
场景：在网页中显示图片
代码：
<img src="./test.jpg" alt="图片加载失败" title="这是一张图片">
[图片上传失败...(image-7e236c-1700532998816)]
src属性用于设置图片的资源，可以是网络地址也可以是本地路径。
alt属性将会在图片加载失败时显示。
title属性将会在鼠标悬停在图片上市显示。
特点：
- 单标签
- img标签要展示图片，需要配合其属性进行设置！
音频标签：audio
场景：
在页面中插入音频
代码：
<audio src="./music.mp3" constols loop></audio>
音频标签
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径，可以是网络地址。 |
| controls | 显示播放控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
注意点：
- 音频标签目前只支持三种格式：MP3、Wav、Ogg
视频标签：video
场景：
在页面中插入视频播放器
代码：
<video src="./video.mp4" constrols autoplay muted loop></video>
视频标签
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径，可以是网络地址。 |
| controls | 显示播放控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted静音属性实现） |
| muted | 静音 |
| loop | 循环播放 |
注意点：
- 视屏标签目前支持三种格式：MP4、WebM、Ogg
超链接标签：a
场景：点击之后，从一个页面跳转到另一个页面
称呼：
a标签、超链接、锚链接
代码：
<a href="./target.html" target="_blank">点击跳转到目标页面</a>
常用属性：
| 属性名 | 功能 |
|---|---|
| href | 设置需要跳转的目标 |
| target | 设置目标页面的打开方式：_self=在当前窗口打开(默认值)、_blank=在新的窗口中打开。 |
特点：
- 双标签，内部可以包裹内容。
- 如果需要在点击之后跳转到指定页面需要配合href属性。
列表标签：ul、ol、dl
场景：
在网页中按照行展示关联性的内容，如：新闻列表、排行榜等
特点：
按照行的方式整齐的显示内容
种类：
- 无序列表
- 有序列表
- 自定义列表
代码：
-
无序列表
<!-- 无序列表 ul父标签 + li子标签 --> <ul> <li>西瓜</li> <li>苹果</li> <li>菠萝</li> <li>哈密瓜</li> </ul>
无序列表
-
有序列表
<!-- 有序列表 ol父标签 + li子标签 --> <ol> <li>西瓜</li> <li>苹果</li> <li>菠萝</li> <li>哈密瓜</li> </ol>
有序列表
-
自定义列表
<!-- 自定义列表 dl标签：表示自定义列表的整体，用于包裹dt/dd标签；dt：表示自定义列表的主题；dd：表示自定义列表的针对主题每一项 --> <dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd>购物指南</dd> <dd>意见反馈</dd> <dd>联系客服</dd> <dt>产品列表</dt> <dd>HarmonyOS</dd> <dd>Android</dd> <dd>iOS</dd> </dl>
自定义列表
表格标签：table
场景：
在网页中以行+列的单元格的方式整齐的展示数据，如：学生成绩表
涉及到的标签：
| 标签名 | 说明 |
|---|---|
| table | 表格的整体，可用于包裹多个tr |
| tr | 表格的每一行，可用于包裹td |
| td | 表格的单元格，可用于包裹内容 |
| caption | 用于给表格设置表名 |
| thead | 用于给表格设置表头 |
| tbody | 用于给表格设置表格的内容区域 |
| tfoot | 用于给表格设置页脚 |
注意点：
- 标签的嵌套关系：table -> tr -> td
代码：
-
普通的写法
<!-- 表格 table:表格的整体，用户包裹多个tr；tr:表格的每一行，可用于包裹td；td:表格的单元格，可用于包裹内容； --> <!-- 表格的属性：border=边框；width=宽度；height=高度 --> <table border="1" width="500" height="200"> <tr> <td>学号</td> <td>姓名</td> <td>分数</td> </tr> <tr> <td>XH001</td> <td>迪丽热巴</td> <td>98</td> </tr> <tr> <td>XH002</td> <td>杨幂</td> <td>92</td> </tr> <tr> <td>XH003</td> <td>刘亦菲</td> <td>100</td> </tr> </table>
表格
-
设置表名和表格结构
<table border="1" width="500" height="200"> <caption><strong>学生成绩表</strong></caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>分数</th> </tr> </thead> <tbody> <tr> <td>XH001</td> <td>迪丽热巴</td> <td>98</td> </tr> <tr> <td>XH002</td> <td>杨幂</td> <td>92</td> </tr> <tr> <td>XH003</td> <td>刘亦菲</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td>都很漂亮</td> <td>都很漂亮</td> </tr> </tfoot> </table>
带结构的表格
-
单元格合并
场景：将多个水平或垂直的单元格合并成一个单元格，可以跨行合并也可以跨列合并
合并步骤：
a. 明确合并哪几个单元格
b. 通过左上原则，确定保留谁删除谁
**·** 跨行合并时只保留最上方的单元格，删除其他的。 **·** 跨列合并时只保留最左边的单元格，删除其他的。c.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
注意点： 只有同一个结构中的单元格才能合并，不能跨结构合并（tbody中的单元格不能和tfooter中的单元格合并）。
代码：
<table border="1" width="500" height="200"> <caption><strong>学生成绩表</strong></caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>分数</th> </tr> </thead> <tbody> <tr> <td>XH001</td> <td>迪丽热巴</td> <td>98</td> </tr> <tr> <td>XH002</td> <td>杨幂</td> <td rowspan="2">92</td> </tr> <tr> <td>XH003</td> <td>刘亦菲</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td colspan="2">都很漂亮</td> </tr> </tfoot> </table>
单元格合并
input 标签：input
场景：
在网页中显示收集用户信息的表单效果，如：登录页、注册页等
标签名：input
- input标签可以通过type属性设置不同的值，来展示不同的效果。
type属性值：
-
text：文本框，用于输入单行文本
昵称：<input type="text" placeholder="请输入昵称">
type=text
-
password：密码框，用于输入密码
密码：<input type="password" placeholder="请输入密码">
type=password
-
radio：单选框，用于多选一
<!-- input的type为radio或checkbox时可以用label标签包裹，从而实现点击文字也能选中的效果 --> <!-- 可以通过input标签的checked属性设置默认选中 --> 性别： <label><input type="radio" name="gander" checked>男</label> <label><input type="radio" name="gander">女</label>
type=radio
-
checkbox：多选框，用于多选多
爱好： <label><input type="checkbox" checked>看电影</label> <label><input type="checkbox">听音乐</label> <label><input type="checkbox">打游戏</label>
type=checkbox
-
file：文件选择，用于上传文件
<!-- 单文件上传 --> <input type="file"> <!-- 可以为input标签设置multiple属性让其可以实现文件多选 --> <input type="file" multiple>
type=file
-
submit：提交按钮，用于提交表单中的内容
<input type="submit">
type=submit
-
reset：重置按钮，用于重置表单
<input type="reset">
type=reset
-
button：普通按钮，默认无功能，可以配合JavaScript添加功能。
<input type="button" value="这是普通按钮">
type=button
按钮标签：button
button标签其实就是input的标签type为submit、reset、button时的按钮样式。
场景：
在网页中显示用户可以点击的按钮
type属性：
-
submit：提交按钮，用于提交表单中的内容
<button type="submit">提交</button>
type=submit
-
reset：重置按钮，用于重置表单
<button type="reset">重置</button>
type=reset
-
button：普通按钮，默认无功能，可以配合JavaScript添加功能
<button type="button">这是普通按钮</button>
type=button
注意点：
- 谷歌浏览器中button默认是提交按钮
- button标签时双标签，更便于包裹内容：文字图片等
下拉菜单：select
场景：
在网页中提供多个选择项供用户选择
标签组成：
| 标签名 | 说明 |
|---|---|
| select | 下拉菜单的整体 |
| option | 下拉菜单的每一项 |
常见属性：
- selected：下拉菜单的默认选中
代码：
<select>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
select标签
文本域标签：textarea
场景：
在网页中提供可输入多行文本的表单控件
常见属性：
| 属性名 | 说明 |
|---|---|
| cols | 规定了文本域内可见宽度 |
| rows | 规定了文本域内可见行数(高度) |
代码：
个人介绍: <br>
<textarea cols="60" rows="10"></textarea>
textarea标签
注意点：
- 右下角可以拖拽改变大小
- 实际开发中针对样式效果推荐使用CSS设置
Label标签：label
场景：常用于绑定内容与表单标签的关系
使用方法1：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
-
代码如下：
<input id="check" type="checkbox"><label for="check">我是一个勾选框</label>
使用方法2：
直接使用label标签吧内容（如：文本）和表单标签一起包裹起来
要把label标签的for属性删除即可
-
代码如下：
<label><input type="checkbox">我是一个勾选框</label>
语义标签：div、span
场景：
在实际开发网页时会大量频繁的使用到div和span这两个没有语义的标签
div标签：
div标签是一个双标签
特点是一行显示一个（独占一行）
-
代码如下：
<div>这里是一个div标签</div>
span标签：
span标签是一个双标签
特点是一行可以显示多个
-
代码如下：
<span>这里是一个span标签</span>
三、字符实体
- 在网页中展示特殊符号效果时需要使用到字符实体替代，否则可能会与html代码冲突。
- 字符实体的书写结构是：&{实体名(英文)};
常见字符实体如下表：
| 显示结果 | 描述 | 实体名 |
|---|---|---|
| 空格 | |
|
| < | 小于号 | ⁢ |
| > | 大于号 | > |
| & | 和号 | & |
| " | 双引号(单个) | " |
| ' | 单引号(单个) |
'(IE浏览器不支持) |
| ¢ | 分(cent) | ¢ |
| £ | 镑(pound) | £ |
| ¥ | 元(yen) | ¥ |
| € | 欧元(euro) | € |
| § | 小节 | § |
| © | 版权(copyright) | © |
