快捷键
Ctrl+N 新建一个编辑区，Ctrl+Shift+C 新建一个骨架完好的文件。！加 Ctrl+E 生成一个html骨架。
Ctrl+Shift+P开启命令模式，命令模式下sshtml 切换html语法。
Ctrl+Enter 在当前行下添加一行。Ctrl+Shift+Enter 在当前行上添加一行，并自动对齐格式。
Ctrl+P打开Goto Anything，输入#body，可以匹配到body标签。并且可以在Goto Anything中查找其他html文件。
Ctrl+H 查找替换。
li*10，可以输入10对li标签。
Ctrl+] 是增加缩进，反之亦然。
Ctrl+Shift+V 粘贴时保持格式。
Alt+F3 是多行游标全选所有相同内容。Ctrl+D是选中相同内容，Ctrl+K是跳过其中一项相同内容。按住shift键，然后按住鼠标右键向下拖动，也可产生多行游标。

HTML
HTML介绍

1. 标签是<>括起来的。
2. 称为根标签，所有的网页标签都在中。
3. 标签用于定义文档的头部，它是所有头部元素的容器。头部元有、

认识标签一

1.   空格。
2. 
   回车换行。

3. ---

   水平横线。
4. 联系地址信息斜体
   。
5. 强调斜体。强调加粗 。
6. 代码语言加细。

   语言代码段

   。
7. 引用文本，加""。

   引用长文本

   ，换行居中。
8. 文本。标签是没有语义的，它的作用就是为了设置单独的样式用的。

认识标签二

1. • 无序列表。
2. 1. 有序列表。
3. 把独立逻辑部分划分出来。

   ，给div命名，使逻辑更清晰。
4. 表格。全部显示。行。

   列。	表头。

5. 为表格加入边框
6. 为表格添加标题。为表格添加摘要,不显示在网页。

认识标签三

1. 链接显示的文本

2. xx 在新建浏览器窗口中打开链接。

3. <a href="xxxxx@qq.com?subject=邮件标题&body=邮件内容。"链接Emali。

4. 插入图片。

与浏览者交互，表单标签

1. 表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

2. 表单标签。

3. 文本输入框/密码输入框。

4. 文本 多行文本域。

5. 单选框 /复选框 。

6. 旅游运动 下拉列表框。

7. 使下拉列表框实现多选，按Ctrl+鼠标点击多选。

8. 提交按钮。

9. 重置按钮。

10. 当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。点击慢跑会触发勾选。

CSS
CSS 认识

1. CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

2. CSS样式由选择符和声明组成，而声明又由属性和值组成。

3. CSS中注释语句：/注释语句/。Html中使用。JS使用//。

CSS样式的基本知识

1. 从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
2. 内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
   。
3. 嵌入式css样式，就是可以把css样式代码写在标签之间。
4. 外部式css样式是把css代码写在一个单独以“.css”为扩展名的文件中，在内使用标签将css样式文件链接到HTML文件内，如下面代码：。
5. 优先级：内联式 > 嵌入式 > 外部式。嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。就近原则（离被设置元素越近优先级别越高）。

CSS选择器

1. 嵌入式中

CSS的继承、层叠和特殊性

1. 继承：
   ，继承是span也会随p改变样式。但{border}不可继承。
2. 特殊性：为同一个元素设置不同CSS，启用哪个看权值。标签的权值为1，类选择符为10，ID选择符为100。继承为0.1。
3. 层叠：如果同一个元素有多个CSS且权值相同，那么按就近原则。
4. 重要性：<p color:red!important;> !important设置最高权值，注意写在分号前面。

CSS格式化排版

1. 文字排版

2. 字体：{font-family:“宋体”;}

3. 大小：{font-size:12px;}

