文章目录

一、HTML 标签简介二、HTML 骨架标签三、双标签和单标签四、嵌套关系和并列关系五、文档类型六、页面语言七、编码字符集八、排版标签1、标题标签2、段落标签3、水平线标签4、换行标签5、div 标签 和 span 标签九、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 )十、标签属性十一、图像标签十二、链接标签十三、注释标签十四、文件路径1、绝对路径2、相对路径 ( 同级目录访问 | 下级目录访问 | 上级目录访问 )十五、锚点定位十六、base 标签十七、预格式化文本标签十八、HTML 特殊符号一、HTML 标签简介HTML 英文全称 " HyperText Mark-up Language " , 中文名称是 " 超文本标记语言 " ;

多媒体 : 超文本 指的是 该文本 超过了文本的限制 , 可以展现 图片 , 声音 , 视频 等多媒体内容 ;超链接 : 除了多媒体之外 , 该文本还具有 超链接跳转功能 , HTML 中还可以添加链接 , 可以跳转到其它文件中 ;HTML 主要使用 HTML 标签 描述网页中的元素 , 常见的标签有 : 文本标签 , 换行标签 , 图像标签 , 链接标签 , 注释标签 等 ;

HTML 标签都在 尖括号 <> 中进行定义 , 这些标签都有各自的语法规范 ;

二、HTML 骨架标签HTML 骨架标签 :

跟标签 : 所有的标签都在 跟标签 中 ;代码语言：javascript代码运行次数：0运行复制文档头部标签 : 该标签的作用是 设置文档头部 , 其中最终要的是设置 标题标签 ;代码语言：javascript代码运行次数：0运行复制文档标题标签 : 设置 HTML 页面的标题 ;代码语言：javascript代码运行次数：0运行复制文档内容标签 : HTML 的 网页内容 , 都放在这个标签内 ;代码语言：javascript代码运行次数：0运行复制以下面的网页为例 ,

红色矩形框 内 是 网页标题 , 在 head 标签的 tittle 标签中设置 ,蓝色矩形框 内 是 网页内容 , 在 body 标签中设置 ;代码示例 : 创建一个文本文件 , 命名为 helloworld.html ;

代码语言：javascript代码运行次数：0运行复制

网页内容

运行效果 :

一般 HTML 的骨架都可以有编辑器自动生成 , 这里介绍一款文本编辑工具 Sublime , 该工具中可以自动生成 HTML 骨架标签 ;

Sublime 官方下载地址 : https://www.sublimetext.com/download

三、双标签和单标签HTML 标签分为两种类型 : 双标签 和 单标签 ;

双标签 : 由 两个尖括号标签 组成的 成对标签 称为双标签 , 如上面介绍的骨架标签都是双标签 : , , , ; 开始标签 : 双标签都是由一对标签组成 , 其中 前面的标签称为开始标签 , 中的 是开始标签 ;结束标签 : 后面的标签称为结束标签 , 中的 是结束标签 , 结束标签比开始标签多了标签关闭符 / ;单标签 : 单标签 都是 空元素 , 不需要再标签中包含内容 , 如换行标签
;四、嵌套关系和并列关系双标签之间的关系 :

嵌套关系 : 下面代码中 html 标签 与 head 标签 , 属于 嵌套关系 , 一般 子标签 会相对于 父标签 缩进一个 TAB 身位 ;并列关系 : 下面代码中 head 标签 与 body 标签 , 属于 并列关系 , 二者 对齐排在一起就可以 ;代码语言：javascript代码运行次数：0运行复制

网页内容

五、文档类型在 HTML 文件中 , 要在 文档最开始位置 , 在所有的标签前面 , 标注 " 文档类型 " , 其作用是 通知浏览器该网页使用 的 HTML 或 XHTML 规范 ;

代码语言：javascript代码运行次数：0运行复制 上面的配置是高速浏览器使用的是 HTML 5 规范 , 现在开发一般都使用该规范 ;

任意打开一个网页 , 不管页面有多复杂 , 在最开始一定是 文档类型 标注 ;

六、页面语言在 html 标签中 , 设置 lang 属性 , 用于 指定该 HTML 标签内使用的语言类型 ;

