语法篇--HTML

HTML（HyperText Markup Language，超文本标记语言）（超文本包括
文字、图片、音频、视频、动画等）是用于创建网页和其他网站内容的标准标记语言。HTML使用一系列标记或标签来描述页面内容和结构，并可以嵌入脚本语言（如JavaScript）和样式表（如CSS）来控制页面的外观和行为。

如今：HTML5

HTML可以引入CSS用于定义文本和其它元素的外观与布局 HTML
可以引入JS用于影响网页的行为

1.1W3C标准

        W3C标准是由万维网联盟（World Wide Web Consortium，简称W3C）制定和推广的Web技术标准，目的是推进Web技术的发展和普及，确保Web的跨平台、互操作性和可访问性。W3C标准包括HTML、CSS、XML、DOM、XHTML、SVG、Web API等多个方面，其中HTML是W3C标准中最基础、最重要的一个部分。

        W3C标准的制定过程是开放的、透明的，任何人都可以参与和提交建议，经过讨论和测试后最终被采纳为标准。W3C标准的实现可以保证Web技术的互操作性和可持续性，让不同的浏览器、操作系统和设备都能够正确解析和显示Web页面，提高用户体验和开发效率。

        W3C标准的遵循也是Web开发的基本原则之一，开发人员应该使用标准化的HTML、CSS和JavaScript代码，避免使用浏览器私有的特性和技术，保证Web页面的正确性、可访问性和可维护性。

1.2HTML的基础结构

HTML（Hypertext Markup Language）的基础结构通常由以下几个部分组成：

DOCTYPE 声明：用来指定 HTML 文档使用的版本和规范。

HTML 根元素：用 <html> 标签表示，包含整个 HTML 文档的内容。

头部信息：用 <head> 标签表示，包含了一些元数据信息和页面的其他设置，如文档标题、字符集、样式表和脚本等。

页面主体：用 <body> 标签表示，包含了文档的主要内容，如文本、图像、视频、音频和表单等。

HTML5用<!DOCTYPE>标签定义文档该基于何种标准在网页中呈现。<!DOCTYPE htmI>意味着该网页的呈现标准是基于HTML5。当使用该DOCTYPE声明方式时,浏览器会将此页面定义为标准兼容模式。

一个HTML元素通常由一个开始标签和结束标签组成，内容插入在HTML元素之间，可以嵌套（元素可以包含元素），所有HTML文档都由嵌套的HTML元素组成。

HTML标记不区分大小写：<P>与<p>相同 HTML5标准不要求标记小写，但W3C建议在HTML中使用小写。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <p>这是一个演示 HTML 基础结构的网页。</p>
</body>
</html>

演示

1.3HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。

URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

URL - 统一资源定位器
Web浏览器通过URL从Web服务器请求页面。

当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器(URL) 用于定位万维网上的文档。

一个网页地址实例: http://www.runoob.com/html/html-tutorial.html 语法规则:

scheme://host.domain:port/path/filename

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

常见的 URL Scheme

以下是一些URL scheme：

Scheme	访问	用于...
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

1.4Emmet

Emmet是一款可极大提升前端开发效率，支持众多编辑器的插件。其通过预定义的缩写语法，极大的简化了前端代码的输入量

Idea/VS Ccode默认已集成emmet插件

代码后按tab键而非enter，将按emmet语法解析

1.5lorem

您可以使用lorem在HTML中快速生成随机文本。在HTML中使用方法lorem + 单词数量，敲下回车键后即可生成相应数量的单词。例如，输入“lorem20”并按下回车键，将生成20个单词的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p title="我是工具">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aut deleniti dignissimos doloremque dolores doloribus ea, minima obcaecati pariatur provident.</p>
</body>
</html>

二、网页基本信息

2.1注释

HTML 注释使用  结束。在这两个符号之间的内容都被视为注释，不会被浏览器解析或显示。例如：

<!-- 这是一个 HTML 注释 -->

2.2文档类型声明

HTML文档类型声明（DOCTYPE declaration）是用来告诉浏览器当前 HTML 文档使用哪个 HTML 规范的标记。在 HTML 中，文档类型声明需要在 HTML 文档中的第一行进行声明，以便浏览器正确地渲染页面。

HTML5 的文档类型声明为

<!DOCTYPE html>

这表示使用 HTML5 规范来解析当前文档。在 HTML5 中，文档类型声明已经变得非常简单，只需要这一行声明即可。

2.3HTML 根元素

HTML 根元素（HTML root element）：用 <html> 标签表示，包含整个 HTML 文档的内容。

2.4页面标题（Page title）

页面标题（Page title）：用 <title> 标签表示，是浏览器标签页上显示的标题文字。

2.5页面元数据

<head>元素是元数据（关于数据的数据）的容器，放在<html>标签和<body>标签之间。
HTML元数据是关于HTML文档的数据。元数据不被显示。元数据通常定义文档的标题、字符集、样式、链接、脚本和其他元信息。(定义html文档的元数据，内容不在浏览器窗体内显示)
<title>/<style>/<meta>/<link>/<script>/<base>。

<title>元素定义了文档的标题，在所有的HTML/XHTML文档中都需要。
在浏览器标签中定义一个标题
当页面被添加到收藏夹时，为其提供一个标题
在搜索引擎结果中显示页面的标题
<meta>元素用于指定使用哪种字符集、页面描述、关键词、作者和其他元数据。元数据被浏览器（如何显示内容）、搜索引擎（关键词）和其他网络服务使用。
html文档的元数据，元数据会被浏览器解析，通常用于指定网页的字符集/描述/关键词/作者等。

2.5.1`meta`元素

<meta> 元素：用于描述页面的各种元数据信息，如字符集、关键字、描述等。其中，charset 属性用于指定字符集，name 和 content 属性用于指定其他元数据信息，例如：

<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="这是一个演示 HTML 页面元数据的页面。">

2.5.2`title` 元素

<title> 元素：用于定义页面的标题，会显示在浏览器的标题栏中。例如：

<title>这是页面的标题</title>

2.5.3`link` 元素

<link> 元素：用于定义与页面相关的其他资源，如 CSS 文件、图标文件等。例如：

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">

`2.5.4style` 元素

<style> 元素：用于定义页面的样式信息，可以直接写在 HTML 页面中，也可以引用外部样式表。例如：

<style>
  h1 {
    color: red;
  }
</style>

2.5.5base标签

1、<base>标签是一个单标签，位于<head>标签内，base标签为页面上的所有链接规定默认地址或默认目标。

一个HTML中最多使用一个<base>标签，当用多个<base>标签定义了href时，默认使用第一个<base>标签的href定义的地址。

2、常见的url路径形式分别有相对路径与绝对路径，对于相对URL，通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。但使用<base> 标签后，浏览器将不再使用当前文档的 URL，而使用<base> 标签指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

<base href="跳转链接" target="跳转方式" />

属性	值	描述
target	_blank _parent _self _top framename	在何处打开页面中所有的链接。

2.5.6阶段性测试一

<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="en"> <!-- 设置页面的语言为英语 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符集为 UTF-8 -->
    <meta name="keywords" content="HTML, CSS, JavaScript"> <!-- 定义页面关键字 -->
    <meta name="description" content="这是一个演示 HTML 页面元数据的页面。"> <!-- 定义页面描述信息 -->
    <title>这是页面的标题</title> <!-- 定义页面标题 -->
    <base href="https://www.bing.com/" target="_blank" />
    <style>
        h1 {
            color: red;
        }
    </style> <!-- 定义内部样式信息 -->
</head>
<body>
<h1>这是页面的标题</h1> <!-- 显示页面标题 -->
<p>这是一个演示 HTML 页面元数据的页面。</p> <!-- 显示页面内容 -->
<a href="search?q=html">点击这里搜索html</a>
</body>
</html>

在这个示例中，我们首先声明了 HTML5 的文档类型，然后定义了页面的语言为英语。在 <head> 元素中，我们设置了字符集为 UTF-8，并定义了页面的关键字和描述信息，以及标题。我们还链接了一个外部样式表文件和一个网站图标文件，并在页面中定义了一些内部样式。在 <body> 元素中，我们编写了一些基本的内容

