一、HTML简介
目标：
Q1:什么是网页？
网站是网页的集合，网页是网站中的一“页“，网页是构成网站的基本元素，通常由图片、链接、文件等元素组成。网页俗称HTML文件。
Q2:什么是HTML？
HTML为超文本标记语言(主要是各种各样的标签)，不是一种编程语言。
专门用来制作网页的。
超文本：
- 可以放图片、声音、动画、多媒体等。（超越文本限制）
- 可从一个文件跳转到另一个文件。（超级链接文本）
Q3:网页是怎么形成的？
在HTML文件中写各种HTML标签，再用浏览器打开即可。
Q4：常用的浏览器
浏览器是网页显示运行的平台。
常用浏览器有：IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera，称为五大浏览器。
（IE和Edge同为微软公司的浏览器）
浏览器内核：负责读取网页内容，整理讯息，计算网页的吸纳会死方式并显示页面。
国内浏览器一般采用Webkit和Blink内核，如QQ,UC,搜狐等。
Q5:什么是Web标准
Web标准为WC组织和其他标准化组织制定的一系列标准集合。W3C（万维网联盟）
Q6:为什么需要Web标准？
如果没有标准，浏览器不同，显示页面或排版存在差异。
有Web标准，则存在各种优点：网页规范、便于维护、提升浏览速度等等。
Q7:Web标准的构成（重点）
主要包括结构、表现和行为三个方面。
Web标准提出的最佳体验方案：结构、样式、行为相分离。
做一个类比：结构类比于小鸟的身体，表现类比于小鸟的羽毛，行为类比于小鸟的行为动作（如飞）。在这三者中结构最重要，没有身体，你飞个毛线？？？
二、HTML标签
目标：
1、语法规范
- 所有的标签都必须包含在一对尖括号里。如
<html> - 大部分情况下标签都是成对出现的。
<html></html>即为一对标签，前一个为开始标签，后一个为结束标签，后一个多/。成对出现为双标签，特殊的标签为单标签，如<br />。单标签特别少。 - 双标签关系：包含关系和并列关系
2、HTML基本结构标签
每个网页都会有一个基本的结构标签，也称骨架标签，页面内容在这些基本标签上书写。
HTML页面也叫HTML文档。
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）只是另起一行，与段落不同，段落会插入垂直间距。
四、文本格式化标签
粗体、斜体或下划线等效果，需文本格式化标签，使文本以特殊的方式显示。
标签语义：突出重要性。
五、< div>和 < span>标签
没有语义，相当于一个盒子，用来装内容。
<div>这是头部</div>
<span>今日价格</span>
div：division，表分割，分区。
span：跨度、跨矩。
特点：
（1）< div>用来布局，一行只能放一个< div>，看成大盒子。
（2）< span>用来布局，一行可放多个< span>，看成小盒子。
六、图像标签和路径 （重点）
1、图像标签
< img>标签用于定义HTML页面中的图像。
<img src="图像URL" />
特点：
（1）src是< img>的必须属性，用于指定图像文件的路径和文件名。
（2）单标签
图像标签的其他属性：
图像标签属性的注意点：
（1）属性在标签名img后。
（2）属性间不分先后顺序，属性与属性以空格分隔
（2）属性采取键值对的格式，属性=“属性值”
2、路径（铺垫知识）
（1）目录文件夹和根目录
目录文件夹：即普通文件夹，存放素材
根目录：打开目录文件夹的第一层
（2）vscode打开目录文件夹
文件→打开文件夹→选择目录文件夹，后期方便管理文件。
（3）路径
1、相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。即图片相对于HTML页面的位置。
上一级，用…/退回上层
2、绝对路径：是指目录下的绝对位置，即从盘符开始的路径。很少使用。
例如："D:\web\img.jpg"或完整网络地址：“heep://www.itcase.cn/logo.gif”
相对路径：////！！！
绝对路径：\\!
七、超链接标签（重点）
作用：从一个页面链接到另一个页面，用< a>定义
1、语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
//anchor的缩写
| 属性 | 作用 |
|---|---|
| href | 用于指定连接目标的url地址，必须属性，当为标签应用href属性时，它就具有了超链接 |
| target | 用于指定链接页面的打开方式，其中_self为默认值（当前页面打开），_blank在新窗口中打开。 |
2、链接分类：
1、外部链接，即外部网站的地址。必须以http://开头+外部网址
2、内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。
例如：< a href=“index.html>首页 < /a> 一定要加.html哦！不然就会出现下面情况
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、特殊字符
nbsp：numberspace
lt：less than
gt：greater than
只需记住这三个。