关于HTML

用户5690222825178

2022-01-07 290 阅读35分钟

学习路线

1.入门阶段：HTML：

HTML语法 HTML语义化 SEO基础

CSS： CSS语法页面布局媒体查询 CSS3

2.JavaScript进阶：

JavaScript语法基础的数据结构 Web APls ES6+ 模块化 TypeScript

进阶阶段学习完之后才算是学会前端

3.后续需要学习包管理工具：

npm yarn

4.CSS进阶：

CSS预处理器 CSS框架 CSS架构规范

5.构建工具：

可以使我们的代码更加规范，更加符合我们的项目编写

代码校验工具模块打包工具任务运行器

上列学习完之后，工作中需要用到流行的框架：

VUE.js React.js Angular 学习每一个框架的基础语法跟使用方法，甚至底层原理，学习完这部分CSS会有一个质的提升

6.持续学习：

在工作中通过持续学习来增加自己的工作水平

Node.js 渐进式Web应用服务端渲染静态站点生成器桌面应用移动应用

HTML概述

认识网页：网页的本质用户眼中的网页与程序员严重的网页是不同的

程序团怎么制造网页：

HTML就是用来制作网页文件的。

浏览器查看的网页都是.html或htm文件

HTML叫做超文本标记语言，用于搭建网页的结构。

网页的组成（一）：

前端三层：HTML（结构层）搭建骨架CSS（样式层）美化网页结构JavaScript（行为层）制作网页的交互效果

网页的组成（二）：

其他多媒体内容：图片视频音频超级链接等

所有的网页文件都是真实的丶物理存在的文件

浏览器选择：

推荐使用谷歌浏览器。（渲染效果好市场占有率高自带开发者调试工具）

浏览器功能

作用1：

发送HTTP请求，发送的方式是在浏览器地址输入对应网址，或者点击超级链接。

作用2：

接受服务器发回的HTTP响应，服务器会发回一个HTML给浏览器。

作用3：

将接收到的HTML进行解析并显示。

纯文本格式

指的是制作的过程中没有任何文本修饰的，没有任何粗体，下划线，斜体等等。

纯文本文件特点

1.文件只能保存文本，不保存其他的格式或非文本内容，有利于网络传输。

2.所有的纯文本格式文件，可以通过直接更改扩展名的方式更改保存格式。

3.纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑。

html css js文件都是纯文本格式文件

HTML概念

**英文名全程是Hyper Text Markup Language。**超文本标记语言，是一种用来制作网页的一种标记语言。

HTML是一种纯文本格式的文件，有自己独特的功能。

超文本:超级文本的缩写，简单来说就是用于链接到另一个文本或多媒体内容的文本。

标记：使文本更加清晰，有层次。

HTML的功能（总结）：利用标记给普通的文本添加语义丶描述超文本内容，搭建网页的基础结构。

制作网页尽量制作语义化明确的网页，尽量用带有特殊含义的标签去写：

1.方便代码的阅读和后期维护

2.便于浏览器或是网络爬虫更好地解析网站内容

3.使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名

常见的语义化标签：<ul><li><strong><em>
大多数语义化标签的特点：标签作用由英文单词直译过来。

HTML基本语法

分成4个部分：HTML规范版本 HTML标签 HTML元素 HTML属性

1.HTML规范版本：

W3C：world wide web consortium,万维网联盟。专门发布和维护互联网的规范和标准。

HTML标签：HTML标记通常被称为HTML标签（HTML tag）。标签在书写过程中，必须遵循特定的语法。

1.标签名必须书写在一对尖括号<>内部。

2.标签分为单标签和双标签，双标签必须成对出现。

双标签
单标签

3.双标签包含开始标签和结束标签，结束标签必须书写关闭符号/,单标签也需要进行自封闭书写。在HTML5中，单标签可以不写关闭符号。

2.HTML元素：

HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。

例如：双标签内部包含的纯文本内容，就是元素内容。

元素内容：

