HTML 基础

参考：https://github.com/qianguyihao/Web/tree/master/01-HTML

1）HTML 基础介绍

1.1）Web 万维网

Web（World Wide Web）即全球广域网，也称为万维网。
我们常说的 Web端就是网页端。

网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。

浏览器 是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera 等。

1.2）W3C 组织

W3C：World Wide Web Consortium，万维网联盟组织，用来制定web标准的机构（组织）。
W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
W3C 组织就类似于现实世界中的联合国。
为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。

:::info
**注意：**我们在 **安全方面 **一般仅关注 HTML 与 JS 即可，CSS 不存在安全风险。因此不太关注。
:::
Web 标准：制作网页要遵循的规范。
**Web 标准：**不是某一个标准，而是由 W3C 组织和其他标准化组织制定的一系列标准的集合。
1、Web 标准包括三个方面：

结构标准（HTML）：用于对网页元素进行整理和分类。
表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
行为标准（JS）：用于定义网页的交互和行为。

根据上面的 Web 标准，可以将 Web 前端分为三层，如下。

2、Web前端分三层：

HTML（ HyperText Markup Language ）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
CSS（ Cascading Style Sheets ）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
JavaScript（简称 JS ）：从交互的角度描述页面的行为，实现业务逻辑和页面控制。相当于人的动作，让人有生命力。

3、打个比方：（拿黄渤举例）
HTML 相当于人的身体组织结构：

CSS 相当于人的衣服和打扮：

JS 相当于人的行为：

:::info
HTML（ HyperText Markup Language ）：超文本标记语言。从语义的角度 描述页面的结构。相当于人的身体组织结构。
CSS（ Cascading Style Sheets ）：层叠样式表。从审美的角度 美化页面的样式。相当于人的衣服和打扮。
JS：JavaScript。从交互的角度 描述页面的行为。相当于人的动作，让人有生命力。
:::

:::info
JS：JavaScript
一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）
比如：通过 JS 限制用户在网页上复制内容等等操作。
:::

1.3）介绍浏览器

浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示：

**浏览器的组成：**浏览器分为两部分

渲染引擎（浏览器内核）
JS 引擎
:::info
浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用于解析 HTML 和 CSS、布局、渲染等工作。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
渲染引擎是浏览器兼容性问题出现的根本原因。
:::

:::info
渲染引擎的英文叫做 Rendering Engine。通俗来说，它的作用就是：读取网页内容，计算网页的显示方式并显示在页面上。
:::

浏览器	内核
chrome	Blink
欧鹏	Blink
360安全浏览器	Blink
360极速浏览器	Blink
Safari	Webkit
Firefox 火狐	Gecko
IE	Trident

**备注：**360的浏览器，以前使用的IE浏览器的Trident内核，但是现在已经改为使用 chrome 浏览器的 Blink内核。

:::info
JS 引擎
也称为 JS 解释器。用来解析网页中的 JavaScript 代码，对其处理后再运行。
浏览器本身并不会执行 JS 代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时会逐行解释每一句源码（转换为机器语言），然后由计算机去执行。所以 JavaScript 语言归为脚本语言，会逐行解释执行。
:::

常见浏览器的 JS 引擎如下：

浏览器	JS 引擎
chrome、欧鹏	V8
Mozilla Firefox 火狐	SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）
Safari	JavaScriptCore，也称为Nitro，是 WebKit 引擎的一部分
IE	Trident
Edge	Chakra。此外，ChakraCore是Chakra的开源版本，可以在不同的平台上使用。
Opera	Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）

补充说明：
1、SpiderMonkey 是第一款 JavaScript 引擎，由 JS 语言的作者 Brendan Eich 开发。
2、先以 WebKit 为例，WebKit 上由两部分组成：

WebCore：负责解析 HTML 和 CSS、布局、渲染等工作。
JavaScriptCore：负责解析和执行 JavaScript 代码。

1.4）HTML 概念

HTML 全称为 HyperText Markup Language，译为超文本标记语言。
HTML 不是一种编程语言，是一种描述性的标记语言。
作用：HTML是负责描述文档语义的语言。

超文本
所谓的超文本，有两层含义：
（1）图片、音频、视频、动画、多媒体等内容，被称为超文本，因为它们超出了文本的限制。
（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。

标记语言
HTML 不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：
（1）标记语言是一套标记标签。比如：标签表示超链接、标签表示图片、标签

表示一级标题等等，它们都是属于 HTML 标签。
说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。
（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。

:::info
HTML 是负责描述文档语义的语言
HTML 格式的文件是一个纯本文文件（就是用 txt 文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。
接下来，我们需要学习 HTML 中的很多“标签对儿”，这些“标签对儿”能够给文本不同的语义。
比如，面试的时候问你，<h1> 标签有什么作用？

