网页的认知
网页是有什么组成的？
- 网页是由：文字，图片，超链接，音频，视频组成的。
我们看到的网页背后是什么?
- 前端程序员写的代码
前端的代码是通过什么软件转换成用户眼中的页面的？
- 通过浏览器转化 （解析和渲染） 成用户看到的网页
五大浏览器认知
浏览器：网页显示，运行的平台，是前端开发必备利器。
常见的五大浏览器：
- IE浏览器
- 火狐浏览器（Firefox）
- 谷歌浏览器（Chrome）
- Safari浏览器
- 欧朋浏览器（Opera）
渲染引擎（了解）
渲染引擎（浏览器内核）:浏览器中专门 对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的：
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | trident | IE，猎豹，360，百度 |
| Firefox | gecko | 火狐 |
| Safari | webkit | 苹果 |
| Chrome/Opera | blink | blink 其实是 webkit 的分支 |
为什么需要web标准？
不同的浏览器的渲染引擎不同，对于相同代码解析的效果不同会存在差异
- 如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！
web标准：让不同的浏览器按相同的标准显示结果，让展示的效果统一
web标准的构成
web标准中分成三个构成：
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色，大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互的效果 |
HTML的概念
HTML（Hyper Text Markup Language）中文翻译为：超文本标记语言
- 专门用于网页开发的语言，主要通过HTML标签对网页中的文本，图片，音频，视频等内容进行描述
HTML骨架
网页类似于一篇文章：
- 每一页文章内容是有固定的结构的，如：开头，正文，落款等……
- 网页中也是存在固定的结构的，如：整体，头部，标题，主体
网页中的固定结构是要通过特点的HTML标签进行描述的
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>HTML骨架结构标签有哪些组成？
- html标签：网页的整体
- head标签：网页的头部
- body标签：网页的身体
- title标签：网页的标题
HTML开发工具
- VS code（编辑器）
- 插件 Dark
- 插件 Chines
- 插件 open in browser
- PxCook（测量工具）
- 谷歌浏览器
- Snipaste（截图工具）
- ps（测量工具）插件：Cutterman 官网：Cutterman - 最好用的切图工具
VS code的基本快捷键
- 快速生成标签：英文+tab
- 保存文件：Ctrl+s
- 快速查看网页效果：右击-open in dafault browser。快捷键：Alt+B。注意：必须安装了open in dafault browser
- 快速复制一整行：Ctrl+c
- 快速粘粘一整行：Ctrl+v
- 快速删除（剪切）一整行：Ctrl+x
语法规范
注释:
注释快捷键Ctrl+/
不在代码中执行
HTML标签结构
标签的结构图：
结构说明：
- 标签由<,>,/,英文单词组成。并且把标签中的<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称为：双标签。前部分叫开始标签，后部分叫结束标签，两部分包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容（如：
<br>,<hr>）
标签属性
标签属性分析图：
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
标签的关系
父子关系（嵌套关系）
<head>
<title></title>
</head>
兄弟关系（并列关系）
<head></head>
<body></body>