1.元素内容可以是纯文本，也可以是其他的HTML元素。这种元素内容包含其他HTML元素的情况，我们可以称为嵌套，也就是div标签元素内部嵌套了P标签元素。

2.一个HTML元素div的内容可能是多个其他元素组成，例如P和h1，此时我们习惯称div是p和h1的父级元素，p和h1是div的子集元素，而p和h1属于同级元素，这种嵌套关系可以有很多层。

3.单标签是不能添加元素内容，称为空元素。

标签级别：根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别。

1.容器级：标签内部可以存放任意内容，包含器级标签。例如h1，div等。

2.文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。比如p标签

容器级标签也称为块元素

特点：独立成一行，可以设置宽高，默认宽高100%，细分的话可分为：

文字类：p,h1~h6

容器类：div,table,tr,td,th,form,ul,li,ol,dl,dt,dd

文本级标签也称为行元素

特点：不独成一行，不可以设置行高，默认宽高由内容决定。

比如：a,img,input,strong,em,del,span

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

当行内元素去包含块级元素，最后呈现的只有块级元素的内容，而行内元素会被覆盖。

设置居中

行内元素想要设置水平居中，只需要text-align属性即可。这里设置的text-align是设置在外层的div当中，评论区有提到，因为上面讲了行内元素设置宽高是无效的，所以我们需要的居中其实是将块级元素当中的行内元素居中。

块元素与行元素最大的特点是：是否可以独占一行、能否用CSS改变宽高

块级元素可以用CSS改变宽高，而行元素不行，但行元素中的img标签由于是可替换元素，所以可以改变其宽高。

可替换标签与不可替换标签

在HTML中，大部分标签都是不可替换标签；而CSS可以影响可替换标签的位置，但不会影响到可替换元素自身的内容。

经典的可替换标签有：<video><embed><img>

还有一种：行块级元素：

不能独成一行，可以设置宽高。本质上还是块元素，只是不换行。我们这里主要就是想实现这样的功能：又不想换行，又要给它设置宽高。

HTML元素的特性

1.元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。

好处：书写HTML的时候多用空格还有换行来使代码更加清晰易读。

2.空白折叠现象：元素内容如果是文本，所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。

3.HTML属性

HTML标签可以添加属性，属性可以提供关于HTML元素的更多信息。

1.书写位置：必须在开始标签或者单标签之内，与标签名之间用空格进行分隔。

2.属性包含：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称做键值对写法，HTML标签属性的键值对写法是k=“v”。XHTML要求属性值必须在双引号内部。

3.一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k="v"。

4.部分标签属性值k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。

meta属性

如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。

如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。

如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。

如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

注意: 全局属性 name 在 <meta> 元素中具有特殊的语义；另外，在同一个标签中，name, http-equiv 或者 charset 三者中任何一个属性存在时，itemprop 属性不能被使用。

content

此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。

http-equiv

属性定义了一个编译指示指令。这个属性叫做 http-equiv(alent) 是因为所有允许的值都是特定HTTP头部的名称，如下：

content-security-policy它允许页面作者定义当前页的内容策略。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。

content-type如果使用这个属性，其值必须是"text/html; charset=utf-8"。注意：该属性只能用于 MIME type 为 text/html 的文档，不能用于MIME类型为XML的文档。

default-style设置默认 CSS 样式表组的名称。

x-ua-compatible如果指定，则 content 属性必须具有值 "IE=edge"。用户代理必须忽略此指示。

refresh这个属性指定:

如果 content 只包含一个正整数，则为重新载入页面的时间间隔(秒)；

如果 content 包含一个正整数，并且后面跟着字符串 ';url=' 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒)

编辑器：

纯文本编辑器：所有的纯文本编辑器都能编辑HTL文件。例如记事本、Editplus、notepad等。

推荐使用：VS code编辑器

优点：VS code拥有超级丰富的插件扩展，你可以根据自己的需求使用不同的插件，对于开发这来说更加友好。

推荐插件：

chinese 汉化页面

