前端系列一：HTML-编程知识

前端系列一：HTML

news/2024/9/18 19:16:22/文章来源:https://www.cnblogs.com/acatsmiling/p/18416918

Author: ACatSmiling

Since: 2024-09-10

HTML 4

HTML：HyperText Markup Language，超文本标记语言。

超文本的含义：是一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容，如页面、文件、锚点、应用等。

标签属性

标签属性：用于给标签提供附加信息，可以写在起始标签或单标签中。

有些特殊的属性，没有属性名，只有属性值。例如：
```
<input disabled>
```
规范：
- 不同的标签，有不同的属性；也有一些通用属性，在任何标签内都能写。
- 属性名、属性值不能乱写，都是 W3C 规定好的。
- 属性名、属性值，都不区分大小写，但推荐小写。
- 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
- 标签中不要出现同名属性，否则后写的会失效。例如：
```
<input type="text" type="password">
```

基本结构

在网页中，通过点击鼠标右键，选择 "检查"，可以查看某段结构的具体代码。

"检查" 和 "查看网页源代码" 的区别：

"检查" 看到的是：经过浏览器处理后的源代码。
"查看网页源代码" 看到的是：程序员编写的源代码。

网页的基本结构如下：

想要呈现在网页中的内容写在 body 标签中。
head 标签中的内容不会出现在网页中。
head 标签中的 title 标签可以指定网页的标题。
图示：

代码：

<html><head><title>网页标题</title></head><body>......</body>
</html>

注释

特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。

作用：对代码进行解释和说明。

写法：

<!-- 下面的文字只能滚动一次 -->
<marquee loop="1">滚动一次</marquee><!-- 下面的文字可以无限滚动 -->
<marquee>无限滚动123</marquee>

注释不可以嵌套，以下写法是错的：

<!--我是一段注释<!-- 我是一段注释 -->
-->

文档声明

作用：告诉浏览器当前网页的版本。

写法（W3C 推荐使用 HTML 5 的写法）：

<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>

注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。

字符编码

平时编写代码时，统一采用 UTF-8 编码。为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码：

<head><meta charset="UTF-8"/>
</head>

设置语言

主要作用：

让浏览器显示对应的翻译提示。
有利于搜索引擎优化。

写法：

<html lang="zh-CN">

扩展知识： lang 属性的编写规则。

第一种写法（语言-国家/地区），例如：

zh-CN ：中文-中国大陆（简体中文）。

zh-TW ：中文-中国台湾（繁体中文）。

zh ：中文。

en-US ：英语-美国。

en-GB ：英语-英国。

第二种写法（语言—具体种类），已不推荐使用，例如：

zh-Hans ：中文—简体。

zh-Hant ：中文—繁体。

W3School 上的说明：《语言代码参考手册》、《国家/地区代码参考手册》。

W3C 官网上的说明：《Language tags in HTML》。

标准结构

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>我是一个标题</title></head><body></body>
</html>

输入!，随后回车即可快速生成标准结构。

使用 ! 符号，默认生成的是 lang="en"，可以通过以下设置：

在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。示例：

注意：添加图片之后，可能需要清空缓存，重新加载页面。

排版标签

标签名	标签语义	单/双标签
`h1 ~ h6`	标题	双
`p`	段落	双
`div`	没有任何含义，用于整体布局	双

h1 最好写一个， h2 ~ h6 能适当多写。
h1 ~ h6 不能互相嵌套。例如：h1 标签中不要写 h2 标签。
p 标签很特殊！它里面不能有：h1 ~ h6、p、div 标签。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML排版标签</title>
</head><body><!-- <h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6><div><p>我是一个段落</p><p>我是一个段落</p><p>我是一个段落</p></div>--><h1>把个人信息“安全堤”筑牢</h1><h4>2022-06-21 07:34 · 1347条评论</h4><div><p>置身移动互联时代，人们在享受智能设备带来便利的同时，也在一些场景中面临个人信息泄露风险。随着时间推移，这样的风险日益呈现出新的表现形式。</p><p>一些APP声称看视频、玩游戏甚至走路都能赚钱，但用户想提现却难上加难，还容易泄露个人信息；新型不法软件图标透明、没有名称，在手机屏幕上十分隐蔽，不仅不停推送广告，还会收集并转卖用户隐私信息；个人信息安全和隐私保护话题引发关注，正说明其涉及群众切身利益，问题不容小视。</p></div>
</body></html>

语义化标签

概念：用特定的标签，去表达特定的含义。

原则：标签的默认效果不重要，语义最重要！（后期可以通过 CSS 随便控制默认效果）

举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。

优点：

代码结构清晰可读性强。
有利于 SEO（搜索引擎优化）。
方便设备解析，如屏幕阅读器、盲人阅读器等。

块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）。

行内元素：不独占一行，例如： input。

使用原则：

块级元素中能写行内元素和块级元素（简单记：块级元素中几乎什么都能写）。
行内元素中能写行内元素，但不能写块级元素。
一些特殊的规则：
- h1 ~ h6 不能互相嵌套。
- p 中不要写块级元素。

Tips：

marquee 元素设计的初衷是：让文字有动画效果，但如今可以通过 CSS 来实现，而且还可以实现的更加炫酷，所以 marquee 标签已经过时了（废弃了），不推荐使用。

文本标签

作用：用于包裹词汇、短语等，通常写在排版标签里面。文本标签通常都是行内元素。

排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。

常用：

标签名	标签语义	单/双标签
`em`	要着重阅读的内容	双
`strong`	十分重要的内容，语气比 em 要强	双
`span`	没有语义，用于包裹短语的通用容器	双

不常用：

