文章/答案/技术大牛

发布

【HTML】HTML 标签总结 ★★★ ( 标签类型 | 排版标签 | 文本格式化标签 | 标签属性 | 图像标签 | 链接标签 | 注释标签 | 锚点定位 | 预格式化文本标签 | 特殊符号 )

韩曙亮

发布于 2023-03-30 11:06:55

7.3K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、HTML 标签简介

HTML 英文全称 " HyperText Mark-up Language " , 中文名称是 " 超文本标记语言 " ;

多媒体 : 超文本指的是该文本超过了文本的限制 , 可以展现图片 , 声音 , 视频等多媒体内容 ;
超链接 : 除了多媒体之外 , 该文本还具有超链接跳转功能 , HTML 中还可以添加链接 , 可以跳转到其它文件中 ;

HTML 主要使用 HTML 标签描述网页中的元素 , 常见的标签有 : 文本标签 , 换行标签 , 图像标签 , 链接标签 , 注释标签等 ;

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

二、HTML 骨架标签

HTML 骨架标签 :

跟标签 : 所有的标签都在跟标签中 ;

<html></html>

文档头部标签 : 该标签的作用是设置文档头部 , 其中最终要的是设置标题标签 ;

<head></head>

文档标题标签 : 设置 HTML 页面的标题 ;

<titile></title>

文档内容标签 : HTML 的网页内容 , 都放在这个标签内 ;

<body></body>

以下面的网页为例 ,

红色矩形框内是网页标题 , 在 head 标签的 tittle 标签中设置 ,
蓝色矩形框内是网页内容 , 在 body 标签中设置 ;

代码示例 : 创建一个文本文件 , 命名为 helloworld.html ;

<html>
	<head>     
        <title>网页标题</title>
    </head>
    <body>
    	网页内容
    </body>
</html>

运行效果 :

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

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

三、双标签和单标签

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

双标签 : 由两个尖括号标签组成的成对标签称为双标签 , 如上面介绍的骨架标签都是双标签 : <html></html> , <head></head> , <titile></title> , <body></body> ;
- 开始标签 : 双标签都是由一对标签组成 , 其中前面的标签称为开始标签 , <html></html> 中的 <html> 是开始标签 ;
- 结束标签 : 后面的标签称为结束标签 , <html></html> 中的 </html> 是结束标签 , 结束标签比开始标签多了标签关闭符 / ;
单标签 : 单标签都是空元素 , 不需要再标签中包含内容 , 如换行标签 <br /> ;

四、嵌套关系和并列关系

双标签之间的关系 :

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

<html>
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	网页内容
    </body>
</html>

五、文档类型

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

<!DOCTYPE html>

上面的配置是高速浏览器使用的是 HTML 5 规范 , 现在开发一般都使用该规范 ;

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

六、页面语言

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

<html lang="en">

en 属性值表示英文 ;
zh-CN 属性值表示中文 ;

不管是设置什么语言 , 对开发是没有影响的 ;

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

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

示例 : CSDN 的网页类型设置的是英文的 ;

七、编码字符集

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

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	网页内容
    </body>
</html>

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

八、排版标签

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

标题标签
段落标签
水平线标签
换行标签
div 标签
span 标签

1、标题标签

HTML 提供了 6 个等级的标题 , 分别是

<h1>   一级标题   </h1>
<h2>   二级标题   </h2>
<h3>   三级标题   </h3>
<h4>   四级标题   </h4>
<h5>   五级标题   </h5>
<h6>   六级标题   </h6>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<h1>   一级标题   </h1>
		<h2>   二级标题   </h2>
		<h3>   三级标题   </h3>
		<h4>   四级标题   </h4>
		<h5>   五级标题   </h5>
		<h6>   六级标题   </h6>
    </body>
</html>

展示效果 :

2、段落标签

HTML 中的段落标签使用 <p> 表示 , 段落内容在开始标签 <p> 和结束标签 </p> 之间 ;

<p>   段落内容   </p>

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

编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ; 介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ; 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;

