VScode代码快捷键：

 

　　1、！ :自动写入框架

 

　　2、Alt+b ：执行网页

 

　　标题标签：

 

　　段落标签：

 

　　换行标签：

 

　　文本格式化标签：

 

　　盒子标签：

 

　　图像标签和路径：

 

　　超链接标签：

 

　　注释标签：

 

　　语法：

 

　　快捷键：Ctrl + /

 

　　常用特殊字符：

 

　　基本语法：

 

　　1、table用于定义表格的标签

 

　　2、tr中储存每一行的数据

 

　　3、td中储存一行中的每一个单元格的数据

 

　　1、表头会居中、加粗显示

 

　　1、属性写在table标签内部

 

　　？ 如：

 

　　头部区域：

 

　　用把第一行的表头包含进去

 

　　主体区域：

 

　　用把表格主体包含进去

 

　　跨行合并：rowspan=“合并单元格的个数”

 

　　跨列合并：colspan=“合并单元格的个数”

 

　　目标单元格：

 

　　？ 跨行：找最上侧

 

　　？ 跨列：找最左侧

 

　　合并步骤：

 

　　1、确定跨行或者列

 

　　2、找到目标单元格和合并方式

 

　　？ 如：

 

　　3、删除多余单元格

 

　　？ 如：合并了哪几个就删除被合并的单元格的代码

 

　　无序列表（重要）

 

　　ul ：无序列表

 

　　li ：容纳元素的容器

 

　　有序列表（理解）

 

　　ol ：有序列表

 

　　自定义列表（重点）

 

　　dl ：自定义列表

 

　　dt ：大的类名

 

　　dd ：描述类的解释

 

　　一个完整的表单：由 表单域、**表单控件（元素）**和 提示信息 组成

 

　　1、用于定义表单域，会把范围内的元素信息提交给服务器

 

　　action会把数据送到相应文件中

 

　　method设置提交方式

 

　　2、单标签用于收取用户信息

 

　　input标签：

 

　　button：定义可点击按钮

 

　　checkbox：定义复选框（多选框）

 

　　file：定义输入字段和“浏览”按钮，供文件上传

 

　　hidden：定义隐藏的输入字段

 

　　image：定义图像形式的提交按钮

 

　　password：定义密码字段，字符将被掩码

 

　　radio：定义单选按钮（单选框）

 

　　reset：定义充值按钮

 

　　submit：定义提交按钮，发送给数据服务器

 

　　text：定义单行输入的字段，默认20个字符

 

　　id: 用来设置labal标签

 

　　其他属性：

 

　　labal标签：

 

　　语法：

 

　　解释：for中的目的地至id一样标签

 

　　select标签：

 

　　解释：下拉列表标签

 

　　语法：

 

　　1、如果想让标签默认选中某个option

 

　　即：

 

　　textarea标签：

 

　　不常用的属性：cols表示每行的字符数，rows表示能有多少行

 

　　※写表单时在form中放table储存

 

　　1、CSS由选择器和一条或多条声明组成

 

　　选择器：选择修改的元素

 

　　声明：具体修改的属性

 

　　写在head中

 

　　声明常用属性：

 

　　1、color:颜色

 

　　2、font-size:25px（字体数值大小）

 

　　作用：用来选择标签

 

　　1.标签选择器

 

　　作用：把一类标签选择出来进行操作

 

　　2.类选择器

 

　　作用：单独选择某几个标签进行操作，而不是全部此类标签

 

　　多类名使用方式：把多个类名放在一个属性里，并用空格隔开

 

　　如：

 

　　3.id选择器

 

　　作用：为标有特定id的元素操作样式，通常用#定义

 

　　区别：和class的区别为，一个id只能调用一次，不能多次调用，但class可以被多次调用

 

　　4.通配符选择器

 

　　作用：选取所有元素进行操作，通常用*定义

 

　　1.字体系列：

 

　　如果属性值有多种字体，会顺序寻找电脑中存在的字体来使用

 

　　2.字体大小

 

　　标题标签特殊，需要单独设置大小

 

　　3.字体粗细

 

　　属性值：

 

　　normal：默认

 

　　bold：加粗

 

　　bolder：特粗

 

　　lighter:变细

 

　　number（给一个数字，如：700）：加粗的大小

 

　　4.文字样式

 

　　作用：让斜体的字体变正常

 

　　5.复合属性

 

　　如果想减少代码量，有默认的符合属性组合：必须写大小和样式

 

　　1.文本颜色

 

　　属性值：red 或 rgb（255,0,0） 或 十六进制数

 

　　2.对齐文本

 

　　属性值：

 

　　left：左对齐（默认）

 

　　center：居中

 

　　right：右对齐

 

　　3.装饰文本

 

　　none：默认

 

　　underline：下划线

 

　　overline：上划线

 

　　line-through：删除线

 

　　4.文本缩进

 

　　作用：使文本的首行缩进对应的像素值

 

　　em表示一个字体的大小长度

 

　　5.行间距

 

　　间距组成：上间距、文本高度、下间距

 

　　1、行内样式表（行内式）

 

　　直接在当前标签中添加CSS属性：

 

　　2、内部样式表（嵌入式）

 

　　在html中的head标签中定义style标签中书写

 

　　控制范围是整个页面，代码结构清晰

 

　　练习代码多用此方式

 

　　3、外部样式表（链接式）

 

　　创建CSS文件，在HTML文件中引用他

 

　　1、生成标签：打出标签再按tab即可快速生成

 

　　2、生成多个标签：div*5 按tab，即可生成5个div盒子

 

　　3、有父子标签时，用>符号连接

 

　　？ 如： tr>td 再按tab

 

　　4、有兄弟关系时，用+符号连接

 

　　？ 如： p+div 再按tab

 

　　5、当你想使用类选择器或ID选择器时，用。 和 # 快捷输入

 

　　？ 如：p.red 和 div#user

 

　　6、当你想生成多个类选择器时，用。demo为自增运算符

 

　　7、当你对标签直接输入内容时，可以用{}

 

　　？ 如：div{我是朱昱崐} 再按tab

 

　　使用单词首字母：

 

　　？ 如：ti2em + tab 等价于 text-indent:2em;

 

　　1、后代选择器

 

　　作用：选中父元素中的所有后代元素进行操作

 

　　？ 如：

 

　　2、子元素选择器

 

　　和后代选择器的区别：只会对子元素的选择器操作，而不会对同名的孙子元素操作

 

　　3、并集选择器

 

　　作用：选择多组标签，同时定义多种标签的声明，用，分隔

 

　　4、伪类选择器

 

　　作用：向某项选择器添加特殊的效果，比如给连接添加效果

 

　　①链接伪类：

 

　　a:link 选择所有未访问的链接

 

　　a:visited 选择所有已被访问的链接

 

　　a:hover 选择鼠标指针位于其上的链接（鼠标经过，color:369）

 

　　a:active 选择活动链接（鼠标按下还未弹起的链接）

 

　　**顺序：**LVHA 写CSS一定按照这个顺序定义

 

　　②focus伪类选择器：

 

　　作用：选取获得焦点的input表单元素（有没有没选中）

 

　　元素显示模式：标签以什么方式显示

 

　　HTML元素分为：块元素，行内元素