第1章 HTML-CSS
1.1 前端代码如何转换网页？
通过浏览器内核转化（解析和渲染）成用户看到的网页。
1.2 什么是HTML & CSS？
HTML: HyperText Markup Language，超文本标记语言。
由标记构成。
可写入文字、图片、音频、视频等内容。
CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
1.3 前端开发工具VSCode
Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。
1.3.1 VSCode插件安装
好插件为开发者提供更好的开发体验，需要安装的插件如下列表：
| 插件名称 | 插件作用 |
|---|---|
| Chinese (Simplified) Language Pack | VS Code 的中文（简体）语言包 |
| Code Spell Checker | 拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。 |
| HTML CSS Support | 在编写样式表的时候，自动补全功能大大缩减了编写时间。 |
| JavaScript (ES6) code snippets | 支持ES6语法提示 |
| Mithril Emmet | 一个能大幅度提高前端开发效率的一个工具，用于补全代码 |
| Path Intellisense | 路径提示插件 |
| Vue 3 Snippets | 在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。 |
| VueHelper | vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码 |
| Auto Close Tag | 自动闭合HTML/XML标签 |
| Auto Rename Tag | 自动完成另一侧标签的同步修改 |
| Beautify | 格式化 html ,js,css |
| Bracket Pair Colorizer | 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 |
| open in browser | vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari |
| Vetur | Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。 |
| File Utils | 方便快捷的来创建、复制、移动、重命名文件和目录。 |
| IntelliJ IDEA Keybindings | 在VSCode中使用IDEA的快捷键。 |
1.4 基础标签<?>
基础标签如下：
HTML文档标签<html>
头标签<head>
主体标签<body>
标题标签 <h1> ... <h6>
图片标签 <img>
常见属性: src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径) width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比) height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
水平分割线 <hr>
超链接 <a href="..." target="...">央视网</a>
属性:
href: 指定资源访问的url
target: 指定在何处打开资源链接
_self: 默认值，在当前页面打开
_blank: 在空白页面打开
无语义标签<span>
块标签<div>
一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height）
视频标签:<video>
属性:
src: 规定视频的url
controls: 显示播放控件
width: 播放器的宽度
height: 播放器的高度
音频标签:<audio>
属性:
src: 规定音频的url
controls: 显示播放控件
换行标签:<br>
段落标签: <p>
如: <p> 这是一个段落 </p>
1.5 CSS引用方式
具体有3种引入方式，语法如下表格所示：
| 名称 | 语法描述 | 示例 |
|---|---|---|
| 行内样式 | 在标签内使用style属性，属性值是css属性键值对 | <h1 style="xxx:xxx;">中国新闻网</h1> |
| 内嵌样式 | 在<head>中定义<style>标签，在标签内部定义css样式 | <style> h1 {...} </style> |
| 外联样式 | 在<head>中定义<link>标签，通过href属性引入外部css文件 | <link rel="stylesheet" href="css/news.css"> |
1.6 CSS选择器
选择器是用于对相应元素样式进行修饰的，有如下几类常见的选择器：
1.元素（标签）选择器：
选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上
元素名称 {
css样式名:css样式值；
}
例子如下：
div{
color: red;
}
2.id选择器:
选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
#id属性值 {
css样式名:css样式值；
}
例子如下：
#did {
color: blue;
}
3.类选择器：
选择器的名字前面需要加上 .
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
.class属性值 {
css样式名:css样式值；
}
例子如下：
.cls{
color: green;
}
1.7 盒子模型
盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
盒子模型组成：内容区域（content）、内边距区域（padding）=>类似包住照片部分、边框区域（border）=>类似框架部分、外边距区域（margin）=>类似框架外花边部分。
1.8 表格标签<table>
表格标签<table>
常用属性如下：
border：规定表格边框的宽度
width：规定表格的宽度
cellspacing: 规定单元之间的空间
行标签<tr> : 可以包裹多个 <td>
单元格标签<td> : 可以包裹内容 , 如果是表头单元格，可以替换为 <th> 。
1.9 表单标签<form>
表单标签<form>
表单属性:
action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
method: 规定用于发送表单数据的方式，常见为： GET、POST。
GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
表单项标签: 不同类型的input元素、下拉列表、文本域等。
<input>: 表单项 , 通过type属性控制输入形式。
type取值 描述 text 默认值，定义单行的输入字段 password 定义密码字段 radio 定义单选按钮 checkbox 定义复选框 file 定义文件上传按钮 date/time/datetime-local 定义日期/时间/日期时间 number 定义数字输入框 email 定义邮件输入框 hidden 定义隐藏域 submit / reset / button 定义提交按钮 / 重置按钮 / 可点击按钮 <select>: 定义下拉列表, <option> 定义列表项
<textarea>: 文本域
1.10 文档查询
文档地址: w3school 在线教程
video标签查询:
padding属性查询:
