目录
一、VScode
（一）VScode快捷键
生成浏览器文件html的快捷方式
! + 回车
代码格式化：Shift+Alt+F
向上或向下移动一行：Alt+Up或Alt+Down
快速复制一行代码：Shift+Alt+Up或Shift+Alt+Down
快速保存：Ctrl+S
快速查找：Ctrl+F
二、HTML5与基础骨架
HTML5的DOCTYPE声明
<!DOCTYPE html>位于文档最前面，避免浏览器的怪异模式
HTML5基本骨架
- html标签
- head标签
- title标签
- meta标签：描述HTML网页文档的属性、关键词等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
三、标签
（一）标题
标题通过<h1>到<h6>标签进行定义
<h1>定义最大的标签，<h6>定义最小的标签
生成h1-h6快捷键：h$*6
VSCode插件
快速打开浏览器
扩展 -> 搜索open in browser -> 点击安装
（二）段落
段落是通过<p>标签定义的
（三）换行
不产生新段落的情况下进行换行，使用<br>
<br/>元素是一个空的HTML元素
（四）水平线
<hr/>标签在HTML页面中创建水平线
<hr color="" width="" size="" align=""/>
属性：
- color：设置水平线的颜色
- width：设置水平线的宽度
- size：设置水平线的高度
- align：设置水平线的对齐方式（默认居中），可取值left | right
（五）图片
<img>标签定义HTML页面中的图像
<img>是单标签
<img src="" alt="" title="" width="" height="">
属性：
- src：路径（图片地址与名字）
- alt：规定图像的替代文本
- width：规定图像的宽度
- height：规定图像的高度
- title：鼠标悬停在图片上给予提示
图片路径：
- 绝对路径：电脑的盘符存储与访问的具体地址
- 相对路径：两者相对关系，两者在同一路径下可以直接访问
- 子集关系：
/ - 父集关系：
../ - 同集关系：
./
- 子集关系：
- 网络路径：具体的网络地址
（六）超文本链接
HTML使用标签<a>来设置超文本链接
<a href="url">链接文本</a>
超链接属性：
在标签<a>中使用了href属性来描述链接的地址
默认情况下
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带有下划线
- 点击链接时，链接显示为红色并带有下划线
超链接表现：
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手
（七）文本
常用文本标签
| 标签 | 说明 |
| em | 定义着重文字 |
| b | 定义粗体文字 |
| i | 定义斜体字 |
| strong | 定义加重语气 |
| del | 定义删除字 |
| span | 元素没有特定的含义 |
（八）列表标签
1、有序列表
有序列表是一列项目，列表项目使用数字进项标记。有序列表始于<ol>标签，每个列表项始于<li>标签
type属性
<ol>的属性type拥有的选项
- 1 表示列表项目用数字标号（1,2,3……）
- a 表示列表项目用小写字母标号（a,b,c……）
- A 表示列表项目用大写字母标号（A,B,C……）
- i 表示列表项目用小写罗马数字标号（i,ii,iii……）
- I 表示列表项目用大写罗马数字标号（I,II,III……）
列表是可以嵌套的
2、无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点进行标记
无序列表始于<ul>标签。每个列表项始于<li>标签
type属性
<ul>的属性type拥有的选项
- disc 默认实心圆
- circle 空心圆
- square 小方块
- none 不显示
快捷键：
快速生成ul+li的布局：ul>li*n(n为需要的li数量)
（九）表格
表格组成与特点：
行、列、单元格
单元格特点：同行等高，同列等宽
表格标签：
表格：<table>
行：<tr>
单元格（列）：<td>
快捷键：
快速生成表格结构：table>tr*m>td*n{文本信息}
表格属性：
- border：设置表格的边框
- width：设置表格的宽度
- height：设置表格的高度
表格单元格合并
- 水平合并：colspan
- 垂直合并：rowspan
（十）form表单
表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框、提交按钮等，这些输入框、提交按钮叫做控件，表单就是容器，能够容纳各种各样的控件
<form action="url" method="get|post" name="myform"></form>
属性说明：
action服务器地址
name表单名称
method中Get和Post的区别：
- 数据提交方式，get提交的数据url可以看到，post看不到
- get一般用于提交少量数据，post用来提交大量数据
表单元素：
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮
- 1、文本框
文本域通过<input type="text">标签来设定，当用户要在表单中输入字母、数字等内容时，就会用到文本域 - 2、密码框
密码字段通过标签<input type="password">来定义
密码字段字符不会明文显示，而是以星号或圆点替代 - 3、提交按钮
<input type="submit">
<input type="submit" value="名称">
（十一）容器标签
<div>
H5新标签：
<header></header>头部<nav></nav>导航<section></section>定义文档中的节，比如章节、页眉、页脚<aside></aside>侧边栏<footer></footer>脚部<article></article>代表一个独立的、完整的相关内容块
四、内联元素和块级元素的区别
| 块级元素 | 内联元素 |
| 块元素会在页面中独占一行（自上向下垂直排列） | 行内元素不会独占页面中的一行，只占自身的大小 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| 一般块级元素可以包含行内元素和其他块级元素 | 一般内联元素包含内联元素不包含块级元素 |
常见块级元素：
div、form、h1-h6、hr、p、table、ul等
常见内联元素（行内元素）：
a、b、em、i、span、strong等
行内块级元素（特点：不换行、能够识别宽高）
button、img、input等
五、CSS
CSS样式表，CSS文件后缀名为css，用于HTML文档中元素样式的定义
（一）语法：
CSS规则由两个主要的部分构成：选择器以及一条或多条声明
选择器通常是需要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性是设置样式属性，每个属性有一个值，中间用冒号隔开
声明用分号隔开
（二）CSS的引入方式：
内联样式（行内样式）：
在相关的标签内使用样式（style）属性。Style属性可以包含任意CSS属性
内部样式：
当单个文档需要特殊的样式时，使用内部样式表。使用<style>标签在文档头部定义内部样式表
外部样式：
当样式需要应用于很多页面时，使用外部样式表，每个页面使用<link>标签链接到样式表，<link>标签在（文档的）头部
<link rel="stylesheet" type="text/css" href="xxx.css">
（三）选择器
全局选择器*{}
可以与任何元素匹配，优先级最低，一般做样式初始化
元素选择器
HTML文档中的元素，p、b、div、a、img、body等
类选择器
规定用圆点.来定义，针对想要的所有标签使用
class属性的特点：
- 类选择器可以被多种标签使用
- 类名不能以数字开头
- 同一个标签可以使用多个类选择器，用空格隔开
ID选择器
针对某一个特定的标签来使用，只能使用一次。css中ID选择器以#来定义
ID是唯一的，ID不能以数字开头
合并选择器
语法：选择器1，选择器1……{}
作用：提取公共的样式，减少重复代码
选择器优先级：
CSS中，权重用数字衡量
元素选择器的权重为：1
class选择器的权重为：10
id选择器的权重为：100
内联样式的权重为：1000
优先级从高到低：
行内样式>ID选择器>类选择器>元素选择器
（四）字体属性
CSS字体属性定义字体，颜色，大小，加粗，文字样式
1、color
规定文本的颜色
div{color:red;}
div{color:#ff0000;}
div{color:rgb(255,0,0);}
div{color:rgba(255,0,0,0.5);}
2、font-size
设置文本大小
3、font-weight
设置文本的粗细
| 值 | 描述 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100-900 | 定义由细到粗，400等同默认，700等同bold |
4、font-style
指定文本的字体样式
| 值 | 描述 |
| normal | 默认值 |
| italic | 定义斜体字 |
5、font-family
font-family属性指定一个元素的字体
每个值用逗号分开
如果字体名称包含空格，必须加上引号
（五）背景属性
| 属性 | 描述 |
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background-size | 设置背景图片大小属性 |