Auto 修改html标签，自动帮你完成尾部闭合标签的同步修改

open in browser 右键设置在默认浏览器打开网页

mithril emmet 快速编写工具，集成在vs code中，可以不必安装

使用步骤：

1.新建文件，ctrl+N。

2.保存对应的文件格式ctrl+s,例如.html、.css、.js等文件。

3.使用快捷键编写程序。

HTML基本结构

基本骨架

html+Tab快捷生成基本骨架

HTML文件最基本的四个标签，组成了网页的基本骨架，包括：、、、四组标签。其中，为最大的标签，作用是生成网页，其次是为头部，跟同级的是标签，为身体。标签为网页名，存在于标签里。
嵌套关系：嵌套了和两个标签，而里面则嵌套了一个title。
标签
作用：定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在标签内部。

标签：

作用：用于存放,,< base>,,,。内部用于对网页的设置，除了内部的文字，其他标签都不显示在浏览器上。
注意在标签中我们必须要设置的标签是title。
标签：作用1：让页面拥有一个属于自己的标题。
作用2：title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。（提高搜索排名）

作用3：内部的内容会显示在搜索结果的标题部分。

作用4：作为浏览器收藏夹默认的网页标题。

建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字。
标签
作用：定义网页的主题部分，用于存放所有的HTML显示内容的标签
,,
等。

meta属性

如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。

如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。

如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。

如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

注意: 全局属性 name 在 <meta> 元素中具有特殊的语义；另外，在同一个标签中，name, http-equiv 或者 charset 三者中任何一个属性存在时，itemprop 属性不能被使用。

content

此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。

http-equiv

属性定义了一个编译指示指令。这个属性叫做 http-equiv(alent) 是因为所有允许的值都是特定HTTP头部的名称，如下：

content-security-policy它允许页面作者定义当前页的内容策略。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。

content-type如果使用这个属性，其值必须是"text/html; charset=utf-8"。注意：该属性只能用于 MIME type 为 text/html 的文档，不能用于MIME类型为XML的文档。

default-style设置默认 CSS 样式表组的名称。

x-ua-compatible如果指定，则 content 属性必须具有值 "IE=edge"。用户代理必须忽略此指示。

refresh这个属性指定:

如果 content 只包含一个正整数，则为重新载入页面的时间间隔(秒)；

如果 content 包含一个正整数，并且后面跟着字符串 ';url=' 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒)

DTD

完整的HTML文件的第一行内容叫做文档定义类型，英文名DocType Definition,简称DTD。也叫做文档声明类型，Doctype Declaration。

作用：为了告诉整个浏览器加载的过程中应该按照哪一个版本的HTML规范去进行。这样做可以避免浏览器各自按照自己的规范去进行导致不兼容。

命名空间

元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性。

HTML5版本：

命名空间xmlns （可解决命名冲突）

xml:

可扩展标记语言，使用在传输过程中的规范。被设计用来传输和存储数据，是html的补充。是一种规范。

xmlns：

全称叫做XML NameSpace， NameSpace叫做命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。是一种我们所写的标签都需要去遵守的一种命名规范，写在标签之上的。
元素的命名空间规定了在不同用户的浏览器种标签语义遵循的统一标准，避免出现标签名冲突，这个标准使用的就是一个固定的网址中的规范。
语言：

xml:lang="en"和lang="en"表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的。lang="zh-cn"表示中文（中国）

字符集

标签内部的标签通过http-equiv属性定义了当前网页所使用的字符编码。

char:chaaracter,字符。set:集合。

HTML5版本：

国际通用字库

UTF-8:涵盖了所有人类的语言文字。一个汉字为3个字节大小。

中文国际字库

gb2312

gbk（常用）：是gb2312的扩展，增加了繁体字，共收入了21886个汉字和图形符号。一个汉字为2个字节大小。

使用情况建议：

1、如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8。

2、如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk。

注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码。

HTML常用标签

注释

注释语法

向HTML源代码添加注释