标签名	标签语义	单/双标签
cite	作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑）	双
dfn	特殊术语，或专属名词	双
del 与 ins	删除的文本【与】插入的文本	双
sub 与 sup	下标文字【与】上标文字	双
code	一段代码	双
samp	从正常的上下文中，将某些内容提取出来，例如：标识设备输出	双
kbd	键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中	双
abbr	缩写，最好配合上 title 属性	双
bdo	更改文本方向，要配合 dir 属性，可选值: ltr（默认值）、rtl。ltr 表示从左往右，rtl 表示从右往左。	双
var	标记变量，可以与 code 标签一起使用	双
small	附属细则，例如：包括版权、法律文本。—— 很少使用	双
b	摘要中的关键字、评论中的产品名称。—— 很少使用	双
i	本意是：人物的思想活动、所说的话等等。现在多用于：呈现字体图标。	双
u	与正常内容有反差文本，例如：错的单词、不合适的描述等。—— 很少使用	双
q	短引用 —— 很少使用	双
blockquote	长引用 —— 很少使用	双
address	地址信息	双

这些不常用的文本标签，编码时不用过于纠结，酌情而定，不用也没毛病。
blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
有些语义感不强的标签，我们很少使用，例如：small 、 b 、 u 、 q 、 blockquote。
HTML 标签太多了！记住那些：重要的、语义感强的标签即可。截止目前，有这些：h1 ~ h6 、 p 、 div 、 em 、 strong 、 span。

图片标签

标签名	标签语义	常用属性	单/双标签
`img`	图片	`src`：图片路径，又称图片地址，指图片的具体位置。 `alt`：图片描述。 width：图片宽度，单位是像素，例如： 200 px 或 200。 height：图片高度，单位是像素，例如： 200 px 或 200。	单

px表示像素，是一种单位。
尽量不同时修改图片的宽和高，可能会造成比例失调。
暂且认为 img 是行内元素。（学到 CSS 时，会认识一个新的元素分类，目前只知道：块级元素和行内元素）
alt属性的作用：
- 搜索引擎可以通过 alt 属性，得知图片的内容，这是最主要的作用。
- 当图片无法展示时候，有些浏览器会呈现 alt 属性的值。
- 盲人阅读器会朗读 alt 属性的值。

相对路径：以当前位置作为参考点，去建立路径。

./：同级，可以省略不写。

/：下一级。

../：上一级。

相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

绝对路径：以根位置作为参考点，去建立路径。

本地绝对路径：E:/a/b/c/奥特曼.jpg。

网络绝对路径：http://www.atguigu.com/images/index_new/logo.png。

使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。

使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML_图片标签</title>
</head><body><img width="200" src="奥特曼.jpg" alt="奥特曼，你相信光吗？"><img width="200" src="奥特曼2.jpg" alt="奥特曼，你相信光吗？">
</body></html>

常见图片格式：

jpg格式：
- 概述：扩展名为.jpg或.jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。
- 主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
- 使用场景：对图片细节没有极高要求的场景。例如：网站的产品宣传图等。（该格式在网页中很常见）
png格式：
- 概述：扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片。
- 主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
- 使用场景：想让图片有透明背景；想更高质量的呈现图片。例如：公司 logo 图、重要配图等。
bmp格式：
- 概述：扩展名为.bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
- 主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
- 使用场景：对图片细节要求极高的场景。例如：一些大型游戏中的图片。（网页中很少使用）
gif格式：
- 概述：扩展名为.gif，仅支持 256 种颜色，色彩呈现不是很完整。
- 主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
- 使用场景：网页中的动态图片。
webp格式：
- 概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
- 主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
- 使用场景：网页中的各种图片。

base64格式：

本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
原理：把图片进行 base64 编码，形成一串文本。
如何生成：靠一些工具或网站。
如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>演示base64图片</title>
</head><body><img src="./奥特曼.jpg" alt=""><img src="./path_test/怪兽.jpg" alt=""><!-- base64图片 --><img src="data:image/png;base64,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"alt="">
</body></html>

图片的格式非常多，上面这些，只是一些常见的、前端人员常接触到的。

超链接

标签名	标签语义	常用属性	单/双标签
`a`	超链接	`href`：指定要跳转到的具体目标。 `target`：控制跳转时如何打开页面。常用值如下： `_self`：在本窗口打开，默认值。 `_blank`：在新窗口打开。 `id`：元素的唯一标识，可用于设置锚点。 `name`：元素的名字，写在 a 标签中，也能设置锚点。	双

主要作用：从当前页面进行跳转。

可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>超链接_跳转页面</title>
</head><body><a href="https://miaosha.jd.com/" target="_self">去秒杀</a><a href="https://www.baidu.com/" target="_blank">去百度</a><a href="./10_HTML排版标签.html">去排版标签</a><a href="./10_HTML排版标签.html"><img width="50" src="./奥特曼.jpg" alt="奥特曼"></a>
</body></html>

跳转到页面

示例：

<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a><!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

注意：

代码中的多个空格、多个回车，都会被浏览器解析成一个空格！

虽然 a 标签是行内元素，但 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="test1"></a>
<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 (在:和;中间书写js脚本)，如果还不知道执行什么，可以留空：javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>超链接_跳转锚点</title>
</head><body><a href="#htl">看灰太狼</a><a href="#atm">看奥特曼</a><p>我是一只羊，一只很肥美的羊</p><img src="./path_test/a/喜羊羊.jpg" alt="喜羊羊"><a name="htl"></a><p>我是一只狼，一只很邪恶的狼</p><img src="./path_test/a/b/灰太狼.jpg" alt="灰太狼"><p id="atm">我是一只奥特曼，一只很能打的奥特曼</p><img src="./奥特曼.jpg" alt="奥特曼"><p>我是一只怪兽，一只很丑的怪兽</p><img src="./path_test/怪兽.jpg" alt="怪兽"><p>整体的介绍完毕了</p><a href="#">回到顶部</a><a href="">刷新页面</a><a href="javascript:;">点我弹窗</a>
</body></html>