正确答案：给文本增加主标题的语义。
错误答案：给文字加粗、加黑、变大。

关乎“语义”的更深刻理解，等接下来我们学习了各种标签，就明白了。
:::

HTML 的历史

HTML 的专有名词

1.5）书写第一个 HTML 页面

HTML 基本框架

上面的内容，就是 HTML 页面的骨架。我们在此基础之上，新增几个标签，完整代码如下：（内容编写在 body 标签以内）

标签写完之后，我们用 Chrome 浏览器打开上面这个 test.html 文件（或者 Open With Live Server ）
看看页面效果：到此，第一个简单的 HTML 页面就写完了。是不是很有成就感？

1.6）案例展示

:::info
**案例：**通过 a 标签编写暗链，引流提升 SEO
:::
:::info
暗链是 SEO 手法中相当普遍的一种手段，笼统地说，它就是指一些人用非正常的手段获取的其它网站的反向链接，最常见的黑链就是通过各种网站程序漏洞获取搜索引擎权重或者 PR 较高的网站的 webshell，进而在被黑网站上链接自己的网站，其性质与明链一致，都是属于为高效率提升排名，而使用的作弊手法。
:::

浏览器内核会解析该标签，从而达到引流提升 SEO 的效果

:::info
典型的网络黑色产业链有哪些？
类型 2：在线博彩平台。随着在线支付和智能手机的普及，地下赌场已经迅速完成互联网“转型”，变为具备完整技术链条的在线博彩平台。制作团队专门负责快速开发赌博游戏 App；运维团队大量租用境外服务器保证赌博游戏持续在线；资金团队在境内开设大量空壳公司和金融账户收取并转移赌资；营销团队雇佣黑客入侵正规网站植入赌博暗链，以此提高赌博网站的搜索引擎排名。
:::
:::info
防护方法：

网页目录监控
漏洞扫描（ DevSecOps ）
企业蓝军（第三方蓝军）
外围防护（网页防篡改，WAF，应用防火墙）
:::

1.7）HTML 结构详解

HTML 标签通常是 **成对出现 **的（双边标记），比如

和；也有 少部分单标签（ 单边标记），如：
、

和

等。
属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。

:::info
HTML 骨架标签
:::

标签名	定义	说明
`<html></html>`	HTML 标签	页面中最大的标签，我们成为根标签
`<head></head>`	文档的头部	注意在 head 标签中我们必须要设置的标签是 title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到 body 里面的

:::info
快速生成 HTML 的骨架
:::

方式1：在 VS Code 中新建 html 文件，输入html:5，按 Tab 键后，自动生成的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

参考：https://www.yuque.com/blogking/xiaodi/ftgcms8ge47z0psa

:::info

文档声明头（ DOCTYPE ）

任何一个标准的 HTML 页面，第一行一定是一个以开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称 DTD。
:::

<!DOCTYPE html>

:::info

页面语言（ Lang ）

下面这行标签，用于指定页面的语言类型：
:::

<html lang="en">

:::info

头标签（ Head ）
1. 字符集：charset - 字符集编码方式
2. 视口：viewport - 表示视口宽度等于屏幕宽度
3. 关键字：Keywords - 这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你
4. 页面描述：Description - 只要设置 Description 页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做 SEO（search engine optimization，搜索引擎优化）
  :::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Keywords" content="马哥,马哥教育,IT培训,Linux,网络安全" />
    <meta name="Description" content="马哥教育是中国领先的互联网技术培训公司" />
<title>Document</title>
</head>
<body>
    <h3> 我是个三级标签 </h3>    
    <img src="https://linux.wuhanjiayou.cn/upload/062146005838969.jpg" alt="">
    <a href="https://www.wuhanjiayou.cn">小王主页</a>
</body>
</html>

:::danger

meta 标签 - 页面跳转（ http-equiv 属性）

上面这个标签的意思是说，1 秒之后，自动跳转到马哥教育页面。
:::

<meta http-equiv="refresh" content="1;http://www.magedu.com">

:::danger

body 标签（属性） - 填写在标签中
body 标签（元素）- 填写在标签内部
:::

<body bgcolor="green">			# 属性: 填写在标签中
  <h3> 我是个三级标签 </h3>	# 内容: 填写在标签内部
  <a href="https://baidu.com">百度</a>	# 内容: 填写在标签内部
</body>

1.8）计算机编码介绍

:::info
参考：https://www.yuque.com/blogking/xiaodi/vg8dky0kl8a9qgn0
:::

计算机，不能直接存储文字，存储的是编码。
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符

:::info
中文能够使用的字符集两种：

第一种：UTF-8。UTF-8 是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
第二种：GBK（对GB2312进行了扩展）。gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。

