烟雨平生9527
烟雨平生9527

语法篇--HTML

目录

一、初始HTML

1.1W3C标准

1.2HTML的基础结构

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

1.4Emmet

1.5lorem

二、网页基本信息

2.1注释

2.2文档类型声明

2.3HTML 根元素

2.4页面标题（Page title）

2.5页面元数据

2.5.1meta元素

2.5.2title 元素

2.5.3link 元素

2.5.4style 元素

2.5.5base标签

​2.5.6阶段性测试一 

2.6网页基本标签

2.6.1标题标签

2.6.2段落标签

2.6.3换行标签

2.6.4水平线标签

2.6.5字体样式标签

2.6.6预格式化标签

 2.6.7特殊符号

2.6.8图像标签

 2.6.9超链接标签

页面间链接

锚链接

功能性链接

2.6.10块元素和行内元素

 2.6.11列表标签

 2.6.12表格标签

2.6.13媒体元素

2.6.14计算机输出标签

2.7相关属性

2.7.1title属性

三、页面结构分析

3.1网页结构

3.2iframe内联框架 

3.3节点树

3.4div元素和span元素

3.5id和class

（一）id 属性

（二）class属性

3.6script标签

3.7data-*

四、表单

4.1表单初始

4.2文本框和单选框

4.3按钮和多选框

4.3.1按钮

无动作按钮

 图片提交按钮

​编辑4.3.2多选框 

补充·label 元素

4.4列表框文本域和文件域

4.4.1列表框（select）

4.4.2进阶 tag

4.4.3文本域（textarea）

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

4.4.5域标签与域标题标签

 4.5搜索框滑块和简单验证

4.6隐藏域 只读 禁用

4.7表单的初级验证

4.8绝对路径和相对路径

4.9新表单

 4.9.1日期类 

4.9.2数字类

4.9.3电话号码类型tel

4.9.4电子邮箱类型email

​4.9.5搜索框类型search

4.9.6颜色类型color

4.9.7autocomplete属性

4.9.8输出标签

 4.10 HTML表单新增属性

4.10.1 autofocus属性

4.10.2表单重写属性formaction 

 4.10.3 max min step属性 

 4.10.4 multiple属性

4.10.5novalidate属性

五、HTML5新增格式标签

5.1记号标签（没用）

5.2状态标签.

​5.3进度标签 

一、初始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页面的正确性、可访问性和可维护性。

语法篇--HTML_第1张图片

1.2HTML的基础结构

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

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

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

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

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

语法篇--HTML_第2张图片

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

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

 HTML标记不区分大小写：

与

相同 HTML5标准不要求标记小写，但W3C建议在HTML中使用小写。




    
    我的网页


    
欢迎来到我的网页！

    
这是一个演示 HTML 基础结构的网页。

演示

语法篇--HTML_第3张图片

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

URL 是一个网页地址。

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

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

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

