1 代码编辑器
WebStorm 万能
VSCode 常用
HbuilderX
Sublime Text
Atom
Brackets
NodePad++
EditPlus
Vim
Dreamweaver
2 浏览器
主流浏览器：Chrome、IE、FireFox、Safari、Opera，代表着五种内核
其他浏览器：360安全浏览器、360极速浏览器、搜狗浏览器、UC浏览器、猎豹浏览器、夸克浏览器、海豚浏览器、傲游浏览器、QQ浏览器、2345浏览器 等
现在的浏览器基本都采用Chrome的内核webkit,也有双核浏览器
3 HTML
3.1 HTML文件
HTML是超文本标记语言，HTML文件使用代码编辑器编辑代码，使用浏览器查看网页。
3.2 文档声明
作用：告诉浏览器用标准模式渲染网页
<!doctype html>
3.3 HTML标签
- HTML的基本组成部分
- 最重要的是标签的语义，决定标签在什么地方使用
- 有的标签有属性，有的标签没有
- 有单标签和双标签，其中单标签中的 " / " 可省略，如
等同于<hr />
3.3.1 标签的属性
- 给标签设置属性：
<标签名 属性名=“属性值”></标签名>
<标签名 属性名=‘属性值’></标签名>
<标签名 属性名=属性值></标签名>
- 一个标签可以设置多个属性，用空格隔开：
<标签名 属性名=“属性值” 属性名=“属性值”></标签名>
- 同一个属性不要设置多次，否则会默认第一个属性，后面的属性无效
- 标签不区分大小写
- 每个标签有不同的属性，如：font 标签有color属性，而 h1 标签没有color属性
3.3.2 如何掌握一个标签
- 标签的语义：决定标签用在什么地方
- 标签的属性，以及属性的值如何设置
- 标签是单标签还是双标签
3.3.3 HTML标签总结
3.3.3.1 主体结构标签
| 标签名 | 语义和功能 | 属性 | 单标签or双标签 |
|---|---|---|---|
| html | 网页根标签 | 双标签 | |
| head | 页面头部标签 | 双标签 | |
| body | 页面主体内容标签 | 双标签 |
3.3.3.2 head中的标签
| 标签名 | 语义和功能 | 属性 | 单标签or双标签 |
|---|---|---|---|
| title | 页面标题（标题栏标题） | 双标签 | |
| meta | 设置网页元信息 | charset：设置字符集编码，utf-8、gbk、gb2312 等 | 单标签 |
3.3.3.3 格式排版标签
| 标签名 | 语义和功能 | 属性 | 单标签or双标签 |
|---|---|---|---|
| h1~h6 | 标题（一级~六级，越来越小） | 双标签 | |
| p | 段落 | 双标签 | |
| hr | 分隔符 | 单标签 | |
| br | 换行 | 单标签 | |
| pre | 原样显示标签，可以显示缩进，可以用于页面中显示代码（但不能直接显示html代码，需要用<和>表示"<"、">"才能显示） | 双标签 | |
| div | 无语义，广泛用于页面布局，div中可以嵌套很多标签 | 双标签 |
3.4 HTML注释
可注释一行或多行，注释的作用：
- 对代码进行解释和说明
- 临时注释用于调试代码
<!-- 注释的内容 -->
<!--
注释的内容
注释的内容
-->
3.5 基本页面模板
基本每一个页面的代码都会有以下内容：
<!doctype html>
<html>
<head>
<!-- 设置字符集编码 -->
<meta charset="utf-8">
<!-- 网页标题 -->
<title>这是一个网页标题</title>
</head>
<body>
这里是网页的主体内容
</body>
</html>
- 字符集编码是为了将用户输入的语言转换为数字编码，这样计算机可以将数字编码转换为二进制语言进行相应的操作，避免了乱码问题。
- 区分网页标题和标题：网页标题是head中的内容，显示在浏览器的标题栏；标题是body中的内容，显示在浏览器的页面内容中。