直接将文字拷贝到 HTML 中 , 所有的文字都显示成一段文字 ;

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

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<h1>   一级标题   </h1>
		<h2>   二级标题   </h2>
		<h3>   三级标题   </h3>
		<h4>   四级标题   </h4>
		<h5>   五级标题   </h5>
		<h6>   六级标题   </h6>
		
		<p>编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ;</p> 
		<p>介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ; 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;</p>
		
    </body>
</html>

效果展示 :

3、水平线标签

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

<hr />

在标题下添加了 <hr /> 标签后的效果 , 在网页中 , 显示了一条横线 ;

4、换行标签

换行标签 :

<br />

在 HTML 中的文字 , 不管里面有回车 , 空格 , 换行 , 都会被忽略 , 默认按照一行显示 ;

如果分段需要使用段落标签 <p> ;

如果换行 , 需要使用换行标签 <br />

换行标签使用代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<h1>   一级标题   </h1>
		<h2>   二级标题   </h2>
		<h3>   三级标题   </h3>
		<h4>   四级标题   </h4>
		<h5>   五级标题   </h5>
		<h6>   六级标题   </h6>
		
		<hr />
		
		<p>编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 
		<br />与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ;</p> 
		<p>介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ;
		<br /> 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;</p>
		
    </body>
</html>

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

5、div 标签和 span 标签

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

div 标签一行只能设置一个 ;

<div> 布局内容 </div>

span 标签一行可以设置多个 ;

<span> 布局内容 </span>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<h1>   一级标题   </h1>
		<h2>   二级标题   </h2>
		<h3>   三级标题   </h3>
		<h4>   四级标题   </h4>
		<h5>   五级标题   </h5>
		<h6>   六级标题   </h6>
		
		<hr />
		
		<p>编程范式 指的是 使用某种编程语言的 编程套路 或 编程习惯 ; 使用 Java 等高级语言进行的编程 , 编程范式 一般都是 面向对象编程 ; 
		<br />与 面向对象编程 同等级的另外一种 编程范式 是 函数式编程 , 函数式编程 不依赖于 指定的语言 , 所有的编程语言都可以使用 函数式编程范式 ;</p> 
		<p>介绍 函数式编程 前先引入 高阶函数 的概念 , 高阶函数指的是 使用 函数类型 作为 参数 或 返回值 的函数 ;
		<br /> 也就是说 高阶函数 的 参数 或 返回值 是 Lambda 表达式 / 匿名函数 / 闭包 ( 三者是相同的概念 ) ;</p>
		
		<hr />
		
		<div> div1 </div>
		<div> div2 </div>
		
		<span> span1 </span>
		<span> span2 </span>
		
    </body>
</html>

效果展示 :

九、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 )

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

粗体效果 : 下面两种标签都能实现粗体效果 , 在 XHTML 中推荐使用 <strong></strong> 标签 ;

		<b></b>
		<strong></strong>

斜体效果 : 下面两种标签都能实现斜体效果 , 在 XHTML 中推荐使用 <em></em> 标签 ;

		<i></i>
		<em></em>

下划线效果 : 下面两种标签都能实现下划线效果 , 在 XHTML 中推荐使用 <ins></ins> 标签 ;

		<u></u>
		<ins></ins>

删除线效果 : 下面两种标签都能实现删除效果 , 在 XHTML 中推荐使用 <del></del> 标签 ;

		<s></s>
		<del></del>

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

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<strong>编程范式</strong> 指的是 <em>使用某种编程语言的</em> <ins>编程套路</ins> 或 <del>编程习惯</del> ;		
    </body>
</html>

显示效果 :

十、标签属性

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

<标签名称 属性名称1="属性值1" 属性名称2="属性值2"> 标签内容 </标签名称>

一个标签中可以设置若干属性 ;

十一、图像标签

在网页中插入图片 , 使用 <img> 标签 , 该标签是单标签 , 插入语法如下 :

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

将图片放在 html 文件相同的目录 , 可以直接使用相对路径添加该图片 ;

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<img src="image.jpg" />		
    </body>