2.6网页基本标签

2.6.1标题标签

HTML 标题标签用于定义标题，共有 6 种级别，从大到小依次为 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>。其中，<h1> 为最大的标题，通常用于整个页面的标题。

<body>
	<h1>这是一级标题</h1>
	<p>这是一级标题下的段落内容。</p>
	
	<h2>这是二级标题</h2>
	<p>这是二级标题下的段落内容。</p>
	
	<h3>这是三级标题</h3>
	<p>这是三级标题下的段落内容。</p>
	
	<h4>这是四级标题</h4>
	<p>这是四级标题下的段落内容。</p>
	
	<h5>这是五级标题</h5>
	<p>这是五级标题下的段落内容。</p>
	
	<h6>这是六级标题</h6>
	<p>这是六级标题下的段落内容。</p>
</body>

使用标题标签的好处是可以让页面内容更加结构化，方便用户和搜索引擎理解页面的重点和主题。标题标签生成粗体或大号的文本不仅可以用于页面标题，还可以用于文章、新闻、博客等各种文本内容的标题。

2.6.2段落标签

HTML 段落标签用于定义文本段落，常用的标签是 <p>。使用段落标签可以将文本内容按照段落结构组织起来，使页面更加易读和易于理解。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>段落标签示例</title>
</head>
<body>
	<h1>欢迎来到我的博客</h1>
	<p>这是我的第一篇博客，我将在这里分享一些有趣的事情。</p>
	<p>首先，让我们来了解一下什么是 HTML。</p>
	<p>HTML 是一种标记语言，它用于创建网页。HTML 中的标签可以用于定义网页的结构、文本、图片、链接等内容。</p>
	<p>下面是一些常用的 HTML 标签：</p>
	<ul>
		<li>标题标签：用于定义标题，共有 6 种级别。</li>
		<li>段落标签：用于定义文本段落。</li>
		<li>链接标签：用于创建链接，常用的标签是 <a>。</li>
		<li>图片标签：用于插入图片，常用的标签是 <img>。</li>
		<li>列表标签：用于创建列表，包括有序列表和无序列表。</li>
	</ul>
	<p>以上是一些 HTML 基础知识的介绍，如果你想学习更多的内容，可以参考一些相关的教程和书籍。</p>
</body>
</html>

我们使用了多个段落标签 <p> 来定义不同的文本段落。在浏览器中查看该页面时，可以看到每个段落之间有一定的间距，使文本内容更加清晰易读。

2.6.3换行标签

HTML 换行标签用于在文本中插入一个换行符，常用的标签是 <br>。与段落标签不同，换行标签不会产生新的段落，而是在同一行中将文本分为两行显示

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>换行标签示例</title>
</head>
<body>
	<h1>这是一个标题</h1>
	<p>这是一段文字，其中包含了<br>一个换行符。</p>
	<p>这是另一段文字，其中包含了<br><br>两个换行符。</p>
	<p>这是最后一段文字。</p>
</body>
</html>

我们在文本中使用了 <br> 标签插入了一个或多个换行符。在浏览器中查看该页面时，可以看到每个 <br> 标签产生了一个换行符，使文本在同一行中分成了多行显示。

需要注意的是，使用过多的 <br> 标签可能会导致文本显示不正常，建议在文本中仅使用必要的换行符。如果需要在文本中产生新的段落，应该使用段落标签 <p>

2.6.4水平线标签

HTML 水平线标签用于在页面中插入一条水平线，常用的标签是 <hr>。使用水平线标签可以将页面内容分隔开来，使页面更加易读和易于理解。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>水平线标签示例</title>
</head>
<body>
	<h1>欢迎来到我的博客</h1>
	<p>这是我的第一篇博客，我将在这里分享一些有趣的事情。</p>
	<hr>
	<h2>HTML 标签介绍</h2>
	<p>HTML 是一种标记语言，它用于创建网页。HTML 中的标签可以用于定义网页的结构、文本、图片、链接等内容。</p>
	<p>下面是一些常用的 HTML 标签：</p>
	<ul>
		<li>标题标签：用于定义标题，共有 6 种级别。</li>
		<li>段落标签：用于定义文本段落。</li>
		<li>链接标签：用于创建链接，常用的标签是 <a>。</li>
		<li>图片标签：用于插入图片，常用的标签是 <img>。</li>
		<li>列表标签：用于创建列表，包括有序列表和无序列表。</li>
	</ul>
	<hr>
	<p>以上是一些 HTML 基础知识的介绍，如果你想学习更多的内容，可以参考一些相关的教程和书籍。</p>
</body>
</html>

在上面的示例中，我们在两个标题标签 <h1> 和 <h2> 之间使用了 <hr> 标签插入了一条水平线。在浏览器中查看该页面时，可以看到两个标题标签之间有一条水平线，使页面内容分隔开来。

需要注意的是，使用过多的水平线标签可能会导致页面过于杂乱，建议在页面中仅使用必要的水平线。

2.6.5字体样式标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML 字体样式标签用于定义文本的字体、颜色、大小等样式，常用的标签包括 <b>、<i>、<u>、<s>、<font> 等。以下是这些标签的作用和示例：

<b>：用于将文本加粗显示，通常用于强调重要的内容。

<i>：用于将文本斜体显示，通常用于强调某个词语或短语

<u>：用于给文本添加下划线，通常用于标记重要的内容或链接。

<s>：用于给文本添加删除线，通常用于标记被删除或不再使用的内容。

<font>：用于设置文本的字体、颜色、大小等样式，但不推荐使用，建议使用 CSS 样式来代替。

<sup>	superscripted（上标）	上标
<sub>	subscripted（下标）	下标

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>字体样式标签示例</title>
</head>
<body>
  <h1>字体样式标签示例</h1>
  <p>
    这是一段普通的文本，<b>这里是加粗的文本</b>，
    <i>这里是斜体的文本</i>，
    <u>这里是带下划线的文本</u>，
    <s>这里是被删除的内容</s>。
  </p>

  <p>
    这是一段带字体、颜色和大小样式的文本：
    <font face="Arial" color="red" size="4">这里是 Arial 字体的红色大号文本</font>。
  </p>
</body>
</html>

需要注意的是，虽然这些标签可以用于设置文本的样式，但它们并不推荐使用。更好的做法是使用 CSS 样式来控制文本的样式，这样可以使代码更简洁、易于维护，并且具有更好的兼容性和可访问性

2.6.6预格式化标签<pre>

预格式化标签<pre>和</pre>可以将所标记的文本内容在显示时保留换行与空格
的排版效果。在没有使用该标签的普通情况下，浏览器将把多次回车键形成的换行默
认为一次换行，并且把多次空格键形成的连续空格默认为单个空格，在段落开头的连
续空格甚至会被忽略。当需要多次使用<br>和 符号分别进行换行和空格
时，可以考虑使用此标签提高效率。

<pre>
    《静夜思》

床前明月光，疑是地上霜。

举头望明月，低头思故乡。
</pre>

2.6.7特殊符号

在 HTML 中，有些字符被称为特殊符号（也称为实体字符），因为它们具有特殊的含义，如果要如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML特殊符号示例</title>
</head>
<body>
	<h1>HTML特殊符号示例</h1>
	<p>以下是6个常见的HTML特殊符号及其实体编码：</p>
	<ul>
		<li>&lt;：小于号，实体编码为 &amp;amp;lt; 或 &amp;#60;</li>
		<li>&gt;：大于号，实体编码为 &amp;amp;gt; 或 &amp;#62;</li>
		<li>&amp;：&amp; 符号，实体编码为 &amp;amp;amp; 或 &amp;#38;</li>
		<li>&quot;：双引号，实体编码为 &amp;amp;quot; 或 &amp;#34;</li>
		<li>&apos;：单引号，实体编码为 &amp;amp;apos; 或 &amp;#39;</li>
		<li>&nbsp;：不间断空格，实体编码为 &amp;amp;nbsp; 或 &amp;#160;</li>
	</ul>
</body>
</html>

这些特殊符号在 HTML 中有特殊的含义，如果要在 HTML 中直接使用它们，需要使用它们对应的实体编码。

2.6.8图像标签

常见图像格式

