html(1)

1. 五大浏览器：

IE（Edge）浏览器
Firefox（火狐）浏览器
Chrome（谷歌）浏览器
Safari浏览器
Opera（欧朋）浏览器

1.1 五大浏览器的内核:

IE浏览器（Trident）
Firefox（火狐）浏览器（Gecko）
Chrome（谷歌）浏览器（webkit）
Satari浏览器（blink）
Opera（欧朋）浏览器（blink 早期：presto ）
浏览器内核不同有什么影响？

2. Web标准（记忆）

2.1. 为什么会有web标准

同样的代码，需要在不同浏览器显示效果相同。

2.2. Web 标准构成

将页面分为三层：结构、样式、行为。

结构：HTML------页面骨架
样式：CSS------页面样式
行为：JS------页面动态效果

3. HTML的标签分类

3.1 h 系列的标签 (Header) : 标题标签

h1，h2，h3，h4，h5，h6

作用 : 给页面上的文字加上标题的语义

代码 :

<h1>我就是h1标签</h1>

效果 : h1，h2，h3，h4，h5，h6 将文字放大、加粗、并且逐渐变小（h1标签是最大的）

特点 : 独占一行

注意 : h1 标签尽量少用，太多不利于SEO(搜索引擎优化) 。 一般h1 都是给文章的标题或者 logo使用。

3.2. p 标签 (Paragraph) : 段落标签

作用: 给页面上的一段文字加上段落的语义

代码:

 <p>这是段落</p>

特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。

3.3. hr 标签 (Horizontal Rule)：水平线标签

作用: 在页面上显示一条横线 (没有语义)

代码:

<hr />

3.4. br 标签 (break row=行)：换行标签

作用：强制换行（代码中换行无效）

代码：

<br />

3.5. (4组)文本格式化标签

b u i s ,更有语义化( strong ins em del)

作用:

b: 加粗
u: 下划线
i: 倾斜
s: 删除线
建议不要使用, 因为这些标签没有语义

作用:

strong: 加粗
ins: 下划线
em: 倾斜
del: 删除线
可以使用, 语义: 起强调加强语气作用

3.6. 标签的属性（了解）

属性为 HTML 元素提供附加信息。

标签的属性

比如：

<hr color="red" width="400" />
<img src="images/1,jpg">

格式：

<标签名 属性名1="属性值1" 属性名2="属性值2" …> 内容 </标签名>

注意：

标签可以同时有多个属性，并且属性之间以空格隔开（可读性、规范）
标签名与属性名之间，必须以空格隔开！
属性与属性之间没有顺序关系！
每个标签上的属性并不是完全相同
提倡：尽量不使用 样式属性。

3.7 图片标签（重点）

11.1. img 标签 (image的简写) ：图片标签
作用: 在页面中显示一张图片

代码:

<img src="图片URL" />

特点: 就是显示图片

属性:

src: 图片显示的路径（必须）
alt: 如果图片加载不出来, 会显示这个属性中的文字
title: 介绍这张图片
width: 图片的宽度
height: 图片的高度
图片宽高只设一个, 另一个会等比例缩放
两个都设可能会变形, 所以一般我们只设一个。

3.8. 路径问题（难点）

当前文件找目标文件的过程

3.8.1.绝对路径

用的较少

带有盘符的路径: C:\Users\ziyue\Desktop\代码\01.jpg

3.8.2.相对路径

用的很多，可移植性很好

3.8.2.1 同级目录

如果页面与图片同一级目录, 直接写目标文件的名字（类比如我们俩都在大厅）

<img src="2.jpg">

3.8.2.2 下级目录

下级目录： 如果图片在同级目录image文件夹下

<img src="image/1.jpg">

步骤：

找到图片所在的目录（先写文件夹的名字）
去图片所在文件夹里面去找图片（文件夹名字/）
然后直接写目标文件的名字即可（文件夹名字/目标文件的文件名）

12.1.1.3. 上级目录
上级目录：如果图片 在页面的 上一级目录

<img src=”../2.jpg” >

步骤：

首先去目标文件所在的目录。去上一级目录（../）
直接在路径后面写目标文件的名字（../目标文件的名字）

总结：

通过文件夹名 / 可以来到下一级目录，通过../ 可以来到上一级目录
一般开发中用的最多的是相对路径，因为相对路径的可移植性要强。（我发给你，你能看~）
``