唤起指定应用

通过 a 标签，可以唤起设备上的应用程序。

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a><!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a><!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>超链接_唤起指定应用</title>
</head><body><a href="tel:10010">电话联系</a><a href="mailto:1234567@qq.com">邮件联系</a><a href="sms:10086">短信联系</a>
</body></html>

列表

有序列表

概念：有顺序或侧重顺序的列表。

示例：

<h2>要把大象放冰箱总共分几步</h2>
<ol><li>把冰箱门打开</li><li>把大象放进去</li><li>把冰箱门关上</li>
</ol>

无序列表

概念：无顺序或不侧重顺序的列表。

示例：

<h2>我想去的几个城市</h2>
<ul><li>成都</li><li>上海</li><li>西安</li><li>武汉</li>
</ul>

嵌套列表

概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）。

示例：

<h2>我想去的几个城市</h2>
<ul><li>成都</li><li><span>上海</span><ul><li>外滩</li><li>杜莎夫人蜡像馆</li><li><a href="https://www.opg.cn/">东方明珠</a></li><li>迪士尼乐园</li></ul></li><li>西安</li><li>武汉</li>
</ul>

注意：li 标签最好写在 ul 或 ol 中，不要单独使用。

自定义列表

概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。

示例：

<h2>如何高效的学习？</h2>
<dl><dt>做好笔记</dt><dd>笔记是我们以后复习的一个抓手</dd><dd>笔记可以是电子版，也可以是纸质版</dd><dt>多加练习</dt><dd>只有敲出来的代码，才是自己的</dd><dt>别怕出错</dt><dd>错很正常，改正后并记住，就是经验</dd>
</dl>

一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述（可以有多个）。

表格

基本结构

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。

表格涉及到的标签：

tabl：表格。
caption：表格标题。
thead：表格头部。
tr：每一行。
th、td：每一个单元格。（备注：表格头部中用 th ，表格主体、表格脚注中用 td。）

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表格_整体结构</title>
</head><body><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>19</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>
</body></html>

常用属性

标签名	标签语义	常用属性	单/双标签
`table`	表格	`width`：设置表格宽度。 `height`：设置表格最小高度，表格最终高度可能比设置的值大。 `border`：设置表格边框宽度。 `cellspacing`：设置单元格之间的间距。	双
`thead`	表格头部	`height`：设置表格头部高度。 `align`：设置单元格的水平对齐方式，可选值如下： `left`：左对齐 `center`：中间对齐 `right`：右对齐 `valign`：设置单元格的垂直对齐方式，可选值如下： `top`：顶部对齐 `middle`：中间对齐 `bottom`：底部对齐	双
`tbody`	表格主体	常用属性与 thead 相同。	双
`tfoot`	表格脚注	常用属性与 thead 相同。	双
`tr`	行	常用属性与 thead 相同。	双
`td`	普通单元格	`width`：设置单元格的宽度，同列所有单元格全都受影响。 `heigth`：设置单元格的高度，同行所有单元格全都受影响。 `align`：设置单元格的水平对齐方式。 `valign`：设置单元格的垂直对齐方式。 `rowspan`：指定要跨的行数。 `colspan`：指定要跨的列数。	双
`th`	表头单元格	常用属性与 td 相同。	双

<table>元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠 CSS 控制。
默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
给某个 th 或 td 设置了宽度之后，它们所在的那一列的宽度就确定了。
给某个 th 或 td 设置了高度之后，它们所在的那一行的高度就确定了。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表格_常用属性</title>
</head><body><table border="1" width="500" height="500" cellspacing="0"><!-- 表格标题 --><caption>学生信息</caption><!-- 表格头部 --><thead height="50" align="center" valign="middle"><tr><th width="50" height="50" align="right" valign="bottom">姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><!-- 表格主体 --><tbody height="520" align="center" valign="middle"><tr height="50" align="center" valign="middle"><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>19</td><td>回族</td><td>党员</td></tr><tr><td align="right" valign="top">赵六</td><td>女</td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><!-- 表格脚注 --><tfoot height="50" align="center" valign="middle"><tr><td></td><td></td><td></td><td></td><td>共计：4人</td></tr></tfoot></table>
</body></html>

跨行跨列

标签：

rowspan：指定要跨的行数。
colspan：指定要跨的列数。

示例，课程表效果图：

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表格_跨行与跨列</title>
</head><body><table border="1" cellspacing="0"><caption>课程表</caption><thead><tr><th>项目</th><th colspan="5">上课</th><th colspan="2">活动与休息</th></tr></thead><tbody><tr><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr><td rowspan="4">上午</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td><td>3-6</td><td>3-7</td><td rowspan="4">休息</td></tr><tr><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td><td>4-6</td><td>4-7</td></tr><tr><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td><td>5-6</td><td>5-7</td></tr><tr><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td><td>6-6</td><td>6-7</td></tr><tr><td rowspan="2">下午</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td><td>7-6</td><td>7-7</td><td rowspan="2">休息</td></tr><tr><td>8-2</td><td>8-3</td><td>8-4</td><td>8-5</td><td>8-6</td><td>8-7</td></tr></tbody></table>
</body></html>

其他常用标签

标签名	标签语义	单/双标签
`br`	换行	单
`hr`	分隔	单
`pre`	按原文显示，一般用于在页面中嵌入大段代码	双

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

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>补充几个常用的标签</title>
</head><body><!-- 换行标签 --><a href="https://www.baidu.com">去百度</a><br><a href="https://www.jd.com">去京东</a><!-- 分割线 --><div>第一章</div><p>xxxxxx，就这样最后王子和公主就在一起了！</p><hr><div>第二章</div><p>一个月黑风高的晚上，xxxxxxxxxxxxxx</p><!-- 按原文显示 --><pre>I      Love      YouI   Love   YouLove</pre>
</body></html>

pre 元素中的内容，多个空格都保留了原样。