常见的图像格式有 JPEG、PNG、GIF、SVG 等

JPEG（Joint Photographic Experts Group）：JPEG 是一种有损压缩的图像格式，适用于存储照片等复杂图像，其压缩后的文件大小相对较小。JPEG 格式支持多种颜色，并且可以在不同的质量级别下保存图像。

PNG（Portable Network Graphics）：PNG 是一种无损压缩的图像格式，适用于存储具有透明度的图像和图标等。PNG 格式在保持图像质量的同时，压缩比例比较高，压缩后的文件大小相对较小。

GIF（Graphics Interchange Format）：GIF 是一种支持动画和透明背景的图像格式，适用于存储简单的图像和动画。GIF 格式支持多帧动画，并且可以在不同的调色板下保存图像。

SVG（Scalable Vector Graphics）：SVG 是一种基于 XML 的矢量图形格式，适用于存储图标和简单的矢量图形等。SVG 格式的文件大小相对较小，并且可以无损放大或缩小图像，保持图像质量。

BMP（Bitmap）：BMP 是一种无损压缩的图像格式，适用于存储位图图像，支持多种颜色深度和分辨率。但是 BMP 格式的文件大小较大，不适合在网络上传输。

不同的图像格式在不同的场景下有不同的应用。JPEG 适用于存储复杂的图像，PNG 适用于存储带有透明度的图像和图标，GIF 适用于存储简单的动画，BMP 和 TIFF 则适用于存储高品质的图像。

常见属性：

src：用于指定图像的 URL，必选属性。
alt：用于在图像无法显示时显示的替代文本。
title：用于在鼠标悬停在图像上时显示的文本。
width：用于指定图像的宽度。
height：用于指定图像的高度。

<img src="example.jpg" alt="This is an example image" title="Example Image" width="500" height="300">

在上面的例子中，src 属性指定了图像的 URL，alt 属性指定了图像无法显示时显示的替代文本，title 属性指定了鼠标悬停在图像上时显示的文本，width 和 height 属性分别指定了图像的宽度和高度。

2.6.9超链接标签

页面间链接

超链接标签在 HTML 中用于创建指向其他页面、文件、位置或资源的链接。HTML 超链接标签使用 <a> 标签来创建。

文本链接

只需将文本放置在 <a> 和 </a> 标记之间即可

<a href="https://www.example.com">Example Website</a>

图像链接

<a href="https://www.example.com"><img src="example.png" alt="Example"></a>

在HTML中，图像使用<img>标签定义。<img>标签是空的，只包含属性，没有结束标签。src属性指定图像的URL（网址）。如果用户由于网络连接缓慢、src属性中的错误或使用屏幕阅读器等原因无法查看图像，则alt属性提供了图像的替代文本。0

文本和图像组合

<a href="https://www.example.com"><img src="example.png" alt="Example">Example Website</a>

常见属性

href：指定链接目标的 URL。

target：指定在何处打开链接，常用取值有 _blank（在新窗口中打开）、_self（在当前窗口中打开，为默认值）、_parent（在父级窗口中打开）和_top（在顶级窗口中打开）。

title：提供有关链接目标的额外信息，这些信息通常在用户悬停或单击链接时显示。

download：指示链接目标应下载而不是在浏览器中打开，当该属性存在时，浏览器将提示用户下载文件，而不是在浏览器中打开链接目标。

锚链接

锚链接是指链接到同一页面内的某个特定位置的超链接。在 HTML 中，锚链接使用 <a> 标签与 href 属性组合使用，href 属性的值以 # 开头，后跟目标位置的 ID

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>基于锚链接的导航栏示例</title>
  </head>
  <body>
    <ul>
      <!-- 导航栏中的链接，使用 href 属性指向页面内的不同部分 -->
      <li><a href="#section1">第一部分</a></li>
      <li><a href="#section2">第二部分</a></li>
      <li><a href="#section3">第三部分</a></li>
    </ul>

    <!-- 第一部分，使用 id 属性指定一个唯一的 ID -->
    <h2 id="section1">第一部分</h2>
    <p>这是第一部分的内容。</p>

    <!-- 第二部分，使用 id 属性指定一个唯一的 ID -->
    <h2 id="section2">第二部分</h2>
    <p>这是第二部分的内容。</p>

    <!-- 第三部分，使用 id 属性指定一个唯一的 ID -->
    <h2 id="section3">第三部分</h2>
    <p>这是第三部分的内容。</p>
  </body>
</html>

功能性链接

邮件链接

功能性链接也可以用来创建邮件链接，使用户能够快速发送电子邮件。为此，我们可以使用 mailto: 协议来指定链接的目标地址。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>邮件链接示例</title>
  </head>
  <body>
    <a href="mailto:123456@qq.com">发送邮件给 QQ 邮箱</a>
  </body>
</html>

2.6.10块元素和行内元素

2.6.11列表标签

列表可以用于规范结构化文档/创建导航/侧边栏等)

无序列表（Unordered List）使用 <ul> 标签表示，其中的列表项使用 <li> 标签表示。无序列表一般用于表示一些没有顺序关系的列表，如下所示：

 <ul style="list-style: disc">
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
 </ul>

有序列表（Ordered List）使用 <ol> 标签表示，其中的列表项同样使用 <li> 标签表示，但是每个列表项前面会自动加上一个数字或字母，表示列表项的顺序关系，如下所示

<ol type = "1" start="2">
    <li >第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

有序列表标签<o|>默认的起始数值为1，可使用start属性重新定义编号起始值，格式为: <ol
start="n">。其中n需要替换成指定的编号数值，例如需要从3开始编号，则写成: <ol start="3">。
续空格甚至会被忽略。当需要多次使用<br>和 符号分别进行换行和空格
时，可以考虑使用此标签提高效率。

除了无序列表和有序列表，HTML 中还提供了定义列表（Definition List）的标签，使用 <dl> 表示，其中的定义列表项使用 <dt> 标签表示，定义列表项的定义部分使用 <dd> 标签表示。定义列表一般用于表示名词及其对应的解释

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
  <dt>JavaScript</dt>
  <dd>一种动态编程语言</dd>
</dl>

2.6.12表格标签

属性

<table>：定义一个表格。
<thead>：定义表格的表头。
<tbody>：定义表格的主体部分。
<tfoot>：定义表格的页脚部分。
<tr>：定义表格的行。
<th>：定义表格的表头单元格。
<td>：定义表格的数据单元格。
<caption>：定义表格的标题。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>表格示例</title>
  </head>
  <body>
    <h1>学生成绩单</h1>
    <table  border="1">
      <caption>成绩表</caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>89</td>
          <td>92</td>
          <td>87</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>78</td>
          <td>85</td>
          <td>92</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>95</td>
          <td>87</td>
          <td>91</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4">总计</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

跨列跨行

在 HTML 表格中，可以使用 colspan 和 rowspan 属性来合并单元格并创建跨列或跨行的表格单元格。

colspan 属性指定单元格应跨越的列数，而 rowspan 属性指定单元格应跨越的行数。

例如，如果要将单元格跨越 2 列，则可以将其 colspan 属性设置为 2，如下所示

<td colspan="2">跨越两列</td>

如果要将单元格跨越 3 行 2 列，则可以将其 colspan 属性设置为 2，rowspan 属性设置为 3，如下所示：

<td colspan="2" rowspan="3">跨越三行两列</td>

属性border

