前端入门 HTML笔记（一）

╰半夏微凉° 2023-07-07 03:44 9阅读 0赞

## 一、HTML简介 ##

目标：![在这里插入图片描述][20200220164448574.png]  
**Q1:什么是网页？**  
网站是网页的集合，网页是网站中的一“页“，网页是构成网站的基本元素，通常由图片、链接、文件等元素组成。网页俗称HTML文件。

**Q2:什么是HTML？**  
HTML为超文本标记语言(主要是各种各样的标签)，不是一种编程语言。  
专门用来制作网页的。

超文本：

1.  可以放图片、声音、动画、多媒体等。（超越文本限制）
2.  可从一个文件跳转到另一个文件。（超级链接文本）

**Q3:网页是怎么形成的？**  
在HTML文件中写各种HTML标签，再用浏览器打开即可。

**Q4：常用的浏览器**  
浏览器是网页显示运行的平台。  
常用浏览器有：IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera，称为五大浏览器。  
（IE和Edge同为微软公司的浏览器）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70]  
浏览器内核：负责读取网页内容，整理讯息，计算网页的吸纳会死方式并显示页面。  
![在这里插入图片描述][20200220165811234.png]  
国内浏览器一般采用Webkit和Blink内核，如QQ,UC,搜狐等。

**Q5:什么是Web标准**  
Web标准为WC组织和其他标准化组织制定的一系列标准集合。W3C（万维网联盟）

**Q6:为什么需要Web标准？**  
如果没有标准，浏览器不同，显示页面或排版存在差异。  
有Web标准，则存在各种优点：网页规范、便于维护、提升浏览速度等等。

**Q7:Web标准的构成（重点）**  
主要包括结构、表现和行为三个方面。  
![在这里插入图片描述][20200220170909827.png]  
Web标准提出的最佳体验方案：结构、样式、行为相分离。

做一个类比：结构类比于小鸟的身体，表现类比于小鸟的羽毛，行为类比于小鸟的行为动作（如飞）。在这三者中结构最重要，没有身体，你飞个毛线？？？  
![在这里插入图片描述][20200220171449778.png]

## 二、HTML标签 ##

目标：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 1]

#### 1、语法规范 ####

*  所有的标签都必须包含在一对尖括号里。如`<html>`
 *  大部分情况下标签都是成对出现的。`<html></html>即为一对标签，前一个为开始标签，后一个为结束标签，后一个多/`。成对出现为双标签，特殊的标签为单标签，如`<br />`。单标签特别少。
 *  双标签关系：**包含关系**和**并列关系**

#### 2、HTML基本结构标签 ####

每个网页都会有一个基本的结构标签，也称骨架标签，页面内容在这些基本标签上书写。  
HTML页面也叫HTML文档。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 3]  
HTML文档的后缀名必须是.html或.htm

## 三、网页开发工具 ##

在此使用vscode。  
分析VSCode生成骨架标签的新增代码：  
1、<!DOCTYPE>文档类型声明，告诉浏览器使用哪种HTML版本来显示网页。  
`<!DOCTYPE html>`  
此代码：采用最新的HTML版本来显示。

特别注意：  
（1）<!DOCTYPE>要声明在第一行，在Html标签之前  
（2）<!DOCTYPE>不是HTML标签，它就是文档类型声明标签

2、<html lang=""l>定义lang语言种类  
en定义为英文，zh-CN定义为中文。  
其实en也可以显示中文，zh-CN也可以显示英文。

3、< mata charset=“UTF-8”>

*  字符集（Characterset）是多个字符的集合，方便计算机能够世界和存储各种文字。
 *  在< head>标签中，通过< meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
 *  UTF-8称万国码，基本包含了全世界所有国家需要用到的字符。
 *  **一定是UTF-8，不能是utf-8也不能是UTF8**

## 四、常用标签 ##

**重点是记住标签的语义，即标签的含义，即这个标签是用来干嘛的。**

#### 1、标题标签< h1>-< h6> (重要) ####

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

标签语义：作为标题使用，并且根据重要性递减。1级标题比2级标题更重要。  
特点：  
（1）字体变粗，字号变大  
（2）一个标题独占一行

#### 2、段落标签 (重要) ####

< p>标签用于定义段落

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

标签语义：把HTML文档分割成若干段落。  
`拓展，字太长，用查看→自动换行，使其多行显示`

特点:  
（1）文本会根据浏览器大小自动换行  
（2）段落和段落之间存在较大缝隙