HTML注释语法：
快捷键：光标移动到想要注释的内容上，ctrl+/
注释的特点：

注释只在源代码中可见，在浏览器窗口是不显示的。

用途

1、在源代码中添加描述性的提示信息，便于我们阅读代码。

2、对于HTML纠正也大有帮助，可以通过注释某一行HTML代码，以便检索错误的位置。

3、暂时注释掉一部分不用的代码，便于后期恢复代码。

标题

标题（Heading），是通过
-
六个标签分别来对六个级别的标题经行定义的。

定义最大的标题，
定义最小的标题。
-
标签都是双标签，且是容器级标签。
标题标签的作用

标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的粗体、字号等样式。

样式是由CSS设定的。

标签级别

标题标签之间是不能互相嵌套的，下一级标题与上级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一级标题。

权重

标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中
标签最重要，
标签次重要，以此类推。

在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容,比如logo。
在整个中一样是权重最高的。
由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面中出现多个
，反而降低权重。约定俗成的，一个页面只会出现一个
。
段落标签和换行

段落标签

段落（paragraph）是通过
标签进行定义的。

标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的标签等。
段落标签的作用

标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。换行的效果是由CSS决定的。
换行标签

(breaking)标签是HTML中一个简单的换行符。

标签是一个单标签。空元素

在需要换行的位置可以使用
标签书写，但是
与
不同，
没有建立新的段落的语义，只是简单的进行强制换行。

常规用法

每一对
标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别使用不同的
标签经行定义。

文本格式化类标签

HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。

在HTML4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，CSS负责格式化样式。

标签

文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。

常见的：b（定义粗体文本）、i（定义斜体字）、u（定义下划线）、big(定义大号字体)、em（自带斜体效果）、strong（自带加粗效果）del(带有删除线效果)等等

图像标签

图像（image）由标签进行定义。

标签是单标签，本身相当于一个特殊的文本。

可以把img标签的内容看作是一个文字，所以容器级标签内部可以添加img标签。

标签的作用是在指定的位置插入一张图片。

在HTML文件，常用的插入图片的类型有：jpg、png、gif。

标签属性：

由于为单标签，所以它只能通过属性进行相关的图像设置。

补充：单标签、空标签、可替换属性标签。

常用属性展示：

src

src（表示图片的路径）如果想插入图片，src为必须设置的属性；

src：全称source资源，属性值是图片的查找路径。

路径：分为相对路径和绝对路径，不同的方式出发点和参考位置不同。

相对路径：

从HTML本身出发，根据相对的位置进行查找，包含三种方向。

同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式；

子集查找：指目标文件在与HTML文件同一级的文件夹内部，需要先查找文件夹名称，然后通过关闭符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。

上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法利用../表示跳出一级，如果跳出多级书写多次../，直到找到文件。

绝对路径

：绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发经行查找，或者使用网址形式查找。

盘符出发：例如从C盘或者D盘出发查找图片，书写时以C:/开头，后续类似子级查找写法直至找到目标文件。

从盘符出发的绝对路径的缺点：

a.盘符出发的路径不可移植，不可移动。

不可移植：由于在我的电脑里的图片文件并未出现在用户电脑里，所以当用户打开我的网址时并不会显示图片。

b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。

网址形式：要查找的文件是来自网络资源，路径写法以http://开头。

路径实际应用

a.建议多使用相对路径，可以适当使用网址形式的绝对路径。

b.使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。（比如当在制作时图片文件与HTML文件是同级文件夹，上传时也需要保持一样的同级位置）

宽度和高度

width（表示图片的宽度）；

height（表示图片的高度）；

属性值：以px为单位的数值，或者省略px不写。

如果不设置两个属性，会以图片的原始尺寸加载。

如果设置属性：只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置值加载。

边框border

border（边框属性）；

属性值：数值，数值是多少就表示边框宽度为多少像素。

注意：border属性可以使用CSS进行设置，CSS中的边框有更多的设置效果。

提示文本title

title：设置的是鼠标悬停时的提示文本。

