基本认知
认识网页
- 网页由哪些部分组成
文字、图片、音频、视频、链接 - 前端代码是通过什么软件转换成用户眼中的页面
通过浏览器转化（解析和渲染）成用户看到的网页
渲染引擎
- 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
- 浏览器出品的公司不同，内在的渲染引擎也是不同的
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Blink其实是Webkit的分支 |
注意点：渲染引擎不同，导致解析相同代码的速度、性能、效果也不同
Web标准的构成
Web标准中分成三个构成
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
HTML页面固定结构
-
网页类似于一篇文章
- 每一页文章内容是有固定的结构的，如：开头、正文、落款等。。。
- 网页也是存在固定的结构的，如：整体、头部、标题、主体
-
网页中的固定结构是要通过特定的HTML标签进行描述的
-
HTML骨架结构有哪些标签组成
- html标签：网页的整体
- head标签：网页的头部
- body标签：网页的身体
- title标签：网页的标题
-
实例
<!DOCTYPEhtml>
<head>
<meta charset="UTF-8">
<title>html练习</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p >
</body>
</html>
- 说明
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
HTML定义
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML语法规范
注释
- 注释的作用
- 为代码添加具有解释性、描述性的信息。帮助开发人员理解代码
- 浏览器执行代码时会忽略所有注释
- 注释的快捷键
在VS code中：ctrl+/
标签的组成
-
标签的结构图
-
结构说明
- 标签由<、>、/、英文单词或字母组成、并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。
- 少数标签由一部分组成，我们称之为单标签。自成一体，无法包裹内容。
标签的关系
- 父子关系（嵌套关系）
<head>
<title></title>
</head>
- 兄弟关系（并列关系）
<head></head>
<body></body>