#### 3、换行标签 （重要） ####

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

标签语义：强制换行。

特点：  
（1）**单标签**  
（2）只是另起一行，与段落不同，段落会插入垂直间距。

#### 四、文本格式化标签 ####

粗体、斜体或下划线等效果，需文本格式化标签，使文本以特殊的方式显示。  
![在这里插入图片描述][2020030515543695.png]  
标签语义：突出重要性。

#### 五、< div>和 < span>标签 ####

没有语义，相当于一个盒子，用来装内容。

div：division，表分割，分区。  
span：跨度、跨矩。

特点：  
（1）< div>用来布局，一行只能放一个< div>，看成大盒子。  
（2）< span>用来布局，一行可放多个< span>，看成小盒子。

#### 六、图像标签和路径 （重点） ####

##### 1、图像标签 #####

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

特点：  
（1）src是< img>的**必须属性**，用于指定图像文件的路径和文件名。  
（2）**单标签**

图像标签的其他属性：  
![在这里插入图片描述][20200305161132628.png]  
图像标签属性的注意点：  
（1）属性在标签名img后。  
（2）属性间不分先后顺序，属性与属性以空格分隔  
（2）属性采取键值对的格式，属性=“属性值”

##### 2、路径（铺垫知识） #####

（1）**目录文件夹和根目录**  
目录文件夹：即普通文件夹，存放素材  
根目录：打开目录文件夹的第一层  
（2）vscode打开目录文件夹  
文件→打开文件夹→选择目录文件夹，后期方便管理文件。  
（3）路径  
1、相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。即图片相对于HTML页面的位置。  
![在这里插入图片描述][20200305164134491.png]  
上一级，用…/退回上层  
2、绝对路径：是指目录下的绝对位置，即从盘符开始的路径。**很少使用。**  
例如："D:\\web\\img.jpg"或完整网络地址：“heep://www.itcase.cn/logo.gif”  
**相对路径：！！！  
绝对路径：\\\\!**

#### 七、超链接标签（重点） ####

作用：从一个页面链接到另一个页面，用< a>定义  
1、语法格式

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>href</td> 
   <td>用于指定连接目标的url地址，<strong>必须属性</strong>，当为标签应用href属性时，它就具有了超链接</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>用于指定链接页面的打开方式，其中_self为默认值（当前页面打开），_blank在新窗口中打开。</td> 
  </tr> 
 </tbody> 
</table>

2、链接分类：  
1、外部链接，即外部网站的地址。必须以http://开头+外部网址  
2、内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。  
例如：< a href=“index.html>首页 < /a> **一定要加.html哦！不然就会出现下面情况**  
![在这里插入图片描述][20200305170955266.png]  
3、空链接：当没有确定链接目标时，可用空链接临时代替。如：< a href=”\#">首页 < /a>  
4、下载链接：如果href的地址为文件或压缩包，则会下载这个文件。  
5、网页元素链接：各种网页元素都可以添加超链接，如图像、表格、音频、视频等。  
6、锚点链接：点链接，可用快速定位到页面中的某个位置。  
\- 在链接文本的href属性红，设置属性值\*\*\#\*\*名字的形式，如< a href="\#two>第2集< /a>  
\- 找到目标位置标签，里面添加一个id属性=上面的名字，如< h3 id=“two”>第2集介绍 < /h3>**特别注意不用\#了噢！**

## 五、HTML中的注释和特殊字符 ##

1、注释

HTML中的注释以“”结束
    快捷添加注释方法：ctrl+/

2、特殊字符  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 4]  
nbsp：numberspace  
lt：less than  
gt：greater than  
只需记住这三个。

[20200220164448574.png]: https://img-blog.csdnimg.cn/20200220164448574.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200220165618394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70
[20200220165811234.png]: https://img-blog.csdnimg.cn/20200220165811234.png
[20200220170909827.png]: https://img-blog.csdnimg.cn/20200220170909827.png
[20200220171449778.png]: https://img-blog.csdnimg.cn/20200220171449778.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200220171901274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200227153924451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200227154337993.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70
[2020030515543695.png]: https://img-blog.csdnimg.cn/2020030515543695.png
[20200305161132628.png]: https://img-blog.csdnimg.cn/20200305161132628.png
[20200305164134491.png]: https://img-blog.csdnimg.cn/20200305164134491.png
[20200305170955266.png]: https://img-blog.csdnimg.cn/20200305170955266.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200305173903712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70