属性：自定义的提示文字内容。

替换文本alt

alt：设置的是图片查找错误时，出现的替换文本。

如果能正常找到图片，替换文本是不显示的。

属性值：自定义的替换内容。

总结：标签最为重要的属性为src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。其他属性可以根据需求进行设置。

音频和视频

网页中的多媒体内容除了图片，还有音频、视频等，HTML也提供的特定的标签用于添加音频和视频。

音频标签

音频使用标签经行定义。

是双标签。

同图片一样，需要使用src属性设置音频查找的路径。

音频文件支持的格式包括：.mp3、.ogg、.wav。

音频控制条属性

音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是controls。

视频标签

视频的设置方法与音频非常类似。

视频使用标签进行定义。

是双标签。

使用src属性设置视频查找的路径。

视频文件支持的格式包括：.mp4、.ogg、.webm。

视频控制条属性

视频也需要使用controls属性设置控制条，属性值也是controls。

超级链接

HTML使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，或者一组词，也可以是一副画像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

超级链接标签

在HTML中使用标签可以创建链接。

a全称anchor，锚的意思。

为双标签。

作用：在指定的位置添加超级链接，提供用户进行点击和跳转。

标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。

href属性

href全称hypertext reference，超文本引用，用于规定链接的目标地址。

属性值：链接目标的路径地址。可以使用相对路径或网址形式的绝对路径。

href属性非常重要，标签要想实现点击跳转，必须设置该属性，拥有这个属性标签在鼠标移上时才会显示一个小手指针状态。

target属性

使用target属性，可以定义被链接的文档在何处跳转显示。

属性值有两种：

_self:默认值，表示跳转的页面会在当前窗口打开，不会打开新的窗口。

_blank:空白的，表示跳转的页面在新窗口打开。

title属性

title设置的是鼠标悬停时的提示文本，与标签类似。

属性值：自定义的文字内容。

该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。

两种特殊的锚点跳转方法

**锚点是浏览器自带的功能，并不是a标签的功能**

超级链接的跳转效果不止包含跨页面的跳转，还包含锚点跳转的方式。

页面内锚点跳转

这种跳转方式实现的是从某个位置跳转到同页面的另一个位置。

设置方法分为两个步骤，分别是设置锚点、添加链接。

设置锚点

设置锚点，也就是设置跳转目标位置，有两种设置方式。

1.在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。id的属性值自定义规则：必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写。

<h2id="mubiao">目标位置

2.在目标位置添加一个空的标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的。

<aname="mubiao">目标位置

添加链接

链接到锚点，在需要点击的位置设置标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值。

跨页面锚点跳转

这种跳转方法综合了跨页面跳转和锚点跳转。

制作方法也分为两个步骤，分别是设置锚点、添加链接。

第一步：设置锚点，方式与页面内锚点跳转一致，在目标页面的指定位置设置使用id或name属性。

第二步：链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径+#id。

列表

列表用于制作HTML中的一系列项目。

通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。

根据项目的内容不同，可以有三种语义的列表结构：无序列表、有序列表、定义列表。

无序列表

无序列表标签

无序列表需要两个标签参与，分别是

。

ul:unordered list，表示定义一个无序列表的大结构。

li:list item，列表项，定义的是无序列表内的某一项。

是嵌套关系，快捷键：ul>li。

一个列表中可以有任意个列表项。

注意事项

标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放一组ul>li无序列表结构。

3.无序列表的列表项

之间，没有顺序的先后之分，它们的重要程度是相同的。

4.无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式由CSS负责。

有序列表

有序列表标签

有序列表的语法与无序列表非常相似，只是在语义上有差异。

有序列表由两个标签组成，分别是

和

。

ol:ordered list，表示定义一个有序的列表的大结构。

li:list item，定义的是有序列表的每一项。

和

是嵌套关系，快捷键：ol>li。

标签内部可以嵌套任意多个

标签。

注意事项

内部只能嵌套

标签。

2.
标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放一组ol>li无序列表结构。

