前端学习笔记
前端第一阶段代码由三部分组成：
1.文件头（类似于c语言的#include<… .h>）
2.head部分，其中又包括title部分
3.body部分。
<!DOCTYPE html>//文件头
<html>
<head>
<title>我的第一个网页</title>//负责网页的标签内容
</head>
<body>//负责网页正文内容
<p>hello!</p>//p标签表示的是段落，可以设置段落间距和首行缩进 《登鹳雀楼》<P/>
<p>world</p>
你好！<br/>//br只是表示换行
## 世界<br/>
</body>
<html>
前面代码的网页效果
<h（n）>标签，这是文章的标题符号，其中n为数字数字的值越小标题的字越大， 可以用h1~h6等。是双标签
<hr>可以则是网页的分割线标签。
<u>下划线<b>加粗<sub>下标<sup>上标
以上是网页可见的符号，而在网页上不可见的标签有
<!--注释内容-->来表示注释内容，文本不会显示在网页上。
快捷键：ctrl+/
则表示空格，可以多次使用
<则是<的转义字符
html的转义字符都采用&开头，所以&这个符号本身的转义字符为&
预格式化
<pre>
内容//将保留直接输入的换行，空格和宽度。
</pre>
标签属性：HTML元素可以通过设置属性达成特定的效果
1.属性可以在元素在添加附加信息。
2.属性一般用于开始标签。
3.属性一般以名称/值对的方式出现如：name=“value”
<p calss="conet">这是一个带有class属性并且值为conet的段落标签</p>
浏览器和浏览器内核
浏览器内核由渲染引擎和JS引擎两部分组成。
内核：Trident(IE),Gecko(FireFox),Webkit(safari/chrome),Bilnk(chrome/opera）
国内大多数浏览器采用双核驱动（Trident&Webkit或Trient&Blink）
移动端：ipad/iphone采用Webkit内核，andeoid4.4以下采用Webkit内核，而4.4以上版本采用的是Blink.
常见开发工具：sublime，HBuiled,VScode,Atom,Webstorm
文本格式化标签：就是通过标签来美化 文本外观
1.<b><strong>都有加粗作用且都是行级标签（不会自动换行），但strong除了加粗作用外还有强调作用。注释：强调主要用于SEO时，便于提取关键字。
2.<i> <em>使文字倾斜（且都是行级标签），em具有强调作用。如果只是简单的倾斜效果i标签即可，比如添加图标等。
3<pre>预格式化文本（块级标签，独占一行）
4.<small> <big>分别让文字小一号或大一号，big在HTML5中被淘汰了，但没有被删除，尽量不要使用
5.<sub> <sup>设置文本为下标和上标，用来调整文字显示的基线，且文字会自动小一号
HTML单双标签
标签由标签名，标签属性和文本内容三部分组成（注意：单标签没有文本内容）
单标签由一个标签组成比如：
<br/>
<hr/>
<img/>
<link/>
<meta/>
双标签由”开始标签“和”结束标签组成“，必须成对使用
HTMl的图片与链接：
<img src="图片地址" alt="图片没有成功显示时的替代性文字" width="~px"> height="200px"
图片是在html网页下同一文件夹内的，填文件地址时要把文件名和后缀写完。可以用width来控制图片的宽度大小（px表示的是像素）height控制图片的高度。
<a>标签用于超文本链接，herf属性：链接目标的URL，target属性：设置链接跳转方式
浏览使用文件夹中的图片需要用到相对路径文件夹名/图片名称和图片后缀
超链接：点击选项跳转到新的网页，
<h1><a href="网页名和后缀">链接名称</a> <h1>
注意：跳转的网页和原网页应该在同一个文件夹
如果想要设置新打开的网页都方式可以设置targe=“blank” target=“self” target="_parent" target="_top"来实现。
<h1><a href="网页名和后缀" target="-self">链接名称</a> <h1>（在本页面打开）
<h1><a href="网页名和后缀" target="-blank">链接名称</a> <h1>
(在新的页面打开)
HTML实体转义
在HTML中，内容编辑时，如果是通过空格键编辑的多个空格，网页只会显示成一个，而小于号（<）和大于号（>），网站则会认为是标签而无法直接显示在页面中，这些可以通过实体字符来解决。
| 实体字符 | 编译后字符 |
|---|---|
< | 小于号（<） |
> | 大于号（>） |
& | 与号（&） |
| 空格 |
© | 版权（©） |
× | 乘号（x） |
÷ | 除号（÷） |
代码展示：
运行效果：
HTML块级元素和行级元素
块级元素
块级元素会独占一行，其宽度自动填满其父元素宽度，一般情况下，块级元素可以设置width,height属性一般用来搭建网站架构，布局，承载内容
块级元素的特点（相当于执行了display:block:操作）
···1.宽度和高度可控，如果没有设置其宽度，将默认铺满整行。
2.其内可以包含块级元素和行级元素
3.独占一行
它包含以下标签：
address,div,dir,dl,dt,dd,fieldset,form,h1~h6,hr,menu,noframes,ol,p,pre,table,ul等
行级元素
行级标签不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会换行，其宽度谁元素的内容而变化，对行内元素设置width和height无效，一般用于在网站内容之中的某些细节或者部位，用于“强调，区分样式，上标，下标，锚点”等等
行级元素的特点：（相当于执行了dispaly:inline:操作）
1.不会独占一行，与相邻的行级元素占同一行，直至行占满。
2.宽度和高度不可控。
3.其內只能包含行级元素
它包含以下
a,b,bdo,big,small,br,cite,em,font,i,img,input,kbd,label,select,span,strong,sub等
*特殊的行级标签：img
<img>属于行级标签但可以设置宽高，可以叫做行块级标签。相当于执行了dispaly:inline-block:操作
块级标签和行级标签的转换
1.块级转换为行级标签（以p标签举例）
在style设置中加上*display：inline:*就好
<p style= "display:inline:"> 块级标签转行级标签</p>
2.块级转换为行级标签（以span标签举例）
在style设置中加上*display：block:*就好
<span style="display:block:">行级标签转为块级标签</span>
W3c规范
w3c标准由结构，表现，行为三部分组成。
标签嵌套规则
1，块元素可以包含行级元素或某些块级元素，但行级元素不可以包含块级元素，只能包含其他行级元素
<div><h1></h1><p></p></div>————对
<a herf="#"><span></span><a>————对
<span><div></div></span>——————错
2，块级元素不能放在<p>里面
<p><ol><li></li></ol></p>——错
<p><div></div></p>————错
3，有几个特殊的块级元素只能包含行级元素，不能再包含块级元素，这几个元素是
h1~h6,p,dt
4，块级元素与块级并列，行级元素与行级元素并列
<div><h2></h2><p></p></div>————对
<div><a href="#"></a><span></span></div>————对
<div><h1></h1><span></span></div>——————错
HTML语义化标签
1，什么是语义化标签
语义化，就是明白每一个标签的用途（在什么情况下我可以使用这个标签才合理）
比如：
网页上的文章的标签可以用“h1 ~ h6”，网页上的各个栏目名称也可以使用“h1~h6”
文章中的内容旧的放在段落标签p中，在文章中有想要强调的文本，就可以使用em标签表示强调等
2.为什么使用语义化标签
- 更容易被搜索引擎收录
- 更容易让屏幕阅读器读出网页内容
- 能够更好的体现页面的主题
- 兼容性更好，支持更多的网络设备
3.HTML语义化标签
<a>标签：实现超链接（强调：title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发在作用很大，主要方便搜索引擎了解链接地址的内容，语义化更友好）<p>标签：文字段落放在p标签中<h1~h6>标签：文字标题，栏目标题用<h1~h6>表示,标题标签一个有6个，h1,h2,h3,h4,h5,h6分别是一级标题，二级标题，三级标题，四级标题，五级标题，六级标题，并且依据重要性递减，h1是最高的等级。<strong>和<em>标签，特别强调几个文字。但两者在强调的预期上有区别：<em>表示强调，<strong>表示更强烈的强调。并且在浏览器中<em>默认用斜体表示，<strong>用粗体表示。两个标签相比，国内更喜欢使用<strong>表示强调。<q>标签：短文本引用。（注意要引用的文本不用加双引号），浏览器会对q标签自动添加双引号。<address>标签：为网页加入地址信息。<ul>标签：无序列表<ol>标签：有序列表<caption>标签：为表格添加标题和摘要，摘要的内容是不会在浏览器中显示出来的，它的内容是增加表格的可读性（语义化），使搜索引擎更好的读懂表格内容，还可以使屏幕显示器更好的帮助特殊用户读取表格内容
语法使用：
<table summary="表格简介文本">
标题用于描述表格内容，标题的显示位置：表格上方
语法使用：
<caption>标题文本</caption>
代码展示：
效果：
文件命名规范
项目开发时，项目中文件或目录名中不能出现汉字和空格之类的其他符号，文件和目录名一般以字母或下划线开头,其后可以出现字母，数字和下划线
| 页面 | 命名规范 |
|---|---|
| 首页 | index.html |
| 公司介绍 | about.html |
| 新闻列表 | news.html |
| 产品列表 | product.html |
| 产品详情页 | pro_details.html |
| 联系我们 | contact.html |
| 新闻详情页 | new_details.html |
HTML标签属性
HTML除了基本的布局标签以外，还有部分标签拥有强大的交互能力，比如表单标签，可以实现基本的登录注册操作。再者各种标签通过设置不同的属性，也可以实现一些交互效果。
标签属性是对标签的一种描述方式。标签属性分为通用属性，自有属性和自定义属性
1）通用属性：所有标签都具有的属性。
通用属性有：
id:用来给标签取一个唯一的名称(id名称在一个网页中必须是唯一的)
class:用来给标签取一个类名，对一批标签进行操作
style:用来设置该标签的行内样式
title:当鼠标移到该标签，所显示的内容
2）代码示例：
效果展示：
（鼠标移到hello world上时会显示你好世界）
3）自定义标签属性：通常用来传值或用于图片的懒加载等方面
格式：*data-*(*表示自行定义的，通常是一个单词)
图片懒加载用法：<img data-src="图片路径" alt="提示文本">
传值用法：<p data-id=""goddsid>......</p>
HTML列表与表格
列表分为有序列表和无序列表两种，无序列表用
<ul>
<li>~</li>
<li>~</li>
.....
</ul>
ul表示无序列表，~表示的为需要加到列表的元素，列表每一个元素前都有一个圆点表示它是列表项
有序列表表示
<ol>
<li>~</li>
......
</ol>
列表每一个元素前都有一个顺序号表示它是列表的第几项
可以通过type来改变有序列表和无序列表元素前面的数字或者圆点来进行替换如
<ul> type="circle">//圆点替换成空心圆点
<ul type="square">//替换成小黑正方形
<ol type="A">//替换成A,B,C.....
<ol type="I">//替换成罗马数字
<ol type="a">//替换成小写a,b,c....
表格表示：在HTML中<table>标签表示一个表格，每一个表格均有若干个行（由<tr>标签定义），每一行被分割为若干个单元格（由<td>标签定义）
表格属性：
- border:设置表格边框,默认单位是像素
- width:设置表格宽度，默认单位是像素
- align:设置表格对齐（left(默认)/center/right）
- cellpadding:设置单元格间距(格中内容与边框的距离)
- cellspacing:设置像素间隙（单元格边框间距）
<table border="~">//表格的标识,border为添加边框，~为边框的宽度
<tr>//行的标识
<td>~ </td>//单元格的标识，~为单元格的内容
</tr>
</table>
示例代码：
效果展示：
跨行/跨列属性
跨行/跨列属性主要用来绘制复杂表格。
rowspan:跨行
示例代码：
运行效果：
colspan:跨列
代码展示：
效果展示：
注意事项：在进行表格的跨行，跨列操作的时候，要记得删除在跨行后不会显示的<td>行，不然会无法达到目的。
绘制一张完整表格：
完整表格组成：caption(标题)，thead(表头)，tbody(表体)，tfoot(表尾)四部分组成。
代码展示：
效果展示：
HTML表单表示
form表单：
<form>表单是一个包含表单元素的区域，允许用户在表单中（比如文本域，下拉列表，单选框，复选框等等）输入信息的元素。form表单标签是所有标签最核心的标签之一。它是实现前后端交互的一个重要标签。
常用属性：
name:表单名称
action:表单数据提交的地方（通常是一个文件名（。jsp/.php./.aspx/.py等），或网址），如果是#，表示提交到当前文件下。
method:前端提交到后端的方法，主要有：get和post，默认的是get.（get方法在提交过程中会直接将信息暴露，所以在对安全要求严格的情况下使用post）
代码展示
效果展示：
表单元素
HTML表单元素的有：<input>,<textarea>,<buttom>,<select>
表单通用属性：name,value,readonly,disabled
name属性：规定输入字段的名称
value属性：规定字段的初始值
readonly属性：规定输入字段为只读
disabled属性：规定输入字段是禁用的
value
readonly
disabled
1.
input类：主要用于输入，选择或发出指令。
type:text/password/radio/checkbox/file/button/image/submit/reset
a.text:单行文本输入框 type="text"可以不写，默认值
属性：palceholder(提示)）/name(命名)/minlength(最少输入的字符个数)/maxlength(最多输入字符个数)/disabled(失效，无法被修改)/readonly(只读)/value(默认值)/pattern（正则匹配,验证输入是否符合要求）
b.password:密码框，属性与text一样
c.radio:单选钮，通常是两项以上。通用属性有：name(必须要有)/value/checked(默认选中项)/disabled/readonly.
代码展示
效果展示：
（mtf的按钮是一开始就存在的）
d.checkbox:复选框，可以用来选择0项，1项或多项
属性：name(必须要有)/value/checked(默认选中)/display/readonly（只读）
代码展示：
效果展示：
e.file文件上传按钮
无属性
代码展示：
效果展示： 
f.botton:普通按钮。通常用它去调用脚本代码
常用属性：value(按钮的标题)/disabled(失效)
代码展示：
效果：
g.image:图片按钮，用法与button一样，以一个特殊属性：src(用来加载提示图片，用它替换了value)
它有提价功能，与submit功能一样
代码展示：
效果展示：
h.submit:提交按钮，用来将表单数据提交到后台
常用属性：value（按钮的标题）/disabled(失效)
代码展示：
效果：
点击后效果：（因为demo.php根本不存在，所以找不到）
j.reset:重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态
常用属性：value（按钮标题）/disabled(失效)
代码展示：
效果：
（向密码框里面输入数据）
点击reset按钮后：
另外的input类中经常使用label标签
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
也就是说即使在鼠标只点到选项前面的文字时，依旧可以选中要选中的选项
代码展示：
效果：
注意：<label> 标签的 for 属性应当与相关元素的 id 属性相同。
2.
textarea类（文本域，也可以可以叫多行文本框，主要用于输入大批量的内容，可以输入回车）
常用属性：name/id/cols（列数）/rows（行数）/placeholder/minlength/maxlength/required(必须输入)
代码展示：
效果展示：
ps:获取textarea里面的内容：
<textarea id="demo"></textarea>
<script>
//方法一
var value=document.getElementById("demo").value;
//方法二 前提要引入jquery
var value=$("#demo").val();
</script>
3.
select类，下拉列表框，默认用于单项选择，用option呈现每一个选项。
属性：multiple:表示可以多选，这时下拉列表框变成了列表框。 size:最大显示的行数
代码展示：
效果：
4.
button类，普通按钮，具有提交功能，可以单独使用，不写在form元素中。如果写在form中，有提交功能.
代码展示：
效果：
按下“提交按钮后”：
iframe框架标签
<iframe>（框架集）元素会创建包含另外一个文档的内联框架，也是镶嵌在一个网页中的另一个网页。相当于网页中又嵌套了一个窗口。用于将多个网页文件组合成一个文件
常用属性：
src：引入的外部html文件
name:框架名
width：宽度（%/px）
height：高度(/%px)
marginheight：(框架离顶部和底端的距离)（%/px）
marginwidth：框架离左右的距离（%/px）
frameborder：是否有边框（1/0,1表示有边框，0表示没有）
scrolling：滚动条（yes/no/auto）
代码展示：
（主页面代码）
banner界面代码：
nav界面代码：
content和content2代码：
实现效果简述：
在页面的上方有一行图片，页面的左侧有链接栏，右侧在点击链接后会显示对应的链接内容。
css介绍
成叠样式表（CSS），有称串样式列表，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体，间距和颜色等的计算机语言。CSS能够对网页元素的排版进行像素级的精确控制，支持几乎所有的字体样式，拥有对网页对象和模型样式编辑的能力。
css的使用
使用CSS可以让结构（HTML）与表现（CSS）分离，方便维护
过去写网站都用table来布局，然后样式都直接加在table上面，这样一来页面显得十分臃肿，然后想要修改一下也十分困难
回来W3C推出了CSS，把结构和样式分离，HTML只负责结构，样式交给CSS来实现，使页面维护更加容易，想要修改某个字体或者样式，直接在CSS文件在修改，不需要html结构
CSS基本语法
css语法有三个部分组成：选择器(selector)，属性(property)，属性值(value)。
selector{
property:value
}
1.selector选择器通常是你需要改变样式的HTML元素。
2.每条声明有一个属性和一个属性值组成。
3.属性是希望设置的样式属性，每个属性有一个属性值
4.属性和属性值被冒号分开。
CSS的四种引入方式
在html样式中有四种CSS引入方式：行间样式，内部样式，外部样式，导入外部样式。
1.
1.行间样式：直接在标签上书写样式
<div style="样式内容">行间样式测试1</div>
2.内部样式：在文件的内部（head部分）书写样式。
<head>
<style>
{
样式内容
}
</style>
</head>
3.外部样式：（1）先创建一个CSS文件（再用link标签引入这个文件）。
引入样式：
<link rel="stylesheet" href="test.css"/>
4.导入外部样式：（1）先创建一个CSS文件；（2）在style标签中用导入import这个样式文件
<head>
<style>
@import "test.css";
</style>
</head>
四类CSS代码展示：
引入的CSS代码：
1）test.css
2)style.css
效果展示：
以上四种CSS引用方式的区别：
- 行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个HTML文件引用
- 在实际项目开发中，最好使用外部样式(link更多)。
外部样式分为link引用和import引用两种方式，这两种方式区别为
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS.
2.link引用CSS时，在页面加载时同时加载；@import需要网页完全载入以后加载。
3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用JavaScript控制DOM去改变样式；而import不支持
CSS选择器
（1~5都在head里面书写）
- *（星号）：匹配HTML中所有元素(注意：的性能差，因为它要匹配所有元素，所有在开发时，不建议使用)
星号选择器格式：
*{
格式设置
}
例子：
*{
color:red;
}
- 标签选择器：用来匹配对应的标签
标签选择器对应格式：
标签名{
格式设置：
}
例子：
span{
color:red;
}
注意：如果一个页面里面同时写了*选择器和标签选择器，那么*选择器的格式会覆盖span的格式
3. 类选择器：用来选择class命名的标签
.class名{
格式设置
}
例子：
.wrapper{
color: green;
}
- ID选择器：用来选择用id命名的标签
#id名{
格式设置
}
例子：
#content{
color: pink;
}
- 派出选择器：根据上下文来选择标签（效果对类和下属的标签都生效）
.class名 标签名{
格式设置
}
例子
.box2 li{
color: rgb(226, 212, 87);
}
- 伪类选择器（后面学）
——————————————分割线————————————————————————————————
*选择器代码展示：
效果展示：
标签选择器：
效果：
类选择器代码：
效果：
id选择器代码：
效果：
派出选择器代码：
效果：
选择器分组
让多个选择器（元素）具有相同的样式，一般用于设置公共样式。
对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
用例：
<style>
标签名,.类名,#id名{
格式设置
}
</style>
代码展示：
效果：
选择器继承
CSS继承是指被包在内部的标签拥有外部标签的样式性质。CSS的一个主要特征就是继承，它依赖于祖先-后代。继承是一种机制，它允许样式不仅可以应用于某些特定的元素，还可以用于它的后代。
子元素可以继承父元素的样式，反之不可以。
（先设置父元素的样式）
父元素名{
样式格式
}
父元素名 子元素名{
样式格式
}
代码展示：
效果展示：
样式优先级
多重样式：如果外部样式，内部样式和行间样式同时应用于同一元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）<（内部样式）<（行间样式）
优先权值：我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
- 1important,加在样式属性值后，权重值为10000.
- 行内样式，如：style="",权重值为1000
- ID选择器，如：#content，权值为100
- 类，伪类，如：.content,:hover 权值为10
- 标签选择器，如：div,p为1.
CSS优先级法则：
- 选择器都有一个权值，权值越大越优先。
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
- 创作者的规则高于浏览者：即网页编写者设置的CSS样式的优先权高于浏览器所设置的样式。
- 继承的CSS样式不如后来指定的CSS样式
- 在同一组属性设置中标有”！important“规则的优先级最大。
权重的计算实例
示例一
<style type-"text/css">
.........
div{
color:red 1important；
}
</style>
<div style="color:blue">这是一个div元素</div>
两个样式同时作用一个div，上面的样式权重值为10000+1；下面的行间样式的权重值为1000，所以文字的最终颜色为red.
示例二
<style type=""text/css>
#content div.main_content h2{
color:red;
}
#content ,main_content h2{
color:blue;
}
</style>
.......
<div id="content">
<div class="main_content">
52
<h2>这是一个h2标题</h2>
</div>
</div>
第一条样式的权重计算：100(#content)+1(div)+10(.mian_content)+1(h2)，结果为112；
第二条样式的权重计算：100(#content)+10(.main_content)+1(h2)，结果为111；
h2标题的最终颜色为red
CSS字体
font-size:
font-size:设置文本大小.
属性值：
1.{number+px}：固定值尺寸像素。
2.{number+%}：其百分比取值是基于父对象中字体的尺寸大小
示例：
p{font-size:20px}
p{font-size:100%}
font-family:
font-family:设置文本字体
属性值：name：字体名称，按优先顺序排列，以逗号隔开，如果字体名称包含空格，则应使用双引号括起来
示例
p{font-family:Courier,"Coutier New",monospace;}
//示例中的几种字体是备用关系，按顺序被选择使用，如果第一个浏览器无法应用，就用第二个字体，并不是同时使用好几个字体的意思
font-style:
font-style:设置文本字体的样式。
属性值：
normal:默认值,正常的字体
italic:斜体。对应没有斜体变量的特殊字体，将应用oblique
oblique:倾斜的字体
示例
p{font-style:normal;}
p{font-style:italic}
P{font-style:oblicque}
font-weight:
font-weight:设置文本字体的粗细。
属性值：
normal:默认值，正常的字体。
bold:粗体
bolder:比bold粗
normal:比normal细
{100-900}:定义由粗到细的字符。400等同于normal，而700等同于bold
示例
p{font-weight:normal;}
p{font-weight:bold;}
P{font-weight:600;}
line-height:
line-height:设置文本字体的行高。即字体最底端于字体内部之间的距离
属性值：
normal:默认值，默认行高
{number+px}:指定行高为长度像素
{number}:指定行高为字体大小的倍数
示例：
p{line-height:noemal;}
p{line-heighr:24px;}
p{line-height:1.5;}
color:
color:设置文本字体的颜色
属性值：
name:颜色名称指定color
rgb:指定颜色为RGB值
{颜色16进制}：指定颜色为16进制
示例
p{color:red;}
p{color:rgb{100,14,200};}
p{color:#345678}
text-decoration:
text-decoration:设置文本字体的修饰
属性值：
normal:默认值，无修饰
underline:下划线
line-through:贯通线
over-line：上划线
示例
p{text-decoration:underline;}
p{text-decoration:line-through}
p{tsxt-decoration:overline;}
text-align:
text-align:设置文字的对齐方式
属性值：
left:默认值。左对齐
center:居中对齐
right:右对齐
p{text-align:left;}
p{text-align:center;}
p{text-align:right;}
text-transform
text-transform:设置文本字体的大小写。
属性值：
none:默认值（无转换发生）
capitalize:将每一个单词的第一个字母转换为大写
uppercase:转换为大写
lowercase:转化为小写
示例：
p{text-transform:capitalize;}
p{text-transform:uppercase;}
p{text-transform:lowercase;}
text-indent
text-indent:设置文本字体的首行缩进。
属性值：
{number+px}:首行缩进number像素。
{number+em}:首行缩进number字符。
示例：
p{text-indent:24px}
p{text-indent:2em}
font复合属性
font:font-style font-variant font-weight font-size/line-height font-family;
注意
（1）属性值值的位置顺序，按位置写
（2）除了font-size和font-family之外，其他任何一个属性值都可以省略
（3）font-variant:normal/samll-caps(让大写字母小一些)
示例：
strong{
font:italic small-caps bolder 18px/1.5 宋体；
}
CSS背景
background-color
background-color:设置对象的背景颜色。
属性值：
transparent:默认值（背景色透明）
{color}:指定颜色
示例：
div{
background-color:red;
}
div{
background-color:#666666;
}
background-image
background-image:设置对象的背景图像
属性值：
none:默认值（无背景图）
url(url):使用绝对或相对地址指定背景图像。
示例
div{background-image:node}
div{background-image:url(../images/pic.png)}
代码展示：
效果展示：
background-repeat
background-repeat:设置对象的背景图像铺排方式
属性值：
repeat:默认值（背景图像在纵向和横向平铺）（效果如上图）
no-repeat:背景图像不平铺
示例
div{
background-image:url(图片地址)；
background-repeat:no-repeat;
}
代码展示：
效果：
repeat-x:背景图像仅在横向平铺
示例：
div{
background-image:url(图片地址);
background-repeat:repeat-x;
}
代码展示：
效果：
reapeat-y背景图像仅在纵向平铺
示例
div{
background-imge:url(图片地址)；
background-repeat:repeat-y;
}
代码截图：
效果展示：
background-position
background-position：设置对象的背景图像位置。
属性值：
{x-number|top|center|bottom} {y-number|left|center|right}}，控制背景图片在元素的位置：x轴,y轴，其铺排方式为no-repeat
示例
div{
background-imag:url(图片地址);
background-repeat:no-repeat;
background-position:50px 50px;
background-position:top;/*如果自带一个参数，默认y向为50%*/
}
代码展示：
效果展示：
background-attachment
background-attachment：设置对象的背景图像滚动位置。
属性值：
scroll:默认值。背景图像会随着页面的其余部分的滚动而移动。
fixed:当页面的其他部分滚动时，背景图片不会移动。
background
background简写属性：在一个声明中设置所有的背景属性。
语法：
background:color image repeat attaxhment position
示例
body{background:#fff url(背景图片地址) no-repeat fixed center center}
代码展示：
效果展示：
CSS伪类选择器
伪类：专门用来表示元素的一种特殊状态。
常用的伪类
a标签 超链接伪类
在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，鼠标悬停状态。
选择器
a:visited 已被访问状态
a:link 未被访问状态
a:hover 鼠标悬停状态
a:active 用户激活
示例
a:link{color: green;}/*未被访问的链接为绿色*/
a:visited{color:blue;}/*已访问的链接为蓝色*/
a:hover{ color:red;}/*当鼠标移动到链接上，则改变为红色*/
a:active{color:yellow;}/*当鼠标选定该元素，则改变为黄色*/
代码展示：
效果展示：
1.未点击的效果
2.点击后的效果
表单 :focus
:focus 表单获得焦点时触发样式。
示例：input:focus{background-color:yellow;}
代码展示：
效果展示：
:first-child/:last-child/:nth-child（nubmer）
:first-child/last-child/:nth-child伪类来选择元素的第一个子元素/最后一个元素/第number个元素
示例
p:first-child{font-weight:bold;}
p:last-child{color:red;}
p:nth-child(3){color:green}
代码展示：
效果展示：
CSS属性和关系选择器
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
示例
<style>
标签名.类名[属性名]{
格式设置;
}
</style>
代码展示：
效果：
[属性名=值]：属性名的值包含指定值的元素（常用）
示例
标签名[属性名=值]{
格式设置;
}
input[name=usr]{
background-color:red;
}
代码展示：
效果：
[属性值~=值]：属性名的值包含指定值的元素
示例：
标签名[class~=值]{
格式设置;
}
代码展示：
效果：
[属性值^=值]：属性名的值以指定值的开头的元素
示例
标签名[class^=值]{
格式设置;
}
代码展示：
效果：
[属性名$=值]：属性名的值以指定值结尾的元素。
示例
标签名[class$=值]{
格式设置;
}
代码展示：
效果
关系选择器
关系选择器可以根据元素与元素之间所处关系来选择元素
后代选择器
后代选择器可以选择作为某后代的元素。
空格：后代选择器
示例：
<style>
h1 strong {
color:red;
}
</style>
<h1><strong>strong标签</strong></h1>
代码展示：
关系说明：第一个strong元素是h1元素的儿子,span元素是第一个strong的儿子，第二strong是h1和第一个strong的后代。
效果：
子元素选择器
子元素选择器只能作为某些元素子元素的元素。（儿子元素和后代不同，儿子只有一个，后代有多个）
> :只选择儿子元素。
<style>
h1>strong{
color:red;
}
</styel>
<h1><strong>显示红色字</strong><strong>显示红色字</strong></h1>
代码展示：
效果：
相邻兄弟选择器
相邻兄弟选择器：可以选择紧邻在另一个元素后的元素，且二者有相同父元素。
+：兄弟选择器
示例：
商机类 下级类+......+下级类{
格式设置;
}
代码展示：
效果展示：
CSS伪元素
伪元素：用于向某些选择器设置特殊效果。
CSS伪元素与伪类区别：
CSS引入伪类和伪元素是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。
伪类用于已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。它只在处于dom树无法描述的状态才能为元素添加样式，所有将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并未其添加样式，比如我们可以通过：before来在一个元素前增加一些文本。并为这些文本添加样式。虽然用户可以看到这些文本，但这些文本实际上不在文档树中。
（2）伪元素&伪类的特点
伪元素和伪类都不会出现在源文档或者文档树中.。
伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面。
伪元素和伪类都是大小写不敏感的。
有些伪类是互斥的，而其他的可以同时用在一个元素上。（在规则冲突下，常规层叠顺序决定结果）。
（3）:before/:after/:first-letter/:first-line ：前面可以是一个冒号也可以是双冒号。
::selextion/::placeholder/::backrop：前面只能是双冒号
first-letter
:first-letter向文本的第一个字母添加特殊样式。
示例：
<style>
p:first-letter{color:fed;font-size:30px;}
</style>
代码展示：
效果：
first-line
：first-line向文本的首行添加特殊样式.
示例：
<style>
p:first-line{
color:green;
font-size:bold;
}
</style>
<p>hello first line
hello world</p>
代码设置：
效果：
CSS选择器练习
代码展示：
HTML部分：
CSS部分：
网页效果：
CSS浮动布局&盒模型
提要：
- CSS浮动介绍
- CSS清除浮动
- CSS盒子模型
- CSStable样式
- CSS列表水平居中
CSS浮动介绍
什么是浮动？
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本问绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，这要指定一个明确的宽度；否则，它们会尽可能地窄。
也就是说：浮动就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。
浮动原理：就是让元素脱离文档流，不占用标准流
| 值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值，元素不浮动，并会显示在其在文本出现地位置 |
| inherit | 规定应该从父元素继承float属性地值 |
示例：
<body>
<div class="left"></div>
<div class="right"></div>
</body>
/*css*/
div{
width:100px;
height:100px;
backgroud:red;
}
.left{
float:left;
}
.right{
float:right;
}
代码展示：
效果展示：
清除浮动
浮动后，后面地元素不管是块级还是行级元素，不会显示在下一行
清除浮动目的：让后面的元素自动掉到下一行。
方法：
1） 添加空标签，并设置样式：clear:both;
clear属性值：
clear:left;清除左浮动；
clear:right; 清除右浮动
clear:both;清除左右浮动
clear:none;左右浮动都不清除
注意：clear只对本身起作用。
未清除浮动代码：
未清除浮动效果：
利用clear清除浮动代码：
清除浮动效果：
2）overflow属性
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出子元素的方式，可以在浮动元素的父级添加样式overflow：hidden。
注意：在实际项目开发中，我们一般首先这种方式。
overflow:hidden; 超出部分隐藏，也可以用来实现清除浮动。
示例：
<div class="parent" style="overflow:hidden;"></div>
属性值：
visible：默认值，内容不会被修剪，会呈现在元素款之外，不剪切也不添加滚动条
auto：不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动
hidden：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能（常用）
scroll：内容会被修剪，但浏览器会显示滚动条以便其余的内容。
代码展示：
效果：
3）使用:after
为了减少空标签的多余，可采用给父级的伪元素进行样式清除浮动。
示例：
.父级名:after{
display:block;
content:"";
clear:both;
}
代码展示：
效果展示：
案例 浮动布局
代码展示：
效果展示：
CSS盒子模型
CSS盒子模型：规格了元素框处理元素内容（content），内边距（padding），边框（border）和外边距（margin）的方式。
每一个元素都是一个盒子，一个盒子由margin，border，padding和content组成
区别：外边距（margin）和内边距（padding）是以边框（border）为参照。
系统默认外边距为8px.
1)外边距（margin）：元素边框之外的距离
margin-left：左边距
margin-right：右边距
margin-top：上边距
margin-bottom:下边距
margin：可以用来设置任意一个边的边距，可以带1至4个参数。
1个参数（apx）：表示上下左右都有这样一个外边距apx
2个参数（apx bpx）:表示上下外边距为apx,左右外边距为bpx.
3个参数（apx,bpx,cpx）:表示上外边距为apx，下外边距cpx,左右外边距为bpx
4个参数（apx,bpx,cpx,dpx）:表示上为apx,右为bpx,下为cpx,左为dpx.（顺时针，上右下左）
设置了边距值的元素会被自动按照边距大小进行分割。
示例：
内边距（padding）:指元素的文本内容与边框之间的距离。
它的用法与margin完全一样
border(边框):
属性：
border-width:边框线宽度。
border-style:边框线样式。
border-color：边框线颜色。
border：border-width border-style border-color;
注意：border-width border-style border-color这三个参数没有位置之分。
盒子的真实尺寸：
盒子的宽度：width+padding左右+border左右
盒子的高度：height+padding上下+border上下
2）display属性
display属性：设置元素如何显示。
属性值：
inline:默认值，此元素会被显示为行级元素，元素前后没有换行符，行级元素所占据的空间就是它的标签所定义的大小（不能设置width和height）
inline-block：设置元素为行内块级元素，所有的块级元素开始于新的一行，延展到其容器的宽度（可以设置width和height）。（注意和float区别）
none：（不显示元素）设置元素不显示不占空间，元素与其子元素从普通文档流中移除，这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。
block：设置元素为块级元素。（能设置weight和height）
示例：
.hide{display:node;}
.show{display:block;}
inline-block代码展示：
效果：
3）table样式
table一般不用来布局，主要用来格式化数据。
表格（table）：
为了使表格出现边框（基于样式），可以添加如下样式：
属性：
width:宽度
height：高度。
border-collapse：单线边框
border：边框线
td,tr属性：
width：宽度
height：高度
border：边框线
text-align文本左右对齐（left（默认）/center/right）
vertical-align:文本垂直对齐（top/middle(默认)/bottom）
代码展示：
效果展示：
列表样式
不是描述性的文本的任何内容都可以认为是列表。不然：菜单，商品列表等。
1）列表类型
无序（ul）,有序（ol）和自定义列表（dl）
ul和ol的列表项都是用li表示的，而dl是由一个dt和一个或多个dd组成的。
dl一般用来设定一个定义，比如名词解释等。dt:标题，dd：描述，用来对dt的内容进行解释并说明的。
2）样式（用来修改标识类型）
list-style-image:用图像表示标识
list-style-position:标识的位置（inside/outside(默认值)）
list-style-type:标识类型
简写：
list-style:list-style-image list-style-position list-style-type;
list-style的值可以按任意顺序列出，而且可以任意省略，主要提供一个值，其他的都自动省略。
代码展示：
效果：
list-style-type的属性值：
a)无序
disc(空心圆)/circle（实心圆）/square（实心矩阵）
b)有序
decimal(数字序号)/decimal-leading-zero（数字序号前带0）/lower-roman(小写罗马字符)/upper-roman(大写罗马字符)/lower-alpha(小写字母)/upper-alpha（大写字母）lower-greek(小写希腊字母)/lower-latin(小写拉丁字母)
c)有序和无序通用的属性：
none
dl代码展示：
效果展示：
案例——轮播图布局
主要作用：主要用于产品或公司相关宣传。
例子：
组成：
1）轮播的组图（至少两张以上，不能太多）
2）控制器
3）计数器
代码展示：
HTML部分：
CSS部分：
CSS浮动练习
HTML部分代码：
CSS部分
效果展示：
CSS定位布局
1）定位position
设定元素在文档中的位置。会将标签转换为块级标签。
定位分类（属性值）
1）static：静态定位
默认值，没有定位，不能设置偏移值（left/top/right/bottom）,占用标准流（文档流）
2）relative:相对定位
占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置，它相对于自身所占的位置做偏移
3）absolute:绝对定位
脱离文档流，相对于body做偏离。
绝对定位一般于相关定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素是absolute的父级。
在项目开发中，一般用relative+absolute结合使用。
相对于body的偏移
效果：
相对于wrapper的偏移
效果：
4）fixed：固定定位
脱离文档流，相对于浏览器窗口左上角（0，0）做偏离。它与relative设定的对象没有关系。也就是说，它和父级的定位没有任何关系。一般在开发中用于固定导航栏
5）z-index
当多个元素添加绝对定位，元素会层叠在一起，使用z-index可以设置元素显示的层次。
注意：z-index仅能在定位元素上奏效，在static和relative元素上将无效（例如position：absolute）
元素可以拥有负的z-index属性值。
说明：一般元素为普通流，普通流的z-index默认为0，脱离了普通流，在普通流之上（定位，浮动），z-index为0~1之间，如果将z-index设置为大于或者等于1，元素将会定位或者浮动流之上。
示例：
代码
效果：
2）网站整体布局
网站开发策略：先整体再局部，至顶向下，逐步细化。
1）双飞翼布局
由三列组成，两端固定，中间自适应。想要的效果：左列和右列恒定，中间列的宽度根据浏览器窗口的大小自适应。
优点：兼容性好，兼容所有的主流浏览器，包括IE6
因为在DOM中center-panel在三列结构的最前面，因此可以实现主要内容的优先加载
示例
（1）在外层用一个类名为container的div包裹，而内层分为三列
<div calss="container">
<div class="column" id="center-panel"></div>
<div class="colum" id="left-panel"></div>
<div class="colum" id="right=panel"></div>
</div>
（2）让列开始浮动
.container{
width:100%
}
.column{
float:left;
height:200px;
}
#center-pannel{
/*在这种情况下，center-pane已经占据了整个container父元素的全部宽度，并且这个宽度是自适应的*/
width:100%;
background-color:#f00;
}
（3）如何实现左右列固定宽度，在实现左右列固定宽度时，这里采用margin赋予负值。
/*假设，固定宽度的左列宽度为300px，当margin-left：-100%时，这个左列会脱离自己所在行，向上一行浮动*/
#left-panel{
width:300px;
margin-left:100%;
background-color:#0f0;
}
(4)此时我们实现了左列固定宽度，中间列自适应，我们根据同样原理，定义右列的浮动偏移（margin负值），这样我们就实现了我们需要的双飞翼布局。
#right-panel{
width:300px;
margin-left:-300px
background-color:#00f;
}
(5)最后要在最外层样式中记得清除浮动
.container{
width:100%
overflow:hidden;/*记得在前面的.container样式中加上这句*/
}
代码知识：
效果展示：
2)圣杯布局
由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。
布局时与双飞翼比增加了定位和偏移设置。
代码展示：
style设置：
HTML设置：
效果展示：
3）侧边栏固定布局
1.两栏布局
-
a)左侧固定，右侧自定义
代码展示：
效果：
-
b)右侧固定，左侧自适应
-
代码展示：
效果展示：
-
c)左右都固定
代码展示：
效果展示：（无缩放功能）
2.三栏布局（哪部分自适应就应该加一个div去包裹）
（a）三列中间自适应布局
代码展示：
效果展示：
（b）三列左侧自适应布局
代码展示：
效果展示：
（c）三列右侧自适应布局
代码展示：
效果展示：
3)FC
先了解FC，FC的含义就是Formatting Context。它是CSS2.1规范的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC和IFC都是常见的FC。分别叫做Block Formatting Context和Inline Formatting Context。
4）BFC规范
BFC:块级格式上下文
a)形成BFC的条件
i）浮动元素（float除none以外的值）
ii)定位元素（position（absolute/fixed））
iii)display(值为inline-block/table-cell/table-caption)
iv）overflow(值为hidden/auto/scroll)
b)BFC特性（规则）
i）内部的盒子会在垂直方向上一个接一个放置
ii）垂直方向上的距离会叠加，值由最大margin值决定，属于同一个BFC的两个相邻的Box的上下margin会发生重叠。。（如果不要叠加，就需要将该盒子变成一个独立的盒子）
iii）BFC的区域不会与float元素区域重叠
iv）计算BFC的高度时，浮动元素也参与计算
v)BFC就是页面上一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然。
C）BFC的作用
- 解决margin重叠的问题（通过添加独立BFC）
- 解决浮动高度塌陷的问题（通过在父级添加overflow：hidden）
- 解决侵占浮动元素的问题（通过添加overflow：hidden,清除浮动）
特性一：
特性二
特性三
特性四：
5) IFC
IFC（Inline Formatting Context）意为“行级格式化上下文”，IFC中，盒子依次水平放置，从包含块的顶部开始。
a)形成IFC的条件
- font-size
- line-height
- height
- vertical-aligin
b)IFC特性（规则）
- IFC的元素会在一行中从左到右排列
- 在一行上所有的元素会在该区域形成一个行框
- 行宽的高度为包含框的高度，高度为行框中最高元素的高度
- 浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
- 行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框
- 行框的元素内可以运用text-align和vertical-align
特性一：
特性二和三：
特性四：
特性六：
主要运用于IFC内布局的CSS
- font-size
常用的属性，用于指定文本类型节点的大小，IFC内的很多属性的值是基于这个的 - line-height&height
line-height:基线到基线的距离。 - vertical-aligin
vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
容器的高度height=line-height+vertical-align,如果容器的高度被指定了，那么高度则不变，而超出的部分不影响布局，如果设置overflow:hidden,超出的部分则不可见。
4279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