代码语言：javascript代码运行次数：0运行复制en 属性值表示 英文 ;zh-CN 属性值表示 中文 ;不管是设置什么语言 , 对开发是没有影响的 ;

该语言配置对于网页开发来说没有太大的作用 , 其目的是 告诉浏览器或者搜索引擎 , 该页面是什么语言的 ;

翻译工具识别 : 如果页面设置成英文 , 系统设置成中文的话 , 浏览器就会提示你是否要对该网页进行翻译 ;搜索引擎精准搜索 : 搜索引擎尽量搜索语言相同的网页 ;示例 : CSDN 的网页类型设置的是英文的 ;

七、编码字符集在 HTML 页面中 , 在 head 标签下 的 meta 标签 中设置 字符集设置 , 该设置用于告诉 浏览器 , 该 HTML 文件使用什么字符集进行的编码 , 浏览器也使用该字符集解码 , 使用的字符集不一致就会导致乱码 ;

代码语言：javascript代码运行次数：0运行复制

网页内容

这里直接配置 UTF-8 即可 , 不要使用其它字符集 ;

八、排版标签排版标签 是 网页布局 中 , 最常用的标签 , 排版标签又分为如下几个类型 :

标题标签段落标签水平线标签换行标签div 标签span 标签1、标题标签HTML 提供了 6 个等级的标题 , 分别是

代码语言：javascript代码运行次数：0运行复制

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

代码示例 :

代码语言：javascript代码运行次数：0运行复制

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

展示效果 :

2、段落标签HTML 中的段落标签使用

表示 , 段落内容在 开始标签

和 结束标签

之间 ;

代码语言：javascript代码运行次数：0运行复制

段落内容

将下面的文字分成 2 个段落 ,

代码语言：javascript代码运行次数：0运行复制编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ; 介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ; 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;直接将文字拷贝到 HTML 中 , 所有的文字都显示成一段文字 ;

使用 段落标签 后 , 代码如下 :

代码语言：javascript代码运行次数：0运行复制

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ;

介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ; 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;

效果展示 :

3、水平线标签水平线标签 , 可以在网页中添加一条分割横线 , 标签代码如下 :

代码语言：javascript代码运行次数：0运行复制

---

在标题下添加了

---

标签后的效果 , 在网页中 , 显示了一条横线 ;

4、换行标签换行标签 :

代码语言：javascript代码运行次数：0运行复制
在 HTML 中的文字 , 不管里面有回车 , 空格 , 换行 , 都会被忽略 , 默认按照一行显示 ;

如果分段需要使用 段落标签

;

如果换行 , 需要使用 换行标签

换行标签使用代码示例 :

代码语言：javascript代码运行次数：0运行复制

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

---

编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ;

与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ;

介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ;

也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;

效果展示 : 换行处使用箭头进行标记 ;

5、div 标签 和 span 标签div 标签 和 span 标签 都用于 网页布局 ;

div 标签 一行 只能设置一个 ;代码语言：javascript代码运行次数：0运行复制

span 标签 一行可以设置多个 ;代码语言：javascript代码运行次数：0运行复制 布局内容 代码示例 :

代码语言：javascript代码运行次数：0运行复制

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

---

编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ;

与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ;

介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ;

也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;

---

span1

span2

效果展示 :

九、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 )文本格式化标签 : 对文字设置 粗体 , 斜体 , 下划线 , 删除线 效果 ;

粗体效果 : 下面两种标签都能实现 粗体效果 , 在 XHTML 中推荐使用 标签 ;代码语言：javascript代码运行次数：0运行复制

斜体效果 : 下面两种标签都能实现 斜体效果 , 在 XHTML 中推荐使用 标签 ;代码语言：javascript代码运行次数：0运行复制

下划线效果 : 下面两种标签都能实现 下划线效果 , 在 XHTML 中推荐使用 标签 ;代码语言：javascript代码运行次数：0运行复制

删除线效果 : 下面两种标签都能实现 删除效果 , 在 XHTML 中推荐使用 标签 ;代码语言：javascript代码运行次数：0运行复制

XHTML 是 可扩展超文本标记语言 , 英文全称 eXtensible HyperText Markup Language , 是 HTML5 标准的一部分 ;

代码示例 :

代码语言：javascript代码运行次数：0运行复制

编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ;

显示效果 :

十、标签属性在标签中可以添加 标签属性 , 标签属性的格式为 :