字库规模： UTF-8（字很全） > gb2312（只有汉字）
:::
:::info
**重点 1：**避免乱码
我们用 meta 标签声明的当前这个 html 文档的字库，一定要和保存的文件编码类型一样，否则乱码（重点）。拿 sublime 编辑器举例，当我们不设置的时候，sublime 默认类型就是 UTF-8。而一旦更改为 gb2312 的时候，就一定要记得设置一下 sublime 的保存类型：文件 → set File Encoding to → Chinese Simplified(GBK) 。VS Code 的道理一样。
:::
:::info
**重点 2：**UTF-8 和 gb2312 的比较
保存大小：UTF-8（更臃肿、加载更慢）> gb2312 （更小巧，加载更快）
总结：

UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
:::

列出 2 个使用情形：
1）某公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用 UTF-8。如果用 gb2312 将无法显示日语。
2）某公司就是中文网页，极度的追求网页的显示速度，要使用 gb2312。如果使用 UTF-8 将每个汉字多一个 byte，所以 5000 个汉字，多 5kb。

:::danger
我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择 “查看网页源代码”，找到 meta 标签中的 charset 属性即可。
:::

2）HTML 排版标签

参考：HTML标签：排版标签.md

02-HTML标签：排版标签.pdf

2.1）标题标签

标题使用

至

标签进行定义。

定义最大的标题，

定义最小的标题。
具有 align 属性，属性值可以是：left、center、right。

<body>
    <h1>H1:马哥教育</h1>
    <h2>H2:马哥教育</h2>
    <h3>H3:马哥教育</h3>
    <h4>H4:马哥教育</h4>
    <h5>H5:马哥教育</h5>
    <h6>H6:马哥教育</h6>
</body>

2.2）HTML 注释

HTML 注释的格式如下（ VSCode 快捷键：Ctrl + / ）

<!-- 我是 HTML 注释 -->

2.3）段落标签

段落，是英语 paragraph 缩写。
作用：可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来，离不开段落标签。就如同我们平常写文章一样，整个网页也可以分为若干个段落。

<body>
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
</body>

:::info
**属性：**align=“属性值” ：对齐方式。属性值包括 left center right。
:::

<body>
    <p align="center"> This is a paragraph </p>
    <p align="center"> This is another paragraph </p>
</body>

参考：https://blog.csdn.net/qq_36213140/article/details/121169952

**注意：**HTML 标签是分等级的，HTML 将所有的标签分为两种：

**文本级标签：**p、span、a、b、i、u、em。文本级标签里只能放 文字、图片、表单元素。（ a 标签里不能放 a 和 input ）
**容器级标签：**div、h 系列、li、dt、dd。容器级标签里可以放置任何东西。

从学习 p 的第一天开始，就要牢牢记住：**p 标签是一个文本级标签，p 里面只能放文字、图片、表单元素。**其他的一律不能放。

错误写法：（尝试把 h 放到 p 里）

	<p>
		我是一个小段落
		<h1>我是一级标题</h1>
	</p>

网页效果
上图显示，浏览器不允许你这么做，我们使用 Chrome 的 F12 审查元素发现，浏览器自己把 p 封闭掉了，不让你去包裹 h1。
**PS：**Chrome 浏览器是 HTML5 支持度最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是 F12。

2.4）水平线标签

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。

<body>
    <p>马哥教育</p>
    <hr />
    <p>网络安全</p>
</body>

属性介绍：

align="属性值"：设定线条置放位置。属性值可选择：left right center。
size="2"：设定线条粗细。以像素为单位，内定为 2。
width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为 100%。
color="#0000FF"：设置线条颜色。
noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。

<body>
    <p>马哥教育</p>
    <hr size="3" width="500" color="#FF0000"> </hr>
    <p>网络安全</p>
</body>

2.5）换行标签

如果希望某段文本强制换行显示，就需要使用换行标签。

<body>
    This <br/> is a para<br/>graph with line breaks
</body>

2.6）与标签

和
唯一的区别在于：是不换行的，而是换行的。

<p>
  马哥教育
  <span>
  <a href="">详细信息</a>
  <a href="">购买</a>
  </span>
</p>

<body>
    <div class="header">
        <div class="logo">马哥教育</div>
      </div>
        <a href="">详细信息</a>
        <a href="">购买</a>
      </div>
    <div class="footer"></div>
</body>

2.7）内容居中标签

此时 center 代表是一个标签，而不是一个属性值了。
只要是在这个标签里面的内容，都会居于浏览器的中间。

到了 HTML5 里面，center 标签不建议使用，建议使用 css 布局来实现。

<body>
<center>
    <p> 马哥教育 </p>
    <p> 网络安全 </p>
</center>
</body>

3）HTML 字体标签