表单

概念：一个包含交互的区域，用于收集用户提供的数据。

基本结构

标签名	标签语义	常用属性	单/双标签
`form`	表单	`action`：用于指定表单的提交地址（需要与后端人员沟通后确定） `target`：用于控制表单提交后，如何打开页面，常用值如下： `_self`：在本窗口打开，默认值 `_blank`：在新窗口打开 `method`：用于控制表单的提交方式，暂时只需了解，详见`Ajax`	双
`input`	输入框	`type`：设置输入框的类型，目前用到的值是 text ，表示普通文本 `name`：用于指定提交数据的名字（需要与后端人员沟通后确认）	单
`button`	按钮	详见后文	双

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表单_基本结构</title>
</head><body><form action="https://www.baidu.com/s"><input type="text" name="wd"><button>去百度搜索</button></form><hr><form action="https://search.jd.com/search" target="_self" method="get"><input type="text" name="keyword"><button>去京东搜索</button></form><hr><a href="https://search.jd.com/search?keyword=手机">搜索手机</a>
</body></html>

input标签的 name 属性值，对应后台请求参数名，不能随意定义。

常用表单控件

文本输入框

<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属性：数据的名称。注意：想要单选效果，多个 radio 的 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属性：让该复选框默认选中。

文本域

<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属性：指定数据的名称。
option标签设置value属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）。
option 标签设置了selected属性，表示默认选中。

隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。

name属性：指定数据的名称。
value属性：指定的是真正提交的数据。

提交按钮

<input type="submit" value="点我提交表单"><button>点我提交表单</button>

注意：

button 标签 type 属性的默认值是submit。
button 不要指定 name 属性。（input 方式也不要指定 name 属性）
input 标签编写的按钮，使用 value 属性指定按钮文字。

重置按钮

<input type="reset" value="点我重置"><button type="reset">点我重置</button>

注意：

button 不要指定 name 属性。（input 方式也不要指定 name 属性）
input 标签编写的按钮，使用 value 属性指定按钮文字。

普通按钮

<input type="button" value="普通按钮"><button type="button">普通按钮</button>

注意：

普通按钮的 type 值为 button，若不写，button 元素的 type 属性值默认是 submit，点击会引起表单的提交。

示例

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表单_常用控件</title>
</head><body><form action="https://search.jd.com/search"><!-- 文本输入框 -->账户：<input type="text" name="account" value="zhangsan" maxlength="10"><br><!-- 密码输入框 -->密码：<input type="password" name="pwd" value="123" maxlength="6"><br><!-- 单选框 -->性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female" checked>女<br><!-- 多选框 -->爱好：<input type="checkbox" name="hobby" value="smoke" checked>抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm" checked>烫头<br><!-- 文本域 -->其他：<textarea name="other" cols="23" rows="3"></textarea><br><!-- 下拉框 -->籍贯：<select name="place"><option value="冀">河北</option><option value="鲁">山东</option><option value="晋" selected>山西</option><option value="粤">广东</option></select><!-- 隐藏域 --><input type="hidden" name="from" value="toutiao"><br><!-- 确认按钮_第一种写法 --><button type="submit">确认</button><!-- 确认按钮_第二种写法 --><!-- <input type="submit" value="确认"> --><!-- 重置按钮_第一种写法 --><!-- <button type="reset">重置</button> --><!-- 重置按钮_第二种写法 --><input type="reset" value="点我重置"><!-- 普通按钮_第一种写法 --><input type="button" value="检测账户是否被注册"><!-- 普通按钮_第二种写法 --><!-- <button type="button">检测账户是否被注册</button> --></form>
</body></html>

禁用表单控件

给表单控件的标签设置disabled，既可禁用表单控件。

input、textarea、button、select、option 都可以设置 disabled 属性。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表单_禁用表单控件</title>
</head><body><form action="https://search.jd.com/search"><!-- 文本输入框 -->账户：<input disabled type="text" name="account" value="zhangsan" maxlength="10"><br><!-- 密码输入框 -->密码：<input type="password" name="pwd" value="123" maxlength="6"><br><!-- 单选框 -->性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female" checked>女<br><!-- 多选框 -->爱好：<input type="checkbox" name="hobby" value="smoke" checked>抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm" checked>烫头<br>其他：<textarea name="other" cols="23" rows="3"></textarea><br>籍贯：<select name="place"><option value="冀">河北</option><option value="鲁">山东</option><option value="晋" selected>山西</option><option value="粤">广东</option></select><!-- 隐藏域 --><input type="hidden" name="from" value="toutiao"><br><!-- 确认按钮_第一种写法 --><button type="submit">确认</button><!-- 确认按钮_第二种写法 --><!-- <input type="submit" value="确认"> --><!-- 重置按钮_第一种写法 --><!-- <button type="reset">重置</button> --><!-- 重置按钮_第二种写法 --><input type="reset" value="点我重置"><!-- 普通按钮_第一种写法 --><input disabled type="button" value="检测账户是否被注册"><!-- 普通按钮_第二种写法 --><!-- <button type="button">检测账户是否被注册</button> --></form>
</body></html>

注意查看 "账户" 输入框和 "检测账户是否被注册" 按钮，二者使用了 disabled 属性，页面上被置灰不可用。

label 标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种与 label 关联方式如下：

让 label 标签的 for 属性的值，等于表单控件的 id。
把表单控件套在 label 标签的里面。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表单_label标签</title>
</head><body><form action="https://search.jd.com/search"><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><br>爱好：<label><input type="checkbox" name="hobby" value="smoke">抽烟</label><label><input type="checkbox" name="hobby" value="drink">喝酒</label><label><input type="checkbox" name="hobby" value="perm">烫头</label><br><label for="qita">其他：</label><textarea id="qita" name="other" cols="23" rows="3"></textarea><br>籍贯：<select name="place"><option value="冀">河北</option><option value="鲁">山东</option><option value="晋">山西</option><option value="粤">广东</option></select><input type="hidden" name="from" value="toutiao"><br><input type="submit" value="确认"><input type="reset" value="点我重置"><input type="button" value="检测账户是否被注册"></form>
</body></html>