代码语言：javascript代码运行次数：0运行复制<标签名称 属性名称1="属性值1" 属性名称2="属性值2"> 标签内容 一个标签中可以设置若干属性 ;

十一、图像标签在网页中插入图片 , 使用 标签 , 该标签是单标签 , 插入语法如下 :

代码语言：javascript代码运行次数：0运行复制将图片放在 html 文件相同的目录 , 可以直接使用相对路径添加该图片 ;

代码语言：javascript代码运行次数：0运行复制

添加后的效果如下 , 图片会按照原始像素进行显示 ;

图像标签 可以设置如下属性 :

alt 属性 : 属性值是 文本字符串 , 作用是 当图片无法显示时 , 显示该文本 ;title 属性 : 属性值是 文本字符串 , 作用是 鼠标在图片上悬停时 , 显示该文本 ;width 属性 : 属性值是 像素数值 , 作用是 设置图像的像素宽度 ; 宽度和高度一般不同时设置 , 同时设置比例可能失真 ;height 属性 : 属性值是 像素数值 , 作用是 设置图像的像素高度 ; 宽度和高度设置任意一个 , 另外一个可以等比例缩放 ;border 属性 : 作用是 设置图像的边框宽度度 , 一般都使用 css 设置 border 属性 ;上述属性可以选择性设置 , 不必全部设置 , src 属性必须要配置 , 其它属性可有可无 ; 属性设置顺序不分先后 , 都可以正常发挥作用 ;

代码示例 :

代码语言：javascript代码运行次数：0运行复制

效果展示 :

十二、链接标签连接标签格式 :

代码语言：javascript代码运行次数：0运行复制链接内容href 属性 : 设置 链接 的 URL 地址 , 该属性必须设置 ; 链接 分为 外部链接 和 内部链接 ; 外部链接 : 连接到 外部网址 , 如 百度搜索引擎 https://www.baidu.com/ ; 百度一下 ;内部链接 : 链接到 内部的 html 文件页面 , 如 index.html ; 首页 ;空链接 : 如果没有确定链接目标 , 设置 # 值 , 该链接暂时是空链接 ; 空链接 ;target 属性 : 设置 窗口打开方式 , 可设置两种值 ; _self : 默认值 , 在本窗口打开 , 原窗口关闭 ;_blank : 在新窗口中打开 ; 5. 新页面打开链接 ;链接内容 : 链接的载体一般是文本 , 此外 图片 , 表格 , 视频 等 , 都可以作为链接的载体 ; ;代码示例 :

代码语言：javascript代码运行次数：0运行复制

1. 外部链接 : 百度一下

2. 内部链接 : 首页

3. 空链接

4. 图片链接 :

5. 新页面打开链接

展示效果 :

点击链接 1 , 原窗口消失 , 弹出百度页面 ;

点击链接 2 , 跳转到首页网页 ;点击链接 3 , 没有任何效果 ; 点击链接 4 , 跳转到博客页面 ;

点击链接 5 , 原窗口保留 , 在新窗口显示博客页面 ;

十三、注释标签如果在 HTML 页面中进行 代码注释 , 则可以使用 注释标签 ;

代码语言：javascript代码运行次数：0运行复制在 注释标签 中的内容 , 不显示在页面 中 ;

注释是给 程序员 看的 , 用于标注代码作用 ; 通常情况下 , 都在代码的上方一行位置添加注释 ;

注释代码示例 :

代码语言：javascript代码运行次数：0运行复制

1. 外部链接 : 百度一下

2. 内部链接 : 首页

3. 空链接

4. 图片链接 :

5. 新页面打开链接

展示效果 :

十四、文件路径一个前端项目 , 可能有几百上千个 html , css , javascript 文件 , 这些文件都需要通过不同的目录层级进行整理存放 ;

访问文件时 , 需要使用 文件路径 进行访问 , 文件路径 分为 相对路径 和 绝对路径 ;

文件准备 : 以 D 盘下的 HTML 目录作为项目的根目录 , 执行

代码语言：javascript代码运行次数：0运行复制tree /F命令 , 查看当前项目的目录结构 :

代码语言：javascript代码运行次数：0运行复制D:\HTML>tree /F

卷 DATA 的文件夹 PATH 列表