在HTML中，可以使用border属性来设置表格的边框。如果您想要在表格中的每个单元格周围添加1像素的黑色边框，可以使用以下代码：<table border="1">。这等同于CSS中的以下代码：table,table tr th, table tr td { border:1px solid #0094ff; }

2.6.13媒体元素

媒体元素是用于在 HTML 页面中嵌入视频、音频和图像等多媒体内容的标签。在 HTML5 中，新增了以下媒体元素：

<audio>：用于嵌入音频文件。
<video>：用于嵌入视频文件。
<picture>：用于嵌入一组可以根据设备分辨率和屏幕大小自适应显示的图像。
<source>：用于指定 <video> 和 <audio> 元素的源文件和类型。

这些媒体元素都有一些常用的属性，如：

src：指定媒体文件的 URL。
autoplay：自动播放媒体内容。
loop：循环播放媒体内容。
controls：显示浏览器默认的控件，如播放、暂停、音量等。

嵌入视频的示例：

<video src="example.mp4" controls>
  Your browser does not support the video tag.
</video>

在这个示例中，<video> 标签定义了一个视频元素，并通过 src 属性指定了要播放的视频文件。controls 属性将显示一个浏览器默认的控件，允许用户控制视频的播放、暂停、音量等。

嵌入音频文件的示例

 <audio src="../resources/打上花火.mp3" id="aud" autoplay="autoplay"  preload="auto"></audio>

在这个示例中，我们使用<audio>标签来嵌入音频文件。controls属性告诉浏览器显示音频控件，用户可以控制播放和暂停等操作。在<audio>标签中，我们使用<source>标签来指定音频文件的URL和类型。如果浏览器不支持指定的音频类型，我们可以提供一个替代的文本内容（在本例中是 "Your browser does not support the audio tag."）。这段文本会在音频文件无法播放时显示。

说明：

1、使用autoplay="autoplay"，则背景音乐将在音网页打开后就自动马上播放。

2、使用controls="controls"，则为了在页面内显示显示控件，如播放按钮。

3、使用"loop="loop"，则是为了是背景音乐重复播放。

4、使用preload="auto"，则音频在页面加载的同时进行加载，并预备播放。

5、使用src=""，即是在""内加入背景音乐的保存路径，如：src="web网页制作\03.mp3"。

2.6.14计算机输出标签

计算机输出标签指的是用于在HTML文档中呈现计算机程序代码的标签。常见的计算机输出标签包括<code>、<pre>和<samp>等。

<code>标签用于标记一段计算机代码，将其显示为等宽字体，并突出显示关键字和字符串等内容；
<pre>标签用于显示预格式化文本，包括计算机代码和其他文本格式，保留空格、制表符和换行符等格式；
<samp>标签用于显示样本输出，通常用于演示计算机程序的预期输出或示例输入，显示为等宽字体并突出显示标记或特殊字符。

使用这些标签可以使计算机程序代码在HTML文档中呈现更加清晰、易读，并且方便进行复制和粘贴。

2.7相关属性

2.7.1title属性

当鼠标悬浮于段落，将显示工具条提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p title="我是工具">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aut deleniti dignissimos doloremque dolores doloribus ea, minima obcaecati pariatur provident.</p>
</body>
</html>

注意

属性值内容包含双引号，因此属性使用单引号声明

三、页面结构分析

3.1网页结构

语义化标签，用于更好地组织页面内容的结构和语义。具体解释如下：

<header> 标签用于表示页面或页面的一部分的头部，通常包含标题、导航、搜索框等内容。
<footer> 标签用于表示页面或页面的一部分的底部，通常包含版权信息、联系方式等内容。
<section> 标签用于表示文档或应用程序中的一个独立部分，可以包含自己的标题，用于组织文章、主题、章节等内容。
<article> 标签用于表示页面中的一篇文章、一组文章或一个独立的内容块，通常包含标题、作者、发布日期、正文等内容。
<aside> 标签用于表示页面或页面的一部分的附属信息，通常放置在主要内容的旁边，可以包含相关链接、广告、侧栏等内容。
<nav> 标签用于表示页面或页面的一部分的导航链接，通常用于组织站点内部链接，可以包含菜单、标签、链接列表等内容。

使用这些语义化标签可以提高页面的可读性、可维护性和可访问性，有助于搜索引擎更好地理解页面的结构和内容。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>My Website</title>
</head>
<body>
	<header>
		<!-- 网站标题 -->
		<h1>My Website</h1>
		<nav>
			<!-- 导航栏，包含三个链接 -->
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>
<section>
	<article>
		<!-- 标题和内容1 -->
		<h2>Introduction</h2>
		<p>Welcome to my website! This is a place where I share my thoughts and ideas with the world.</p>
	</article>
	
	<article>
		<!-- 标题和内容2 -->
		<h2>Latest News</h2>
		<p>Check out my latest blog post on the importance of staying hydrated during the summer months.</p>
	</article>
	
	<aside>
		<!-- 侧边栏标题和链接 -->
		<h3>Categories</h3>
		<ul>
			<li><a href="#">Technology</a></li>
			<li><a href="#">Health</a></li>
			<li><a href="#">Travel</a></li>
		</ul>
	</aside>
</section>

<footer>
	<!-- 版权信息 -->
	<p>&copy; 2023 My Website. All Rights Reserved.</p>
</footer>
</body>
</html>

3.2iframe内联框架

在 HTML 中，可以使用 <iframe> 元素来嵌入另一个 HTML 文档。被嵌入的文档将会在一个独立的、可滚动的框架中展示。这种框架称为内联框架（Inline Frame，缩写为 iframe）。

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        width="560"
        height="315"
        frameborder="0"
        allowfullscreen></iframe>

常见的基本属性：

src：指定要嵌入的网页或媒体文件的URL。
width：指定iframe宽度。
height：指定iframe高度。
frameborder：指定边框是否可见，一般设为0隐藏边框。
allowfullscreen：指定是否允许全屏显示，一般用于视频播放。

3.3节点树

在HTML中，节点树指的是文档对象模型（DOM），它是HTML文档的一种树形结构表示方法。节点树由多个节点组成，包括元素节点、文本节点、属性节点等。元素节点表示HTML文档中的元素，文本节点表示HTML文档中的文本，属性节点表示HTML文档中的属性。这些节点根据它们在HTML文档中的位置组成树形结构，最终形成一个由根节点开始，由多个子节点组成的树形结构。在JavaScript中，可以使用DOM API来操纵节点树，实现对HTML文档的增、删、改、查等操作。

元素
HTML文档由HTML元素定义，HTML元素指的是从开始标签到结束标签的所有代码
开始标签常被称为起始标签(opening tag)，结束标签常称为闭合标签(closing tag)。
空元素
空元素即为没有内容的HTML元素。
HTML中常用的一个空元素为<br> (用于定义换行) ，<br> 元素就没有关闭标签。
空元素应当在开始标签中关闭，方法是在开始标签中添加斜杠,比如<br/>

3.4div元素和span元素

<div>元素和<span>元素都是HTML中的容器元素，用于划分HTML文档的区域并为其添加样式或脚本。其中<div>元素通常用于包含块级元素，如标题、段落和列表等，而<span>元素则通常用于包含行内元素，如文本和链接等。通过设置CSS样式和添加JavaScript脚本，可以轻松地对这些元素进行自定义和操作。

<div>是HTML中最常用的标签之一，它是用于将HTML文档分割为独立的、可控制的部分的容器。以下是一些常见的<div>基础属性：

class：为元素定义一个或多个类名，用于CSS样式的引用。
id：为元素定义唯一的ID，通常用于通过JavaScript获取和操作该元素。
style：为元素指定CSS样式。
title：为元素定义一个标题，通常用于添加鼠标悬停提示。

<!DOCTYPE html>
<!--声明文档类型为HTML5-->
<html>
<head>
	<meta charset="UTF-8">
	<!--设置字符集为UTF-8，以支持多语言-->
	<title>Div and Span Elements Example</title>
	<!--设置页面标题-->
	<style>
		/* CSS样式用于演示 */
		.box {
			width: 200px;
			height: 200px;
			background-color: gray;
			padding: 20px;
			margin: 10px;
		}
		.inline {
			color: red;
		}
		/*定义CSS样式，控制.box类和.inline类的外观*/
	</style>
</head>
<body>
	<div class="box">
		<!--定义一个DIV元素，类名为box-->
		<h1>This is a Div Element</h1>
		<!--在DIV元素中添加一个H1标题-->
		<p>A div element is a container that can be used to group other HTML elements together and apply styles to them as a group.</p>
		<!--在DIV元素中添加一段文本-->
	</div>
	<span class="inline">This is a Span Element</span>
	<!--定义一个SPAN元素，类名为inline-->
	<p>A span element is an inline container that can be used to apply styles to a specific portion of text within a larger block of text.</p>
	<!--在P元素中添加一段文本-->
</body>
</html>
<!--结束HTML文档-->

<span> 是一个行内元素，用于在文本中标记或包装特定的区域，从而使它们可以使用CSS样式或JavaScript进行处理。通常，<span> 元素用于更改文本的颜色、字体、样式或添加超链接等。

例如，可以使用以下代码将文本放在一个 <span> 元素中并将其样式设置为红色：

<p>这个文本中的 <span style="color: red;">这个词汇</span> 是红色的。</p>

3.5id和class

id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感到很迷茫，不知道什么时候用id,什么时候用class,甚至随便使用。1

（一）id 属性

id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。

我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此 id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。对于id和 class的命名，我们在CSS进阶部分会详细介绍。

（二）class属性

class,顾名思义，就是“类”。它釆用的思想跟C、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元素具有相同的CSS样式。

如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以减少大量的重复代码。

注意，对于一个元素而言，我们可以定义多个classo 一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。

对于id和class,我们总结一下：对于页面关键结构，建议使用id；对于小地方，建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id.以便搜索引擎识别页面结构。

3.6script标签

3.7data-*

Data-*属性，自定义数据属性，允许在所有HTML元素中嵌入自定义的数据属性，用于将数据存储在页面，可在JS中使用这些数据，从而创建出更具吸引力的用户体验 input hidden类型：可将值传递到服务器 Data-*属性：值仅存储在前端，为JS提供支持

四、表单

4.1表单初始

表单是一种HTML元素，用于收集和提交用户输入的数据。表单通常包括输入字段，如文本框、复选框、单选按钮、下拉列表等，以及提交按钮。以下是一些常用的表单元素：

<form>：定义一个表单。
<input>：定义输入字段。可以是文本框、密码框、单选按钮、复选框、文件上传框等。
<label>：定义输入字段的标签。
<select>：定义下拉列表。
<option>：定义下拉列表中的选项。
<textarea>：定义多行文本输入框。
<button>：定义按钮，可以用于提交表单、重置表单或执行自定义JavaScript代码。

表单元素可以通过属性进行配置和控制，以下是一些常用属性：

action：定义提交表单时的URL地址。
method：定义提交表单时使用的HTTP方法，通常为get或post。
name：定义输入字段的名称，用于在服务器端处理表单数据。
value：定义输入字段的默认值。
required：定义输入字段是否为必填项。
disabled：定义输入字段是否禁用。
readonly：定义输入字段是否只读。
multiple：定义下拉列表是否允许多选。

表单type

text：用于输入文本。
password：用于输入密码。
radio：用于选择单个选项。
checkbox：用于选择多个选项。
select：用于选择下拉列表中的选项。
submit：用于提交表单。
reset：用于重置表单。
file：用于上传文件。
date：用于输入日期。
email：用于输入邮箱地址。
hidden:

注意旧版网络浏览器不支持的新输入类型，将表现为<input type="text">.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>用户注册表单</title>
</head>
<body>
	<h1>用户注册表单</h1>
	<form action="#" method="post">
		<label for="name">姓名：</label>
		<input type="text" id="name" name="name" required><br><br>
		
		<label for="password">密码：</label>
		<input type="password" id="password" name="password" required><br><br>
		
		<label for="gender">性别：</label>
		<input type="radio" id="male" name="gender" value="male" checked>
		<label for="male">男</label>
		<input type="radio" id="female" name="gender" value="female">
		<label for="female">女</label><br><br>
		
		<label for="hobbies">爱好：</label>
		<select id="hobbies" name="hobbies" multiple>
			<option value="reading">读书</option>
			<option value="sports">运动</option>
			<option value="music">音乐</option>
			<option value="traveling">旅游</option>
		</select><br><br>
		
		<input type="submit" value="提交">
		<input type="reset" value="重置">
	</form>
</body>
</html>

在HTML表单中，有两种常见的提交方法：POST和GET。这两种方法都可以将表单数据发送到服务器端，但它们的实现方式有所不同。

POST方法将表单数据作为请求的主体内容发送到服务器，一般用于提交敏感信息，如用户名和密码等。POST方法的请求没有长度限制，可以提交大量数据，但速度比GET方法慢。

GET方法将表单数据作为URL的一部分发送到服务器，一般用于请求资源，如查询数据等。GET方法的请求有长度限制，一般不能超过2048个字符，所以不适用于提交大量数据。

在实际开发中，我们需要根据实际情况选择适合的提交方法。如果需要提交敏感信息或大量数据，应该使用POST方法，如果只需要请求资源或提交少量数据，可以使用GET方法。

4.2文本框和单选框

文本框

文本框用于让用户输入文本信息，而单选框用于让用户在一组选项中选择一个选项。

文本框的HTML代码使用<input>标签，type属性值为"text"表示文本框

<label for="name">姓名：</label>
<input type="text" id="name" name="name">

上述代码表示一个标签为“姓名”的文本框，其中id和name属性分别表示该元素的标识符和表单提交时的参数名称。

常用属性：

placeholder：占位符，表示在文本框中输入前的提示信息；
value：默认值，表示文本框的默认值；
maxlength：最大长度，表示用户能够在文本框中输入的最大字符数

单选框

单选框的HTML代码使用<input>标签，type属性值为"radio"表示单选框

<label>性别：</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

上述代码表示两个选项，分别为“男”和“女”，其中name属性表示这两个选项属于同一组，value属性表示选项的值。

常用属性：

checked：默认选中，表示单选框是否默认选中；
disabled：禁用，表示单选框是否禁用不可选。

4.3按钮和多选框

4.3.1按钮

按钮可以使用<button>标签或<input>标签的type属性来创建。<button>标签通常用于更复杂的按钮，可以包含文本、图像（src=""）或其他HTML元素，而<input>标签的type属性可以设置为button、submit、reset等来创建不同类型的按钮

以下代码创建了一个提交按钮和一个重置按钮：

<form>
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

无动作按钮

图片提交按钮

4.3.2多选框

多选框使用<input>标签的type属性设置为checkbox来创建。多选框允许用户从多个选项中进行选择，可以通过checked属性来指定默认选中的选项。

以下代码创建了一个包含三个选项的多选框：

<form>
  <input type="checkbox" name="hobby" value="reading" checked>阅读
  <input type="checkbox" name="hobby" value="sports">运动
  <input type="checkbox" name="hobby" value="music">音乐
</form>

在这个例子中，name属性设置为hobby，因此所有的选项都被视为hobby表单字段的值，并通过value属性指定每个选项的值。checked属性被指定在第一个选项上，这意味着它将在默认情况下被选中。

补充·label 元素

点击label 元素文本，浏览器会将焦点转到和标签相关的表单元素上。for 属性指定关联元素id属性值，实现联动操作

4.4列表框文本域和文件域

4.4.1列表框（select）

列表框用于输入多个选项，用户可以通过下拉列表中的选项来进行选择。下面是一个例子

<label for="fruits">请选择您喜欢的水果：</label>
<select id="fruits" name="fruits">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</select>

上面的代码中，select 元素的 id 属性和 name 属性都设置为 "fruits"，它们可以用于在后台获取用户选择的水果。 selected默认选择

<select> 元素用于创建一个下拉列表。<select> 元素中的 <option> 标签定义了列表中的可用选项。<optgroup> 用于在下拉列表中分组相关的选项。如果你有一个很长的选项列表，分组相关的选项会更容易让用户处理。selected 属性是一个布尔属性。当存在时，它指定了当页面加载时应该预先选择的选项。

4.4.2进阶<datalist> tag

即可从下列列表中选择，也可手动输入

4.4.3文本域（textarea）

文本域用于输入多行文本，例如留言板、评论等。下面是一个例子：

<label for="comment">请留言：</label>
<textarea id="comment" name="comment" rows="5" cols="30"></textarea>

上面的代码中，textarea 元素的 id 属性和 name 属性都设置为 "comment"，它们可以用于在后台获取用户输入的留言

文本区的大小可以通过cols和rows属性来指定，甚至更好；通过CSS的高度和宽度属性来指定。

4.4.4文件域（input type="file"）

文件域用于上传文件，例如图片、文档等。下面是一个例子：

<label for="file">请选择要上传的文件：</label>
<input type="file" id="file" name="file">

上面的代码中，input 元素的 type 属性设置为 "file"，表示它是一个文件域。id 属性和 name 属性都设置为 "file"，它们可以用于在后台获取用户上传的文件。注意，文件上传需要后台支持，这里只是展示 HTML 表单的相关元素。

accept属性，限制用户选择文件的类型，仅用作增加用户互交体验，服务器端仍需对文件进行验证后操作(HTML5已取消，强制由服务器端校验)

4.4.5域标签与域标题标签

HTML域标签指的是 <fieldset> 标签，它用于将表单中的相关元素分组显示，通常会有一个边框包围分组的内容。它可以与 <form> 标签配合使用，也可以单独使用。

HTML域标题标签指的是 <legend> 标签，它用于为 <fieldset> 标签定义一个标题，通常会显示在边框的上方。它必须作为 <fieldset> 标签的第一个子元素出现。

4.5搜索框滑块和简单验证

滑块

滑块（slider）是一个用户界面组件，可以通过拖动滑块来改变数值或选择项。在 HTML 中，可以使用 input 元素的 type 属性为 range 来创建滑块。

<label for="slider">选择一个值：</label>
<input type="range" id="slider" name="slider" min="0" max="10" value="5">

在上面的示例中，input 元素的 type 属性设置为 range，表示创建一个滑块。min 和 max 属性分别设置滑块的最小值和最大值，value 属性设置滑块的初始值。label 元素与 input 元素使用 for 和 id 属性相互关联，这样用户点击标签时，就可以聚焦到对应的 input 元素

搜索框

在HTML中，可以使用<input>元素的type="search"来创建搜索框。这种类型的搜索框通常会带有搜索按钮和清除按钮，方便用户输入和操作。

下面是一个简单的例子，展示如何使用type="search"创建一个搜索框

<form>
  <label for="search">Search:</label>
  <input type="search" id="search" name="search">
  <button type="submit">Search</button>
  <button type="reset">Clear</button>
</form>

在上面的例子中，我们使用<label>元素为搜索框添加了一个标签，以便于屏幕阅读器的使用。我们还在搜索框旁边添加了一个提交按钮和一个重置按钮，用于执行搜索操作和清除搜索框中的内容。

4.6隐藏域只读禁用

隐藏域、只读和禁用是表单元素的三种属性，它们可以通过HTML代码实现。

隐藏域（Hidden Field）是指在表单中不会被用户看到的输入框，用于存储一些与用户交互无关的数据，例如页面跳转前后需要保留的信息。隐藏域可以通过以下代码实现

<input type="hidden" name="hiddenField" value="hiddenValue">

.只读（Readonly）是指用户只能读取表单元素的值，无法修改。只读元素可以用于显示特定信息，防止用户误操作。只读属性可以通过以下代码实现

<input type="text" name="readOnlyField" value="readOnlyValue" readonly>

禁用（Disabled）是指表单元素无法被用户操作，用户无法输入或选择元素的值。禁用元素可以用于根据特定条件控制表单的使用。禁用属性可以通过以下代码实现：

<input type="text" name="disabledField" value="disabledValue" disabled>

需要注意的是，禁用元素不会被提交到服务器端，因此不会出现在表单数据中。

4.7表单的初级验证

表单验证是指在用户提交表单之前对用户输入的内容进行检查，以确保数据的合法性和正确性。在 HTML 中，可以通过一些属性来进行表单验证，如 placeholder、required 和 pattern。

placeholder：占位符，用于在文本框中提示用户应该输入什么内容。
required：必填项，指定表单元素必须填写才能提交。
pattern：模式匹配，可以使用正则表达式来指定表单元素中所允许的输入格式。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email" placeholder="请输入您的电子邮件地址" required>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" placeholder="请输入密码" required>

  <label for="phone">电话号码：</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入您的电话号码" pattern="^1[0-9]{10}$" required>

  <input type="submit" value="提交">
</form>

在这个例子中，我们使用了以下属性：

placeholder 属性来提示用户应该输入什么内容；
required 属性指定这些表单元素是必填项；
pattern 属性指定 phone 元素中所允许的输入格式，这里使用正则表达式限制输入格式为以数字 1 开头的 11 位数字。

这些属性可以帮助我们在客户端进行基本的表单验证，避免用户输入不合法或不正确的数据。但是需要注意的是，这些验证方法都是基于客户端的，因此仍然需要在服务器端对用户提交的数据进行验证，以确保数据的安全性和正确性。

4.8绝对路径和相对路径

在HTML中，URL（Uniform Resource Locator，统一资源定位符）是用来标识互联网上资源的唯一地址，包括文件、图片、视频等等。在HTML中，常常需要使用URL来引用外部的资源或链接到其他页面。

HTML中有两种方式来指定URL，即绝对路径和相对路径。

绝对路径是指完整的URL地址，包括协议、主机名、文件路径等等，如：

<img src="https://example.com/images/logo.png" alt="Logo">
<a href="https://example.com/about.html">About Us</a>

相对路径则是相对于当前HTML文件的URL路径，如

<img src="../images/logo.png" alt="Logo">
<a href="about.html">About Us</a>

在相对路径中，使用"../"表示上一级目录，使用"./"或者省略表示当前目录。

需要注意的是，相对路径和绝对路径都有各自的优缺点，具体使用时需要根据具体情况来选择

4.9新表单

4.9.1日期类

可以创建一个输入字段，让用户输入一个日期，可以是一个文本框或一个特殊的日期选择器界面。输入的值包括年、月和日，但不包括时间。如果你想支持时间和日期+时间输入，你可以使用 input=“time” 和 input=“datetime-local”。

4.9.2数字类

4.9.3电话号码类型tel

tel类型用于输入电话号码。该类型在PC端与普通单行文本框text类型没有任何区别，但是在手机移动端使用该类型输入时会显示数字键盘，提高了用户的体验。

4.9.4电子邮箱类型email

4.9.5搜索框类型search

搜索框类型search是一种 <input> 元素的类型，它与文本类型text非常相似，不同之处在于它们专门用于处理搜索条目。它们的行为基本相同，但是用户代理可以选择与默认样式不同的样式（当然，站点可以使用样式表向其应用自定义样式）

搜索框类型search支持以下属性

value：表示搜索字段中包含的值的字符串。
autocomplete：表示是否启用自动完成功能。
list：指定了一个 <datalist> 元素的 id ，用来提供输入建议。
maxlength：用户可以在搜索字段中输入的最大字符数（UTF-16 代码单元）。
minlength：用户可以在搜索字段中输入的最小字符数（UTF-16 代码单元）。
pattern：如果指定了 pattern 属性，为了使 value 通过约束验证，必须满足该属性给定的正则表达式。
placeholder：向用户提供有关该字段中需要什么样的信息的简短提示。
readonly：一个布尔属性，如果存在，则表示该字段不能由用户编辑。
size：一个数字值，指示输入字段应有多少个字符宽。
spellcheck：一个全局属性，用于指示是否启用元素的拼写检查。

<form>
    <!-- 创建一个带有输入建议的搜索框 -->
    <input type="search" id="searchText" placeholder="请输入关键词" list="suggestions">
    <datalist id="suggestions">
        <option value="HTML">
        <option value="CSS">
        <option value="JavaScript">
    </datalist>
    <!-- 创建一个提交按钮 -->
    <input type="submit" id="submitBtn" value="搜索">
</form>

4.9.6颜色类型color

颜色类型color是一种 <input> 元素的类型，它为用户提供了指定颜色的用户界面，或使用可视化颜色选择器，或以 #rrggbb 十六进制格式输入颜色值

颜色类型color支持以下属性

value：表示一个 7 个字符的指定 <color> 值的小写十六进制字符串。
autocomplete：表示是否启用自动完成功能。
list：指定了一个 <datalist> 元素的 id ，用来提供输入建议。
readonly：一个布尔属性，如果存在，则表示该字段不能由用户编辑。

<form>
    <label for="colorWell">选择颜色：</label>
    <input type="color" id="colorWell" value="#ff0000" list="presetColors">
    <datalist id="presetColors">
        <option value="#ff0000">
        <option value="#00ff00">
        <option value="#0000ff">
    </datalist>
</form>

4.9.7autocomplete属性

autocomplete属性是一个HTML属性，它允许web开发人员指定用户代理是否有权限在填写表单字段值时提供自动帮助，并指导浏览器填写该字段的预期信息类型。

autocomplete属性可以用于以文本或数字作为输入的 <input> 元素、 <textarea> 元素、 <select> 元素和 <form> 元素。

autocomplete属性有两种状态值，分别为"on" 和 “off”，表示是否启用自动完成功能2。如果省略该属性，或者将其值设置为"on"，则表示允许浏览器自动完成输入。如果将其值设置为"off"，则表示不允许浏览器自动完成输入。

注意：在大多数现代浏览器中，autocomplete设置为“off”不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。

除了"on" 和 “off"之外，autocomplete属性还可以接受一些特定的值，用来指定该字段中期望的数据类型，例如"name”、“email”、"tel"等。这样可以帮助浏览器提供更合适的输入建议

<form action="demo-form.php" autocomplete="on">
    <!-- 使用autocomplete属性指定期望的数据类型 -->
    姓名：<input type="text" name="name" autocomplete="name"><br>
    昵称：<input type="text" name="nickname" autocomplete="nickname"><br>
    生日：<input type="date" name="bday" autocomplete="bday"><br>
    性别：<input type="text" name="sex" autocomplete="sex"><br>
    电话：<input type="tel" name="tel" autocomplete="tel"><br>
    邮箱：<input type="email" name="email" autocomplete="email"><br>
    地址：<input type="text" name="address" autocomplete="street-address"><br>
    国家：<input type="text" name="country" autocomplete="country-name"><br>
    邮编：<input type="text" name="postal-code" autocomplete="postal-code"><br>
    <input type="submit">
</form>

4.9.8输出标签<output>

输出标签<output>是一个HTML5新增的标签，它用于显示某些计算的结果（由 JavaScript 执行）或用户操作的结果（例如将数据输入到表单元素中）

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0">
  +
  <input type="number" id="b" value="0">
  =
  <output name="x" for="a b">0</output>
</form>

4.10 HTML表单新增属性

4.10.1 autofocus属性

4.10.2表单重写属性formaction

4.10.3 max min step属性

4.10.4 multiple属性

4.10.5novalidate属性

取消对表单·的有效检查

4.10.6autocomplete属性

五、HTML5新增格式标签

5.1记号标签（没用）

<p>这是一个演示 HTML <mark>元数据</mark> 的页面。</p>

5.2 <meter>状态标签

<meter>状态标签是HTML5的一个新标签，它用于定义度量衡，仅用于已知最大最小的度量。它可以用来显示实时状态，比如气压或气温

<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
value：当前值
min：最小值，当真实值小于此值时，用此值
max：最大值，当真实值大于此值时，用此值
low：最小安全值，小于此值时报警
high：最大安全值，大于此值时报警
optimum：最优值

value属性的值由外部输入，可以使用JavaScript来获取和设置value属性

5.3 <progress>进度标签

HTML <progress>进度标签是HTML5的一个新标签，它用于显示一项任务的完成进度1。它可以用来显示文件上传或下载的进度，或者作为一种加载状态条使用。

HTML <progress>进度标签有以下属性：

value：当前值
max：最大值

<progress value="30" max="100"></progress>

<progress max="100"></progress>
如果没有value属性，那么该进度条的进度为"不确定"，也就是说，进度条不会显示任何进度，你无法估计当前的工作会在何时完成

六、HTML5新增API

拖放：实现元素的拖放；（JS讨论）
画布：实现2D和3D绘图效果；（JS讨论）
音频和视频：实现自带控件播放音频和视频；
表单：新增一系列输入类型，例如电话号码、数字范围、email地址等；
地理定位：使用浏览器进行地理位置经纬度的定位；（JS讨论）
Web存储：实现本地持久化存储大量数据；

6.1canvas标签

Canvas 标签是 HTML5 中的一个新特性，它可以用来在网页上绘制图形，如图表、动画、游戏等。Canvas 标签本身只是一个图形容器，要绘制图形，必须使用 JavaScript 脚本来操作 Canvas 对象。Canvas 对象提供了多种绘制方法，如绘制路径、矩形、圆形、文本、渐变、图像等

炫酷鼠标跟随动画

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>鼠标屏幕互动动画</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #canvas {
      background: #000;
    }
  </style>