fieldset 与 legend 的使用

fieldset可以为表单控件分组，legend标签是分组的标题。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表单_label标签</title>
</head><body><form action="https://search.jd.com/search"><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><br>爱好：<label><input type="checkbox" name="hobby" value="smoke">抽烟</label><label><input type="checkbox" name="hobby" value="drink">喝酒</label><label><input type="checkbox" name="hobby" value="perm">烫头</label><br><label for="qita">其他：</label><textarea id="qita" name="other" cols="23" rows="3"></textarea><br>籍贯：<select name="place"><option value="冀">河北</option><option value="鲁">山东</option><option value="晋">山西</option><option value="粤">广东</option></select><input type="hidden" name="from" value="toutiao"><br><input type="submit" value="确认"><input type="reset" value="点我重置"><input type="button" value="检测账户是否被注册"></form>
</body></html>

效果：

框架标签

标签名	标签语义	属性	单/双标签
iframe	框架（在网页中嵌入其他文件）	`name`：框架名称，可以与 target 属性配置 `width`：框架的宽度 `height`：框架的高度 `frameborder`：是否显示边框，值为 0 或者 1	双

iframe 标签的实际应用：

在网页中嵌入广告。

与超链接或表单的 target 配合，展示不同的内容。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>框架标签</title>
</head><body><!-- 利用iframe嵌入一个普通网页 --><iframe src="https://www.toutiao.com" width="900" height="300" frameborder="0"></iframe><br><!-- 利用iframe嵌入一个广告网页 --><!-- <iframe width="300" height="250" src="https://pos.baidu.com/xchm?conwid=300&conhei=250&rdid=5841072&dc=3&di=u5841072&s1=2619619085&s2=735691552&dri=1&dis=0&dai=24&ps=2557x1059&enu=encoding&exps=110283,110277,110273,110261,110254,110011&ant=0&psi=ec321235870ce038&dcb=___adblockplus_&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tpr=1675046784135&ti=%E7%BD%91%E6%98%93%E6%96%B0%E9%97%BB&ari=2&ver=0129&dbv=2&drs=4&pcs=1519x763&pss=1519x11348&cfv=0&cpl=5&chi=2&cce=true&cec=UTF-8&tlm=1675046701&prot=2&rw=763&ltu=https%3A%2F%2Fnews.163.com%2F&ecd=1&fpt=TSqlzRKQUoc9+DbwoBg+b3cB10ATMyxUj3wjiV0jemwIVBo7z2ECouhUiVZq9IXN5cuofEzg/QDLSl5smhScYpTN+HQc3+QhnKv3H8MhzCYvAEcKDXAQAxK1FTXUdEd7J70MlzGWjb5DY6rlVbwmYbud1lCLmHxH5enja3K/dBHQzpLvsZCQqnanh/vBkkBTauX5z2jCEQvudlFgU1sHGA2kmnPoF0fHQA756T+sNKjATCqWL62CuVSrPm52Es2xtwueTF6sREr61IdA4wcZwEObe67hCIHPeGk5UX48Fw06RMTjgGDr6oQhyEpAeW3u9Gi0qHTYg8wBI1yoBmmwhuh0MpxtrJcLm0tGY4ODYGriOVhYwo/vU1cGOPrxvZG39yCve9+xcc7sVW4DBkCezA==|2UoaY428DIL/VGPLaRon4l5i5WbAevIWwjj0W0sj4LU=|10|d42cad75cac5486feb0f88674f9a220a&dft=0&uc=1536x834&pis=-1x-1&sr=1536x864&tcn=1675046784&qn=75c4f389da0f062c&ft=1" frameborder="0"></iframe> --><br><!-- 利用iframe嵌入其他内容，例如图片（浏览器能打开的，都可以嵌入，无法打开的会提示下载，如.zip文件） --><iframe src="./resource/小姐姐.gif" frameborder="0"></iframe><br><!-- 与超链接的target属性配合使用 --><a href="https://www.toutiao.com" target="container">点我看新闻</a><a href="https://www.taobao.com" target="container">点我看淘宝</a><br><!-- 与表单的target属性配合使用 --><form action="https://so.toutiao.com/search" target="container"><input type="text" name="keyword"><input type="submit" value="搜索"></form><!-- 超链接或者表单的target属性，与iframe的name属性相同，配合使用以展示不同的内容 --><iframe name="container" frameborder="0" width="900" height="300"></iframe></body></html>

字符实体

在 HTML 中，我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 字符实体。比如小于号 < 是用于定义 HTML 标签的开始，如果我们希望浏览器正确地显示 > 这种字符，就必须在 HTML 源码中插入字符实体。

字符实体由三部分组成：一个&和一个实体名称（或者一个#和一个实体编号），最后加上一个分号;。

常见字符实体：

完整实体列表，参考：https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML字符实体</title>
</head><body><div>我 美女</div><div>我&nbsp;&nbsp;&nbsp;&nbsp;美女</div><div>我&#160;&#160;&#160;&#160;美女</div><div>我们学习过很多的标题标签，其中&lt;h1&gt;是最厉害的一个！</div><div>我们今天学习了一个可以表示空格的字符实体，它是：&amp;nbsp;</div><div>我们今天学习了一个可以表示&的字符实体，它是：&amp;amp;</div><div>当前商品的价格是：￥199</div><div>当前商品的价格是：¥199</div><div>当前商品的价格是：&yen;199</div><div>©版权所有</div><div>&copy;版权所有</div><div>2 * 2 = 4</div><div>2 x 2 = 4</div><div>2 × 2 = 4</div><div>2 &times; 2 = 4</div><div>2 / 2 = 1</div><div>2 ÷ 2 = 1</div><div>2 &divide; 2 = 1</div>
</body></html>