卷序列号为 D0D4-2A8C

D:.

│ hello.html

│ hello2.html

│

└─index

│ index.html

│

└─image

image.jpg1、绝对路径绝对路径很容易理解 , 就是以当前网站部署的服务器为参考基础 ;

如果要访问 hello2.html 目录 , 直接使用其在 文件系统 中的 路径 D:\HTML\hello2.html 访问即可 ;

绝对路径访问代码示例 :

代码语言：javascript代码运行次数：0运行复制

跳转到同级目录

跳转到下级目录

效果展示 :

2、相对路径 ( 同级目录访问 | 下级目录访问 | 上级目录访问 )相对路径 是以 当前 的 网页为基准 , 分为 三种情况 :

访问同级目录 : 直接使用 文件名称 进行访问 ;访问下级目录 : 直接使用 目录 + 文件名称 进行访问 ;访问上级目录 : 使用 ../上级文件 进行访问 ; 如果使用上两级路径使用 ../../ 访问即可 ;以下面的文件结构为例 :

代码语言：javascript代码运行次数：0运行复制D:\HTML>tree /F

卷 DATA 的文件夹 PATH 列表

卷序列号为 D0D4-2A8C

D:.

│ hello.html

│ hello2.html

│

└─index

│ index.html

│

└─image

image.jpg在 hello.html 中访问 hello2.html 文件 , 属于同级目录访问 , 直接使用 hello2.html 文件名访问 ;

代码语言：javascript代码运行次数：0运行复制跳转到同级目录在 hello.html 中访问下级目录 index 目录中的 index.html 文件 , 属于下级目录访问 , 使用 目录名 + 文件名访问 ;

代码语言：javascript代码运行次数：0运行复制跳转到下级目录在 index.html 中访问上级目录中的 hello.html 文件 , 属于上级目录访问 , 使用 ../上级文件 进行访问 ;

代码语言：javascript代码运行次数：0运行复制跳转到上一级目录完整代码示例 :

hello.html 代码示例 : 其中涉及 同级目录访问 , 下级目录访问 ;代码语言：javascript代码运行次数：0运行复制

跳转到同级目录

跳转到下级目录

index.html 代码示例 : 涉及上级目录访问 ;代码语言：javascript代码运行次数：0运行复制

跳转到上一级目录

十五、锚点定位锚点定位步骤 :

创建锚点 : 使用 id 属性 , 创建 跳转锚点 , 一般情况下是在各种级别的标题上添加的 ;代码语言：javascript代码运行次数：0运行复制

标题锚点1

标题锚点2

标题锚点3

标题锚点4

创建锚点链接 :代码语言：javascript代码运行次数：0运行复制 跳转到 标题锚点1

跳转到 标题锚点2

跳转到 标题锚点3

跳转到 标题锚点4代码示例 :

代码语言：javascript代码运行次数：0运行复制

跳转到 标题锚点1

跳转到 标题锚点2

跳转到 标题锚点3

跳转到 标题锚点4

标题锚点1

标题锚点2

标题锚点3

标题锚点4

显示效果 :

十六、base 标签base 标签 的 作用是 为 HTML 页面中 所有的链接 添加 打开状态 , 该标签必须 写在 标签之间 ;

在实际开发中 , 需要 使用 base 标签为所有的链接 , 默认添加 target=“_blank” 打开状态 , 在新窗口中打开 ;

代码示例 :

代码语言：javascript代码运行次数：0运行复制

CSDN 博客

韩曙亮博客

CSDN 首页

展示效果 :

十七、预格式化文本标签将文本 写在

预格式化文本标签 中 , 其中的 文本格式 , 包括 空格 , 缩进 , 换行 等内容 , 在 网页中显示的内容 与 HTML 中看到是一致的 ;

在 HTML 中写的什么格式 , 就显示什么效果 ; 该标签不常用 ;

代码示例 :

代码语言：javascript代码运行次数：0运行复制

悯农
作者：李绅
春种一粒粟，秋收万颗子。
四海无闲田，农夫犹饿死。
锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。

展示效果 :

十八、HTML 特殊符号在 HTML 中 的 特殊符号 是以 & 符号开始 , 以 分号 ; 结尾 的符号 ;

常见的 HTML 特殊符号如下 :