:::info
参考：HTML标签：字体标签和超链接.md
:::
03-HTML标签：字体标签和超链接.pdf

3.1）特殊字符\转义字符（ HTML 实体编码）

**案例：**比如说，你想把

作为一个文本在页面上显示，直接写

是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到 转义字符。应该这么写：

<body>
    <p> 这是一个 HTML 语言的 &lt;p&gt; 标签 </p>
</body>

错误的效果如下：

<body>
    <p> 这是一个 HTML 语言的 <p> 标签 </p>
</body>

来一张表格，方便需要的时候查询

特殊字符	描述	字符的代码

空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方2（上标2）	²
³	立方3（上标3）	³

下划线，中划线，斜线

<u>：下划线标记
<s>或<del>：中划线标记（删除线）
<i>或<em>：斜体标记

<body>
    <u>马哥教育</u>
    <s>马哥教育</s>
    <i>马哥教育</i>
</body>

3.2）超链接

超链接有三种形式，下面分别讲讲。

外部链接：链接到外部文件

<a href="1.html">点击进入另外一个文件</a>

当然，我们也可以直接点进链接，访问一个网址。代码举例如下：

<a href="http://www.baidu.com" target="_blank">点我跳转百度</a>

邮件链接

效果：点击之后，会弹出 outlook，作用不大。

<a href="mailto:xxx@163.com">点击进入我的邮箱</a>

超链接 a 标签的属性
1. href（目标 URL ）
2. title（悬停文本）
3. name（主要用于设置一个锚点的名称）
4. target（告诉浏览器用什么方式来打开目标页面）
  1. _self：在同一个网页中显示（默认值）
  2. _blank：在新的窗口中打开
  3. _parent：在父窗口中显示
  4. _top：在顶级窗口中显示

title 属性举例：

<a href="https://linux.wuhanjiayou.cn/upload/wallhaven-4y39ol.jpg" title="鸣人">火影忍者</a>

target 属性举例：

<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>

:::info
**备注 1：**分清楚 img 和 a 标签 各自的属性
:::

<img src="1.jpg" />
<a href="1.html"></a>

:::info
**备注 2：**a 是一个文本级的标签
:::

比如一个段落中的所有文字都能够被点击，那么应该是 p 包裹 a：

<p>
	<a href="">段落段落段落段落段落段落</a>
</p>

而不是 a 包裹 p：

<a href="">
	<p>
		段落段落段落段落段落段落
	</p>
</a>

a 的语义要小于 p，a 就是可以当做文本来处理，所以 p 里面相当于放的就是纯文字。

4）HTML 图片标签

:::info
参考：HTML标签：图片标签.md
:::
04-HTML标签：图片标签.pdf

4.1）img 标签介绍

img：英文全称 image（图像），代表的是一张图片。
如果要想在网页中显示图像，就可以使用 img 标签，它是一个单标签。语法如下：

<img src="图片的URL" />

能插入的图片类型

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp 等。
不能往网页中插入的图片格式是：psd、ai 等。

**注意：**HTML 页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

img 标签的 src 属性
这里涉及到图片的一个属性：

src属性：指图片的路径。英文名称 source。

在写 **图片的路径 **时，有两种写法：相对路径、绝对路径

4.2）相对路径与绝对路径

:::info
写法一：图片的相对路径
:::

相对当前页面所在的路径。两个标记** . **和 **… **分别代表当前目录和上一层目录。

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src="./2.jpg">

<!-- 上一级目录中的图片 -->
<img src="../2.jpg">

:::info
举例 2：
:::

<body>
    <img src="https://blog.csdn.net/weixin_74962223/article/details/images/1.jpg" height="500" width="800">
</body>

上方代码的意思是说，当前 html 页面有一个并列的 images 文件夹，在文件夹 images 中存放了一张图片1.jpg。

:::info
写法二：图片的绝对路径
:::

绝对路径包括以下两种：

以盘符开始的绝对路径。举例：

<img src="C:\Users\WangJ\Desktop\Code\images\1.jpg">

网络路径。举例：

<img src="https://linux.wuhanjiayou.cn/upload/dzx54l_7.webp">

总结：

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

无论是在 a 标签还是 img 标签上，如果要用路径。只有两种路径能用，就是相对路径和绝对路径：

相对路径从自己出发，找到别人。
绝对路径，就是http://或者https://开头的路径。

4.3）img 标签的其他属性

width：图像的宽度。
height：图像的高度。

width 和 height，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。
重要提示：如果要想保证图片等比例缩放，请只设置 width 和 height 中其中一个。

# 将图像宽度和高度分别设置为 500,800 像素
<img src="https://linux.wuhanjiayou.cn/upload/dzx54l_7.webp" height="500" width="800">