4. 颜色：{color:#666;}

5. 加粗：{font-weight:bold;}

6. 斜体：{font-style:italic;}

7. 下划线：{text-decoration:underline;}

8. 删除线： {text-decoration:line-through;}

9. 段落排版

10. 缩进：{text-indent:2em;}

11. 行高：{line-height:1.5em;}

12. 字间距：{letter-spacing:50px;}

13. 单词间距：{word-spacing：50px;}

14. 对齐：{text-align:center/left/right;}

CSS盒模型

1. 元素分类：在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

2. 块状元素：

   、

   、

   、、

   • 和
   • 。{display:block}就是将元素显示为块级元素，或将内联元素转化为块级元素。特点是自己另起一行，元素的高度、宽度、行高以及顶和底边距都可设置，元素宽度在不设置的情况下，是它本身父容器的100%。

3. 内联元素（行内元素）:、、、 、。{display:inline}将元素设置为内联元素。特点是在一行，元素的高度、宽度及顶部和底部边距不可设置，元素的宽度就是它包含的文字或图片的宽度，不可改变。

4. 内联块状元素：、。{display:inline-block}就是将元素设置为内联块状元素。特点是在一行。元素的高度、宽度、行高以及顶和底边距都可设置。

5. 盒模型：可以把块状元素看成一个大箱子，里面东西（指的是其他元素）随便放（当然最好要放的下），我也可以随便改箱子的大小；而内联元素是一层保鲜膜，它的大小是根据包裹这的东西而定的，不能随意改变；而内联块状元素则是小箱子，他只能装一件东西，但是大小可以改变。

6. 边框：合并起来写的代码为{border：10px（线宽） dashed（虚线）/dotted（点线）/solid（实线） red/#888；}。

7. 单独设置边框：{border-top\bottom\right\left:1px solid red;}

8. CSS宽/高：height/width。元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

9. 填充：元素内容与边框之间的距离，填充增大也会把边框的位置扩张开。填充也可分为上、右、下、左(顺时针)。如下代码：{padding:20px 10px 15px 30px;}。{padding:10px;}全为10.{pading:10px 20px;}10px为上下。

10. 边界：元素与元素之间的距离。如下代码：div{margin:20px 10px 15px 30px;}，如填充。

CSS布局模型

1. 流动布局模型：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，块状元素的宽度都为100%。内联元素都会在所处的包含元素内从左到右水平分布显示。
2. 浮动布局模型：用 CSS 定义为浮动，{float:left\right}。
3. 层布局模型：对每个图层精确定位操作。分为绝对、相对、固定定位。
4. 绝对定位{position: absolute;left:20px;top:100px;}：这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如相对于body元素。
5. 相对定位(position: relative)：它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
6. 固定定位(position: fixed)：与absolute定位类型类似，但它的相对移动的坐标是屏幕内的网页窗口本身，它不会随浏览器窗口的滚动条滚动而变化，这与background-attachment:fixed;属性功能相同。

CSS代码缩写

1. 盒代码缩写：margin:10px（top、right、bottom、left的值相同）;
2. margin:10px（top和bottom值相同） 20px（left和 right的值相同）;
3. margin:10px 20px（left和right的值相同） 30px;
4. 颜色缩写：如果每两位的值相同，可以缩写一半}p{color: #336699;}可以缩写为：p{color: #369;}
5. 字体缩写：{font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:“宋体”,sans-serif;}
   可以缩写为一句：{font:italic small-caps bold 12px/1.5em “宋体”,sans-serif;}
6. 使用这一简写方式至少要指定 font-size 和 font-family 属性，其他的属性未指定将自动使用默认值。在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

单位和值

1. 英文命令颜色
2. RGB颜色：红绿蓝 {color:rgb(133,45,200);} {color:rgb(20%,33%,25%);}
3. 十六进制颜色：{color:#00ffff;}
4. 长度单位：px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

CSS样式设置小技巧

1. 水平居中设置-行内元素：text-align:center
2. 水平居中设置-定宽块状元素：{margin：20px auto;}
3. 水平居中设置-不定宽度的块状元素方法一：加入 table 标签。
4. 水平居中设置-不定宽度的块状元素方法二：改变块级元素为行内元素，然后使用 text-align:center 来实现居中效果。
5. 水平居中设置-不定宽度的块状元素方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
6. 垂直居中-父元素高度确定的单行文本：通过设置父元素的 height 和 line-height 高度一致来实现的。line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
7. 垂直居中-父元素高度确定的多行文本（方法一）：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
8. 垂直居中-父元素高度确定的多行文本（方法二）：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
9. 隐性改变display类型：有一个有趣的现象就是当为元素（display:none 除外）设置以下 2 个句之一： 1. position : absolute 2. float : left 或 float:right 简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

17.1.31备份