一、学习的内容
什么是网页就是网站中的一页，通常是HTML格式的文件，要通过浏览器来进行阅读。
网站就是使用HTML等制作的内容相关的网页集合
什么是HTML
HTML就是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种标记语言。
什么是超文本
超文本有两层含义
1、图片、声音、动画、多媒体等等（超越了文本限制）
2、链接可以跳转到另一个文件，与各地主机或者服务器进行文件链接（超链接文本）
网页的解析过程
首先从服务器上来下载HTML文件到浏览器中，然后再进行解析并渲染成页面
常用的浏览器
浏览器的分类
360、IE、FireFox、Chrome、edge、Safari和Opera等等
浏览器的内核
概念
是指浏览器的最核心的部分，负责对网页的语法进行解释，并且渲染/显示网页。
IE
内核是：Trident。 使用该内核的浏览器有：IE、猎豹浏览器、360、百度浏览器
firefox
内核是：Gecko。
Safari
内核是：Webkit
Chrome/Opera
内核是Blink ，Blink是Webkit的分支
备注：目前国内一般的浏览器都会采用Webkit/Blink内核，比如UC、QQ、搜狗等等，目前国内还没有自主研发的浏览器内核。
Web标准（重要）
Web标准是有W3C组织和其他标准化组织指定的一系列网页资讯标准的集合。
为什么需要Web标准
因为浏览器不同，显示页面或者排版有差异，所以需要一个标准来进行统一的显示和排版的规范
Web标准的构成
结构（Strucure）
结构用于对网页元素进行管理和分类，主要用HTML来实现的
表现（Presentation）
表现用于设置网页元素的板式、颜色、大小等等的外观样式，主要指的是CSS
行为（Behavior）
行为指的是网页模型的定义和交互的编写，目前主要使用JavaScript。
HTML的语法规范
基本的语法：
是由标签来组成的：HTML的标签是由尖括号包围的关键词，比如<html>
一般是成对出现的：比如<html></html>、<h1></h1>，一般这种标签我们称之为双标签，标签中的第一个标签是开始标签，第二个标签是结束标签
单标签：有一些特殊的标签必须的单个标签（情况比较少），例如<br />，我们称之为单标签
标签关系
包含关系（父子）
并列关系（兄弟）
HTML基本结构标签
基本的的结构标签也称为骨架标签
骨架标签含义
<html></html>
是页面中最大的标签，我们一般称为根标签
<head></head>
是指文档的头部区域，注意在head标签中我们必须要设置的标签是title
<title></title>
是指文档的标题，让页面有一个属于自己的网页标题
<body></body>
是指的文档的主体，其中包含文档内的所有内容，相关的页面内容都是放在body标签中的
骨架中的新增代码
<!DOCTYPE html>
声明文档类型
DTD文档类型定义（Document Type Definition）
DTD声明的意义：
1、定义文档中应该有什么样的标签
2、标签之间应该如何排列
3、标签应该有什么样的属性
4、标签应该有什么格式的内容
5、校验文档是否复合DTD的文档类型定义的规范
总的来说<!DOCTYPE html>是为了告诉浏览器使用HTML5的版本标签来显示网页
注意：
DTD是定义和校验HTML的内容的，所以必须要写在HTML文件内容的最前面
DTD不是HTML的标签，是另一种专门定义标签语言的语言
lang语言种类
用来定义当前文档显示的语言
1、en定义的是语言为英语
2、zh-CN定义语言为中文
简单来说，定义en就是英文网页，定义为zh-CN就是中文网页
对于文档来说，定义成en的文档也可以显示中文，zh-CN也能显示英文。
<meta charset="UTF-8">
字符集：是多个字符的集合，方便计算机能够识别和存储各类文字
在<head>标签中，可以用<meta>标签中charset属性来规定HTML文档应该使用哪种字符来进行编码（类似于一个大字典）
Charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。
备注：
HTML文档的后缀名必须是.html或者.htm。
开发工具的介绍
常用的网页开发工具
Dreamweaver、Sublime、WebStorm、VScode等
Vscode的使用
1、新建文件（ctrl + N）
2、保存（Ctrl + S）
3、Ctrl + 加号 和 Ctrl + 减号 可以放大和缩小视图
4、生成页面的骨架结构：输入英文的"!" 按下Tab键
5、在文件中点击鼠标右键，在弹出的窗口中点击“Open In Default Browser” 可以在浏览器中预览页面
HTML常用的标签
标签的语义
指的是标签的含义，合理的标签，可以让页面的机构更加的清晰
标题标签
<h1></h1> 标题标签，标签的语义为：作为网站内容的标题使用，可以依据重要性递减。
特点
被标题标签包含的文字会加粗，字号会一句h标签内的数字而进行改变。h1-h6的字体逐渐变小。
一个标签会独占一行
段落标签
<p></p>标签用来定义段落
p是单词paragraph的缩写，是段落的意思。标签的语义：HTML文档中分割段落的作用
特点：
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保留空隙
每个p标签会单独占一行
换行标签
<br />标签
HTML中，文字会从左到右自动换行，如果需要需要强制换行，可以使用<br />标签
是单词break的缩写，意为打断的、换行。
标签的语义：强制换行。
特点
<br />是一个单标签
段落与换行相比，会插入一些垂直的间距，间距更大。
<br />标签只是简单的开始新的一行
文本格式化标签
在网页中，需要给文字设置加粗、斜体、下划线等等效果，可以使用如下标签
加粗
<strong></strong>或者<b></b>
倾斜
<em></em>或者<i></i>
删除线
<del></del> 或者 <s></s>
下划线
<ins></ins>或者<u></u>
<div>和<span>标签
<div>和<span>标签是没有语义的，他们的作用就是将内容装在标签内
div division的缩写，表示分割、分区的意思。 span是跨度，跨距的意思。
特点：
<div>用来布局，每个div会单独占一行。
<span>用来布局时，一行上可以用多个<span>，多个span在一行进行展示。
标签属性
简单理解就是标签的特性
书写格式
在标签名后面多个属性之间要用空格来隔开
属性是用等于号“=”来分开的键值对（key=value）
属性的值必须写在双引号“”中
标签属性可以有多个且没有先后顺序
图像标签
img标签
img是 image的缩写，意为图像
常用的属性和属性值如下
src = “图片路径”；必须属性
alt = “文本”；替换文本，图像不能显示时的文字
title = “文本”；提示文本，鼠标停留在图片上时显示的文本内容
width = “像素值”； 设置图像的宽度
height = “像素值”；设置图像的高度
border = “像素值”； 设置图像边框的粗细
路径问题
相对路径
就是资源相对于HTML页面的位置，以当前文件所在的为参考基础，建立出的文件路径
去上一级目录：..
当前目录：.
下一级目录：/
绝对路径
是指资源所在绝对位置，通常是从盘符直接开始进行查找，不管当前文件在什么位置，绝对路径都可以找到所需资源的地址
超链接
超链接是用<a></a>标签来定义的
超链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
常用属性和属性值
href=“跳转目标”； 用于指定链接目标的url地址，必须属性
target=“目标窗口的打开方式”； 用于指定新页面的打开方式
默认的属性值是_self,代表在当前窗口进行链接窗口，如果设置为_blank代表在新窗口中打开链接地址
链接的分类
1、外部链接 例如直接跳转到百度链接
2、内部链接：网页内部页面之间的相互链接，直接写内部页面的文件名即可
3、空链接：如果临时需要一个链接目标，可以使用 # 来代替
4、下载链接：如果href的属性值是一个文件或者压缩包，那么点击链接会直接下载
5、网页元素链接：使用网页中的处文本以外的其他元素添加的超链接
6、锚点链接：点击链接，可以快速跳转到当前页面中的指定位置
（1）在链接文本中href属性后设置属性值为 #名字 的形式
（2）在目标位置的标签后添加一个id属性=刚才的名字base标签base标签为页面上的所有的链接规定了默认的URL或者目标
常用属性和属性
href=“跳转目标”； 用于指定链接目标的url地址，必须属性
target=“目标窗口的打开方式”； 用于指定新页面的打开方式
默认的属性值是_self,代表在当前窗口进行链接窗口，如果设置为_blank代表在新窗口中打开链接地址
base标签一般放在head标签内部的最上方，有且只能有一个base标签，如果有多个base标签则以第一个为准。
例HTML的注释
意义：
如果在HTML文档中添加一些便于阅读和理解但又不需要在页面中进行展示的文字，就需要使用我们的注释标签。
一般注释都是以<!--开始 以-->结束，中间的内容都是注释内容。
注释的快捷键是 Ctrl + /
二、遇到的问题：
无
三、解决方案
无
|