</html>

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

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

alt 属性 : 属性值是文本字符串 , 作用是当图片无法显示时 , 显示该文本 ;
title 属性 : 属性值是文本字符串 , 作用是鼠标在图片上悬停时 , 显示该文本 ;
width 属性 : 属性值是像素数值 , 作用是设置图像的像素宽度 ; 宽度和高度一般不同时设置 , 同时设置比例可能失真 ;
height 属性 : 属性值是像素数值 , 作用是设置图像的像素高度 ; 宽度和高度设置任意一个 , 另外一个可以等比例缩放 ;
border 属性 : 作用是设置图像的边框宽度度 , 一般都使用 css 设置 border 属性 ;

上述属性可以选择性设置 , 不必全部设置 , src 属性必须要配置 , 其它属性可有可无 ; 属性设置顺序不分先后 , 都可以正常发挥作用 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<img src="image.jpg" />		
		<br />
		<img src="image1.jpg" alt="图像显示出现问题" />
		<br />		
		<img src="image.jpg" title="博客数据" width="400"/>	
    </body>
</html>

效果展示 :

十二、链接标签

连接标签格式 :

<a href="跳转链接" target="窗口打开方式">链接内容</a>

href 属性 : 设置链接的 URL 地址 , 该属性必须设置 ; 链接分为外部链接和内部链接 ;
- 外部链接 : 连接到外部网址 , 如百度搜索引擎 https://www.baidu.com/ ; <a href="https://www.baidu.com/">百度一下</a> ;
- 内部链接 : 链接到内部的 html 文件页面 , 如 index.html ; <a href="index.html">首页</a> ;
- 空链接 : 如果没有确定链接目标 , 设置 # 值 , 该链接暂时是空链接 ; <a href="#">空链接</a> ;
target 属性 : 设置窗口打开方式 , 可设置两种值 ;
- _self : 默认值 , 在本窗口打开 , 原窗口关闭 ;
- _blank : 在新窗口中打开 ; <a href="https://hanshuliang.blog.csdn.net/" target="_blank">5. 新页面打开链接</a> ;
链接内容 : 链接的载体一般是文本 , 此外图片 , 表格 , 视频等 , 都可以作为链接的载体 ; <a href="https://hanshuliang.blog.csdn.net/"><img src="image.jpg" width="100"/></a> ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
    	<a href="https://www.baidu.com/">1. 外部链接 : 百度一下</a>	
		<br />
		<a href="index.html">2. 内部链接 : 首页</a>
		<br />
		<a href="#">3. 空链接</a>
		<br />	
		4. 图片链接 : 
		<a href="https://hanshuliang.blog.csdn.net/"><img src="image.jpg" width="100"/></a>		
		<br />
		<a href="https://hanshuliang.blog.csdn.net/" target="_blank">5. 新页面打开链接</a>	
    </body>
</html>

展示效果 :

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

点击链接 2 , 跳转到首页网页 ;

点击链接 3 , 没有任何效果 ;

点击链接 4 , 跳转到博客页面 ;

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

十三、注释标签

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

<!-- 注释内容 -->

在注释标签中的内容 , 不显示在页面中 ;

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

注释代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
		<!-- 外部链接, 链接到百度搜索引擎 -->
    	<a href="https://www.baidu.com/">1. 外部链接 : 百度一下</a>	
		<br />
		<!-- 内部链接, 链接到本项目的其它页面 -->
		<a href="index.html">2. 内部链接 : 首页</a>
		<br />
		<!-- 空链接, 不进行跳转 -->
		<a href="#">3. 空链接</a>
		<br />	
		<!-- 图片链接, 点击图片进行跳转 -->
		4. 图片链接 : 
		<a href="https://hanshuliang.blog.csdn.net/"><img src="image.jpg" width="100"/></a>		
		<br />
		<!-- 在新页面打开链接 -->
		<a href="https://hanshuliang.blog.csdn.net/" target="_blank">5. 新页面打开链接</a>	
    </body>
