一、基础认识
1、认识网页
1.1、网页有哪些部分组成：文字、图片、音频、视频、超链接；
1.2、网页背后的本质：前端代码；
1.3、前端代码通过浏览器（解析和渲染）转换成用户眼中所看到的页面；
1.4、五大浏览器：IE, 谷歌（Chrome），火狐(Firefox)，Safari浏览器，欧朋浏览器（Opera）;
1.5、渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分，
浏览器出品不同，内在渲染引擎也不同
| 浏览器 | 内核 | 备注 |
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Blink其实是Webkit的分支 |
注意点 ：
渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同，
谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户喜爱（推荐）。
1.6、web标准
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异，web标准就是为了让不同的浏览器按照相同的标准显示结果，让展示的效果统一。
web标准的构成：
| 构成 | 语言 | 说明 |
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
2、HTML概念
2.1、HTML(Hyper Text Markup Language)超文本标记语言
2.2、构建基本网页的步骤：
新建文本文档—在文档中输入代码等内容并保存—重命名后缀为html文件—双击打开html文件，浏览器会自动显示之前输入的内容；
2.3、HTML页面固定结构
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
网页中的固定结构是要通过特定的HTML标签进行描述
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>2.4、VS Code的基本快捷键
1>快速生成标签：英文+ tab
2>保存文件：ctrl + s
写完文件之后必须要保存文件，否则网页无变化；
可以设置自动保存；
3> 快速查看网页效果：右击——Open in Default Browser
快捷键：alt + b (必须安装了 open in Default Browser插件)
4>快速生成结构标签：！ + tab
！必须是英文的，中文！无效；
必须保证当前文件后缀名是.html，否则无效；
5>快速复制一整行：ctrl + c
6>快速粘贴一整行：ctrl + v
7>快速删除（剪切）一整行： ctrl + x
8>快速注释：ctrl + /
2.5、HTML注释
作用：为代码添加具有解释性、描述性的信息，主要用来帮助开发人员理解代码；
浏览器执行代码时会忽略所有的注释；
2.6、HTML标签的结构及属性
2.6.1标签结构说明：
标签由<、 >、/、英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名；
常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容；
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。<br><hr>
2.6.2HTML标签的属性
<strong class="one">文字要变粗</strong>
标签的属性：class="one" 属性名=“属性值”
属性名：class
属性值：one
属性注意点：
标签属性写在开始标签内部；
标签上可以同时存在多个属性；
属性之间以空格隔开；
标签名与属性之间必须以空格隔开；
属性之间没有顺序之分；
2.6.3HTML标签之间的关系
父子关系（嵌套关系）
兄弟关系（并列关系）
402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