</head>

<body>
<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById('canvas'),
          ctx = canvas.getContext('2d'),
          WIDTH = canvas.width = document.documentElement.clientWidth,
          HEIGHT = canvas.height = document.documentElement.clientHeight,
          para = {
            num: 100,
            color: false, //  颜色  如果是false 则是随机渐变颜色
            radius: 0.9,
            o: 0.09, //  判断圆消失的条件，数值越大，消失的越快
          },
          color,
          circleColor,
          round_arr = [];

  window.onmousemove = function(event) {
    X = event.clientX
    Y = event.clientY

    round_arr.push({
      X: X,
      Y: Y,
      radius: para.radius,
      o: 1
    })
  }

  // 判断参数中是否设置color，设置则使用该color，否则为随机
  if (para.color) {
    circleColor = para.color
  } else {
    color = Math.random() * 360
  }

  function animate() {
    if (!para.color) {
      color += .1
      circleColor = 'hsl(' + color + ',100%,80%)'
    }

    ctx.clearRect(0, 0, WIDTH, HEIGHT) // 清除屏幕

    for (var i = 0; i < round_arr.length; i++) {
      ctx.fillStyle = circleColor
      ctx.beginPath() // 开始路径
      ctx.arc(round_arr[i].X, round_arr[i].Y, round_arr[i].radius, 0, Math.PI * 2) // 画圆
      ctx.closePath() // 结束路径
      ctx.fill()
      round_arr[i].radius += para.radius // 增大圆
      round_arr[i].o -= para.o //  消失时间变快

      if (round_arr[i].o <= 0) {
        round_arr.splice(i, 1);
        i--;
      }
    }

    window.requestAnimationFrame(animate)
  }

  animate()
