引言部分：
一、拨云见日（HTML、CSS、切图流程、PC企业站布局、PC游戏站布局）
二、溯本求源（扩展HTML、扩展CSS、HTML5新语法、CSS3新语法、兼容与hack)
三、风生水起（弹性布局、网格布局、移动端布局、响应式布局、Bootstrap)
四、巧夺天工（预编译CSS、postcss、CSS架构、高级功能、CSS与JS交互）
一、拨云见日
1.什么是HTML、CSS？
- HTML的全称为超文本标记语言，是一种标记语言。HTML百度介绍
- 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS百度介绍
浏览器把代码解析后的样子就是我们看到的网站，原始代码可通过查看网页源代码查看
2.使用什么软件进行编辑？
宇宙第一编辑器 VS Code，全称Visual Studio Code,来自微软，是一个开源的、基于Electron的轻量代码编辑器。VS Code下载地址
- 如何安装插件？
下图中左侧最下方拓展，在搜索栏中搜索需要安装的插件
（eg.语言包、open in browser、view in borwser)
- 学习编辑器基本使用
- 创建文件夹，创建文件，重命名，删除……
- 快捷键的使用：
ctrl+s：保存
ctrl+a：全选
ctrl+x、ctrl+c、ctrl+v：剪切、复制、粘贴
ctrl+z、ctrl+y：撤销、前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行
tab：向后缩进
tab+shift：向后缩进
alt+鼠标左键：多光标
ctrl+d：选择相同元素的下一个
3.使用什么浏览器？
谷歌浏览器（Google Chrome），是一款可让您更快速、轻松且安全地使用网络的浏览器。Chrome下载地址
为什么使用Chrome浏览器？百度统计浏览器市场份额参考
4.深入了解网站开发
UI设计师：UI设计师百度介绍
设计稿
Web前端开发工程师（H5开发）：前端工程师百度介绍
设计稿->代码
数据库里的数据->显示到页面
HTML(结构）+CSS（样式）
Web后端开发工程师：后端工程师百度介绍
将网站中的数据存储起来
5.Web三大核心技术
HTML：结构
CSS：样式
JavaScript：行为
6.HTML基本结构和属性
定义：超文本标记语言
- 超文本：文本内容+非文本内容（图片、视频、音频等）
- 标记(标签)：<单词>
写法一、单标签:
<header>
写法二、双标签：
<header></header>
创建标签的快捷键：单词+tab键-><单词>
标签可以上下排列，也可以组合嵌套：
<header>
hello world
<div>hi</div>
</header>
HTML常见标签：标签大全网址
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”…>
<header title="hello">hello world</header>
<footer title="hi">hi HTML</footer>
- 语言：编程语言
7.HTML初始代码
每个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。
快捷键：！+tab键
<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码
<head> lang="en"表示是一个英文网站，lang="zh-CN"则表示中文
<meta charset="UTF-8"> 元信息：是编写网页中的一些赋值信息
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
8.HTML注释
效果：内容在浏览器中看不到，只能在代码中看到注释的内容。
意义：把暂时不用的代码注释起来，方便以后使用/对开发人员进行提示。
写法：
<!--注释的内容-->
快捷添加注释与删除注释：
1.ctrl+/
2.shift+alt+a(需要选中）
9.HTML语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。
好处：
1.在没有CSS的情况下，网页也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4.便于团队开发与维护。
10.标题与段落
- 标题->双标签：
<h1></h1>...<h6></h6>
在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。
- 段落->双标签：
<p></p>
11.文本修饰标签
- 强调->双标签（strong/em)：
效果区别：1.前者为加粗、后者为斜体2.前者强调性更强，后者强调性稍弱
写法：
<strong></strong>或者<em></em>
- 下标文本、上标文本->双标签
写法：
<sub></sub>、<sup></sup>
- 删除文本、插入文本->双标签
注：一般情况下，删除文本都是和插入文本配合使用的
写法：
<del></del>、<ins></ins>
12.图片标签与图片属性
- img->单标签
src：引入图片的地址
alt：当图片出现问题的时候，可以显示一段友好的提示文字
title：提示信息
width、height：图片的大小
<img src="图片地址” alt="一段文字” tiele="提示信息" width="尺寸" height="尺寸">
13.引入文件的地址路径
- 相对路径(暂时推荐)：
在路径中表示当前路径
两个在路径中表示上一级路径
<img src="./dog.jpg" alt=""> dog.jpg为图片地址
<img src="./img/animal/dog.jpg" alt=""> animal为文件夹
<img src="../img/animal/dog.jpg" alt=""> 查看上一级
- 绝对路径
具体地址
<img src="E:/img/animal/dog.jpg" alt=""> 表示E盘中的xxx图片
注意：尽量避免写反斜线
14.链接标签
- a->双标签
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下在当前页面打开
<a herf="http://www.baidu.com" target="_blank">访问百度</a>
- base标签->单标签
作用：可以改变链接的默认行为
注意：一般会写在header当中
<base target="_blank">
15.跳转锚点
- 实现一：#号、id属性
<a herf="#html">HTML</a>
<h1 id="html">HTML超文本标记语言</h1>
- 实现二：#号、name属性
<a herf="#html">HTML</a>
<a name="html"></a>
16.特殊符号
编写一些文本时,经常会遇到输入法无法输入的字符,如x(注册商标)、x(版权符)等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码。
17.列表标签
1.无序列表->ul、li 两者间需符合嵌套的规范，它们之间不能出现其他标签
<ul><li></li></ul>
此外，ul具有type属性：改变前面标记的样式（一般都是用CSS去控制）
具体样式：标记样式网站
2.有序列表->ol、li 列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表
<ol><li></li><ol>
此外，ol具有type属性：改变前面标记的样式（一般都是用CSS去控制）
具体样式：标记样式网站
3.定义列表->dl、dt、dd 列表项需要添加标题和对标题进行描述的内容
<dl><dt></dt><dd></dd></dl>
注：嵌套列表->列表之间可以互相嵌套形成多层级列表
18.表格标签
table：表格的最外层容器
tr：定义表格行
th：定义表头
td:定义表格单元
caption：定义表格标题
注：之间是有嵌套关系的，要符合嵌套规范
语义化标签：tHead、tBody、tFood(仅规范，无显示)
注：在一个table中，tBody是可以出现多次的，但tHead、tFood只能出现一次
属性标签：
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（left、center、right）
valign：上下对齐方式（top、middle、bottom）
<table border="1" cellpadding="30" cellspacing="30">
<caption>标题</caption>
<tHead>
<tr>
<th colspan="2">表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</tHead>
<tBody>
<tr>
<td rowspan="2">表格单元内容1</td>
<td>表格单元内容2</td>
<td>表格单元内容3</td>
</tr>
</tBody>
<tFood>
……
</tFood>
</table>
19.表单标签
form：表单的最外层容器
input：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
注：input（单标签）标签有一个type属性，决定是什么控件。
(下图展示了多种常用的属性标签)
<form action="提交地址"> 注：此处提交路径并不完善
<h2>输入框：</h2>
<input type="text" placeholder="请输入用户名"> 注：输入框内的提示内容
<h2>密码框：</h2>
<input type="password" placeholder="请输入密码"> 注：输入框内的提示内容
<h2>复选框</h2>
<input type="checkbox" checked>选项1 注：默认已勾选
<input type="checkbox" checked>选项2 注：默认已勾选
<input type="checkbox" disabled>选项3 注：不可勾选
<h2>单选框</h2>
<input type="radio" name=“XXX” id="man"><label for="man">男</label>
<input type="radio" name=“XXX” id="woman"><label for="woman">女</label>
**注：同一组name配合radio实现单选**
**注：前面标签中的id对应后面的label标签，使得文字可被选择**
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea> 注：多行文本框及属性
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>下拉选项1</option>
<option>下拉选项2</option>
<option>下拉选项3</option>
</select>
<select size=“3”> 注：下拉菜单显示x项（默认为1）
<option>下拉选项1</option>
<option>下拉选项2</option>
<option>下拉选项3</option>
</select>
<select multiple> 注：可多选（快捷键Ctrl+鼠标左键）
<option>下拉选项1</option>
<option>下拉选项2</option>
<option>下拉选项3</option>
</select>
<input type=“file” multple> 注：可多选文件
</form>
20.表单表格组合
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr>
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit">   注：此处加了三个空格
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
21.div和span标签
div（块):div全称为division，“分割、分区”的意思，div标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在div标签中，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span(内联) ∶用来修饰文字的
注：div与span都是没有任何默认样式的，需要配合CSS才行。
22.CSS基础语法
格式：选择器{属性1:值1;属性2:值2}
单位：px->像素（pixel）、%->百分比（外容器->600px 当前容器50%->300px）
基本样式：width、height、background-color
CSS注释：/* CSS注释的内容 */
<header>
<style>
div{width：100px; height:100px;background-color:red}
span{background-color:blue}
</style>
</header>
<body>
<div>这是一个块</div>
<span>这是一个内联</span>
</body>
23.CSS样式的引入方式
- 内联（行内、行间）样式在html标签上添加style属性来实现的（注意，在标签里面）
- 内部样式在style标签内添加的样式（注意，style标签一般写在header中）
注：内部样式的优点，可以复用代码
区别：内部样式的代码可以复用、复合W3C的规范标准，进行让结构和样式分开处理
- 外部样式引入一个单独的CSS文件，name.css
写法：1.link标签(引入外部资源)，rel属性标签语法大全(指定资源跟页面的关系)属性标签href(资源的地址)2.通过@import方式引入外部样式（注：这种方式有很多问题，不建议使用）补充：link与@import的区别
注意：内部样式和外部样式的空格键不影响使用
@import引入方法展示：
<style>
@import url('./common.css');
</style>
24.CSS中的颜色表示法
- 单词表示法：red blue…颜色对照表链接
- 十六进制表示法：0 1 2 3 4 5 6 7 8 9 a b c d e f 如#000000 #ffffff
- RGB三原色表示法：rbg(0,0,0);rbg(255,255,255); (取值范围 0~255）
颜色获取方法：下载地址
获取颜色的工具
25.CSS背景样式
- background-color：背景颜色
- background-image：背景图片
格式：xxx:url(图片地址)
默认：会水平垂直都铺满背景图 - background-repeat：背景图片的平铺方式
repeat-x（x轴平铺）
repeat-y（y轴平铺）
repeat（x、y轴都进行平铺，默认值）
no-repeat（都不平铺） - background-position：背景图片的位置
格式1：background-position:100px 5px;（分别表示向右和向下平移100和50像素）
格式2：background-position:单词 单词;(x：left、center、right，y：top、center、bottom)
格式3：background-position:百分比 百分比; - background-attachment：背景图随滚动条的移动方式
background-attachment:scroll/fixed;
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器进行偏移的） - 背景图视觉差
<head>
<style>
#div1{width:1400px;height:800px;background-image:url(./img/1.jpg)}
#div2{width:1400px;height:800px;background-image:url(./img/2.jpg)}
#div3{width:1400px;height:800px;background-image:url(./img/3.jpg)}
table{background-color:white;}
<style>
</head>
<body>
<div id="div1"></div>
<表层的内容1>
<div id="div2"></div>
<表层的内容2>
<div id="div3"></div>
<表层的内容3>
</body>
26.CSS边框样式
- border-style:边框的样式
solid：实线
dashed：虚线
dotted：点线 - border-width:边框的大小
px… - border-color:边框的颜色
red #f00…
注：如何针对某一条边进行单独设置？
区别在于border-right/left/top/bottom-style
如何使用边框制作出一个三角形的效果？
调节适合的像素宽度，最初制作出的效果为由四个三角形拼成的正方形
（颜色：透明颜色 transparent）
27.CSS文字样式
font-family：字体类型
中文字体：微软雅黑，宋体
英文字体：Arial、‘Microsoft YaHei’、SimSun
注：中文支持中英文字体，而英文只支持英文字体(一般字体都有中英文版）
衬线体与非衬线体：前者一般具有棱角，后者圆滑
注：如何设置多字体？
能否识别字体取决于电脑内是否有该字体，可将多个字体用逗号隔开，逐一往后使用直至遇到第一个用户计算机内拥有的字体显示，使用多个以防止没有字体样式能够显示。
注：引号的使用？
中间有空格的英文需要用单引号引起来
28.CSS文字大小
font-size：字体大小
写法：font-size:数字px/单词;
注：不推荐使用下表中的单词，因为这种方式不能够确定准确大小，并且为了设置对齐，最好设置为偶数px
font-weight：字体粗细
模式：正常（normal)加粗（bold）
写法：单词/数字（100.200…900,100到500都是正常的，600到900都是加粗的）
font-style:字体样式
模式：正常（normal）斜体（italic）
写法：单词
注：oblique也是表示斜体，用的比较少，了解即可
区别：1.italic只有带有倾斜属性的才可以设置倾斜操作 2.oblique没有倾斜属性的字体也可以设置倾斜操作
color：字体颜色。写法：color:颜色；
29.段落样式
text-decoration：文本装饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
注：可同时添加多个装饰，使用空格隔开
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
text-indent：文本缩进（首行缩进）
写法eg：p{text-indent:36px;font-size:18px;}p{text-indent:2em;font-size:18px;}
注：想要文字对齐，缩进必须为字体大小的倍数，另外，英文不适用，造成的无法对齐的状态暂时无法解决
em单位：相对单位，1em永远都是跟字体大小相同
text-align:文本对齐方式
对齐方式：left、right、center、justify（两端点对齐）
line-height:定义行高
什么是行高：一行文字的高度，上边距和下边距的等价关系
默认行高：不是固定值，而是变化的，根据及当前字体大小在不断地变化
取值：1.number(px)/2.scale(比例值,跟文字大小比较)
letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落）
英文和数字不自动折行的问题：
1.word-break:break-all;（非常强烈的折行）
2.word-wrap:break-word;（不是那么强烈的折行）
区别：前者会产生一些空白区域
30.CSS复合样式
概念：一个CSS属性只控制一种样式，叫做单一样式；一个CSS属性控制多种样式，叫做复合样式
注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，否则将会被覆盖## 标题
- 复合样式：
复合的写法：是通过空格的方式实现的，复合写法有的是不需要关心顺序的，例如background、border;有的是需要关心顺序的，例如fond
1.background:red url() repeat 0 0;
2.border:1px red solid;
3.font：size family
注：fond至少要有两个值
weight style size family√
style weight size family√
weight style size/line-height family√
31.CSS选择器
ID选择器
css:#elem{}
html:id=“elem”
注∶
1.在一个页面中，ID值是唯一的
2.命名规范，字母_-数字(命名的第一位不能是数字）
3.命名方式，驼峰式、下划线式、短线式
CLASS选择器
css :.elem{}
html : class = "elem”
- 注:
1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
4.标签+类的写法
1418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
