## 1、浏览器及内核
- web浏览器是用于读取HTML文件，并将其作为网页显示
- 浏览器最重要的部分或其核心是渲染引擎，我们一般称为内核；
- 内核的作用负责对网页语法的解释并渲染网页；
- 五大浏览器：chrome、safari、Firefox、Opera、IE
1.chrome 谷歌浏览器
生产商：Google
内核：webkit、blink
2.Firefox 火狐浏览器
生产商：Mozilla
内核：gecko
3.Safari 苹果浏览器
生产商：苹果公司
内核：webkit
4.opera 欧朋浏览器
生产商：挪威欧普拉软件公司
内核：presto blink
5.IE 浏览器
生产商：微软公司 Microsoft
内核：trident
其他浏览器：
大部分国产的浏览器（qq浏览器，uc浏览器，猎豹浏览器，360浏览器）基本上是在IE浏览器的内核上进行的二次开发
现在国内市场上有许多双内核的浏览器，使用的是trident,webkit内核
## 2、页面的三大组成部分
* 结构：给页面搭建基本的框架结构。 html ，类比于建房子的时候要搭的地基跟钢筋。
* 表现：页面的美化，装饰。 css 相当于给房子加背景和家具的排列布局。
* 行为：页面的轮播图，返回顶部... javascript 相当于房子加灯的开关。
结构层html和表现层css，是 W3C 制定的规范，万维网联名。
行为层js，是 ECMA 制定的规范，欧洲计算机协会。
## 2、HTML介绍
## 1、什么是HTML
* HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言。
通过HTML标记（标签）对网页中的文本、图片、多媒体等内容进行描述。
**说明：**
- “超文本”：不仅能承载简单的文字、还能包含超链接、图片、音频、视频等。
- “标记语言”：标记语言是由一套标记标签组成的。
## 2、HTML文档——网页
HTML文档也被称为网页
- 后缀名.html
- 文件名格式：
主文件名.后缀名
创建HTML文档
- 1）新建一个后缀名为.html的文件
- 2）添加基本结构：英文状态下!回车
- 3) 输入HTML：5
## 3、标记（标签）
构成网页的基本单位
- 标签：由尖括号括起来的关键词
- 单标签：<标签名 >或 <标签名 />
- 双标签：``<开始标签名>[内容]</结束标签名>``
- 元素：标签及内容的整体
- 属性
```html
<标签名 属性名1="属性值1" 属性名2="属性值2"></标签名>
```
<后面的第一个单词叫做标签的名字，标签名空格之后的叫做标签的属性。
* 属性由属性名和属性值组成，属性名和属性值用等号连接
* 属性值用引号引起来。 多个属性之间用空格隔开。
* tab可以进行缩进，shift+tab取消缩进。
## 4、HTML注释
* 注释即对代码的解释和说明，不会被浏览器解析执行
* 注释内容不会出现在网页中，只是对代码的一个说明
* 语法
```html
<!-- html注释内容 -->
HTML中的注释以`<!--`开头，以`-->`结束，开始和结束中间为注释内容。
```
* ctrl + /
* alt + shift + a: 可以在一行代码的后面进行注释
## 5、HTML文档的基本结构
```html
<!DOCTYPE html>
<!--
<!doctype> 文件类型定义DTD
作用：告诉浏览器该文档的版本信息，让浏览器解析器知道使用哪种语法解析文档
文档第一代码是HTML5标准网页声明，告知浏览器用HTML5标准解析此网页。
不是标签，是声明语句
必须写在HTML文档的第一行
-->
<html lang="en">
<!--
网页的根元素
定义整个HTML文档，包含head和body
lang属性
- 作用：定义当前文档显示文字的语言
- 语法：lang=“en”
(lang是language的简写)
- 取值:
en定义语言为英语
zh-CN定义语言为中文 -->
<head>
<!--
网页的头部信息 其内容不会显示在网页中
定义文档的头部，包含文档的标题（title），可以包含文档脚本（script），样式（style），meta信息以及更多的其他信息。
-->
<meta charset="UTF-8">
<!--
文档字符集
字符集(Character set)是多个字符的集合，便于计算机识别和存储各种文字。
在<head>标签内,通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
charset属性:设置编码方式
UTF-8：万国码，通用性较好
(2)常用的字符集
- UTF-8被称为万国码，包含全世界所有国家需要用到的字符
- GB2312简单中文，包括6763个汉字
- GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
- BIG5繁体中文，港澳台等用
-->
<title>标题</title>
<!--
网页标题
添加到收藏夹时的标题显示在搜索引擎结果中的页面标题。
-->
</head>
<body>
<!-- 网页的主体内容 定义文档的主体，在浏览器窗口中可以看到的所有内容都包含在它内部。-->
父子关系——嵌套关系
兄弟关系——并列关系
</body>
</html>
```
## 6、常用HTML标签
### 1）块级标记
- div标签
搭建网页结构的基本标签——盒子；无语义标签
```
<div>[内容]</div>
<div> 文字内容</div>
<div>
<div></div>
</div>
```
```html
- 特性
- 宽度默认撑满整个父元素
- 高度默认由内容撑开
- 独立成行——垂直布局
作用：可以用来划分页面的区块，里面嵌套任何的标签
```
- h系列标签：标题标签
标题标签中文字大小依次减小，重要程度依次减弱。
注意事项：h1标题一个页面中只有一个，h2~h6是可以有多个的。
```
<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>
```
```html
- 特性
- 宽度默认撑满整个父元素
- 高度默认由内容撑开
- 独立成行——垂直布局
- 自带外间距
- 自带加粗效果
应用场景：
- logo
- 文章页标题、内容章节标题
- 产品标题
- 模块标题等
```
- p标签：段落标记
```
<p>[文字]</p>
```
```html
- 特性
- 宽度默认撑满整个父元素
- 高度默认由内容撑开
- 独立成行——垂直布局
- 自带外间距
应用场景：文章中的段落、页面中的文字块
注意：p标签不能嵌套块级标签，例如：div，p,h1~h6
```
- hr标签：水平分割线 块级标记
```html
- 特性
- 默认自带间距、自带边框
作用：在页面中显示一条水平线
```
- 其他
- br标签：强制换行
```
<br > | <br />
应用场景:用于强行换行
> 不参与分类，不能设置其他样式
```
### 2）行级标记
#### 文本格式化标签
- span标签:无语义标签，用于区分样式
* 没有实际的语义，可以理解为一个小盒子，里面一般装着一个或几个文本内容
* 应用场景：控制局部文本的样式
- b标签：一个实体标签，它里面包围的文本显示粗体效果
- strong标签：一个语义标签，强调语气，它里面包围的文本显示粗体效果
- i标签：它里面包围的文本显示斜体效果
- em标签：一个语义标签，强调语气，它里面包围的文本显示斜体效果
- del标签：删除线
- sup标签：上标
- sub标签：下标
- 特性
- 宽度默认由内容撑开
- 高度默认由内容撑开
- 默认横向显示——水平布局，一行排不下，自动折行
- 换行和空格会被解析
#### a标签--超链接标签
```html
<!-- 网址 -->
<a href="https://www.baidu.com/">百度</a>
<!-- 本地文件 -->
<a href="./摩洛哥/moluoge.html" target="_self">本地文件1</a>
<!-- 空链接 -->
<a href="#">空链接</a>
<!-- 伪链接 -->
<a href="javascript:" title="我是伪链接">伪链接</a>
<!-- title -->
<a href="https://www.baidu.com/" title="百度">百度title</a>
<!-- a:超链接标签
href:跳转的路径；
网址，本地文件，空链接（#占位，跳转到当前页的顶部），伪链接（href="javascript:"假链接，不跳转的）
title:提示信息的作用
target:被链接文档在哪里显示
1.target='_self' 在当前窗口跳转,默认值
2.target='_blank'在新窗口跳转
语法：
<a href="">内容</a>
特性：
1.宽度默认由内容撑开
2.高度默认由内容撑开
3.默认横向显示，水平布局，一行排不下，自动折行
4.换行和空格会被解析
5.自带文字颜色
6.自带下划线
7.鼠标指针的形状为手型
8.去掉a标签下划线text-decoration: none;
利用锚点来跳转指定锚点处
定义锚点
<div id='锚点名称'></div>
引用锚点
<a href="#锚点名称">内容</a>
-->
<!-- 点击这个也会跳转到顶部，但是跳转到顶部的原因:由于href属性没有写东西，点击的时候会刷新页面 -->
<a href="">点击跳转到顶部没有#</a>
```
### 3）行内块级标记
img图像标签
```html
<!-- 网址 右击--复制图片地址 -->
<img src="https://img0.baidu.com/it/u=2409410196,1796254698&fm=26&fmt=auto&gp=0.jpg" alt="">
<!-- 盘符下的某个路径 -->
<img src="C:\Users\Administrator\Desktop\1.jpg" alt="">
<!-- 本地文件 -->
<img src="./images/2.jpg" alt="">
<img src="./images/3.gif" alt="">
<!-- alt -->
<img src="./images/4.jpg" alt="图片4">
<img src="./images/44.jpg" alt="图片4">
<img src="./images/444.jpg" alt="">
<!-- title -->
<img src="./images/1.jpg" alt="" title="打架" width="300px" height="200px">
img标签
语法：<img src="" alt="">
src:图片的路径
../../表示上上级目录
alt:作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验
title:提示信息的作用,鼠标悬停在图片时显示提示信息
width：宽度
height:高度
注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放
特性：
1.默认横向显示，水平布局，一行排不下，自动折行
2.换行和空格会被解析
3.可以设置宽高
```
## 四、路径
### 1、绝对路径
- 带着协议的完整的路径
https://www.baidu.com/
- 盘符下的某个路径
E:\1_1.jpg
### 2、相对路径
- ./ 表示当前目录 一个点（.）后面跟一个斜杠表示当前目录也就是当前文件所在目录。 可以省略的
- ../ 表示上一级目录 两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录。
- ../../表示上上级目录
- 文件夹名/ 表示下一级目录
**注意:**在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝对链接。
1635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