alt：当图片不可用（无法显示）的时候，代替图片显示的内容。alt 是英语 alternate “替代” 的意思，代表替换资源。
:::info
Alt 属性效果演示：
:::

<body>
    <img src="https://linux.wuhanjiayou.cn/upload/xxx.png" height="500" width="800" alt="鸣人">
</body>

如上图所示：当图片 src 不可用的时候，显示文字。
这样做，至少能让用户知道，这个图片大概是什么内容。

title 属性

title：提示性文本。鼠标悬停时出现的文本。

title 元素的值一般作为提示条(tooltip) 呈现给用户，在光标于图片上停下后显示出来。
尽管这确实能给用户提供更多的信息，您不该假定用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，可以选择上面提供的一种方法将其内联显示，而不是使用 title。

<body>
    <img src="https://linux.wuhanjiayou.cn/upload/wallhaven-4y39ol.jpg" height="500" width="800" title="火影忍者">
</body>

**案例：**点击图片跳转链接

# 利用 a 标签包含 img 标签来实现 - 点击图片跳转链接
<body> 
    <a href="https://pan.baidu.com/buy/checkoutcounter">
    <img src="https://img.qqe2.com/uploadfile/2022/1103/20221103120705706.jpg" title="百度会员SVIP领取">
</a>
</body>

5）HTML 列表标签（待完成）

:::info
参考：HTML标签：列表标签.md
:::
05-HTML列表标签.pdf

5.1）无序列表

无序列表

，无序列表中的每一项是

英文单词解释如下：

ul：unordered list，无序列表的意思。
li：list item，列表项的意思。

<ul>
	<li>默认1</li>
	<li>默认2</li>
	<li>默认3</li>
</ul>

注意：

li 不能单独存在，必须包裹在 ul 里面；反过来说，ul 的“儿子”不能是别的东西，只能有 li。
我们这里再次强调，ul 的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

属性：

type=“属性值”。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。

不光是

标签有 type 属性，
里面的
标签也有 type 属性（虽然说这种写法很少见）。
效果如下：

当然了，列表之间是可以嵌套的。我们来举个例子。代码：

  <ul>
	<li><b>北京市</b>
		<ul>
			<li>海淀区</li>
			<li>朝阳区</li>
			<li>东城区</li>

		</ul>
	</li>

	<li><b>广州市</b>
		<ul>
			<li>天河区</li>
			<li>越秀区</li>
		</ul>
	</li>
  </ul>

CSS 属性：

list-style-position: inside   /* 给 ul 设置这个属性后，将小圆点包含在 li 元素的内部 */

ul 标签实际应用场景
场景1、导航条：

场景 2、li 里面放置的内容可能很多：

声明：ul 的儿子，只能是 li。但是 li 是一个容器级标签，li 里面什么都能放，甚至可以再放一个 ul。

5.2）有序列表

有序列表

，里面的每一项是
英文单词：Ordered List。

<ol>
  <li>呵呵哒1</li>
  <li>呵呵哒2</li>
  <li>呵呵哒3</li>
</ol>

属性：

type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。
结合start属性表示从几开始。

<ol type="1">
	<li>呵呵</li>
	<li>呵呵</li>
	<li>呵呵</li>
</ol>

<ol type="a">
	<li>嘿嘿</li>
	<li>嘿嘿</li>
	<li>呵呵</li>
</ol>

<ol type="i" start="4">
	<li>哈哈</li>
	<li>哈哈</li>
	<li>哈哈</li>
</ol>

<ol type="I" start="10">
	<li>么么</li>
	<li>么么</li>
	<li>么么</li>
</ol>

和无序列表一样，有序列表也是可以嵌套的哦，这里就不举类似的例子了。
ol 和 ul 就是语义不一样，怎么使用都是一样的。ol 里面只能有 li，li 必须被 ol 包裹。li 是容器级。

ol 这个东西用的不多，如果想表达顺序，大家一般也用 ul。举例如下：

<ul>
	<li>1. 小苹果</li>
	<li>2. 月亮之上</li>
	<li>3. 最炫民族风</li>
</ul>

5.3）定义列表

定义列表的作用非常大。

<dl>英文单词：definition list，没有属性。dl 的子元素只能是 dt 和 dd。

<dt>：definition title 列表的标题，这个标签是必须的
<dd>：definition description 列表的列表项，如果不需要它，可以不加。

备注：dt、dd 只能在 dl 里面；dl 里面只能有 dt、dd。

<dl>
	<dt>第一条</dt>
	<dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd>
	<dd>我会让你明白，我从不说空话</dd>
	<dd>我是本地的，我有一百种方式让你呆不下去；而你，无可奈何</dd>

	<dt>第二条</dt>
	<dd>良辰最喜欢对那些自认能力出众的人出手</dd>
	<dd>你可以继续我行我素，不过，你的日子不会很舒心</dd>
	<dd>你只要记住，我叫叶良辰</dd>
	<dd>不介意陪你玩玩</dd>
	<dd>良辰必有重谢</dd>