</script>
</body>

</html>

6.2video标签

Video 标签是 HTML5 中的一个新特性，它可以用来在网页上嵌入视频，比如电影片段或其他视频流。Video 标签支持三种视频格式：MP4、WebM 和 Ogg。Video 标签有多个属性，可以用来控制视频的尺寸、播放、循环、静音等。Video 标签也可以使用 JavaScript 来操作，实现更多的功能和效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video 标签示例</title>
  <style>
    /* 设置视频的样式 */
    #video {
      width: 600px;
      height: 400px;
      border: 1px solid black;
      background-color: black;
    }
    /* 设置控制栏的样式 */
    #controls {
      width: 600px;
      height: 50px;
      background-color: gray;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    /* 设置按钮的样式 */
    button {
      width: 100px;
      height: 30px;
      font-size: 16px;
      cursor: pointer;
    }
    /* 设置进度条的样式 */
    #progress {
      width: 400px;
      height: 10px;
      background-color: white;
      position: relative;
    }
    /* 设置进度条的指示器的样式 */
    #indicator {
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: -2px;
    }
  </style>
</head>
<body>
<h1>Video 标签示例</h1>
<!-- 创建一个 video 元素，指定 id、宽度、高度和源文件 -->
<video id="video" width="600" height="400" src="https://www.bilibili.com/video/BV1NE411Q7Nx?t=8.5"></video>
<!-- 创建一个 div 元素，作为控制栏，包含四个按钮和一个进度条 -->
<div id="controls">
  <!-- 创建一个 button 元素，用于播放视频 -->
  <button id="play">播放</button>
  <!-- 创建一个 button 元素，用于暂停视频 -->
  <button id="pause">暂停</button>
  <!-- 创建一个 button 元素，用于静音视频 -->
  <button id="mute">静音</button>
  <!-- 创建一个 button 元素，用于取消静音视频 -->
  <button id="unmute">取消静音</button>
  <!-- 创建一个 div 元素，作为进度条，包含一个 div 元素作为指示器 -->
  <br>
  <div id="progress">
    <div id="indicator"></div>
  </div>