全局属性

常用的全局属性：

属性名	含义
`id`	给标签指定唯一标识，注意：`id 是不能重复的` 作用：可以让 label 标签与表单控件相关联；也可以与 CSS 、 JavaScript 配合使用不能在以下 HTML 元素中使用：`<head>`、`<html>`、`<meta>`、`<script>`、`<style>`、`<title>`
`class`	给标签指定类名，随后通过 CSS 就可以给标签设置样式
`style`	给标签设置 CSS 样式
`dir`	内容的方向，值：ltr 、 rtl 不能在以下 HTML 元素中使用：`<head>`、`<html>`、`<meta>`、`<script>`、`<style>`、`<title>`
`title`	给标签设置一个文字提示，一般超链接和图片用得比较多。
`lang`	给标签指定语言不能在以下 HTML 元素中使用：`<head>`、`<html>`、`<meta>`、`<script>`、`<style>`、`<title>`

完整的全局属性，参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML全局属性</title><style>.student {color: red;}</style>
</head><body><div id="hello1">你好啊！</div><div id="hello2">你好啊2！</div><div class="student">张三</div><div class="student">李四</div><div style="color:green">旺财</div><bdo dir="rtl">你是年少的欢喜</bdo><div dir="rtl">你是年少的欢喜</div><div title="英雄联盟">LOL</div><a href="https://www.baidu.com" title="去百度">去百度</a><div lang="en">hello</div>
</body></html>

meta 元信息

meta 元信息，也就是网页的基本信息，常见的有：

配置字符编码：
```
<meta charset="utf-8">
```

针对 IE 浏览器的兼容性配置：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

针对移动端的配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

配置网页关键字：

<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

配置网页描述信息：

<meta name="description" content="80字以内的一段话，与网站内容相关">

针对搜索引擎爬虫配置：

<meta name="robots" content="此处可选值见下表">

值	描述
index	允许搜索爬虫索引此页面
noindex	要求搜索爬虫不索引此页面
follow	允许搜索爬虫跟随此页面上的链接
nofollow	要求搜索爬虫不跟随此页面上的链接
all	与 index，follow 等价
none	与 noindex，nofollow 等价
noarchive	要求搜索引擎不缓存页面内容
nocache	noarchive 的替代名称

配置网页作者：
```
<meta name="author" content="tony">
```

配置网页生成工具：

<meta name="generator" content="Visual Studio Code">

配置定义网页版权信息：

<meta name="copyright" content="2023-2027©版权所有">

配置网页自动刷新：
```
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
```
content 中的参数，10 表示每隔 10 秒，url 表示跳转到的地方，如果不配做 url，则是每隔 10 秒，刷新当前页面一次。

完整的网页元信息，参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><!-- 配置字符编码 --><meta charset="UTF-8"><!-- 针对IE浏览器的一个兼容性设置 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对移动端的一个配置 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 配置网页的关键字 --><meta name="keywords" content="网上购物,电商购物,皮鞋,化妆品"><!-- 配置网页描述信息 --><meta name="description" content="哈哈购物网成立于2003年，致力于打造国内优质的电商购物平台...."><!-- 自动刷新 --><meta http-equiv="refresh" content="3"><title>meta元信息</title>
</head><body><h1>你好啊</h1>
</body></html>

HTML 5

HTML 5 是新一代的 HTML 标准，2014 年 10 月，由万维网联盟（ W3C ）完成标准制定。

官网地址：

W3C 提供：https://www.w3.org/TR/html/index.html
WHATWG 提供：https://whatwg-cn.github.io/html/multipage
二者之间存在一些差异，开发时一般选择二者都有的标签。

HTML 5 在狭义上是指新一代的 HTML 标准，在广义上是指整个前端。

优势：

针对 JavaScript，新增了很多可操作的接口。
新增了一些语义化标签、全局属性。
新增了多媒体标签，可以很好的替代 flash。
更加侧重语义化，对于 SEO 更友好。
可移植性好，可以大量应用在移动设备上。

兼容性：

支持：Chrome、Safari、Opera、Firefox 等主流浏览器。
IE 浏览器必须是 9 及以上版本才支持 HTML 5，且 IE 9 仅支持部分 HTML 5 新特性。

新增语义化标签

新增布局标签

标签名	语义	单/双标签
`header`	整个页面，或部分区域的头部	双
`footer`	整个页面，或部分区域的底部	双
`nav`	导航	双
`article`	文章、帖子、杂志、新闻、博客、评论等	双
`section`	页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）	双
`aside`	侧边栏	双
main	文档的主要内容（WHATWG 中没有语义，IE 不支持），几乎不用	双
hgroup	包裹连续的标题，如文章主标题、副标题的组合（W3C 将其删除），几乎不用	双

关于 article 和 section：

article 里面可以有多个 section。

section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素。

article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素。

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>01_新增布局标签</title>
</head><body><!-- 头部 --><header class="page-header"><h1>尚品汇</h1></header><hr><!-- 主导航 --><nav><a href="#">首页</a><a href="#">订单</a><a href="#">购物车</a><a href="#">我的</a></nav><!-- 主要内容 --><div class="page-content"><!-- 侧边栏导航 --><aside style="float: right;"><nav><ul><li><a href="#">秒杀专区</a></li><li><a href="#">会员专区</a></li><li><a href="#">领取优惠券</a></li><li><a href="#">品牌专区</a></li></ul></nav></aside><!-- 文章 --><article><h2>《如何一夜暴富》</h2><section><h3>第一种方式：通过做梦</h3><p>你要这么做梦：xxxxxxxxxxxxxxxxxxxxxxx</p></section><section><h3>第二种方式：通过买彩票</h3><p>你要这么买彩票：xxxxxxxxxxxxxxxxxxxxxxx</p></section><section><h3>第三种方式：通过学习前端</h3><p>你要这么学前端：xxxxxxxxxxxxxxxxxxxxxxx</p></section></article></div><hr><footer><nav><a href="#">友情链接1</a><a href="#">友情链接2</a><a href="#">友情链接3</a><a href="#">友情链接4</a></nav></footer>
</body></html>

