前端开发入门：html和css基础知识回顾
前端入门：零基础：前端基本技能，web开发基础(html+css+javascript)、学习方法、学习资料；兴趣：web技术（html+css网页制作）、ps技能、前端自动化工具、前端架构、前端MVVM、MVC、MV*框架和设计模式、各种调试web抓包工具、移动设备web调试工具、浏览器工作原理、前端安全规范和防护。
1. 文件结构：
HTML用什么写和什么读？建议用火狐和谷歌浏览器，符合W3C的标准。编辑我们可以用sublime Text或文本、UE、EditPlus、Notepad等文本编辑器书写。调试可以用 FireFox+Firebug插件或者谷歌插件进行调试代码。
3种文本类型DocType：（1）Strict(严格)；（2）Tranditional（传统）;（3）FrameSet（框架）
...
...
html是根标签，
head定义文档头部，包含： title, script, style, link, meta
body是网页主要内容，包含：h1,h2-h6, p, a, img
2. 认识head标签：
3. 语义化：
明白每个标签的用途（在什么情况下我可以使用这个标签才合理）
比如，网页上的文章的标题就可以用标题标签，
网页上的各个栏目的栏目名称也可以使用标题标签。
文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签表示强调等等。
4. 认识body标签：
段落文本
有三段就放三个标题文本
h1-h6共6个标题分级斜体文本（强调） 斜体文本内容
粗体文本 粗体显示文本内容
单独样式文本 没有语义的，它的应用就是为了 设置单独的格式用的
引用的文本
引用的文本内容，会自动加上双引号
引用的文本文字、图片滚动效果
大段引用引用大段的文本内容，文本前后会加上缩进
换行
水平横线
空格
地址信息 地址信息，通常用于公司地址显示
代码内容 代码，通常是一行内
多行代码多行代码,你需要在网页中预显示格式时都可以使用它
- ul-li 列表信息，以圆点显示（无序列表）
- 信息1
- 信息2
......
- ol-li 列表信息，带上序号（有序列表）
- 信息
- 信息
......
排版内容
排版中使用，相当于一个容器
确定逻辑部分：逻辑部分是页面上相互关联的一组元素，如栏目版块
表格内容
创建表格
标题文本 为表格添加标题文本
... 若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点）
表格一行 表格中的一行
表格单元格 表格中的一个单元格
表格表头 表格头部的一个单元格，表格表头
...
为表格添加摘要，但不会被浏览器显示出来
链接显示文本 链接标签
target="_blank" 网页将在新窗口中打开
mailto: 网页中邮件地址，可带多个参数
mailto: 邮箱地址
cc= 抄送地址
bcc= 密抄地址
; 多个邮箱地址
subject=邮件主题
body= 邮件内容
完整举例: 发送邮件
![下载失败时替换文本]( "提示文本")
5. 与用户交互：
语法：
举例：
表单控件：
文本框、文本域、按钮、单选框、复选框；
method:
post/get
1. 文本框（文本/密码）
type：有“text”和“password”两种类型
name：为文本框命名，方便后台ASP和PHP使用
value：文本框默认值，一般起提示作用
2. 文本域（多行文本）
cols：多行输入域的列数
rows：多行输入域的行数
3. 单选框、复选框
type：radio单选，checkbox复选框
value：提交数据到服务器的值，后台PHP处理使用
name：为控件命名，以备后台程序ASP和PHP使用
checked：checked="checked"时，此选项默认被选中
注意：同一组的单选按钮，name取值一定要一致
4. 下拉列表框
value：向服务器提交值
selected：设置selected="selected"时，默认选中
multiple：multiple="multiple"时，可以使用Ctrl多选，但很丑
label：为了改进鼠标易用性，鼠标点击文本时，选择上Radio
6. 认识CSS样式：
选择符{ 属性: 值}
举例：
p{ color: blue}
选择符：又称选择器，指明要应用样式规则的元素，如、、
2. 嵌入式
较通用的一类，CSS样式放置在
3. 外部式
把CSS代码写到一个单独的外部文件中，以.css扩展名结尾，在内使用标签引入，如：
href: .css文件路径
rel和type: rel="stylesheet" type="text/css" 是固定写法，不能改
三种方法的优先级：
内联式 > 嵌入式 > 外部式 >浏览器的默认样式；
就近原则，嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
8. CSS 类选择器
语法：
.类选器名称{css样式代码;}
举例：
注意：前边的小圆点是必须要有的
使用：
胆小如鼠
9. CSS ID选择器
语法：
#ID选择器名称{css样式代码}
举例：
#setGreen{color:green;}
胆小如鼠
区别：
起始于 '.' 与 '#'
调用时 class= 与 id=
ID选择器只能在文档中使用一次，类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式，而ID选择器是不可以的，如 三年级
10.CSS 子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。举例：
.food>li{border:1px solid red;}
若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素，举例：
.first span{border:1px solid red;}
11. CSS 通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素：
* {color: red;}
此时，所有元素的字体都为红色
12. CSS 伪类选择符：在原有选择器的基础上添加一个限度条件hover，当某种情况发生时再选择这个标签。
伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
此时，把鼠标放置到元素上边，颜色就会切换为红色
13. CSS 分组选择符
多个标签使用逗号隔开：
h1,span{color:red;}
相当于：
h1{color:red;}
span{color:red;}
14. CSS 继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代
如：
p{color:red;} /*可被span继承*/
p{border:1px solid red;} /*此时，span将不继承，边框显示红色*/
15. CSS 特殊性（权值）
权值：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
层叠：
相同权值时，最后一个将被应用
重要性：
相同权值时，使用 !important 将得到最高权重，如 p{color:red!important;}
样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，使用 !important 优先级比 用户自己设定 还高
16. CSS 文字排版
1. 字体
body{font-family:"宋体";}
body{font-family:"Microsoft Yahei";}
2. 字号，颜色
body{font-size:12px;color:#666}
3. 粗体
p span{font-weight:bold;}
a{font-weight:bold;}
4. 斜体
p a{font-style:italic;}
p{font-style:italic;}
5. 下划线
p a{text-decoration:underline;}
6. 删除线
.oldPrice{text-decoration:line-through;}
7. 缩进
p{text-indent:2em;} /*2em 表示两倍文字大小*/
8. 行间距
p{line-height:1.5em;}
9. 字间距、字母间距
h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/
19.对齐
h1{text-align:center;} /*left、right和center*/
17. CSS 元素分类
块状元素：
确定逻辑部分：逻辑部分是页面上相互关联的一组元素，如栏目版块
…
div 带上ID号，使之更清晰
... 若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点）
链接显示文本 链接标签
target="_blank" 网页将在新窗口中打开
mailto: 网页中邮件地址，可带多个参数
mailto: 邮箱地址
cc= 抄送地址
bcc= 密抄地址
; 多个邮箱地址
subject=邮件主题
body= 邮件内容
完整举例: 发送邮件
5. 与用户交互：
语法：
举例：
表单控件：
文本框、文本域、按钮、单选框、复选框；
method:
post/get
1. 文本框（文本/密码）
type：有“text”和“password”两种类型
name：为文本框命名，方便后台ASP和PHP使用
value：文本框默认值，一般起提示作用
2. 文本域（多行文本）
cols：多行输入域的列数
rows：多行输入域的行数
3. 单选框、复选框
type：radio单选，checkbox复选框
value：提交数据到服务器的值，后台PHP处理使用
name：为控件命名，以备后台程序ASP和PHP使用
checked：checked="checked"时，此选项默认被选中
注意：同一组的单选按钮，name取值一定要一致
4. 下拉列表框
value：向服务器提交值
selected：设置selected="selected"时，默认选中
multiple：multiple="multiple"时，可以使用Ctrl多选，但很丑
label：为了改进鼠标易用性，鼠标点击文本时，选择上Radio
6. 认识CSS样式：
CSS：层叠样式表（Cascading Style Sheets）又称级联样式表，主要用于定义HTML内容在浏览器内的显示样式，样式和内容/结构是分离的，HTML是表达结构，CSS是表 达样式。 好比人穿衣服，HTML是人，CSS是各种五颜六色的衣服；CSS高效的定义HTML元素外观和样式，描述html如何在浏览器中显示。
选择符{ 属性: 值}
举例：
p{ color: blue}
选择符：又称选择器，指明要应用样式规则的元素，如、、
、
、...
声明：指的是冒号”:“
多条声明：使用分号”;“隔开，最好每行都加上分号
注释：CSS使用 /**/，HTML注释则使用
7. CSS样式分类：
1. 内联式
这里文字是红色。
2. 嵌入式
较通用的一类，CSS样式放置在
3. 外部式
把CSS代码写到一个单独的外部文件中，以.css扩展名结尾，在内使用标签引入，如：
href: .css文件路径
rel和type: rel="stylesheet" type="text/css" 是固定写法，不能改
三种方法的优先级：
内联式 > 嵌入式 > 外部式 >浏览器的默认样式；
就近原则，嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面
以上规则适用于相同权值的情况
8. CSS 类选择器
语法：
.类选器名称{css样式代码;}
举例：
注意：前边的小圆点是必须要有的
使用：
胆小如鼠
9. CSS ID选择器
语法：
#ID选择器名称{css样式代码}
举例：
#setGreen{color:green;}
胆小如鼠
区别：
起始于 '.' 与 '#'
调用时 class= 与 id=
ID选择器只能在文档中使用一次，类选择器则可以使用多次
一个元素可以使用多个类选择器同时设置多个样式，而ID选择器是不可以的，如 三年级
10.CSS 子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。举例：
.food>li{border:1px solid red;}
若大于符号换成空格( ),用于选择指定标签元素的所有后辈元素，举例：
.first span{border:1px solid red;}
11. CSS 通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素：
* {color: red;}
此时，所有元素的字体都为红色
12. CSS 伪类选择符：在原有选择器的基础上添加一个限度条件hover，当某种情况发生时再选择这个标签。
伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
此时，把鼠标放置到元素上边，颜色就会切换为红色
13. CSS 分组选择符
多个标签使用逗号隔开：
h1,span{color:red;}
相当于：
h1{color:red;}
span{color:red;}
14. CSS 继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代
如：
p{color:red;} /*可被span继承*/
p{border:1px solid red;} /*此时，span将不继承，边框显示红色*/
15. CSS 特殊性（权值）
权值：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
层叠：
相同权值时，最后一个将被应用
重要性：
相同权值时，使用 !important 将得到最高权重，如 p{color:red!important;}
样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，使用 !important 优先级比 用户自己设定 还高
16. CSS 文字排版
1. 字体
body{font-family:"宋体";}
body{font-family:"Microsoft Yahei";}
2. 字号，颜色
body{font-size:12px;color:#666}
3. 粗体
p span{font-weight:bold;}
a{font-weight:bold;}
4. 斜体
p a{font-style:italic;}
p{font-style:italic;}
5. 下划线
p a{text-decoration:underline;}
6. 删除线
.oldPrice{text-decoration:line-through;}
7. 缩进
p{text-indent:2em;} /*2em 表示两倍文字大小*/
8. 行间距
p{line-height:1.5em;}
9. 字间距、字母间距
h1{letter-spacing:50px;word-spacing:50px;} /*分别是字母、单词间距*/
19.对齐
h1{text-align:center;} /*left、right和center*/
17. CSS 元素分类
块状元素：
、...
、
...、、、、、、 、
- 、
- 、
- 、