HTML/CSS/JS学习笔记 Day1（HTML--工具语法规范）
跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358
Day1 内容梳理：
目录
HTML
0. 概述
0.1 HTML介绍
0.2 网页的形成
0.3 浏览器
0.4 Web标准（⭐重点）
1. 基础内容
1.1 基本语法规范
标签格式
标签关系
1.2 基本结构标签
1.3 开发工具 & 插件
开发工具
插件
1.4 几种快捷键
HTML
0. 概述
网站是用于展示特定相关内容的网页集合。
网页是构成网站的基本元素，通常是HTML格式的文件，由图片、链接、文字、声音、视频等元素组成，需要通过浏览器来阅读。
0.1 HTML介绍
HTML指的是超文本标记语言（Hyper Text Markup Language），是一种标记语言而非编程语言。
超文本的两层含义：
- 超越了文本限制，可以加入图片、声音、动画、多媒体等内容。
- 超链接文本，可以从一个文件跳转到另一个文件，与世界个体的主机的文件相互链接。
0.2 网页的形成
过程：前端人员开发代码-->浏览器解析、渲染-->生成Web页面
0.3 浏览器
国际上常用的五大浏览器：IE、Firefox（火狐）、Chrome（谷歌）、Safari、Opera
浏览器内核：
| 浏览器 | 内核 | 备注 |
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Chrome/Opera浏览器内核。Blink其实是Webkit的分支 |
目前的国内浏览器一般都会采用Webkit或Blink内核，在此至上再增添新内容。
0.4 Web标准（⭐重点）
需要Web标准是因为浏览器不同会导致显示页面、排版有差异
Web标准的构成有三个方面：结构（Structure）、表现（Presentation）、行为（behavior）
| 标准 | 说明 |
| 结构 | 用于对网页元素进行整理和分类。现阶段主要学的是HTML。 |
| 表现 | 用于设置网页元素的外观样式（版式、颜色、大小等等）。主要指的是CSS。 |
| 行为 | 是网页模型的定义以及交互的编写。现阶段主要学的是JavaScropt。 |
符合Web标准的最佳体验方案：结构、表现、行为相分离。
换句话说，也就是结构、表现、行为分别写到HTML文件、CSS文件、JavaScript文件中，互不影响。
1. 基础内容
1.1 基本语法规范
标签格式
HTML标签是由<>包围的关键词，比如<html>
它通常是成对出现的，称为双标签，比如<html></html>，标签对中的第一个标签是开始标签，后一个是结束标签。
极少数情况会出现单个标签，称为单标签，比如<br/>
标签关系
双标签关系可分为两类：包含关系、并列关系
包含关系：
<head><title></title>
</head>并列关系：
<head></head>
<body></body>1.2 基本结构标签
每个网页都会有一个基本的结构标签，也成为骨架标签，页面内容都是在这些基本标签之上添加的。
| 标签名 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签，被称为“根标签” |
| <head></head> | 文档的头部 | |
| <title></title> | 文档的标题 | 属于该页面的网页标题 |
| <body></body> | 文档的主体 | 包含文档所有的内容。 页面内容基本都是放在body部分里面的。 |
比如打开记事本，输入以下内容，
<html><head><title>我的第一个页面</title></head><body>这是一句话。</body>
</html>
保存后再把记事本的后缀从.txt重命名为.html，就得到了一个HTML网页。
双击通过Chrome打开后：
右键点击Chrome网页，然后查看网页源代码，可以看到：
1.3 开发工具 & 插件
开发工具
由于每次用记事本写前端代码都需要将.txt后缀改为.html，略繁琐，所以可以下载以下工具。
其中最建议使用的是VS Code，因为功能强且使用起来很简便。
下载并安装好VS Code之后，点击“文件”—“新建文件”（或者直接ctrl+N来新建文件）。
写代码之前，先ctrl+S保存一下文件，保存时一定要把文件名的后缀设置为.html，如下：
得到文件如下：
插件
建议在VS Code中安装的一些插件：
- Chinese（中文插件）
- Auto Rename Tag（更改双标签中的一个时，自动更改另一个）
- Open in browser（通过右键单击代码跳转到浏览器，去预览界面）
- Live Server（每次做了新的改动，VS Code自动保存并刷新页面，保证实时预览。）
（补充：下载Live Server之后，每次改动还需要ctrl+s保存一下才能刷新成功）
安装方式是点击左侧边栏的最后一个按键Extensions，然后搜索插件名称，再点击右下角的install即可。
1.4 几种快捷键
1、保存当前内容：ctrl+s
2、全局替换某单词：ctrl+h然后选择“全部替换”
3、快速跳转到某一行：ctrl+g
适用于代码较多，上下滚动查找较为不便的情况。
4、放大界面：ctrl+加号
缩小界面：ctrl+减号