新增状态标签

meter 标签

语义：定义已知范围内的标量测量，也被称为 gauge（尺度），双标签。例如：电量、磁盘用量等。

常用属性：

属性名	值	描述
`high`	数值	规定高值
`low`	数值	规定低值
`max`	数值	规定最大值
`min`	数值	规定最小值
`optimum`	数值	规定最优值
`value`	数值	规定当前值

加上 optimum 和不加 optimum，是不同的效果。

progress 标签

语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签。例如：工作完成进度等。

常用属性：

属性名	值	描述
`max`	数值	规定目标值
`value`	数值	规定当前值

示例

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>02_新增状态标签</title><style>progress {width: 50px;}</style>
</head><body><span>手机电量：</span><!-- 增加和删除optimum标签，再变化value值，查看效果变化 --><meter max="100" min="0" value="90" low="10" high="20" optimum="90"></meter><br><span>当前进度：</span><progress max="100" value="20"></progress>
</body></html>

效果图：

新增列表标签

标签名	语义	单/双标签
`datalist`	用于搜索框的关键字提示	双
`details`	用于展示问题和答案，或对专有名词进行解释	双
`summary`	写在 details 的里面，用于指定问题或专有名词	双

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>03_新增列表标签</title>
</head><body><form action="#"><input type="text" list="mydata"><button>搜索</button></form><datalist id="mydata"><option value="周杰伦">周杰伦</option><option value="周冬雨">周冬雨</option><option value="马冬梅">马冬梅</option><option value="温兆伦">温兆伦</option></datalist><hr><details><summary>如何一夜暴富？</summary><p>来学习前端</p></details>
</body></html>

新增文本标签

文本注音

标签名	语义	单/双标签
`ruby`	包裹需要注音的文字	双
`rt`	写注音，rt 标签写在 ruby 的里面	双

文本标记

标签名	语义	单/双标签
`mark`	标记	双

注意：W3C 建议 mark 用于标记搜索结果中的关键字。

示例

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>04_新增文本标签</title>
</head><body><ruby><span>魑魅魍魉</span><rt>chī mèi wǎng liǎng </rt></ruby><hr><div><ruby><span>魑</span><rt>chī</rt></ruby><ruby><span>魅</span><rt>mèi</rt></ruby></div><hr><p>Lorem ipsum <mark>dolor</mark> sit amet consectetur adipisicing elit. Laboriosam, nemo?</p>
</body></html>

新增表单功能

表单控件新增属性

属性名	功能
`placeholder`	提示文字，适用于文字输入类的表单控件注意：不是默认值，默认值是 value
`required`	表示该输入项必填，适用于除按钮外其他表单控件
`autofocus`	自动获取焦点，适用于所有表单控件
`autocomplete`	自动完成，可以设置为 on 或 off，适用于文字输入类的表单控件注意：密码输入框、多行输入框不可用
`pattern`	填写正则表达式，适用于文本输入类表单控件注意：多行输入不可用，且空的输入框不会验证，往往与 required 配合

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>01_新增的表单控件属性</title>
</head><body><form action="">账号：<input type="text" name="account" placeholder="请输入账号" required autofocus autocomplete="on" pattern="\w{6}"><br>密码：<input type="password" name="pwd" placeholder="请输入密码" required pattern="\w{6}"><br>性别：<input type="radio" value="male" name="gender" required>男<input type="radio" value="female" name="gender">女<br>爱好：<input type="checkbox" value="smoke" name="hobby">抽烟<input type="checkbox" value="drink" name="hobby" required>喝酒<input type="checkbox" value="perm" name="hobby">烫头<br>其他：<textarea name="other" placeholder="请输入密码" required pattern="\w{6}"></textarea><br><button>提交</button></form>
</body></html>

input 新增属性值

属性名	功能
`email`	邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式
`url`	url 类型的输入框，表单提交时会验证格式，输入为空则不验证格式
`number`	数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式
`search`	搜索类型的输入框，表单提交时不会验证格式
`tel`	电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘
`range`	范围选择框，默认值为 50，表单提交时不会验证格式
`color`	颜色选择框，默认值为黑色，表单提交时不会验证格式
`date`	日期选择框，默认值为空，表单提交时不会验证格式
`month`	月份选择框，默认值为空，表单提交时不会验证格式
`week`	周选择框，默认值为空，表单提交时不会验证格式
`time`	时间选择框，默认值为空，表单提交时不会验证格式
`datetime-local`	日期 + 时间选择框，默认值为空，表单提交时不会验证格式

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>02_input新增的type属性值</title>
</head><body><form action="" novalidate>邮箱：<input type="email" required name="email"><!-- url：<input type="url" required name="url"> --><!-- 数值：<input type="number" required name="number" step="2" max="80" min="20"> --><!-- 搜索：<input type="search" required name="keyword"> --><!-- 电话：<input type="tel" required name="phone"> --><!-- 光照强度：<input type="range" name="range" max="80" min="20" value="22"> --><!-- 颜色：<input type="color" name="color"> --><!-- 日期：<input type="date" required name="date"> --><!-- 月份：<input type="month" required name="month"> --><!-- 周：<input type="week" required name="week"> --><!-- 时间：<input type="time" required name="time"> --><!-- 日期+时间：<input type="datetime-local" required name="time2"> --><br><button>提交</button></form>
</body></html>

form 标签新增属性