</dl>

上图可以看出，定义列表表达的语义是两层：

（1）是一个列表，列出了几个 dd 项目
（2）每一个词儿都有自己的描述项。

备注：dd 是描述 dt 的。

定义列表用法非常灵活，可以一个 dt 配很多 dd：

	<dl>
		<dt>北京</dt>
		<dd>国家首都，政治文化中心</dd>
		<dd>污染很严重，PM2.0天天报表</dd>
		<dt>上海</dt>
		<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
		<dt>广州</dt>
		<dd>中国南大门，有珠江、小蛮腰</dd>
	</dl>

还可以拆开，让每一个 dl 里面只有一个 dt 和 dd，这样子感觉清晰一些：

	<dl>
		<dt>北京</dt>
		<dd>国家首都, 政治文化中心</dd>
		<dd>污染很严重, PM2.0天天报表</dd>
	</dl>

	<dl>
		<dt>上海</dt>
		<dd>魔都, 有外滩, 东方明珠塔, 黄浦江</dd>
	</dl>

	<dl>
		<dt>广州</dt>
		<dd>中国南大门, 有珠江, 小蛮腰</dd>
	</dl>

真实案例：（京东最下方）

上图中的结构如下：

<dl>
	<dt>购物指南</dt>
	<dd>
		<a href="#">购物流程</a>
		<a href="#">会员介绍</a>
		<a href="#">生活旅行/团购</a>
		<a href="#">常见问题</a>
		<a href="#">大家电</a>
		<a href="#">联系客服</a>
	</dd>
</dl>
<dl>
	<dt>配送方式</dt>
	<dd>
		<a href="#">上门自提</a>
		<a href="#">211限时达</a>
		<a href="#">配送服务查询</a>
		<a href="#">配送费收取标准</a>
		<a href="#">海外配送</a>
	</dd>
</dl>

京东商品分类如下：

dt、dd 都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。

5.4）表格标签

表格标签用

表示。一个表格

是由每行组成的，每行是由每个单元格

组成的。所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过 CSS 定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。
例如，一行的单元格：

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

上面的表格中没有加文字，所以在生成的网页中什么都看不到。

例如，3 行(tr) 4 列(td)的单元格：

<table>
	<tr>
		<td>千古壹号</td>
		<td>23</td>
		<td>男</td>
		<td>黄冈</td>
	</tr>

	<tr>
		<td>许嵩</td>
		<td>29</td>
		<td>男</td>
		<td>安徽</td>
	</tr>

	<tr>
		<td>邓紫棋</td>
		<td>23</td>
		<td>女</td>
		<td>香港</td>
	</tr>

</table>

上图中的表格好像没看到边框呀，不急，接下来看看
标签的属性。

**<table>**的属性：

border：边框。像素为单位。
style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条）
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：**表格 **的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为 0。
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background="路径src/..."：背景图片。
背景图片的优先级大于背景颜色。
bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色
这两个属性的目的是为了设置3D的效果。
dir：公有属性，单元格内容的排列方式(direction)。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）

既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

单元格带边框的效果：

<table border=1>
	<tr>
		<td>千古壹号</td>
		<td>23</td>
		<td>男</td>
		<td>黄冈</td>
	</tr>

	<tr>
		<td>许嵩</td>
		<td>29</td>
		<td>男</td>
		<td>安徽</td>
	</tr>

	<tr>
		<td>邓紫棋</td>
		<td>23</td>
		<td>女</td>
		<td>香港</td>
	</tr>

</table>

5.5）内嵌框架

内嵌框架用表示。是的子标记。
内嵌框架 inner frame：嵌入在一个页面上的框架
属性：

src="subframe/the_second.html"：内嵌的那个页面
width=800：宽度
height=“150：高度
scrolling="no"：是否需要滚动条。默认值是true。
name="mainFrame"：窗口名称。公有属性。

<iframe src="1.html"></iframe>

内嵌框架举例：在内嵌页面中切换显示不同的页面

 <body>
 	<a href="文字页面.html" target="myframe">默认显示文字页面</a><br>
 	<a href="图片页面.html" target="myframe">点击进入图片页面</a><br>
 	<a href="表格页面.html" target="myframe">点击进入表格页面</a><br>
 	<iframe src="文字页面.html" width="800" height="500" name="myframe"></iframe>
 </body>

效果展示：在内嵌页面中切换显示不同的页面.mp4

<body>
    <h4> 我是文字页面 </h4>
</body>

<body>
    <img src="https://linux.wuhanjiayou.cn/upload/dzx54l_7.webp" width="800" height="500">
