目录
一、HTML的语法规范
（一）基本语法概述
1、HTML标签是由尖括号包围的关键字，例如<html>
2、HTML标签通常是成对出现的，例如<html></html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3、有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。
（二）标签关系
- 包含关系
<head>
<title></title>
</head>- 并列关系
<head></head>
<body></body>二、HTML基本结构标签
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也成为HTML文档。
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
这是一段话
</body>
</html>| 标签名 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签，称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里的 |
三、VsCode工具生成骨架标签新增代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我的第一个页面
</body>
</html>1、 <!DOCTYPE>标签：不是HTML标签，是一个文档类型声明标签，作用是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html> 意思是当前页面采取的是HTML5版本来显示网页
2、lang语言
用来定义当前文档显示的语言
- en定义语言为英语
- zh-CN定义语言为中文
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
3、charset字符集
- 字符集是多个字符的集合，以便计算机能够识别和存储各种文字。
- 在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
- charset常用的值有：GB2312（简体中文）、BIG5（繁体中文）、GBK（简体中文和繁体中文）和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
四、HTML常用标签
（一）标题标签<h1> - <h6>
<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h3>标题标签3</h3>
<h4>标题标签4</h4>
<h5>标题标签5</h5>
<h6>标题标签6</h6>标签语义：作为标题使用，并且依据重要性递减
（二）段落标签<p>
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
标签语义：可以把HTML文档分割为若干段落。
特点：1、文本在一个段落中会根据浏览器窗口的大小自动换行2、段落和段落之间保有空隙
<p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档 格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
<p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>
（三）换行标签 <br />
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br />
标签语义：强制换行
特点：1、是单标签 2、只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
<p>HTML的全称为超文本标记语言，是一种标记语言。<br />它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
<p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>（四）文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要
| 语义 | 标签 | 说明 |
| 加粗 | <strong></strong>或<b></b> | 推荐使用<strong>标签，语义更强烈 |
| 倾斜 | <em></em>或<i></i> | 推荐使用<em>标签，语义更强烈 |
| 删除线 | <del></del>或<s></s> | 推荐使用<del>标签，语义更强烈 |
| 下划线 | <ins></ins>或<u></u> | 推荐使用<ins>标签，语义更强烈 |
<p>我是<strong>加粗</strong>的文字</p>
<p>我是<b>加粗</b>的文字</p>
<p>我是<em>倾斜</em>的文字</p>
<p>我是<i>倾斜</i>的文字</p>
<p>我是<del>删除线</del>的文字</p>
<p>我是<s>删除线</s></p>
<p>我是<ins>下划线</ins></p>
<p>我是<u>下划线</u></p>
（五）<div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：1、<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
2、<span>标签用来布局，一行上可以多个<span>。小盒子
<div>div标签单独占一行</div>
<div>div标签单独占一行</div>
<span>span标签</span>
<span>span标签</span>
<span>span标签</span>
（六）图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
通常width和height只设置一个，另一个可以自适应
<h4>图像标签的使用：</h4>
<img src="cat.png" title="这是小猫" width="100" alt="小猫没显示出来" />
<h4>图像显示不出来，替换文本的使用：</h4>
<img src="dog.png" title="这是小猫" width="100" alt="小狗没显示出来" />
- 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于HTML页面的位置）
相对路径分类 符号 说明 同一级路径 <img src="baidu.gif"/> 下一级路径 / <img src="images/baidu.gif"/> 上一级路径 ../ <img src="../baidu.gif"/>
- 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
（七）超链接标签
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
链接的属性：
| 属性 | 作用 |
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值是在当前窗口打开页面，_blank为在新窗口中打开方式 |
链接的分类：
1、外部链接，例如 <a href="http://www.baidu.com">百度</a>
2、内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如 <a href="index.html">首页</a>
3、空链接：如果当时没有确定链接目标时，<a href="#">首页</a>
4、下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
5、网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6、锚点链接：点击链接，可以快速定位到页面中的某个位置
- 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
- 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第2集介绍</h3>
<h4>外部链接：</h4>
<a href="http://www.baidu.com">百度</a>
<h4>内部链接：</h4>
<a href="07-图像标签.html" target="_blank">这是一个超链接标签</a>
<h4>空链接：</h4>
<a href="#">这是一个空链接</a>
<h4>下载链接：</h4>
<a href="cat.zip">下载文件</a>
<h4>网页元素链接：</h4>
<a href="07-图像标签.html" target="_blank"><img src="cat.png" width="100"/></a>
五、特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时可以使用下面的字符来替代。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