</div>
<script>
  // 获取 video 元素
  var video = document.getElementById("video");
  // 获取控制按钮
  var play = document.getElementById("play");
  var pause = document.getElementById("pause");
  var mute = document.getElementById("mute");
  var unmute = document.getElementById("unmute");
  // 获取进度条和指示器
  var progress = document.getElementById("progress");
  var indicator = document.getElementById("indicator");
  // 定义一个变量，表示视频是否静音
  var isMuted = false;

  // 给播放按钮添加点击事件监听器
  play.addEventListener("click", function() {
    // 播放视频
    video.play();
  });

  // 给暂停按钮添加点击事件监听器
  pause.addEventListener("click", function() {
    // 暂停视频
    video.pause();
  });

  // 给静音按钮添加点击事件监听器
  mute.addEventListener("click", function() {
    // 静音视频
    video.muted = true;
    // 设置静音状态为真
    isMuted = true;
  });

  // 给取消静音按钮添加点击事件监听器
  unmute.addEventListener("click", function() {
    // 取消静音视频
    video.muted = false;
    // 设置静音状态为假
    isMuted = false;
  });

  // 给视频添加时间更新事件监听器
  video.addEventListener("timeupdate", function() {
    // 获取视频的当前时间和总时长
    var currentTime = video.currentTime;
    var duration = video.duration;

    // 计算进度百分比
    var percentage = currentTime / duration *100;

    // 设置指示器的左边距为百分比乘以进度条宽度减去指示器宽度的一半
    indicator.style.left = percentage * progress.offsetWidth - indicator.offsetWidth / 2 + "px";
  });

  // 给进度条添加点击事件监听器
  progress.addEventListener("click", function(event) {
    // 获取鼠标点击的位置相对于进度条左边缘的距离
    var distance = event.clientX - progress.offsetLeft;
    // 计算距离占进度条宽度的百分比
    var percentage = distance / progress.offsetWidth;
    // 设置视频的当前时间为百分比乘以视频总时长
    video.currentTime = percentage * video.duration;
  });