</body>

    <table border=1>
        <tr>
            <td>千古壹号</td>
            <td>23</td>
            <td>男</td>
            <td>黄冈</td>
        </tr>
    
        <tr>
            <td>许嵩</td>
            <td>29</td>
            <td>男</td>
            <td>安徽</td>
        </tr>
    
        <tr>
            <td>邓紫棋</td>
            <td>23</td>
            <td>女</td>
            <td>香港</td>
        </tr>
    
    </table>

5.6）表单标签

表单标签用表示，用于与服务器的交互。
表单就是收集用户信息的，就是让用户填写的、选择的。
属性：

name：表单的名称，用于 JS 来操作或控制表单时使用；
id：表单的名称，用于 JS 来操作或控制表单时使用；
action：指定表单数据的处理程序，一般是 PHP，如：action=“login.php”
method：表单数据的提交方式，一般取值：get (默认) 和 post。

**注意：**表单和表格嵌套时，是在<form>标记中套<table>标记。
form 标签里面的 action 属性和 method 属性，在后续的 ajax 文章上再讲。
这里简单说一下：**action 属性 就是表示表单将提交到哪里。 ****method 属性 **表示用什么 HTTP 方法提交，有 get、post 两种。

:::info
Get 提交与 Post 提交的区别
**GET 方式：**将表单数据，以 “name=value” 形式追加到 action 指定的处理程序的后面，两者间用 “?” 隔开，每一个表单的 “name=value” 间用 “&” 号隔开。**特点：**只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于 ASCII 字符。
**POST 方式：**将表单数据直接发送(隐藏)到 action 指定的处理程序。POST 发送的数据不可见。Action 指定的处理程序可以获取到表单数据。**特点：**可以提交海量信息，相对来说安全一些，提交的数据格式是多样的 (Word、Excel、rar、img)。
:::
Enctype：
表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype 只能在 POST 方式下使用。

Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
Multipart/form-data：上传附件时，必须使用这种编码方式。
:::info
参考：https://www.runoob.com/tags/tag-form.html
:::

<form action="login.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

5.7）输入标签

输入标签：用于接收用户输入。

属性：

**type="属性值"**：文本类型。属性值可以是：
text（默认）
password：密码类型
radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的 name 属性。name 就是“名字”）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做 radio。
checkbox：多选按钮，**name 属性值相同的按钮 **作为一组进行选择。
checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type="radio"或者type=checkbox时，可以用这个属性。属性值也是 checked，可以省略。
hidden：隐藏框，在表单中包含不希望用户看见的信息
button：普通按钮，结合 js 代码进行使用。
submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
file：文件选择框。
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

**value="内容"**：文本框里的默认内容（已经被填好了的）
size="50"：表示文本框内可以显示 五十个字符。一个英文或一个中文都算一个字符。
注意 size 属性值的单位不是像素哦。
readonly：文本框只读，不能编辑。因为它的属性值也是 readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

	<form>
		姓名: <input value="呵呵" >逗比<br>
		昵称: <input value="哈哈" readonly=""><br>
		名字: <input type="text" value="name" disabled=""><br>
		密码: <input type="password" value="xxxxxx" size="50"><br>
		性别: <input type="radio" name="gender" id="radio1" value="male" checked="">男
			  <input type="radio" name="gender" id="radio2" value="female" >女<br>
		爱好: <input type="checkbox" name="love" value="eat">吃饭
			  <input type="checkbox" name="love" value="sleep">睡觉
			  <input type="checkbox" name="love" value="bat">打豆豆
	</form>

注意：多个单选框的 input 标签中，name 的属性值可以相同，但是 id 的属性值必须是唯一的。我们知道，html 的标签中，id 的属性值是唯一的。

四种按钮的举例：

	<form>
		<input type="button" value="普通按钮"><br>
		<input type="submit"  value="提交按钮"><br>
		<input type="reset" value="重置按钮"><br>
		<input type="image" value="图片按钮"><br>
		<input type="image" src="/https://blog.csdn.net/weixin_74962223/article/details/images/1.jpg" width="800" value="图片按钮2"><br>
		<input type="file" value="文件选择框">
	</form>

5.8）下拉列表标签

标签里面的每一项用表示。select 就是“选择”，option“选项”。

select 标签和 ul、ol、dl 一样，都是组标签。

标签的属性：

multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 multiple=“”，也可以写成 multiple=“multiple”。
size=“3”：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

标签的属性：