属性名	功能
`novalidate`	如果给 form 标签设置了该属性，表单提交的时候不再进行验证

新增多媒体标签

视频标签

<video>：用来定义视频，双标签。

属性名	值	描述
`src`	URL 地址	视频地址
`width`	像素值	设置视频播放器的宽度
`height`	像素值	设置视频播放器的高度
`controls`	-	向用户显示视频控件（比如播放/暂停按钮）
`muted`	-	视频静音
`autoplay`	-	视频自动播放
`loop`	-	循环播放
`poster`	URL 地址	视频封面
`preload`	`auto / metadata / none`	视频预加载，如果使用 autoplay，则忽略该属性 auto：可以下载整个视频文件，即使用户不希望使用它 metadata：仅预先获取视频的元数据（例如长度） none：不预加载视频

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>01_新增视频标签</title><style>video {width: 600px;}</style>
</head><body><video src="./小电影.mp4" controls muted loop poster="./封面.png" preload="auto"></video>
</body></html>

音频标签

<audio>：用来定义音频，双标签。

属性名	值	描述
`src`	URL 地址	音频地址
`controls`	-	向用户显示音频控件（比如播放/暂停按钮）
`autoplay`	-	音频自动播放
`muted`	-	音频静音
`loop`	-	循环播放
`preload`	`auto / metadata / none`	音频预加载，如果使用 autoplay，则忽略该属性 auto：可以下载整个音频文件，即使用户不希望使用它 metadata：仅预先获取音频的元数据（例如长度） none：不预加载音频

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>02_新增音频标签</title><style>audio {width: 600px;/* height: 500px; */border: 1px solid black;}</style>
</head><body><audio src="./小曲.mp3" controls loop preload="metadata"></audio>
</body></html>

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>03_音频案例</title><style>audio {width: 600px;}.mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.727);}.dialog {position: absolute;width: 400px;height: 400px;background-color: green;top: 0;bottom: 0;left: 0;right: 0;margin: auto;font-size: 40px;text-align: center;line-height: 400px;}span {border: 1px solid white;color: white;cursor: pointer;}</style>
</head><body><audio id="music" src="./小曲.mp3" controls></audio><div class="mask" id="mask"><div class="dialog"><span>点我登录</span><span onclick="go()">随便听听</span></div></div><script>function go() {music.play()mask.style.display = 'none'}</script>
</body></html>

新增全局属性（了解）

属性名	功能
`contenteditable`	表示元素是否可被用户编辑，可选值如下： true：可编辑 false：不可编辑
`draggable`	表示元素可以被拖动，可选值如下： true：可拖动 false：不可拖动
`hidden`	隐藏元素
`spellcheck`	规定是否对元素进行拼写和语法检查，可选值如下： true：检查 false：不检查
`contextmenu`	规定元素的上下文菜单，在用户鼠标右键点击元素时显示
`data-*`	用于存储页面的私有定制数据

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>新增的全局属性</title><style>div {width: 600px;height: 200px;border: 1px solid black;font-size: 20px;margin-bottom: 10px;}.box1 {background-color: skyblue;}.box2 {background-color: green;}</style>
</head><body><div class="box1" spellcheck="true" contenteditable="true">Lorem ipsum dolor sit amet.</div><div class="box2" draggable="true" hidden data-a="1" data-b="2" data-c="3">Lorem ipsum dolor sit amet.</div><h1>hello</h1></body></html>

HTML 5 兼容性处理

方式一：添加元信息，让浏览器处于最优渲染模式。

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

方式二：使用html5shiv让低版本浏览器认识 HTML 5 的语义化标签。

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

扩展：

lt：小于。
lte：小于等于。
gt：大于。
gte：大于等于。
!：逻辑非。

用法：

<!--[if IE 8]>仅IE8可见<![endif]--><!--[if gt IE 8]>仅IE8以上可见<![endif]—><!--[if lt IE 8]>仅IE8以下可见<![endif]—><!--[if gte IE 8]>IE8及以上可见<![endif]—><!--[if lte IE 8]>IE8及以下可见<![endif]—><!--[if !IE 8]>非IE8的IE可见<![endif]-->

示例：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>兼容性处理</title><!-- 让IE浏览器处于一个最优的渲染模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核去渲染网页 --><meta name="render" content="webkit"><!--[if lt ie 9]><script src="./html5shiv.js"></script><![endif]--><style>header {background-color: orange;}footer {height: 100px;line-height: 100px;text-align: center;background-color: green;}</style>
</head><body><!-- 头部 --><header class="page-header"><h1>尚品汇</h1></header><hr><!-- 主导航 --><nav><a href="#">首页</a><a href="#">订单</a><a href="#">购物车</a><a href="#">我的</a></nav><!-- 主要内容 --><div class="page-content"><!-- 侧边栏导航 --><aside style="float: right;"><nav><ul><li><a href="#">秒杀专区</a></li><li><a href="#">会员专区</a></li><li><a href="#">领取优惠券</a></li><li><a href="#">品牌专区</a></li></ul></nav></aside><!-- 文章 --><article><h2>《如何一夜暴富》</h2><section><h3>第一种方式：通过做梦</h3><p>你要这么做梦：xxxxxxxxxxxxxxxxxxxxxxx</p></section><section><h3>第二种方式：通过买彩票</h3><p>你要这么买彩票：xxxxxxxxxxxxxxxxxxxxxxx</p></section><section><h3>第三种方式：通过学习前端</h3><p>你要这么学前端：xxxxxxxxxxxxxxxxxxxxxxx</p></section></article></div><hr><!-- 页脚 --><footer><nav><a href="#">友情链接1</a><a href="#">友情链接2</a><a href="#">友情链接3</a><a href="#">友情链接4</a></nav></footer>
</body></html>

原文链接

https://github.com/ACatSmiling/zero-to-zero/blob/main/FrontEnd/html-css.md

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/798524.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！