第一步：拨云见日
1.基础部分：HTML 、CSS
2. 切图流程：传统切图、智能切图、公司流行切图
3.实战阶段：PC企业站布局 PC游戏站布局
第二步：溯本求源
1.扩展： HTML 、CSS
2 .新语法： HTML5 、 CSS3
3.兼容与hack
第三步：风生水起
1.布局：弹性布局、网格布局、移动端布局、响应式布局
2.布局框架：Bootstrap
第四步：巧夺天工
1.预编译CSS、postcss
2.CSS架构
3.高级功能
4.CSS与JS交互
一、什么是HTML和CSS？
它们是两种编辑语言，一般情况下需要配合使用，是作为网站开发的基础语言。
网站就是浏览器把代码解析后的样子，可以通过鼠标右键选择查看网页源代码来查看网站的原始代码。
网站是由N多个网页组成的。 每一个网页都是 .html文件。
HTML全称为超文本标记语言，是一种标记语言，HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
CSS指层叠样式表，样式定义如何显示HTML元素，样式通常存储在样式表中，多个样式定义可层叠为一个。
二、宇宙第一编辑器 VS Code
1.VS Code,全称Visual Studio Code，来自微软，是一个开源的、基于Electron 的轻量代码编译器。
2.安装插件–Chinese open in browser view in borwser
3.编辑好文件要保存
4.创建文件夹，创建文件，重命名和删除， 搜索
学习编辑器的基本使用
1.ctrl + s : 保存
2.ctrl + a : 全选
3.ctrl + x 、ctrl + c 、ctrl + v : 剪切、复制、粘贴
4.ctrl + z 、ctrl + y : 撤销、前进
设置：文件 -> 首选项 -> 设置 （大小，是否换行 word wrap)
5.shift + end : 从头选中一行
6.shift + home : 从尾部选中一行
7.shift + alt + ↓ ：快速复制一行
8.alt + ↑或↓ ：快速移动一行
9.tab : 向后缩进
10.tab + shift : 向前缩进
11.多光标 ： alt + 鼠标左键
12.ctrl + d : 选择相同元素的下一个
点击搜索去搜索想要的内容。
三、chrome浏览器
（解析代码呈现出网站）
百度统计浏览器市场份额：添加链接描述
常见的浏览器：
1.谷歌浏览器 （由谷歌公司开发）添加链接描述
2.360安全浏览器 （360安全中心推出，稳定性强，能拦截木马等）添加链接描述
3.qq浏览器 （由腾讯公司开发，提供热门的新闻，资讯等）添加链接描述
4.火狐浏览器 （由Mozilla开发，网络标准，功能十分丰富全面，对隐私的保护也很好。）添加链接描述
5.微软浏览器 （微软浏览器即Microsoft Edge浏览器，是微软旗下的的一款网页浏览器，设计上很注重实用和极简主义。）添加链接描述
四、深入了解网站开发
UI设计师，web前端开发工程师（HS的开发） ，设计稿->代码
web后端开发工程师
webq前端用于把数据库里的数据-> 显示到页面 （HTML + CSS)
HTML : 负责结构
CSS ： 负责样式（美化）
了解前端的另外一项技能：JavaScript , 与HTML、CSS之间的关系
Web前端三剑客：HTML、CSS、JavaScript，它们看上去是三种不同的技术，但在实际中却是相互搭配使用的。
HTML是用来标记内容的（重在内容组织上）
HTML是超文本标记语言的简称，它是一种不严谨的、简单的标识性语言。它用各种标签将页面中的元素组织起来，告诉浏览器该如何显示其中的内容。
为什么说HTML是不严谨的呢？因为HTML标签即使不闭合，也并不会影响页面内容的组织。
CSS是用来修饰内容样式的（重在内容样式美化展示上）
CSS是层叠样式表的简称，它用来表现HTML文件样式的，简单说就是负责HTML页面中元素的展现及排版。
JavaScript是用来做交互的
JavaScript是一种脚本语言，即可以运行在客户端也能运行在服务器端。JavaScript的解释器就是JS引擎，JS引擎是浏览器的一部分。而JavaScript主要是用来扩展文档交互能力的，使静态的HTML具有一定的交互行为（比如表单提交、动画特效、弹窗等）。
HTML与CSS及JS的关系
这三者99%的情况下都是搭配使用的，但也不是绝对的，具体关系是：
HTML与CSS、JS是不同的技术，可以独立存在；
HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想；
CSS一般是不能脱离HTML或XML的，如果CSS脱离了HTML和XML，那就没有存在的必要的；
JS可以脱离HTML和CSS而独立存在；
JS可以操作HTML和CSS。
总结：如果把HTML比做身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。
五、Web前端的三大核心技术
1.HTML : 结构
2.CSS : 样式
3.JavaScript ： 行为
六、HTML基本结构与属性
1.HTML 基础结构与属性：
HTML：超文本 、标记 、语言
超文本标记语言（HyperText Markup Language)，标准通用标记语言下的一个应用。是网页制作必备的编程语言。
（1）超文本：指的是文本内容 + 非文本内容 （图片、视频、音频等）
（2）标记 ： <单词> (标记也叫做标签）( < header > < footer >
写法分成两种：
单标签：< header >
双标签：< header >< /header >
（3）语言 ： 编程语言
创建标签的快捷键： 单词 + tab键 -> <单词>
标签是可以上下排列，也可以组合嵌套。
HTML常见的标签：
添加链接描述
标签的属性：来修饰标签的，设置当前标签的一些功能。
< 标签 属性=“值” 属性2=“值2”>
<header title="hello">hello world</header><footer title="hi">hi HTML</footer>HTML的属性：添加链接描述
HTML的含义：添加链接描述
七、HTML初始代码
每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。要符合html文件的规范写法。
快捷键：
！ + tab键 ：快速的创建html的初始代码
文档声明：告诉浏览器这是一个html文件
html文件的最外层标签：包裹着所有html标签代码，lang=“en"表示是一个英文网站 lang=”
zh-CN”表示一个中文网站。
元信息：是编写网页中的一些赋值信息 charset="UTF-8"是国际编码，让网页不出现乱码的情况。
< title > 为设置网页的标题
<!DOCTYPE html>
<html lang="en">
<head><meta charse"UTF-8"><meta name="viewport" content="width=devic-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>我是一个网页的标题</title>
</head>
<body>hello world
</body>
</html>
学会创建初始代码
八、HTML中的注释
写法：< !-- 注释的内容 --> 在浏览器中看不到，只能在代码中看到注释的内容。
意义：
1.把暂时不用的代码注释起来，方便以后的使用。
2.对开发人员进行提示。
快捷添加注释与删除注释：
(1）ctrl + /
(2) shift + alt + a （需要选中目标）
九、HTML语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。
好处：
（1）在没有CSS的情况下，页面也能呈现出很好的内容结构。
（2）有利于SEO,让搜索引擎爬虫更好的理解网页。
（3）方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
（4）便于团队开发与维护。
十、标题与段落
标题 ->双标签 ： < h1 > < /h1 >…< h6 >< /h6 >
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
h5,h6标签在网页中不经常使用。
段落->双标签 ：< p1 >< /p1 >
实践：
十一、文本修饰标签
文本修饰标签：
强调 -> 双标签 ： < strong >< /strong >
< em > : 表示强调，会对文本进行斜体
这两个的区别：
1.写法和展示效果是有区别的，一个加粗、一个斜体。
2.strong的强调性更强，em的强调性稍弱。
文本修饰标签：
< sub > 、< sup > :下标文本、上标文本
< del > 、< ins > : 删除文本、插入文本
***注意：***一般情况下，删除文本都是和插入文本配合使用的。
十二、图片标签与图片属性
< img > :图片 (单标签）
src : 引入图片的地址
alt : 当图片出现问题的时候，可以显示一段友好的提示文字。
title : 提示信息
width、height : 图片的大小（可以固定大小）
实践：见上个实践中
十三、引入文件的地址路径
相对路径：
.在路径中表示当前路径
…在路径中表示上一级路径
绝对路径：
E:/ke/qf_dl201901/20190108/img/animal/dog.jpg
http://cms-bucket.ws.126.net/2019/04/16/7a5b31e0ce5474a7515.jpeg
**注意：**网络地址只能用斜线而不能用反斜线
十四、跳转链接
< a > ->双标签
href属性 ： 链接的地址
target属性 ：可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开_blank
< base > ->单标签 ：作用就是改变链接的默认行为的。
上图为实践
十五、跳转锚点
实现一：
（1）#号
（2）id属性
实现二：
（1）#号
（2）name属性
十六、特殊符号
1.& + 字符
2.解决冲突，左右尖括号、添加多个空格的实现
3.<；>； ；
十七、无序列表
< ul >、< li > : 列表的最外层容器、列表项 （符合嵌套的规范）
注意：ul和li必须是组合出现的，他们之间是不能有其他标签的
< li >之间可以有其他标签
type属性：改变前面标记的样式（一般都是用CSS去控制）
（http://www.w3school.com.cn/tags/att_ul_type.asp)
添加链接描述
十八、有序列表
< ol >、< li > :列表的最外层容器、列表项
注意：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
type属性：改变前面标记的样式（一般都是用CSS去控制）
（http://www.w3school.com.cn/tags/att_ol_type.asp)
添加链接描述
十九、定义列表
< dl > : 定义列表
< dt > : 定义专业术语或名词
< dd > : 对名词进行解释和描述
（列表项需要添加标题和对标题进行描述的内容）
添加链接描述
二十、嵌套列表
列表之间可以互相嵌套形成多层级列表。
二十一、表格标签
< table > : 表格的最外层容器
< tr > : 定义表格行
< th > : 定义表头
< td > : 定义表格单元
< caption > : 定义表格标题
**注意：**之间是有嵌套关系的，要符合嵌套规范。
语义化标签 ： < tHead > 、< tBody > 、< tFood >
**注意：**在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。
二十二、表格属性
boder : 表格边框
cellpadding : 单元格内的空间
cellspacing : 单元格之间的空间
rowspan : 合并行
colspan : 合并列
align : 左右对齐方式 （left、center、right） 表头或表中设置< tr >
valign : 上下对齐方式 (top、middle、bottom)
<!DOCTYPE html>
<html lang="en">
<head><meta charrset="UTF-8"><meta name="viewport" content="width, inital-scale=1.0"><meta http-equiv="X-UA-Comatible" content="ie=edge"><title>Document</title>
</head>
<body><!--<table><caption>天气预报</caption><tHead><tr><th>日期</th><th>天气情况</th><th>出行情况</th></tr></tHead><tBody><tr><td>2019年1月1日</td><td>晴朗</td><td>适合出行</td></tr><tr><td>2019年1月2日</td><td>小雨</td><td>出门请带伞</td></tr></tBody><tFood></tFood></table>--><table border="1" cellpadding="30" cellspacing="30"><caption>天气预报</caption><tHead><tr><th colspan="2">日期</th><th>天气情况</th><th>出行情况</th></tr></tHead><tBody><tr><td>2019年1月1日</td><td>白天</td><td>晴朗</td><td>适合出行</td></tr><tr><td>2019年1月2日</td><td>白天</td><td>小雨</td><td>出门请带伞</td></tr></tBody><tFood></tFood></table>
</body>
</html>里插入代码片
二十三、表单标签
< form > :表单的最外层容器
< input > : 标签用于搜索用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
input（单标签）标签有一个type属性，决定是什么控件。
二十四、表单相关标签
< textarea > : 多行文本框
cols=“10”:表示10列
rows=“30”:表示30行
< select >、< option > : 下拉菜单
multiple:多选（ctrl+鼠标左键）
< label > : 辅助表单
form , input , textarea , select , label…
input（单标签）标签有一个type属性，决定是什么控件。
还有一些常见的属性：checked, disabled,name,for…
二十五、表格表单组合实例
表格表单之间可以互相组合形成数据展示效果。
二十六、div与span
div（块）：
div全称为division,“分割、分区”的意思，< div >标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div >标签中，< div >中还可以嵌套多层< div >,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联）：
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。
二十七、CSS基础语法
格式：
选择器（属性1：值1；属性2：值2）
单位：
px -> 像素（pixel)、 % ->百分比
基本样式：
width 、height 、 background-color
CSS注释：/* CSS注释的内容 */
二十八、内联样式与内部样式
（CSS样式的引入方式）
1、内联样式：style属性
（行内、行间）样式 在html标签上添加style属性来实现的
2、内部样式：style标签
在 < style >标签内添加的样式
注：内部样式的优点，可以复用代码
区别：内部样式的代码可以复用、复合w3c的规范标准，进行让结构和样式分开处理。
二十九、外部样式及两种写法
引入一个单独的CSS文件，name.css
外部样式：< link >标签（引入外部资源）
rel属性 : 引入资源的类型是什么样的。（指定资源跟页面的关系）
href属性 : 引入外部资源的地址。（资源的地址）
link的rel属性：
添加链接描述
link与@import区别：
添加链接描述
@import 注：这种方式有很多问题，不建议使用。（引入外部样式）
三十、CSS颜色表示法
1、单词表示法（red,blue,green…)
2、十六进制表示法:#000000(最小的，黑色）#ffffff(最大，白色）
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
3、RGB三原色表示法:rgb(255,255,255)；——>白色
red green blue
取值范围：0~255
获取颜色的工具：
1、提取颜色的下载地址：添加链接描述
2、photoshop工具
三十一、背景样式
background-color : 背景颜色
background-image :背景图片 ----------------url(背景地址）
background-repeat :背景图片的平铺方式
repeat-x ： x轴平铺 repeat-y ：y轴平铺
repeat（x,y都进行平铺，默认值）
no-repeat :都不平铺
background-position :背景图片的位置
x y: number /单词
x : left,center,right
y : top,center,bottom
或者使用百分比
background-attachment :背景图随滚动条的移动方式
scroll:默认值（背景位置是按照当前元素进行偏移的）
fixed:(背景位置是按照浏览器进行偏移的）
三十二、背景实现视觉差效果
三十三、边框样式
CSS边框样式：
border-style :边框的样式(solid:实践，dashed:虚线，dotted:点线）
border-width : 边框的大小(px…)
border-color : 边框的颜色(red, #f00…)
注 ： 针对某一条边进行单独设置
边框也可以针对某一条边进行单独设置：border-left-style; 中间是方向left,right,top,bottom
三十四、边框实现三角形
颜色：透明颜色–transparent
当背景色与所显示的颜色相同时，显现不出来。
三十五、family字体类型
font-family : 字体类型
英文字体 ：Arial,‘Times New Roman’
中文字体：微软雅黑，宋体
中文字体的英文名称：
微软雅黑：‘Microsoft YaHei’
宋体：SimSun
衬线体与非衬线体
注意：1、多个字体类型的设置目的
2、引号的添加的目的
三十六、字体大小粗细样式
font-size : 字体大小
默认大小：16px（px为像素）
写法:number(px) / 单词（small,large…不推荐使用）
注意：字体大小一般为偶数。
font-weight : 字体粗细
两种模式：正常（normal)，加粗（bold)
写法：单词（normal,bold), / number(100,200…900）实际有两种显示值（100到500都是正常的，600到900都是加粗的）
font-style : 字体样式
两种模式：正常（normal), 斜体（italic）
写法：单词（normal,italic)
注意：oblique也是表示斜体（用的比较少，一般了解即可）
区别：1、italic带有属性倾斜字体的才可以设置倾斜操作。
2、oblique没有倾斜属性的字体也可以设置倾斜操作。
color：颜色
三十七、文本修饰与文本大小写
text-decoration：文本装饰
下划线（underline），
删除线（line-through），
上划线（overline），
不添加任何装饰：none。
取值
添加多个：添加多个文本修饰用空格隔开（line-through underline overline）
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
取值
三十八、文本缩进与文本对齐
text-indent：文本缩进
首行缩进
em单位：相对单位，1个em永远都是跟字体大小相同
text-align：文本对齐方式
对齐方式：left，right，center，justify（两端点对齐）
取值
三十九、文本的行高
line-height：定义行高
定义：行高：上边距+字体大小+下边距（行高就是一行文字的高度，上边距和下边距的等价关系。）
默认：默认行高不是固定值，而是变化的。根据当前字体的大小再不断的变化。
取值：1、number（px），scale(比例值，跟文字大小成比例）
四十、文本间距与英文折行
letter-spacing：定义字间距
word-spacing：定义词间距（针对英文段落的）
强制折行：（针对英文）英文和数字不自动折行的问题：
1、word-break：break-all；（非常强烈的折行）
2、word-wrap：break-word；（不是那么强烈的折行）
四十一、文本与段落实现个人简介
四十二、CSS复合样式
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合样式：
复合的写法：是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background,border;有的是需要关心顺序，例如font。
1、background : red , url(), repeat 0 0;
2、border ：1px , red , solid;
3、font ：
注 ： 最少要有两个值 size,family(要有顺序）
weight,style,size,family(正确）
style,weight,size,family(正确）
weight,style,size/line-height,family(正确）
注意：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。这样样式才不会被覆盖掉。
四十三、ID选择器及注意事项
ID选择器
css : #elem{}
html : id= “elem”
注意：
1、在一个页面中，ID值是唯一的。
2、命名规范，字母、_(下划线）、-（中划线）、数字（命名的第一位不能是数字）。
3、命名方式，驼峰式、下划线式、短线式。
searchButton(小驼峰） SearchButton(大驼峰） searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button
查看大网站的控台来了解这些
四十四、CLASS选择器及注意事项
CLASS选择器：
css : elem{}-----.elem{}
html : “elem” -----class=“elem”
注意：
1、class选择器是可以复用的。
2、可以添加多个class样式。
3、多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4、标签+类的写法。
