HTML基础02-HTML标签（上）_ahtml标签是由圆括号包围的关键词-CSDN博客

本文链接：https://blog.csdn.net/yangjiao191127/article/details/113449045

02-HTML标签（上）

01-HTML语法规范

1.1基本语法概述

HTML标签是由尖括号包围的关键词，例如<html>。
HTML标签通常是成对出现的，例如<html></html>，我们称为双标签。标签对中第一个标签是开始标签，第二个是结束标签。
有些特殊的标签必须是单个标签（极少数），例如<br/>，我们称为单标签。

1.2标签关系

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

包含关系（父子关系）：

<head>
    <title></title>
</head>

并列关系（兄弟关系）：

<head>
</head>

<body>
</body>

02-HTML基本结构标签

2.1第一个HTML网页

每个网页都有一个基本的结构标签（也称骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。

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

<html>
    <head>
    	<title>我的第一个页面的标题</title>
    </head>
    <body>
        我的第一个页面的内容
    </body>
</html>

03-开发工具 VS Code

VS Code工具生成的骨架

<!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>

其中新增加的代码：<!DOCTYPE>文档类型声明标签、lang语言种类、charset字符集

3.1<!DOCTYPE> 文档类型声明标签

作用是告诉浏览器使用哪种HTML版本来显式网页

<!DOCTYPE html>

这句代码的意思是：当前页面采用HTML5版本来显式网页

注意：

必须声明在文档最前面的位置，处于<html>标签之前。
它是文档类型声明标签，不是一个HTML标签。

3.2lang 语言种类

用来定义当前文档显示的语言：

en定义语言为英文，表示该页面是一个英文网页
zh-CN定义语言为中文，表示该页面是一个中文网页

实际上，对于文档显示来说，定义为en的文档也可以显示中文，同样定义为zh-CN的文档也可以显示英文。

3.3charset 字符集

字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。在<head></head>标签内可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8">

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

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码。

04-HTML常用标签

4.1标题标签<h1> - <h6> (重要)

为了使网页更具有语义化，我们经常在页面中用到标题标签。HTML提供了6个等级的标题标签，即<h1> - <h6>（分别为1级标题到6级标题）。

<h1></h1>
<h2></h2>
...
<h6></h6>

其中h为head的缩写，意为头部、标题

标签语义：作为标题使用，并且重要性依次递减。

特点：

加了标题标签的文字会加粗，字号也会增大
每个标题独占一行

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

段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

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

p为paragraph的缩写，意为段落

标签语义：可以把HTML文档分割为若干段落

特点：

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

换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端才自动换行。如果需要某段文本强制换行显示，就需要使用换行标签<br />

<br />

br为break的缩写，意为打断、换行

标签语义：强制换行

特点：是一个单标签

4.3文本格式化标签

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

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

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

注：重点记住加粗和倾斜

4.4<div></div>和<span></span>标签

和是没有语义的，它们是一个盒子，用来装某些内容。

<div>
    这是一个盒子
</div>
<span>这也是一个盒子</span>

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

特点：

<div></div>标签用来布局，但是一行只能放一个,可以理解为一个大盒子
<span></span>标签用来布局，一行上可以放多个span，可以理解为小盒子

4.5图片标签和路径（重点）

图像标签

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

<img src="img.png" alt="图片加载失败时显示的文字" />

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片显示失败时，代替图片出现的文字
title	文本	提示文本，当鼠标放到图像上时显示出来的文字
width	像素	设置图像的宽度
heigth	像素	设置图像的高度
border	像素	设置图像的边框粗细

注：通常width和heigth只需要设置一个即可，另一个会等比例缩放，避免失真。

图像标签属性注意点：

图像标签可以拥有多个属性，必须写在标签名img的后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式，即 key="value"的格式，属性=“属性值”。

路径的前期铺垫知识
1. 目录文件夹和根目录
  
  实际工作过程中，我们的文件不可以乱放，否则使用时非常麻烦，因此我们需要一个文件夹来管理他们。
  
  目录文件夹：就是一个普通的文件夹，只不过里面存放了我们制作网页需要的相关素材，比如html文档、图片等。
  
  根目录：打开目录文件夹的第一层就是根目录。

路径

页面中的图片非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图片就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：

相对路径：以当前编辑的html文件所在位置为参考，而建立的目录路径

相对路径分类	符号	说明
同一级目录		图像文件位于HTML文件同一级如<img src=“baidu.jpg” />
下一级路径	/	图像文件位于HTML文件下一级如<img src=“images/baidu.jpg” />
上一级路径	…/	图像文件位于HTML文件上一级如<img src="…/baidu.jpg" />

绝对路径：
1. 通常为从盘符开始的路径例如 “C:\Users\74615\Desktop\Web\baidu.jpg”
2. 或为完整的网络地址例如"https://img-home.csdnimg.cn/images/20201124032511.png"

4.6超链接标签（重点）

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

超链接的语法格式

<a href="跳转目标" target="_self">图像、文本、音频等网页元素</a>

a为单词anchor的缩写，意为：锚。

属性	作用
href（必须属性）	用于指定链接目标的url地址，当为标签应用href属性时，他就有了超链接的功能
target	用于指定链接页面的打开方式，其中self为默认值,表示在当前窗口打开目标页面，blank表示在新窗口中打开目标页面

链接分类
1. 外部链接：
```
<a href="https://www.baidu.com/" targrt="_blank">百度（外部链接）</a>
```
2. 内部链接：网站内部页面之间的相互连接
```
<a href="02-我的第一个页面.html" targrt="_blank">内部链接</a>
```
3. 空链接：在还没确定连接目标时，可先使用空链接
```
<a href="#">空链接</a>
```
4. 下载链接：如果href中的地址为一个文件或压缩包，则会下载这个文件
```
<a href="压缩包.zip">下载连接</a>
```
5. 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频和视频等都可以添加超链接
```
<a href="https://www.baidu.com/"><img src="img.png" /></a>
```
6. 锚点链接：点击链接，快速定位到页面中的某个位置
  - 在链接文本的href属性中，设置属性值为 #名称的形式，如
```
<a href="#two">第2集</a>
```
  - 找到目标位置标签，在里面添加一个id属性，属性值为上一步使用的名称，如
```
<h3 id="two">第2集简介</h3>
```

05-HTML中的注释和特殊字符

5.1注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

<!-- 这是一个注释 -->
<!-- 快捷键：ctrl+/ -->

5.2特殊字符

在HTML页面中，一些特殊符号很难或不方便直接使用，此时我们可以使用下面的字符代码来代替。

特殊字符	描述	字符代码
	空字符	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	与号	&amp；
￥	人民币	&yen；
©	版权	&copy；
®	注册商标	&reg；
°	摄氏度	&deg；
±	正负号	&plusmn；
×	乘号	&times；
÷	除号	&divide；
²	平方2（上标2）	&sup2；
³	立方3（上标3）	&sup3；