3.有序列表的列表项

之间，存在顺序先后之分，根据内容的顺序需要合理调整书写位置。

4.有序列表的作用只是搭建有顺序的列表结构，前面的数字排序样式不是

标签的作用，而是CSS负责的。

定义列表

定义列表标签

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

由三个标签组成完整的结构，包含

和

。

dl:defintion list，表示定义一个自定义列表的大结构。

dt:defintion term，表示定义自定义列表中的一个主题或者术语。

dd:definition description，定义解释项，表示描述或解释前面的定义主题。

和

，

与

是同级关系。

注意事项

内部只能嵌套
和
，
与
不能脱离

单独书写。

2.dl内部可以放多组dt和dd，每个dd解释说明的是前面距离最近的一个dt。

3.每个dt后面可以有0到多个解释项的dd，每个dd解释的都是前面距离最近的一个dt。

4.dt和dd标签也是容器级标签，内部可以放置任意内容。

5.定义列表中的缩进样式由CSS负责，标签只负责搭建语义结构。

6.配合着CSS布局效果，最好每个dl中只添加一组dt和dd，便于后期管理。

列表总结

根据项目的内容不同，分别选择对应语义的列表结构：无序列表、有序列表、定义列表。

布局标签

和标签常用作布局工具，我们俗称盒子，后期h5也增加了更多的布局标签。

和都是没有具体明确的语义的。

表格制作

表格基础

创建一个简单的表格至少有三个标签组成，分别是

、、

标签。

table：表格，定义的是整个的表格大结构。

tr：table rows，表格的行，定义的是表格由多少行组成。

td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。

三者的关系：table>tr>td.一个表格中有多个行，每个行中有多个单元格。

的属性
标签可以添加border边框属性。
属性值：数字，表示像素值。

表格的单元格之间有默认的空隙，会导致双线边框。

解决方法：设置标签样式属性style。

属性值：border-collapse:collapse;表示边框塌陷。

表头单元格

如果要绘制表头，使用标签

，以最小单元格为标准。

2.再添加每一行的

，table head data，表头单元格。

在表格中绘制的时候，替换的是

的位置。

标签中自带默认的CSS样式效果，文字显示粗体居中。

合并单元格

常见的表格操作中，有一种叫做合并单元格，可以通过单元格属性进行设置。

单元格属性

表格的单元格可以进行合并，通过

和

的两个属性可以进行合并设置。

rowspan：跨行合并。上下的合并。

colspan：跨列合并。左右的合并

属性值：数字，数字是几表示跨几行或跨几列合并。

制作技巧

1.先列出所有行

或

单元格。

3.划分单元格所在行时，顶边对齐的属于同一行。

4.将所i有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格。

表格分区

一个完整的表格分为四个大的区域：表格标题、表格头部、表格主题、表格页脚。

分区标签

内部最直接的子集包含四个分区标签，他们都是双标签。：table hend，表格的头部。内部嵌套tr>th。：table body，表格的主体。内部嵌套tr>td。：table foot，表格的页脚。內部嵌套tr>td。

四个分区可以选择性的经行组合。

注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的。

制作技巧

1.先书写大分区标签结构。

2.填充每个分区的内部内容。

3.如果有合并单元格内容，进行单元格合并。

表单制作

收集用户信息

表单的组成

HTML表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件。

在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分构成。

功能

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户填写和操作。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

表单域

HTML表单域使用标签进行定义。

标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个标签内。

标签为双标签，容器级标签。

表单域标签属性

标签通过对应属性规定提交数据的方法和提交位置。

1641458157(1).png

<form action="data.php" method="get" name="first">

表单元素

文本域使用标签定义，制作可以输入多行文本的区域。标签为双标签，本身相当于一个特殊的文字。文本域可以设置默认输入的文字，在双标签之间书写默认文字。 #### <textarea>属性 <textarea>有两个标签属性，可以设置显示区域大小。 **rows**：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚读条。 **cols**：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按两个字节算）。 ```xml <textarea cols="30" rows="10">默认输入文字