一个统一资源定位器(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 您计算机上的文件。

语法篇--HTML_第4张图片

1.4Emmet

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

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

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

语法篇--HTML_第5张图片

1.5lorem

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




    
    Title




Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aut deleniti dignissimos doloremque dolores doloribus ea, minima obcaecati pariatur provident.

二、网页基本信息

2.1注释

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

2.2文档类型声明

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

HTML5 的文档类型声明为

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

2.3HTML 根元素

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

2.4页面标题（Page title）

页面标题（Page title）：用 </code> 标签表示，是浏览器标签页上显示的标题文字。</p> </blockquote> <h2 id="2.5%E9%A1%B5%E9%9D%A2%E5%85%83%E6%95%B0%E6%8D%AE">2.5页面元数据</h2> <blockquote> <p><head>元素是元数据（关于数据的数据）的容器，放在<html>标签和<body>标签之间。<br> HTML元数据是关于HTML文档的数据。元数据不被显示。元数据通常定义文档的标题、字符集、样式、链接、脚本和其他元信息。(定义html文档的元数据，内容不在浏览器窗体内显示)<br> <title>/<style>/<meta>/<link>/<script>/<base>。</p> <p></p> <p><title>元素定义了文档的标题，在所有的HTML/XHTML文档中都需要。<br> 在浏览器标签中定义一个标题<br> 当页面被添加到收藏夹时，为其提供一个标题<br> 在搜索引擎结果中显示页面的标题<br> <meta>元素用于指定使用哪种字符集、页面描述、关键词、作者和其他元数据。元数据被浏览器（如何显示内容）、搜索引擎（关键词）和其他网络服务使用。<br> html文档的元数据，元数据会被浏览器解析，通常用于指定网页的字符集/描述/关键词/作者等。</p> </blockquote> <h3 id="2.5.1%3Cmeta%3E%20%E5%85%83%E7%B4%A0">2.5.1<code>meta</code>元素</h3> <p><code><meta></code> 元素：用于描述页面的各种元数据信息，如字符集、关键字、描述等。其中，<code>charset</code> 属性用于指定字符集，<code>name</code> 和 <code>content</code> 属性用于指定其他元数据信息，例如：</p> <pre><code class="language-html"><meta charset="UTF-8"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="description" content="这是一个演示 HTML 页面元数据的页面。"> </code></pre> <h3 id="2.5.2%3Ctitle%3E%20%E5%85%83%E7%B4%A0">2.5.2<code>title</code> 元素</h3> <p><code><title></code> 元素：用于定义页面的标题，会显示在浏览器的标题栏中。例如：</p> <pre><code class="language-html"><title>这是页面的标题

2.5.3link 元素

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

2.5.4style 元素

2.5.5base标签

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

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

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

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

语法篇--HTML_第6张图片2.5.6阶段性测试一 

 
 

     
     
     
    这是页面的标题 
    
     



这是页面的标题
 

这是一个演示 HTML 页面元数据的页面。
 
点击这里搜索html

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

2.6网页基本标签

2.6.1标题标签

HTML 标题标签用于定义标题，共有 6 种级别，从大到小依次为

、

、

、

、
和
。其中，

为最大的标题，通常用于整个页面的标题。


	
这是一级标题

	
这是一级标题下的段落内容。

	
	
这是二级标题

	
这是二级标题下的段落内容。

	
	
这是三级标题

	
这是三级标题下的段落内容。

	
	
这是四级标题

	
这是四级标题下的段落内容。

	
	
这是五级标题

	
这是五级标题下的段落内容。

	
	
这是六级标题

	
这是六级标题下的段落内容。

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

2.6.2段落标签

HTML 段落标签用于定义文本段落，常用的标签是

。使用段落标签可以将文本内容按照段落结构组织起来，使页面更加易读和易于理解。




	
	段落标签示例


	
欢迎来到我的博客

	
这是我的第一篇博客，我将在这里分享一些有趣的事情。

	
首先，让我们来了解一下什么是 HTML。

	
HTML 是一种标记语言，它用于创建网页。HTML 中的标签可以用于定义网页的结构、文本、图片、链接等内容。

	
下面是一些常用的 HTML 标签：

	
	
以上是一些 HTML 基础知识的介绍，如果你想学习更多的内容，可以参考一些相关的教程和书籍。

我们使用了多个段落标签

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

2.6.3换行标签

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




	
	换行标签示例


	
这是一个标题

	
这是一段文字，其中包含了
一个换行符。

	
这是另一段文字，其中包含了

两个换行符。

	
这是最后一段文字。

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

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

2.6.4水平线标签

HTML 水平线标签用于在页面中插入一条水平线，常用的标签是

。使用水平线标签可以将页面内容分隔开来，使页面更加易读和易于理解。




	
	水平线标签示例


	
欢迎来到我的博客

	
这是我的第一篇博客，我将在这里分享一些有趣的事情。

	

	
HTML 标签介绍

	
HTML 是一种标记语言，它用于创建网页。HTML 中的标签可以用于定义网页的结构、文本、图片、链接等内容。

	
下面是一些常用的 HTML 标签：

	
	

	
以上是一些 HTML 基础知识的介绍，如果你想学习更多的内容，可以参考一些相关的教程和书籍。

在上面的示例中，我们在两个标题标签

和

之间使用了
标签插入了一条水平线。在浏览器中查看该页面时，可以看到两个标题标签之间有一条水平线，使页面内容分隔开来。

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

2.6.5字体样式标签

标签 描述
定义粗体文本
定义着重文字
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字

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

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

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

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

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

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

superscripted（上标） 上标
subscripted（下标） 下标 



  
  字体样式标签示例


  
字体样式标签示例

  

    这是一段普通的文本，这里是加粗的文本，
    这里是斜体的文本，
    这里是带下划线的文本，
    这里是被删除的内容。
  


  

    这是一段带字体、颜色和大小样式的文本：
    这里是 Arial 字体的红色大号文本。

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

语法篇--HTML_第7张图片

2.6.6预格式化标签




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




    《静夜思》

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

举头望明月，低头思故乡。



 2.6.7特殊符号


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






显示结果
描述
实体名称
实体编号





空格
 
 




<
小于号
<
<




>
大于号
>
>




&
和号
&
&




"
引号
"
"




'
撇号 
' (IE不支持)
'




￠
分
¢
¢




£
镑
£
£




¥
人民币/日元
¥
¥




€
欧元
€
€




§
小节
§
§




©
版权
©
©




®
注册商标
®
®




™
商标
™
™




×
乘号
×
×




÷
除号
÷
÷









	
	HTML特殊符号示例


	
HTML特殊符号示例

	
以下是6个常见的HTML特殊符号及其实体编码：

	
    
		
  • <：小于号，实体编码为 &amp;lt; 或 &#60;
    • 
		
  • >：大于号，实体编码为 &amp;gt; 或 &#62;
    • 
		
  • &：& 符号，实体编码为 &amp;amp; 或 &#38;
    • 
		
  • "：双引号，实体编码为 &amp;quot; 或 &#34;
    • 
		
  • '：单引号，实体编码为 &amp;apos; 或 &#39;
    • 
		
  •  ：不间断空格，实体编码为 &amp;nbsp; 或 &#160;
    • 
	






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


2.6.8图像标签


常见图像格式




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


    

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

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

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

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

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



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






常见属性：


    

  1. src：用于指定图像的 URL，必选属性。
    2. 

  2. alt：用于在图像无法显示时显示的替代文本。
    3. 

  3. title：用于在鼠标悬停在图像上时显示的文本。
    4. 

  4. width：用于指定图像的宽度。
    5. 

  5. height：用于指定图像的高度。
    6. 





This is an example image



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


语法篇--HTML_第8张图片


 2.6.9超链接标签


页面间链接


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


语法篇--HTML_第9张图片


文本链接


 只需将文本放置在  和  标记之间即可


Example Website



图像链接


Example





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




文本和图像组合


ExampleExample Website



常见属性




href：指定链接目标的 URL。


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


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


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




锚链接


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




  
    
    基于锚链接的导航栏示例
  
  
    

    
    
第一部分

    
这是第一部分的内容。


    
    
第二部分

    
这是第二部分的内容。


    
    
第三部分

    
这是第三部分的内容。

  




功能性链接


邮件链接


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




  
    
    邮件链接示例
  
  
    发送邮件给 QQ 邮箱
  



2.6.10块元素和行内元素


语法篇--HTML_第10张图片


 2.6.11列表标签


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


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

     
      
        
    • 苹果
      • 
        
    • 香蕉
      • 
        
    • 橙子
      • 
 
    

    语法篇--HTML_第11张图片
    

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

        
    
      1. 第一步
        2. 
    
      2. 第二步
        3. 
    
      3. 第三步
        4. 

      

      语法篇--HTML_第12张图片
      

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

        

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

        
  
        HTML
        
  
        超文本标记语言
        
  
        CSS
        
  
        层叠样式表
        
  
        JavaScript
        
  
        一种动态编程语言
        

        

        

        语法篇--HTML_第13张图片
        

         2.6.12表格标签
        

        属性
        

        

          

        1. ：定义一个表格。
          3. ：定义表格的表头。
          4. ：定义表格的主体部分。
          5. ：定义表格的页脚部分。
          6. ：定义表格的行。
          7. 如果要将单元格跨越 3 行 2 列，则可以将其 colspan 属性设置为 2，rowspan 属性设置为 3，如下所示：
          属性border
          

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

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

          • ：用于嵌入音频文件。
            • 

          • ：用于嵌入视频文件。
            • 

          • ：用于嵌入一组可以根据设备分辨率和屏幕大小自适应显示的图像。
            • 

          • ：用于指定  和  元素的源文件和类型。
            • 

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

          • src：指定媒体文件的 URL。
            • 

          • autoplay：自动播放媒体内容。
            • 

          • loop：循环播放媒体内容。
            • 

          • controls：显示浏览器默认的控件，如播放、暂停、音量等。
            • 

          嵌入视频的示例：
          

          在这个示例中， 标签定义了一个视频元素，并通过 src 属性指定了要播放的视频文件。controls 属性将显示一个浏览器默认的控件，允许用户控制视频的播放、暂停、音量等。
          嵌入音频文件的示例
           
          在这个示例中，我们使用标签来嵌入音频文件。controls属性告诉浏览器显示音频控件，用户可以控制播放和暂停等操作。在标签中，我们使用标签来指定音频文件的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文档中呈现计算机程序代码的标签。常见的计算机输出标签包括、
          和等。
          

            

          • 标签用于标记一段计算机代码，将其显示为等宽字体，并突出显示关键字和字符串等内容；
            • 

          • 标签用于显示预格式化文本，包括计算机代码和其他文本格式，保留空格、制表符和换行符等格式；
            • 

          • 标签用于显示样本输出，通常用于演示计算机程序的预期输出或示例输入，显示为等宽字体并突出显示标记或特殊字符。
            • 

          

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

          2.7相关属性
          

          2.7.1title属性
          

          

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

          


    
    Title



          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aut deleniti dignissimos doloremque dolores doloribus ea, minima obcaecati pariatur provident.
          


          

          语法篇--HTML_第14张图片
          

           注意
          

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

          语法篇--HTML_第15张图片
          

          

          

          

          三、页面结构分析
          

          3.1网页结构
          

          语法篇--HTML_第16张图片
          

          

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

            

          1.  标签用于表示页面或页面的一部分的头部，通常包含标题、导航、搜索框等内容。
            2. 

          2.  标签用于表示页面或页面的一部分的底部，通常包含版权信息、联系方式等内容。
            3. 

          3.  标签用于表示文档或应用程序中的一个独立部分，可以包含自己的标题，用于组织文章、主题、章节等内容。
            4. 

          4.  标签用于表示页面中的一篇文章、一组文章或一个独立的内容块，通常包含标题、作者、发布日期、正文等内容。
            5. 

            6. 

            7. 

          

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

          

          


	
	My Website


	
          
		
		
          My Website
          
		
	
          

          
	
          
		
		
          Introduction
          
		
          Welcome to my website! This is a place where I share my thoughts and ideas with the world.
          
	
          
	
	
          
		
		
          Latest News
          
		
          Check out my latest blog post on the importance of staying hydrated during the summer months.
          
	
          
	
	

          


          
	
	
          © 2023 My Website. All Rights Reserved.
          

          


          

          3.2iframe内联框架 
          

          在 HTML 中，可以使用 

          

          常见的基本属性：
          

            

          • src：指定要嵌入的网页或媒体文件的URL。
            • 

          • width：指定iframe宽度。
            • 

          • height：指定iframe高度。
            • 

          • frameborder：指定边框是否可见，一般设为0隐藏边框。
            • 

          • allowfullscreen：指定是否允许全屏显示，一般用于视频播放。
            • 

          

          3.3节点树
          在HTML中，节点树指的是文档对象模型（DOM），它是HTML文档的一种树形结构表示方法。节点树由多个节点组成，包括元素节点、文本节点、属性节点等。元素节点表示HTML文档中的元素，文本节点表示HTML文档中的文本，属性节点表示HTML文档中的属性。这些节点根据它们在HTML文档中的位置组成树形结构，最终形成一个由根节点开始，由多个子节点组成的树形结构。在JavaScript中，可以使用DOM API来操纵节点树，实现对HTML文档的增、删、改、查等操作。
          语法篇--HTML_第17张图片
          元素
           HTML文档由HTML元素定义，HTML元素指的是从开始标签到结束标签的所有代码
           开始标签常被称为起始标签(opening tag)，结束标签常称为闭合标签(closing tag)。
           空元素
           空元素即为没有内容的HTML元素。
           HTML中常用的一个空元素为
           (用于定义换行) ，
           元素就没有关闭标签。
           空元素应当在开始标签中关闭，方法是在开始标签中添加斜杠,比如
          3.4div元素和span元素
          元素和元素都是HTML中的容器元素，用于划分HTML文档的区域并为其添加样式或脚本。其中
          元素通常用于包含块级元素，如标题、段落和列表等，而元素则通常用于包含行内元素，如文本和链接等。通过设置CSS样式和添加JavaScript脚本，可以轻松地对这些元素进行自定义和操作。
          

          

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

            

          • class：为元素定义一个或多个类名，用于CSS样式的引用。
            • 

          • id：为元素定义唯一的ID，通常用于通过JavaScript获取和操作该元素。
            • 

          • style：为元素指定CSS样式。
            • 

          • title：为元素定义一个标题，通常用于添加鼠标悬停提示。
            • 

          

          

          



	
	
	Div and Span Elements Example
	
	


	
          
		
		
          This is a Div Element
          
		
		
          A div element is a container that can be used to group other HTML elements together and apply styles to them as a group.
          
		
	
          
	This is a Span Element
	
	
          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.
          
	



          

          

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

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

          

          这个文本中的 这个词汇 是红色的。
          

          

          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标签
          

          语法篇--HTML_第18张图片
          

          3.7data-*
          

          

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

          

          语法篇--HTML_第19张图片
          

          

          

          四、表单
          

          4.1表单初始
          

          

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

            

          • ：定义一个表单。
            • 

          • ：定义输入字段。可以是文本框、密码框、单选按钮、复选框、文件上传框等。
            • 

          • ：定义输入字段的标签。
            • 

          • 


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

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

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

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

            


            

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

            

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

            语法篇--HTML_第30张图片
            

            

            4.4.5域标签与域标题标签
            

            

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

            

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

            

            语法篇--HTML_第31张图片
            

             4.5搜索框滑块和简单验证
            

            滑块
            

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

            


            

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

            搜索框
            

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

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

            
  
  
  
  


            

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

            语法篇--HTML_第32张图片
            

            4.6隐藏域 只读 禁用
            

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

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

            

            

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

            

            

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

            

            

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

            4.7表单的初级验证
            

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

              

            • placeholder：占位符，用于在文本框中提示用户应该输入什么内容。
              • 

            • required：必填项，指定表单元素必须填写才能提交。
              • 

            • pattern：模式匹配，可以使用正则表达式来指定表单元素中所允许的输入格式。
              • 

            

            
  
  

  
  

  
  

  
  

  


            

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

              

            • placeholder 属性来提示用户应该输入什么内容；
              • 

            • required 属性指定这些表单元素是必填项；
              • 

            • pattern 属性指定 phone 元素中所允许的输入格式，这里使用正则表达式限制输入格式为以数字 1 开头的 11 位数字。
              • 

            

            语法篇--HTML_第33张图片
            

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

            4.8绝对路径和相对路径
            

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

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

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

            Logo
About Us

            

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

            Logo
About Us

            

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

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

            4.9新表单
            

            语法篇--HTML_第34张图片
            

             4.9.1日期类 
            

            语法篇--HTML_第35张图片
            

            

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

            

            语法篇--HTML_第36张图片
            

            4.9.2数字类
            

            语法篇--HTML_第37张图片
            

            4.9.3电话号码类型tel
            

            

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

            

            语法篇--HTML_第38张图片
            

            4.9.4电子邮箱类型email
            

            语法篇--HTML_第39张图片
            

            语法篇--HTML_第40张图片 4.9.5搜索框类型search
            

            

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

            

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

              

            • value：表示搜索字段中包含的值的字符串。
              • 

            • autocomplete：表示是否启用自动完成功能。
              • 

            • list：指定了一个  元素的 id ，用来提供输入建议。
              • 

            • maxlength：用户可以在搜索字段中输入的最大字符数（UTF-16 代码单元）。
              • 

            • minlength：用户可以在搜索字段中输入的最小字符数（UTF-16 代码单元）。
              • 

            • pattern：如果指定了 pattern 属性，为了使 value 通过 约束验证 ，必须满足该属性给定的正则表达式。
              • 

            • placeholder：向用户提供有关该字段中需要什么样的信息的简短提示。
              • 

            • readonly：一个布尔属性，如果存在，则表示该字段不能由用户编辑。
              • 

            • size：一个数字值，指示输入字段应有多少个字符宽。
              • 

            • spellcheck：一个全局属性，用于指示是否启用元素的拼写检查。
              • 

            

            

            
    
    
    
        
    
    

            

            4.9.6颜色类型color
            

            

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

            

            颜色类型color支持以下属性
            

              

            • value：表示一个 7 个字符的指定  值的小写十六进制字符串。
              • 

            • autocomplete：表示是否启用自动完成功能。
              • 

            • list：指定了一个  元素的 id ，用来提供输入建议。
              • 

            • readonly：一个布尔属性，如果存在，则表示该字段不能由用户编辑。
              • 

            

            

            
    
    
    
        

            

            4.9.7autocomplete属性
            

            语法篇--HTML_第41张图片
            

            

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

            

            autocomplete属性可以用于以文本或数字作为输入的  元素、 
          




          
：定义表格的表头单元格。

          		8. ：定义表格的数据单元格。

          9. ：定义表格的标题。



          

  
    
    表格示例
  
  
    
          学生成绩单
          
    
          
      成绩表
      
        
          
          姓名
          语文
          数学
          英语
        
          
                
      
        
          
          张三
          89
          92
          87
        
          
        
          
          李四
          78
          85
          92
        
          
        
          
          王五
          95
          87
          91
        
          
                
      
        
          
          总计
        
          
                
    
          
  


          

          跨列跨行
          

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

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

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

          跨越两列


跨越三行两列