1 网页

网站: 因特网上，根据一定规则，使得HTML等制作的用于展示特定内容相关的网页集合

网页：网站中的一页，通常是html格式，它要通过浏览器来阅读

网页是构成网站的基本元素，通常由图片链接文字声音视频等元素组成，通常我们看到的网页常见的以.html或者.htm后缀结尾的文件，因此将其俗称为HTML文件

2 什么是HTML

一种超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言
不是一种编程语言，而是一种标记语言

超文本有两层含义：

1.它可以加入图片声音动画多媒体等内容（超越了文本的限制）

2.它可以从一个文件跳到另一个文件，与世界各地主机的文件连接（超链接文本）

3 网页的形成

网页是由网页元素组成的，这些元素利用html标签描述出来，然后通过浏览器解析给用户

4 常用的浏览器

浏览器是网页显示运行的平台，常用的浏览器有IE，火狐（FireWork），谷歌（Chorme），safari和opera，并称为五大浏览器。

浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

浏览器	内核	备注
IE	Trident	IE 猎豹安全 360极速浏览器百度浏览器
firebox	Gecko	火狐浏览器内核
safari	webkit	苹果浏览器内核
chrome/Opera	Blink	chrome/Opera浏览器内核 Blink其实就是webkit的分支

5 Web标准

Web标准是由W3C组织和其他一些标准化组织制定的一系列的集合,W3C(万维网联盟)是国际最著名的标准化组织

为什么需要web标准

可以统一开发流程，统一使用标准化开发工具（VSCode、WebStorm、Sublime），方便多人协作
学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
跨平台，方便迁移都不同设备
降低代码维护成本

web标准的构成

主要包括结构层(Structure layer),表现层(Presentation layer)和行为层(Behavior layer)三个方面

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

Web标准提出的最佳体验方案：结构、样式、行为相分离。简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中

6 HTML 基本概念

严格模式与混杂模式：严格模式：是以浏览器支持的最高标准运行，混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为
开始标签(Opening tag):包含元素的名称，被左右角括号所包围。表示元素从这里开始或者起作用
结束标签(Closing tag):与开始标签相似，只是在其元素名之前包含一个斜杠。表示元素的结尾
内容(Content):元素的内容
元素(Element):开始标签结束标签和内容相结合，便是一个完整的元素
空元素：不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入或者嵌入一些东西，例如<img>
块级元素:块级元素在页面中以块的形式展现,一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中
内联元素:通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行

元素属性: 元素可以拥有属性一个属性必须包含如下内容：

1.  一个空格，在属性和元素名称，或属性与属性之间。
2.  属性名称。
3.  属性值，由一对引号 " " 引起来(布尔属性可省略)。

布尔属性:有时你会看到没有值的属性，它是合法的,这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值.例如disabled

属性值的引号：虽然属性值不强制要求加引号。但是不加引号，会导致属性值有空格时的解析问题
属性值的引号使用单引号或者双引号，都能正确解析。一般使用双引号。

HTML空格

无论你在 HTML 元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符

这么办就是为了可读性可以统一风格

HTML注释

`html

HTML特殊字符

在HTML中，字符<,>,",'和&都是特殊字符我们可以使用转义字符--用于表示字符的特殊编码，

原义字符	转移字符
<	<
>	>
"	"
'	'
&	&

HTML的基本结构

HTML的骨架

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <title>My test page</title> 
    </head> 
    <body> 
    <p>This is my page</p> 
    </body> 
</html>

`<!DOCTYPE html>`

声明文档类型标签,不是HTML标签，告诉浏览器使用那个HTML版本进行解析文档，而且大部分浏览器开启最大兼容模式来解析文档（我们一般称之为怪异模式），这会降低解析效率，而且还会在解析过程中产生一些难以预知的bug，所以文档声明是必须的

`<html></html>`

这个元素包裹了整个完整的页面，是一个根元素。

lang属性

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

1.en定义语言为英语

2.zh-CN定义语言为中文简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页

简单来说定义为en就是英文网页，定义为zh-CN就是中文网页其实对于文档显示来说，定义成n的文档也可以显示中文，定义成zh-CN的文档他可以显示英文这个属性对浏览器和搜索引擎（百度谷歌等）还是有作用的

`<head></head>`

HTML的头部，这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容

`<title>元素`

设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。

元素 <title> 是用来表示整个 HTML 文档标题的元数据（不是文档的内容）。
1. 被作为建议的书签名。
2. 被用在搜索的结果中。

`<meta>元素`

描述数据的数据，而HTML有一个官方的方式来为一个文档添加元数据--元素，他是一个空元素

<meta> 元素用来表示任何不能由其它 HTML 元相关元素，即：不能用<base>, <link>, <script>, <style> , <title>等表示的元数据信息。

`<link>元素`

规定了当前文档与外部资源的关系

该元素最常用于连接样式表，此外也可以用来创建站点图标（比如PC端的favicon图标和移动设备上用以显示在主屏幕的图标）

<link> 元素经常位于文档的头部。

<link> 元素有 2 个属性，rel="stylesheet"表明这是文档的样式表，而 href 包含了样式表文件的路径：

链接一个外部样式表

<link href="main.css" rel="stylesheet">

增加自定义图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

`<script>元素`

<script> 部分没必要非要放在文档头部实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了 HTML 内容（如果脚本加载某个不存在的元素，浏览器会报错)。

注意： <script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入<script>元素中，而不是指向外部脚本文件。

`<body></body>`

包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

2.HTML