### 下拉菜单

HTML中的下拉菜单提前设置一些选项，然后可以通过点击选项其中一项。

#### 标签

下拉菜单需要至少两个标签完成结构：

<select>:选择，表示定义下拉菜单整体结构。

<option>:选项，表示定义下拉菜单的每一项。

两个标签都是双标签，文本级标签。

关系：select>option，option可以有任意多项

```xml
<select>
  <option>广州</option>
  <option>北京</option>
  <option>重庆</option>
</select>

默认选中项

默认情况下，选中的是第一项。

下拉菜单可以通过给标签设置selected属性，属性值为selected，更改默认选中项。

分组管理

下拉菜单如果选项变得复杂，可以将进行分组管理。

可以使用标签对选项进行分组，是一个双标签。

关系：select>optgroup>option

可以设置一个label属性，表示给这一组选项添加一个分组标签名，分组标签是不能被点击选择的。

label标签

所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，这时需要使用一个标签。

当鼠标点击内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。

绑定方法一

1.给表单元素设置id属性。

2.然后将需要绑定的其他内容用标签包裹。

3.给标签设置for属性，属性值为绑定的表单元素的id属性值。

绑定方法二

如果绑定内容和表单元素写在一起，可以化简绑定写法。

直接使用标签将绑定内容与表单元素一起进行嵌套。

字符实体

特殊符号写法

常用的字符

空格：&nbsp；大于号：&gt；小于号：&lt；

规则和建议

规则：所有的字符实体和实体编号都是以&开头，以；结尾。

注意：实体名称对大小写敏感

建议1：使用实体名称，好处是名称易于记忆。坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）

建议2：不需要强制记忆所有的字符实体，只需要记忆常用的几个字符实体名即可，其他可以通过手册进行查询。

关于HTML

学习路线

1.入门阶段：HTML：

2.JavaScript进阶：

3.后续需要学习包管理工具：

4.CSS进阶：

5.构建工具：

6.持续学习：

HTML概述

网页的组成（一）：

网页的组成（二）：

浏览器选择：

浏览器功能

作用1：

作用2：

作用3：

纯文本格式

纯文本文件特点

HTML概念

制作网页尽量制作语义化明确的网页，尽量用带有特殊含义的标签去写：

1.方便代码的阅读和后期维护

2.便于浏览器或是网络爬虫更好地解析网站内容

3.使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名

常见的语义化标签：<ul><li><strong><em> 大多数语义化标签的特点：标签作用由英文单词直译过来。

HTML基本语法

1.HTML规范版本：

2.HTML元素：

标签级别：根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别。

容器级标签也称为块元素

文本级标签也称为行元素

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

设置居中

可替换标签与不可替换标签

还有一种：行块级元素：

HTML元素的特性

3.HTML属性

meta属性

编辑器：

HTML基本结构

基本骨架

meta属性

DTD

命名空间

命名空间xmlns （可解决命名冲突）

xml:

xmlns：

语言：

字符集

国际通用字库

中文国际字库

使用情况建议：

HTML常用标签

注释

注释语法

注释的特点：

用途

标题

-

六个标签分别来对六个级别的标题经行定义的。

定义最大的标题，

定义最小的标题。

-

标签都是双标签，且是容器级标签。

标题标签的作用

标签级别

权重

标签最重要，

标签次重要，以此类推。

在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容,比如logo。

在整个中一样是权重最高的。

由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面中出现多个

，反而降低权重。约定俗成的，一个页面只会出现一个

。

段落标签和换行

段落标签

段落标签的作用

换行标签

常规用法

文本格式化类标签

标签

常见的语义化标签：<ul><li><strong><em>
大多数语义化标签的特点：标签作用由英文单词直译过来。

的属性
标签可以添加border边框属性。
属性值：数字，表示像素值。

表格的单元格之间有默认的空隙，会导致双线边框。

解决方法：设置标签样式属性style。

属性值：border-collapse:collapse;表示边框塌陷。