</html>

展示效果 :

十四、文件路径

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

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

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

tree /F

命令 , 查看当前项目的目录结构 :

D:\HTML>tree /F
卷 DATA 的文件夹 PATH 列表
卷序列号为 D0D4-2A8C
D:.
│  hello.html
│  hello2.html
│
└─index
    │  index.html
    │
    └─image
            image.jpg

1、绝对路径

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

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

绝对路径访问代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
		<a href="D:\HTML\hello2.html">跳转到同级目录</a>
		<br />
		<a href="D:\HTML\index\index.html">跳转到下级目录</a>
    </body>
</html>

效果展示 :

2、相对路径 ( 同级目录访问 | 下级目录访问 | 上级目录访问 )

相对路径是以当前的网页为基准 , 分为三种情况 :

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

以下面的文件结构为例 :

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 文件名访问 ;

<a href="D:\HTML\hello2.html">跳转到同级目录</a>

在 hello.html 中访问下级目录 index 目录中的 index.html 文件 , 属于下级目录访问 , 使用目录名 + 文件名访问 ;

<a href="D:\HTML\index\index.html">跳转到下级目录</a>

在 index.html 中访问上级目录中的 hello.html 文件 , 属于上级目录访问 , 使用 ../上级文件 进行访问 ;

<a href="../hello.html">跳转到上一级目录</a>

完整代码示例 :

hello.html 代码示例 : 其中涉及同级目录访问 , 下级目录访问 ;

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
		<a href="D:\HTML\hello2.html">跳转到同级目录</a>
		<br />
		<a href="D:\HTML\index\index.html">跳转到下级目录</a>
    </body>
</html>

index.html 代码示例 : 涉及上级目录访问 ;

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>首页</title>
    </head>
    <body>
    	<a href="../hello.html">跳转到上一级目录</a>
    </body>
</html>

十五、锚点定位

锚点定位步骤 :

创建锚点 : 使用 id 属性 , 创建跳转锚点 , 一般情况下是在各种级别的标题上添加的 ;

	<h1 id="anchor1">标题锚点1</h1>
	<h2 id="anchor2">标题锚点2</h2>
	<h3 id="anchor3">标题锚点3</h3>
	<h4 id="anchor4">标题锚点4</h4>

创建锚点链接 :

	<a href="#anchor1">跳转到 标题锚点1</a>
	<a href="#anchor2">跳转到 标题锚点2</a>
	<a href="#anchor3">跳转到 标题锚点3</a>
	<a href="#anchor4">跳转到 标题锚点4</a>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
    </head>
    <body>
		<a href="#anchor1">跳转到 标题锚点1</a>
		<br />
		<a href="#anchor2">跳转到 标题锚点2</a>
		<br />
		<a href="#anchor3">跳转到 标题锚点3</a>
		<br />
		<a href="#anchor4">跳转到 标题锚点4</a>
		<br />
		<br />
		<h1 id="anchor1">标题锚点1</h1>
		<br />
		<h2 id="anchor2">标题锚点2</h2>
		<br />
		<h3 id="anchor3">标题锚点3</h3>
		<br />
		<h4 id="anchor4">标题锚点4</h4>
    </body>
</html>

显示效果 :

十六、base 标签

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

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

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
        <!-- ★ 为所有链接设置 在新窗口中打开 状态 -->
		<base target="_blank"/>
    </head>
    <body>
		<a href="https://blog.csdn.net/">CSDN 博客</a>
		<a href="https://blog.csdn.net/shulianghan">韩曙亮博客</a>
		<a href="https://www.csdn.net/">CSDN 首页</a>
    </body>
</html>

展示效果 :

十七、预格式化文本标签

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

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

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
<pre>
	悯农
	作者：李绅

春种一粒粟，秋收万颗子。
四海无闲田，农夫犹饿死。
锄禾日当午，汗滴禾下土。
谁知盘中餐，粒粒皆辛苦。
</pre>
    </body>
</html>