网页组成： 文字、图片、音频、视频、超链接
代码转换为网页的软件：浏览器
渲染引擎
渲染引擎：浏览器中专门对代码进行解析渲染的部分。（是浏览器的内核）
| 浏览器 | 内核 | 备注 |
| IE | Trindent | IE、360极速、百度 |
| FireFox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | Apple的浏览器内核 |
| Chorm/Opera | Blink | Blink实际是Webkit的分支 |
Web标准
由W3C组织制定的一些列标准的集合
△Web标准中分成三个构成
|
构成 |
语言 | 说明 |
| 结构 | HTML | 页面元素与内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（大小、颜色等） |
| 行为 | JavaScript | 页面模型的定义与页面交互 |
Web标签要求页面实现：结构、表现、行为三层分离
HTML概念
HTML(Hyper Text Markup Lauguage): 即超文本标记语言，专用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
网页存在固定的结构，如：整体，头部，标题、主体。
网页中的内容结构通过 HTML标签进行描述
<html> <head> <title>网页标题</title> </head> <body> 网页主体内容 </body> <html>
HTML骨架结构标签：
· html标签：网页整体
· head标签：网页头部
· body标签： 网页主体
· title标签： 网页标题
HTML注释
可以直接选中内容，然后ctrl+/
<!--注释-->
HTML标签结构
1. 标签由<、>、/、英文单词或字母组成，标签中<>包括起来的英文单词或字母称为标签名
VS code中可以通过 标签名+tab 直接生成
2. 常见标签由两部分构成，称为：双标签。 前部分称为开始标签，后部分称为结束标签，两部分之间包裹内容；
<开始标签>包裹的内容</结束标签>
3. 少数标签由一部分构成，称之为：单标签。自成一体，无法包裹内容。
HTML标签之间的关系
1.父子关系(嵌套关系)
eg: head与title
2.兄弟关系（并列关系）
head与body
HTML标签
1.排版标签
√ 标题标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
普通文字
标题会自动加粗变大，且h1-h6文字逐渐减小，独占一行
注意title是网页标题，不是标题标签
√ 段落标签(paragraph)
<p>这是一个段落</p>
特点：段落之间存在间隙； 独占一行，但文字一行放不下会自动换行。
√ 换行标签（break）
<!--这是个单标签--> <br>
特点：单标签； 让文字强制换行同时不会像p标签那样有间隙。
√ 水平线标签（Horizontal Rule）
<!--这也是个单标签--> <hr>
特点：单标签； 在页面中显示一条线； 而且我发现它自己独占一行，下面写啥就不用特意加上br去换行
2. 文本格式化标签
| 标签 | 说明 |
EN |
| b | 加粗 | Bold |
| u | 下划线 | Underscore(下划线，强调) |
| i | 倾斜 | Italic |
| s | 删除线 | Strikethrough |
| 标签 | 说明 | EN |
| strong | 加粗 | Strong |
|
ins |
下划线 | Inserted text(插入文本) |
| em | 倾斜 | Emphasized(强调) |
| del | 删除线 | Deleted |
（实际开发中选择标签的原则：标签语义化，即根据语义选择正确的标签）
3. 媒体标签
4. 链接标签