（二）HTML 标签（上）_web什么标签不分段-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57162892/article/details/125058041

本文详细介绍了HTML的基本语法规范，包括标签的使用、文档类型声明、语言种类和字符集设置。深入讲解了HTML的基础结构标签，如<h1>-<h6>、<p>和<br/>，以及文本格式化、图像和超链接的标签。同时，讨论了HTML中的注释和特殊字符号，是前端初学者的必备教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. HTML 语法规范

1.1 基本语法规范

HTML 标签是由尖括号包围的关键词，例如<html>。
HTML 标签通常是成对出现的，例如<html>和</html>，称为双标签。第一个是开始标签，第二个是结束标签。
有些特殊标签必须是单个标签（极少情况），例如<br/>，我们称之为单标签。
注意：HTML 标签对大小写不敏感：<P> 等同于 <p>。但W3C在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写，故我们学习的时候最好还是用小写标签。

1.2 标签关系

标签关系可以分为两类：包含关系和并列关系

2. HTML 基本结构标签

每个网页都会有一个基本的结构标签，页面内容都是在这些基本标签上书写。 HTML 页面也叫 HTML 文档。

<html>
	<head>
		<title>我的第一句代码！ </title>
	</head>
	<body>
		“月薪过万，一飞冲天”

		一些仪式感：
        “hello word！”
	</body>
</html>

标签名	定义	说明
<html></heml>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档头部	注意在head标签中我们必须要设置自己的标签是titile
<titile></titile>	文档标题	让页面拥有一个属于自己的网页标题
<body></body>	文档主题	元素包含文档的所有内容，页面内容基本上放在这里

HTML的文档后缀名必须是.html或.htm。

3. 开发工具

可以使用专业的 HTML 编辑器来编辑 HTML，在这里推荐几款常用的编辑器：

VS 代码： https://code.visualstudio.com/
崇高文本： http://www.sublimetext.com/

3.1 文档类型声明标签

<!DOCTYPE> 文档类型声明，告诉浏览器使用何种 HTML 版本来显示网页。

<!DOCTYPE html>

这句话的意思是：当前页面采用的是 HTML5 版本来显示网页。 注意：

<!DOCTYPE> 声明位于文档最前面的位置，处于<html>标签之前。
<!DOCTYPE> 不是一个 HTML 标签，他就是文档类型声明标签。

3.2 lang 语言种类

用来显示当前文档显示的语言。

<html lang="zh-CN">中

<html lang="en">英

</html></html>

en 定义语言为英文。
zh-CN 定义语言为中文。
但什么语言都能写

这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的。

3.3 charset 字符集

字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset 属性来设置文档使用何种字符编码。

charset常用的值有：GBK、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

不写的话可能会乱码，最好是大写。

4. HTML 常用标签

4.1 标签语义

标签语义就是标签的含义。

根据标签的语义，再合适的地方给一个最合理的标签，可以让页面结构更清晰。

4.2 标题标签 h1-h6（重要）

为了使网页具有语义化，经常使用标题标签，HTML 提供 6 个等级的网页标题标签即 <h1>-<h6>。

<h1>我是一级标签 </h1>

<h1>标题一共六级选,</h1>

<h2>文字加粗一行显。</h2>（<>后面加字无用）

<h3>由大到小依次减，</h3>

<h4>从重到轻随之变。</h4>

<h5>语法规范书写后，</h5>

<h6>具体效果刷新见。</h6>

单词为 head 简写，从 h1-h6 依据重要性递减。

4.3 段落和换行标签（重要）

在vscode中的空格和分段在网页上不显示

1.<p>我是一个段落标签</p>

p 指paragraph，意为段落。把文字有条理的显示出来就需要将文字分段显示。在 html 中，<p> 标签用于定义段落，将整个网页分成若干个段落。

标签语义: 把 HTML 文档分割为若干段落。

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。

2.<br/> 是 break 缩写，意为打断、换行。

标签语义： 强制换行

特点：

<br/> 是个单标签。
<br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.4 文本格式化标签

在网页中，有时候需要为文字设置粗体、斜体或下划线等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。

标签语义：突出重要性，比普通文字重要。

语义	标签	说明
加粗	<strong></strong>或<b></b>	更推荐<strong>，语义更强烈
斜体	<em></em>或<i></i>	更推荐使用<em>，语义更强烈
删除线	<del></del>或<s><s/>	更推荐使用<del>，语义更强烈
下划线	<ins></ins>或<u></u>	更推荐使用<ins>，语义更强烈

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>

<body>
    我是<strong>加粗</strong>的文字<br>
    我是<b>加粗</b>加粗的文字<br>
    我是<em>倾斜</em>的文字<br>
    我是<i>倾斜</i>的文字<br>
    我是<del>删除线</del><br>
    我是<s>删除线</s>
</body>

</html>

4.5 div 和 span 标签

<div> 和 <span> 是没有语义的，它们是一个盒子，用来装内容的。

<div>这是头部</div> （大）

<span>今日价格</span> （小）

div 是 division 的缩写，表示分割、分区。span 意思是跨度、跨距。

特点：

div 标签用来布局，但是现在一行只能放一个 div，大盒子。（独占一行）
span 标签用来布局，一行可以多个 span，小盒子。

4.6 图像标签和路径（重点）

4.6.1 图像标签

在 HTML 标签中，<img /> 标签用于定义 HTML 标签页面中的图像。（单标签）

<img src="（图像文件名）" />

单词 image 的缩写，意为图像。

src 是标签的必须属性，用于指定图像文件的路径和文件名。

属性： 属于这个图像标签的特性。

图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，当图片不显示时显示文字
title	文本	提示文本。鼠标放到图像上显示文字
width	像素	图像宽度
height	像素	图像高度
border	像素	图像边框粗细

（高宽修其一即可）

4.6.2 路径

1. 相对路径

相对路径：以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。

分类	符号	说明
同级路径		同一级如<img scr="baidu.gif"/>
下一级路径	/	位于 HTML 文件上一级如<img scr="images/baidu.gif"/>
上一级路径	../	位于 HTML 文件下一级如<img scr="../baidu.gif/">

2. 绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。

目录地址：

<img src="C:\Users\86136\Desktop\夹\CSS\案例 品优购\images">

网络地址：

<img src="https://csdnimg.cn/release/cmsfe/public/img/skin-sea-title.555aae9c.png">

4.7 超链接标签

在 HTML 标签中，<a/> 标签用于从一个页面链接到另一个页面。

4.7.1 链接的语法格式

a 是单词 anchor 的简写，是锚的意思

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性

属性	作用
href	指定链接地址 url，为必须属性。
target	指定页面打开方式，_self为默认值，_blank为在新窗口中打开