selected：预选中。没有属性值。

	<form>
		<select>
			<option>小学</option>
			<option>初中</option>
			<option>高中</option>
			<option>大学</option>
			<option selected="">研究生</option>
		</select>
		<br><br><br>

		<select size="3">
			<option>小学</option>
			<option>初中</option>
			<option>高中</option>
			<option>大学</option>
			<option>研究生</option>
		</select>
		<br><br><br>

		<select multiple="">
			<option>小学</option>
			<option>初中</option>
			<option selected="">高中</option>
			<option selected="">大学</option>
			<option>研究生</option>
		</select>
		<br><br><br>

	</form>

5.9）多行文本输入框

属性：

rows="4"：指定文本区域的行数。
cols="20"：指定文本区域的列数。
readonly：只读。

	<form>
		<textarea name="txtInfo" rows="4" cols="20">1. 不爱摄影不懂设计的程序猿不是一个好的产品经理. </textarea>
	</form>

5.10）表单的语义化

比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。

	<form>

		<fieldset>
		<legend>账号信息</legend>
		姓名: <input value="呵呵" >逗比<br>
		密码: <input type="password" value="pwd" size="50"><br>
		</fieldset>

		<fieldset>
		<legend>其他信息</legend>
		性别: <input type="radio" name="gender" value="male" checked="">男
			  <input type="radio" name="gender" value="female" >女<br>
		爱好: <input type="checkbox" name="love" value="eat">吃饭
			  <input type="checkbox" name="love" value="sleep">睡觉
			  <input type="checkbox" name="love" value="bat">打豆豆
		</fieldset>

	</form>

:::danger
**小技巧：**通过 F12 查看浏览器保存的密码
:::

6）HTML 多媒体标签

**声明：**多媒体包含：音频、视频、Flash。网页上的多媒体基本都是 Flash 格式的。
.wmv、.dat、.mob、.rmvb 等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。上述格式视频一般文件较大，不利于网络下载播放。一般情况下，是将其它的视频格式，转成 Flash 来在网页上播放。转换软件：格式工厂等。Flash 格式的视频兼容性非常好，Flash 格式的文件很小。

6.1）播放背景音乐：标签

属性：

src="音乐文件的路径"
loop="-1"：属性值代表播放次数，-1 代表循环播放。

  <bgsound src="music/雪-Distance.mp3"></bgsound>

在网上查找了资料，才知道这个标签只能在 IE 浏览器里面使用。很是郁闷啊）

6.2）播放多媒体文件：标签

主要应用 Netscape 浏览器，它不是 W3C 规范。

属性：

src="多媒体文件的路径"
loop="-1"：属性值代表播放次数，-1代表循环播放。
autostart="false"：打开网页时，禁止自动播放。默认值是true。
volume="100"：设置默认的音量大小，测试发现这个值好像不起作用哦。
width：指Flash文件的宽度
height：指Flash文件的高度
quality：指Flash的播放质量，质量有高有低 hight low
pluginspage：如果指定的 Flash 插件不存在，则从 pluginspage 指定的地方进行下载。
type：指定 Flash 的文件格式类型
wmode：指 Flash 的背景是否可以透明，取值：transparent是透明的

<embed src="music/雪-Distance.mp3" width="400" height="300" ></embed>

6.3）播放视频：标签

    <video width="800" height="600" controls>
        <source src="movie/1.mp4" type="video/mp4">
        您的浏览器不支持 video 标签.
    </video>

HTML 基础

1）HTML 基础介绍

1.1）Web 万维网

1.2）W3C 组织

1.3）介绍浏览器

1.4）HTML 概念

1.5）书写第一个 HTML 页面

1.6）案例展示

1.7）HTML 结构详解

1.8）计算机编码介绍

2）HTML 排版标签

2.1）标题标签

至

标签进行定义。

定义最大的标题，

定义最小的标题。 具有 align 属性，属性值可以是：left、center、right。

2.2）HTML 注释

2.3）段落标签

2.4）水平线标签

2.5）换行标签

2.6） 与 标签

2.7）内容居中标签

3）HTML 字体标签

3.1）特殊字符\转义字符（ HTML 实体编码 ）

3.2）超链接

4）HTML 图片标签

4.1）img 标签介绍

4.2）相对路径与绝对路径

4.3）img 标签的其他属性

5）HTML 列表标签（ 待完成 ）

5.1）无序列表

5.2）有序列表

5.3）定义列表

5.4）表格标签

5.5）内嵌框架

5.6）表单标签

5.7）输入标签

5.8）下拉列表标签

5.9）多行文本输入框

5.10）表单的语义化

6）HTML 多媒体标签

6.1）播放背景音乐： 标签

6.2）播放多媒体文件：标签

6.3）播放视频： 标签

定义最小的标题。
具有 align 属性，属性值可以是：left、center、right。

2.6）与标签

3.1）特殊字符\转义字符（ HTML 实体编码）

5）HTML 列表标签（待完成）

6.1）播放背景音乐：标签

6.3）播放视频：标签