</script>
</body>
</html>

6.3audio标签

Audio 标签是 HTML5 中的一个新特性，它可以用来在网页上嵌入音频，比如音乐或其他音频流。Audio 标签支持三种音频格式：MP3、Wav 和 Ogg。Audio 标签有多个属性，可以用来控制音频的尺寸、播放、循环、静音等。Audio 标签也可以使用 JavaScript 来操作，实现更多的功能和效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Audio 标签示例</title>
  <style>
    /* 设置音频的样式 */
    #audio {
      width: 600px;
      height: 50px;
      border: 1px solid black;
      background-color: black;
    }
    /* 设置控制栏的样式 */
    #controls {
      width: 600px;
      height: 50px;
      background-color: gray;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    /* 设置按钮的样式 */
    button {
      width: 80px;
      height: 30px;
      font-size: 16px;
      cursor: pointer;
    }
    /* 设置进度条的样式 */
    #progress {
      width: 400px;
      height: 10px;
      background-color: white;
      position: relative;
    }
    /* 设置进度条的指示器的样式 */
    #indicator {
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: -2px;
    }
  </style>
</head>
<body>
<h1>Audio 标签示例</h1>
<!-- 创建一个 audio 元素，指定 id、宽度、高度和源文件 -->
<audio id="audio" width="600" height="50" src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"></audio>
<!-- 创建一个 div 元素，作为控制栏，包含四个按钮和一个进度条 -->
<div id="controls">
  <!-- 创建一个 button 元素，用于播放音频 -->
  <button id="play">播放</button>
  <!-- 创建一个 button 元素，用于暂停音频 -->
  <button id="pause">暂停</button>
  <!-- 创建一个 button 元素，用于静音音频 -->
  <button id="mute">静音</button>
  <!-- 创建一个 button 元素，用于取消静音音频 -->
  <button id="unmute">取消静音</button>
  <!-- 创建一个 div 元素，作为进度条，包含一个 div 元素作为指示器 -->
  <div id="progress">
    <div id="indicator"></div>
  </div>
</div>
<script>
  // 获取 audio 元素
  var audio = document.getElementById("audio");
  // 获取控制按钮
  var play = document.getElementById("play");
  var pause = document.getElementById("pause");
  var mute = document.getElementById("mute");
  var unmute = document.getElementById("unmute");
  // 获取进度条和指示器
  var progress = document.getElementById("progress");
  var indicator = document.getElementById("indicator");
  // 定义一个变量，表示音频是否静音
  var isMuted = false;

  // 给播放按钮添加点击事件监听器
  play.addEventListener("click", function() {
    // 播放音频
    audio.play();
  });

  // 给暂停按钮添加点击事件监听器
  pause.addEventListener("click", function() {
    // 暂停音频
    audio.pause();
  });

  // 给静音按钮添加点击事件监听器
  mute.addEventListener("click", function() {
    // 静音音频
    audio.muted = true;
    // 设置静音状态为真
    isMuted = true;
  });

  // 给取消静音按钮添加点击事件监听器
  unmute.addEventListener("click", function() {
    // 取消静音音频
    audio.muted = false;
    // 设置静音状态为假
    isMuted = false;
  });

  // 给音频添加时间更新事件监听器
  audio.addEventListener("timeupdate", function() {
    // 获取音频的当前时间和总时长
    var currentTime = audio.currentTime;
    var duration = audio.duration;

    // 计算进度百分比
    var percentage = currentTime / duration *100;

    // 设置指示器的左边距为百分比乘以进度条宽度减去指示器宽度的一半
    indicator.style.left = percentage * progress.offsetWidth - indicator.offsetWidth / 2 + "px";
  });

  // 给进度条添加点击事件监听器
  progress.addEventListener("click", function(event) {
    // 获取鼠标点击的位置相对于进度条左边缘的距离
    var distance = event.clientX - progress.offsetLeft;
    // 计算距离占进度条宽度的百分比
    var percentage = distance / progress.offsetWidth;
    // 设置音频的当前时间为百分比乘以音频总时长
    audio.currentTime = percentage * audio.duration;
  });
</script>
</body>
</html>

6.4Keygen 标签

Keygen 标签是 HTML5 中的一个新特性，它可以用来在网页上生成密钥对，用于加密或认证的目的。Keygen 标签的用法是在表单中添加一个 <keygen> 元素，指定一些属性，如 name、keytype、challenge 等。当用户提交表单时，浏览器会自动创建一个公钥和一个私钥，并将公钥发送到服务器，而私钥存储在本地。

七、美工基础

7.1认识色彩

7.1.1色相

色相是指色彩的外相，是人眼感觉到的不同颜色，如红色、橙色、黄色、绿色、蓝色、紫色等。色相是由光的波长和频率决定的，不同波长的光对应不同的色相。色相可以用一个圆形的色轮来表示，其中相对的两个颜色称为互补色，如红色和绿色，蓝色和橙色等。互补色在一起可以产生强烈的对比效果。

7.1.2明度

明度是指色彩的明暗程度，也称为光度。不同的色彩模型有不同的方式来表示和计算明度。例如，在HSL色彩模型中，明度是色彩的最大和最小分量的平均值；在HSV色彩模型中，明度是色彩的最大分量；在CIELAB色彩空间中，明度是L*分量，表示从黑色到白色的感知亮度。

明度可以影响色彩的视觉效果和情感表达。一般来说，明度高的色彩给人以轻松、愉快、活泼的感觉；明度低的色彩给人以沉重、压抑、沉闷的感觉。明度也可以用来创造空间感和透视感，通过对远近物体的明度进行调节，可以使画面产生深度和层次。

7.1.3纯度

纯度是指色彩的纯净程度、饱和程度。纯度越高，色彩越鲜艳、越明亮；纯度越低，色彩越灰暗、越暗淡。纯度可以用一个三角形的色锥来表示，其中顶点是白色，底面是色轮，从顶点到底面的距离表示纯度的变化。

纯度可以影响色彩的视觉效果和情感表达。一般来说，纯度高的色彩给人以强烈、热情、活力的感觉；纯度低的色彩给人以柔和、冷静、沉稳的感觉。纯度也可以用来创造空间感和氛围，通过对远近物体的纯度进行调节，可以使画面产生透明感和光影效果。