web前端笔记整理，从入门到上天，周周更新

由于大前端知识点太多，所以一一做了分类整理，详情可见本人博客

http://www.cnblogs.com/luxiaoyao/

一、HTML

1.注释

格式：<!-- 注释内容 -->

作用：

1.解释说明代码的含义（代码量大，后期维护，便于新人交接）

2.调试代码

2.head内标签

//meta:定义关于HTML文档的元信息

<meta name="author" content="作者">

<meta name="description" content="描述">

<meta name="keywords" content="关键字">

<meta http-equiv="refresh" content="3"> 3s之后刷新

<meta http-equiv="refresh" content="3;https://www.baidu.com"> 3s之后刷新并跳转到百度

​

//title：定义文档的标题

<title>网站的标题</title>

​

//link:定义文档与外部资源的关系

//显示在浏览器选项卡标题前的小图标

<link href="图标所在的位置" rel="shortcut icon" type="image/x-icon">

大部分浏览器都支持icon 只有个别浏览器不支持，所以需要加上shortcut

type是浏览器的老式写法，由于最新的定义rel类型，type就可有可无了

3.body内标签

3.1基础标签

//定义HTML标题 h1-h6(header)

<h1>人生不止眼前的苟且，还有诗和远方</h1>

<h2>人生不止眼前的苟且，还有诗和远方</h2>

<h3>人生不止眼前的苟且，还有诗和远方</h3>

<h4>人生不止眼前的苟且，还有诗和远方</h4>

<h5>人生不止眼前的苟且，还有诗和远方</h5>

<h6>人生不止眼前的苟且，还有诗和远方</h6>

注意：

1.h1在页面中权重最高，一个页面只出现一次

2.h2-h4根据实际情况使用，h3使用频率最高

3.h5-h6文字较小，使用频率较低

//定义段落p(paragraph)

<p></p>

注意：

1.定义文章的自然段落

2.一个短句（价格，描述）

//定义简单的换行 br(break)

<br>

//定义水平线 hr(horizontal)

<hr>

3.2列表

无序列表(unordered list) ul/li

1.页面中使用频率很高的标签

2.使用的时候都会去除默认的小圆点

<ul>

<li></li>

</ul>

有序列表(ordered list) ol/li

页面使用频率低

<ol>

<li></li>

</ol>

自定义列表(define list) dl/dt/dd

dt:列表选项的标题 define title

dd:列表针对标题的描述 define description

主要用于360商城底部信息展示以及京东商城左侧导航栏目

<dl>

<dt>红楼梦</dt>

<dd>作者：曹雪芹 高鹗</dd>

<dd>一个男人和一群女人的故事</dd>

<dt>西游记</dt>

<dd>作者：吴承恩</dd>

<dd>一个男人和几个动物的故事</dd>

<dt>三国演义</dt>

<dt>水浒传</dt>

</dl>

列表样式

list-style-type:

circle空心圆

square 方块

disc 实心圆 默认

decimal 阿拉伯数字

list-style-image:url() 可以为列表设置图片类型

list-style-position 列表标签的位置

inside	outside 默认样式

3.3格式标签

// 定义文档作者或拥有者的联系信息：address

// 定义带有标号的文本：mark

// 定义小号文本：small

// 定义一个日期/时间：time

datetime="":规定日期 / 时间。否则，由元素的内容给定日期 / 时间

// 定义粗体文本：b

// 定义斜体文本：i

// 定义强调斜体文本：em

// 定义语气更为强烈的强调文本：strong

// 定义上标：sup

// 定义下标：sub

// 定义被删除文本：del

// 定义被插入文本：ins

// 定义缩写：abbr

// 定义文本的方向：bdo

// 定义长引用：blockquote

// 定义引用：q

4.超链接a

<a href="https://www.baidu.com">百度</a>

href 规定链接的目标URL

target 规定在何处打开目标URL

_self   自身窗口打开

_blank   新窗口的方式打开

_parent   在父级窗口打开

_top      在顶层窗口打开

download：指定下载链接

title 定义鼠标悬浮超链接时的提示性文字

5.相对路径和绝对路径

相对路径：

./当前

目录

a伪类.html 的统计目录有复习文件夹 鹿瑶11-16  11-17文件夹

../上一级目录  绿色框的上一级目录是圆里的

绝对路径

https://www.baidu.com/logo.png（绝对路径）

6.图像

定义图像：img

<img src="" alt="">

必须的属性：

src:显示图像的URL 图片地址

alt:图像的替代文本

当图片加载失败的时候，显示的内容

功能：

1.提示用户加载的图片是什么内容

2.搜索引擎来爬去你的网站的时候，看懂文字，看不懂图片，通过alt识别图片是关于什么内容

可选的属性：

width:定义图像的宽度

height:定义图像的高度

html标签中的宽高属性不需要添加单位

usemap:将图像定义为客户端图像映射

总结：

1.图片必须添加的属性：alt和src

2.只设置宽度或者高度，图片等比例缩放

同时设置宽度和高度，图片可能会被拉伸

定义图像映射: map/area

//图片的usemap属性和map的id/name属性保持一致

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

// 避免浏览器表现不一致，name和id属性保持一致

<map name="planetmap" id="planetmap">  大部分浏览器支持name各别浏览器不支持，只支持id,建议都写上

// rect:矩形     coords:矩形的点(左上角顶点横坐标，纵坐标，右下角横坐标，纵坐标)    href：链接地址    alt：图片描述

<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">

// circle:圆形     coords:(圆心横坐标，纵坐标，半径)    href：链接地址    alt：图片描述

<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">

</map>

shape:形状  rect矩形 circle圆形

coords：坐标

通过脚本绘制图形：canvas（后期HTML5新特性讲解）

效果

默认会出现一个框，如果需要取消 使用CSS样式进行取消

area{
    outline: none;
}

7.figure

figure:认为标签的内容是一个整体

figcaption:专门针对图片等内容的标题

定义图像组合：figure/figcaption

figure：规定独立的流内容（图像，图表，照片，代码）

figcaption：为figure元素定义标题

<figure>

<figcaption>专门针对图片等内容的标题</figcaption>

<img src=”./images/1.jgp” alt=”当图片加载失败时显示的文字”>

</figure>

即使有文字 但是figure也会缩进一块显示

8.音频和视频

8.1音频

<audio src="assets/audios/five.mp3" autoplay controls muted loop preload="auto">您的浏览器不支持audio 请升级浏览器</audio>

src:音频的地址

controls 显示控制栏

autoplay 自动播放

loop 循环播放

muted 静音

preload 确认音频加载方式

note 当页面加载完成的时候，不加载音频

meta 当页面加载完成的时候，只加载音频的元数据（音频的总时间，不加载音频的核心内容）

auto 当页面加载完成的时候，加载音频

IE8以下包括IE8 不识别audio 则显示标签之间的内容

<audio controls>
    <source src="assets/audios/horse.mp3" type="audio/mpeg">
    <source src="assets/audios/horse.ogg" type="audio/ogg">
</audio>

浏览器能识别音频，但是不同的浏览器对于音频的识别不太一致，浏览器看见source标签的时候，如果识别第一个source的资源，则使用该标签即可，如果不识别第一个资源，则看第二个资源是否能够好使，好使则使用，如果还是不识别，则提示对应信息

注意：source不是播放列表，不是一曲一曲的播放，而是互斥关系

source type：文件的类型（MIME类型）

mp3:audio/mpeg

ogg:audio/ogg

jpg:image/jpeg

png:image/png

gif:image/gif

html:text/html

css:text/css

小图标：image/x-icon

8.2视频

<video src="assets/videos/1.mp4" controls  loop muted preload="meta" poster="images/fruit.jpeg">请升级</video>

video视频标签

src 视频地址

controls 显示控制栏

autoplay 自动播放

muted 静音

loop 循环播放

preload 确认视频加载的方式

auto:页面加载完成，直接加载视频

meta:页面加载完成，只加载视频的元信息

none:页面加载完成，不加载视频（跟autoplay是互斥）

width:宽度

height：高度

poster:视频的海报

poster="海报的地址"

浏览器从上到下查看，找到支持的视频就停止

<video controls>

<source src="./assets/videos/movie.ogg" type="video/ogg">

<source src="./assets/videos/movie.mp4" type="video/mp4">

不支持视频标签，赶紧升级吧

</video>

9.常用的图片格式：

1M = 1024kb

bmp:5m = 5000kb

jpg:149kb = 149kb

png:1M = 1000kb

1.BMP格式－Bitmap（位图）的简写

优点：包含的图像信息比较丰富，几乎不压缩缺点：占用磁盘空间过大功能：在单机上比较流行

2.GIF格式－Graphics Interchange Format（图形交换格式）主要是动态图

优点：压缩比高，磁盘空间占用较少（文件小，下载速度快）缺点：不能存储超过256色的图像

3.JPEG(jpg)格式－Joint Photographic Experts Group（联合照片专家组）网站中图片的主流

优点：压缩技术先进，用有损压缩方式去除冗余的图像彩色数据，获得极高的压缩率的同时展现十分丰富生动的图像（总结：用最少的磁盘空间得到较好的图像质量）调节图像质量的功能，允许你使用不同的压缩比例

4.PNG格式－Portable network Graphics（新兴的网络图像格式）- 透明图，背景图，小图片

优点：

1.不失真的情况下，存贮形式丰富，兼有GIF和JPG的色彩模式

2.无损压缩到极限以减少文件的大小，减少网络传输，图像品质得到保证

3.显示图片速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像

4.PNG同样支持透明图象的制作

缺点：

1.不支持动画应用

5.WebP:支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式VP8（一统江湖）

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一

10.表格table

<table></table>

tr：行标签

td: 行中的每个单元格标签

th: 行中的每个单元格标签（居中加粗）

caption：表格的标题标签

总结：

1. table和tr之间，tr和td/th之间只能是表格的标签，不能是其他标签

2. td/th内可以放置其他标签

3. 不能在tr和th之间写其他标签

定义表格中的表头内容thead

<thead></thead>

定义表格中的主体内容 tbody

<tbody></tbody>

定义表格中的脚注内容 tfoot

<tfoot></tfoot>

注意：

1. table的子级：thead,tbody,tfoot,caption,tr
2. tr的子级:td,th
3. td/th的内容随便写
4. 推荐将thead,tbody,tfoot写入到table中，表格的结构会更加明确
5. 如果不加thead,tbody,tfoot，浏览器默认使用tbody将所有的tr标签包裹起来。

合并单元格

合并一行中的6个单元格，第一个单元格使用colspan=”6”,然后去除多余的单元格。

<tr>
    <th colspan="6">个人简历</th>
</tr>

table-layout设置单元格宽度计算方法

fixed 所有单元格平分table的宽度

auto 以内容大小为参照（默认样式）

border-collapse 设置边框是否合并

separate 分离 默认样式

collapse  单元格的边框合并

separate 分离 默认样式	collapse  单元格的边框合并

border-spacing 单元格之间间距

4px

caption-side表格标题的位置，默认在上

top上

bottom 下

empty-cells:hidden 空单元格没有内容就隐藏，但是也必须在border-collapse:separate的基础上才生效

11.表单 form

定义一个HTML表单，用于用户输入

定义单行输入控件（元素）input

<input type="text" name="" value="">

type设置当前单行文本域的类型

text 普通文本（用户名，详细地址）

password 密码（设置密码）

radio 单选按钮

checkbox 多选按钮

让单选和多选默认选中，则需要添加checked属性

submit 提交按钮

reset 重置按钮

hidden 隐藏域（不能被用户看到修改，但是后端必须使用的内容）

file 文件域(点击之后选择文件)

accept=”” 设置接受文件的类型

image:上传文件的按钮

art=”设置图片文本”

email 邮箱

number 数字

URL URL地址

tel 电话

range 进度条

color 颜色

date 日期

time 时间

month 月

week 周

datetime-local 本地日期和时间

name 表单元素的名字（主要是跟后台相关，但是我们在开发过程中需要加上）

value 表单的默认值

下拉框select/option

select:

name属性

multiple:设置为多选下拉框

option

value属性

让下拉框中某一个默认选中，用selected属性

多行文本框textarea

<textarea name="txt" cols="100" rows="20">默认文字写到这</textarea>

表单form内的标签属性

maxlength 设置内容输入的最大长度

readonly 只读，可以向服务器提交数据

disabled 只读，不可以向服务器提交数据 废弃

checked 默认选中

selected 默认select中选中

required 设置内容为必填项

placeholder=””; 设置表单默认提示的内容，只要有输入内容，该提示文字立即消失

autofocus 自动聚焦

autocomplete=”on|off” 设置是否关闭自动提示，on为开启提示，off关闭提示

注意：如果需要开启自动提示，必须写name=””

pattern 用户提交的时候，通过正则验证用户提交内容

pattern="[a-z]{1,6}"

这个就是允许输入小写字母a~z  字符长度在1-6个之间，不能少于一个，不能多于6个

formaction 覆盖表单的action属性

formmethod 覆盖表单的method属性

formnovalidate 表单提交时不用验证

formtarget 表单提交时打开的方式_self _blank _parent _top

按钮

<input type="button" value="按钮">  //不具备提交功能
<button type="button">按钮</button>   //不具备提交功能
//以下三种具备提交功能
<input type="submit" value="提交">  
<button>按钮</button>
<button type="submit">按钮</button>

正常单击单选按钮才可以，为了增加用户体验，点击文字便可进行单选操作

<input type="radio" name="sex" value="保密" checked id="secret"><label for="secret">保密</label>    //第一种方法，id 和for 必须保持一致

<label><input type="radio" name="sex" value="女">女</label>   //直接用label标签给包住即可，更加简单

定义围绕表单元素的边框 fieldset

<fieldset>
    <legend>用户登录</legend>

</fieldset>

fieldset出现如下边框

legend 就是定义fieldset元素的标题

12.get和post请求的区别：

action：将用户名和密码提交给服务器，服务器必须告诉我一个地址

method：get和post
    get请求特点:
        1.表单中的所有的只都会展示在URL地址中：localhost/8.html?username=wangqiang&password=123456
        get方式暴露了用户名和密码：不太安全
        2. 将表单中所有的值全部写入到URL地址中，URL地址栏有限，不能写太多的内容（1024k）
            get一定不能传递文件
    post请求特点
        1.表单中的只不会展示在URL地址中，但是会在请求中一定有，只不过一般用户看不到
        post相对安全
        2.post可以传递文件，实际上我们的服务器会限制你的文件大小
            图片：例如限制在2M
            电影：例如限制在4G

绝大部分都使用post方式

embed:引入flash文件

13. 其他标签

13.1 embed 加载falsh

<embed src="../time.swf">

13.2 iframe:框架标签

<iframe src="../table.html"></iframe>

frameborder="0"	frameborder="1" 不写默认有边框

13.3 pre按内容格式原样显示<pre></pre>

效果：

14.HTML标签公共属性

id:所有的标签都可以设置id属性，没有实际效果

注意：

1. 属性值在页面中唯一，主要以后为JS获取DOM对象提供方便
2. 由字母数字下划线_和中划线-组成，不能以数字开头

class:所有的标签都可以设置class属性，没有实际效果

注意:

1. 由字母数字下划线_和中划线-组成，不能以数字开头
2. 属性值在页面中定义多个，给多个标签设置相同的样式和设置JS效果

title:鼠标移入标签，在标签中显示title的属性值

style:行内设置css样式

contenteditable:直接在行内设置文本修改，但是这个标签不不常使用，没有人愿意让用户在自己网站进行修改

draggable:设置元素是否可以拖动  true 可以拖动   false不可以拖动

hidden：设置元素是否隐藏

tabindex：规定元素的tab键控制次序，表单登录常应用

支持tabindex属性：<a>, <area>, <button>, <input>,  <select> 以及 <textarea>

15.实体字符

<	<
>	>
	空格
©	版权符号：©
®	注册商标：®
™	商标：™
÷

16.锚点

< !--设置锚点-->
    <div id="mao"></div>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="green"></div>
    <div id="top">
        <!--锚点：设置锚点
        跳转锚点<a href="#锚点名"></a>-->
        <a href="#mao">回到顶部</a>
    </div>

17.div span

div：没有实际的含义，是一个占据页面100%宽度的容器

span:没有实际的含义，是一个内容多大，空间就多大的容器

18.HTML5新标签

但是不同浏览器兼容性不同，谷歌兼容最好，火狐，最新版IE都不好

18.1meter 米

<meter value="4" max="10" min="0" high="8" low="2" optimum="5"></meter>
<meter value="1" max="10" min="0" high="5" low="2" optimum="6"></meter>
<meter value="9" max="10" min="0" high="8" low="6" optimum="5"></meter>

谷歌效果：

min:最小值
max:最大值
value：当前值（value须在min和max之间）

optimum:最优值
high:优值的最大值
low:优值的最小值

optimum在high和low之间，说明low与high是优值
    value<low:黄色
    low<value<high:绿色
    value>high:黄色

optimum小于low，说明小于low的值是最优值
    value<low:绿色
    low<value<high:黄色
    value>high:红色

optimum大于high，说明大于high的值是最优值
    value<low:红色
    low<value<high:黄色
    value>high:绿色

18.2progress进度条

<progress max="100" min="0" value="66"></progress>

18.3datalist/option标签使用

<input type="text" list="dst">
<datalist id="dst">
    <option value="好吃的">草莓</option>
    <option value="好看的">衣服</option>
    <option value="好玩的">子健</option>
</datalist>

18.4details/summary标签

<details>
    <summary>四大名著</summary>
    <p>红楼梦</p>
    <p>西游记</p>
    <p>三国演义</p>
    <p>水浒传</p>
</details>

18.5dialog标签：

<dialog>
    <form action="">
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
</dialog>

但是需要配合js使用

<script>
    var btn= document.getElementsByTagName("button")[0];
    console.log(btn);
    var dialog= document.getElementsByTagName("dialog")[0];
    btn.onclick = function () {
//        只有谷歌浏览器支持show 其他浏览器不支持
        dialog.show();
    }
</script>

二、CSS

user agent stylesheet  浏览器默认样式

1.CSS样式

1. 内嵌式：将css代码嵌入到HTML标签中

<h3 style="color:red">hello world</h3>

1. 内联式：通过style标签将css代码引入

<style>
    h3 {
        background: blue;
    }
</style>

1. 外联式：通过link表面将css引入，rel让浏览器识别该文件是一个css文件，href是css地址

<link rel="stylesheet" href="style.css">

2.CSS颜色的三种表示方法

英文单词	HEX十六进制	RGB颜色
red红色 green绿色 blue蓝色 yellow黄色 pink粉色 gray灰色等等	16进制: 0 1 2 3 4 5 6 7 8 9 a b c d e f #000->#fff=>从黑色到白色 #000 黑色 #fff 白色 #f00 红色 #0f0 绿色 #00f 蓝色	rgb颜色：(red,green,blue) - 取值范围0-255 rgb(255,0,0)红色 rgb(0,255,0)绿色 rgb(0,0,255)蓝色 rgb(0,0,0)黑色 rgb(255,255,255)白色

3. 元素选择器

3.1 ID选择器 #id

3.2 类选择器 .class

3.3 标签选择器 h1-h6 div p ...

3.4 组合选择器 逗号 ,

提供多个选择器进行匹配，样式同时对多个选择器生效

4. 关系选择器

4.1后代选择器 空格

div p  在div的后代中找p标签

4.2子代选择器 >

div>p div的子级中找p

4.3 相邻选择器 +

.test+p     查找.test紧挨的第一个p  紧挨着的弟弟p元素

4.4 兄弟选择器

.test~p      查找.test紧挨的所有同辈p标签 挨着所有弟弟p元素

5. 伪类选择器

链接伪类选择符

伪类   a:link      设置超链接未点击之前的样式

a:visited   设置访问过的样式

a:hover   设置鼠标悬浮移入链接的样式

a:active    设置鼠标按下不松手的样式（激活）

注意：顺序应该如上。CSS属性遵循就近原则，同名属性的值覆盖，不同名属性进行继承。

扩展：:hover和:active 可以针对所有的标签做鼠标移入和鼠标按下的样式设置

6. 伪对象选择器

::before 设置在对象前（根据对象树的逻辑结构）发生的内容

::after 设置在对象后（依据对象树的逻辑结构）发生的内容

注意：::before和::after必须和content:”” 一起使用

::before和::after设置的对象无法选中

伪元素默认内联元素，当为了清除浮动而使用时，需要转为块状元素

::first-letter:设置对象内的第一个字符的样，不区分中英文

::first-line:设置对象内的第一行的样式

::placeholder:设置对象文字占位符的样式

::selection:设置对象被选择时的样式

7. 尺寸

width:宽度

height:高度

单位：

1. px固定值大小
2. 百分比(以父级容器大小设置，宽度继承，高度不继承)

7.1 max-width    max-height

max-width:最大宽度，宽度最大不能超过这个值

max-height:最大高度，高度最大不能超过这个值

红色框表示窗体body
当文字大于最大的高度的时候 文字>max-height 当文字大于最大宽度的时候， 文字>max-width	当文字小于最大高度的时候 文字<max-height 当文字小于最大宽度的时候， 文字<max-width

7.1 min-width    min-height

min-width:最小宽度，宽度最低不能低于这个值

min-height:最小高度，高度最低不能低于这个值

红色框表示窗体body
当文字大于最大的高度的时候 文字>min-height 当文字大于最大宽度的时候， 文字>min-width	当文字小于最小高度的时候 文字<min-height 当文字小于最小宽度的时候， 文字<min-width
当文字大于min-height的时候，高度会被撑开，随着文字的大小，增加高度	宽度会撑满整个窗体，但是当窗体缩小到min-width时，会出现横向滚动条

8. 布局

8.1 display

设置内容的展示形式

display: none 不展示，隐藏（隐藏之后，不占据原位置）

inline 行内元素

1. 不占据一行
2. 不能设置宽高

代表标签：span,a,strong,b,i,em,mark,time

inline-block 行内块元素

1. 不独占一行
2. 可以设置宽高

代表标签：img input textarea button select

block 块元素

1. 独占一行
2. 可以设置宽高

代表标签：div h1~h6 p ul ol dl table

8.2三种隐藏方式及显示方式

隐藏方式：

display:none 不占据位置

visibility:hidden 占据原位置

opacity:0 透明度为0，占据原位置

显示方式：

display:block

visibility:visible

opacity:100

8.3 overflow 内容超出的处理

overflow:visible 默认处理超出显示

hidden 超出部分隐藏

scroll 超出滚动

auto 自动，如果内容超出，显示滚动条；如果内容不超出，不显示滚动条

overflow-x 在横向上对于超出内容的处理

overflow-y 在纵向上对于超出内容的处理

overflow-x:hidden    设置x以后，overflow-y会自动变成 overflow-y:auto的样式;
但是如果设置 overflow-y的话 x不会有影响

9. 字体

font-style:设置字体样式

normal:默认正常

italic:斜体

oblique:人为的斜体

font-variant:设置小型的大写字母

normal:默认正常

small-caps:小型的大写字母

font-weight:设置粗细

bold:粗体

100-900:(600开始是粗体)

lighter:细文字

font-size:字体大小

px

百分比：参照父级容器的字体大小

font-family:设置字体名称

微软雅黑

宋体

...

color:字体颜色

font:复合属性

注意事项：

1. 复合属性必须写字体大小和字体名称（宋体，黑体..）
2. 完整的格式:

font:style variant weight font-size/line-height font-family

1. 字体最小为12px，默认字体大小为16px
2. 字体大小为0，不显示字体，不占据位置

10. 文本

text-align 设置文字水平的对齐方式

left 左对齐

center 居中对齐

right 右对齐

justify 两端对齐

text-indent 设置文字首行缩进

2em 两个汉字

32px 两个汉字的大小 16px*2

line-height 设置文字的行高

固定值

百分比：参照当前文字的大小乘以倍数

倍数：参照当前文字的大小乘以倍数

white-space 文字的显示

nowrap 强制文字在同一行显示

text-transform:转换大小写

lowercase 转换为小写字母

uppercase 转换为大写字母

capitalize 首字母大写

强制打断长单词（针对英文单词）

word-break:break-all;

overflow-wrap:break-word;  CSS3中用这个

word-wrap:break-word; CSS3中这个被改名为overflow-wrap:break-word;

word-spacing:10px  英文单词之间的间距

letter-spacing:10px  字母汉字之间的间距

vertical-align:设置当前元素在行内的位置

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
100% 或者16px	向上移动16px  或者移动向上字体大小的100%
-100% 或者-16px	向下移动16px  或者移动向下字体大小的100%

11. 盒模型

body 中有默认8px的外边距margin

BFC 块状格式化上下文

Block Formatting Context

避免子级设置margin-top和父级一起下落

解决方法：让父级变成一个BFC就可以

1. 让父级浮动
2. 给父级添加overflow:hidden
3. 设置父级为display:inline-block
4. 绝对定位

margin: 如果上下两个盒子都设置了margin，不会相加，以大margin为准

子盒子继承父盒子的宽度，不继承高度，继承的宽度padding不会挤开

padding:10px 20px 30px 40px

上   右  下  左

如果是三个值，或者两个值   也遵循上右下左的原则

padding:10px 20px 30px

上   右  下    没有左   左就和右一样

如果是两个值

padding: 10px 20px

上  右    没有下和左   下和上一样   左和右一样

注意：有时候给父盒子浮动了，也给子盒子a和span一起浮动，目的是清除a链接和span之间空格的距离。除非写到一行上，但是体验不好， 看代码不方面。

12. 通配符*

*{

margin:0;

padding:0;

}

以上形式只是适用于测试阶段，项目开发阶段不可用，因为兼容性问题和性能问题

项目开发阶段 类似以下形式

h1,h2,h3,h4,h5,h6,p,ul{
    margin:0;

padding:0;
}

13. 边框

border:1px solid #ccc;

solid 实线

dotted 点状线

dashed 虚线

double 双实线

14. W3C标准盒子和怪异盒子

content-box:

此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}

border-box:

此值改变css2.1盒模型组成模式，content|border|padding {element width=content}

标准盒子

box-sizing:content-box

当前div在页面中实际占据的空间

宽度=width+padding+border+margin

怪异盒子

当前div在页面中时间占据的空间

宽度=width(宽度=内容区域的宽度+padding+border)+margin

因为padding和border占据了内容区域的一部分空间，导致内容区域变小

15.定位position

定位的盒子是没有高的，需要清除浮动才有高

固定和绝对定位的盒子必须写宽高，定位的盒子宽度不会继承父盒子的宽度,除非子盒子绝对定位，父盒子相对定位，子盒子才会继承父盒子的宽高

position：4种属性值

static  默认值，正常的文档流

relative    相对定位

参考对象：自身应该在的位置

特点：1.相对定位的参考，自身的原位置

2.不脱离正常的文档流，设置了相对定位，依然占据原来的位置，不会对周围的标签产生影响

absolute   绝对定位

参考对象：

1.父级（祖辈）没有定位（相对定位，绝对定位，固定定位），以整个页面左上角为参照

2.父级（祖辈）有定位，以父级左上角为参照点。

特点：脱离正常的文档流，不占据自身的位置，后面的内容就会自动补充

fixed   固定定位

参考对象：当前屏幕的可视区域

特点：脱离文档流，不占据原来的位置

以浏览器左上角为参考

right:左正右负

bottom:上正下负

设置元素定位后，允许使用left/top/bottom/right定位

优先级：left > right     左>右   top > bottom   上>下

16. 定位的层叠顺序z-index

默认：后来者居上

通过z-index设置定位的层级顺序，z-index越大，越靠上

值越大，越靠上

网页中显示内容的层叠顺序

普通标签<浮动<文字内容<绝对定位

17. 浮动和定位的注意

a) 浮动的话，会脱离文档流，但是不会遮盖文字，因为文字在网站中属于核心内容，浮动没有能力把文字覆盖，文字会跑到浮动的盒子后面显示

b) 如果设置了绝对定位，但是不设置top和left,该盒子默认在原位置飘着

如果设置了top和left，以父辈或者页面为参考

c)   如果给盒子设置了固定定位 绝对定位 浮动，不设置宽度的话，宽度不会继承父级的宽度，而是默认文字的宽度，

但是如果设置相对定位不设置宽度的话，宽度会继承父级的100%.

18. border-radius

border-radius:50px 100px   左上角右下角  右上角左下角

50px/100px 每个角的水平半径/每个角的纵向半径

150px 150px 150px 150px/250px 250px 150px 150px;

水平半径/垂直半径

左上角 右上角 左下角 右下角/左上角 右上角 左下角 右下角

19. box-shadow 阴影

box-shadow:横向偏移 纵向偏移 模糊值 外延值 阴影颜色 inset（默认是外阴影，inset是内阴影）

注意事项：

1. 影子不占据页面空间，不会影响其他元素
2. 必须添加横向偏移，纵向偏移。
3. 不写颜色默认是黑色

10px 10px:横向和纵向偏移10px

10px 10px red:红色影子

10px 10px 10px red:红色影子，但是有10px的模糊值

10px 10px 20px 30px blue;蓝色影子，20px的模糊值，30px的外延值

20. 透明度opactiy

标准浏览器写法rgba(0,0,0,.4);

或者opactiy:0.4;

IE8

filter:alpha(opacity=40);   //取值范围0-100  这个属性其他浏览器不识别，所以为了兼容IE8  只能写两种写法。

21. text-文本装饰

text-decoration:文本装饰

underline下划线

overline  上划线

line-through 贯穿线中划线删除线

none 无下划线

text-shadow:文字阴影

10px 10px 10px red;//横向偏移 纵向偏移 模糊值 颜色

注意：文字阴影不像盒子阴影，文字阴影没有外延值

火焰文字

text-shadow: 0 0 5px #fff,

0 0 20px #fefcc9,

10px -10px 30px #feec85,

-20px -20px 40px #ffae34,

20px -40px 50px #ec760c,

-20px -60px 60px #cd4606,

-80px 70px #973716,

10px -90px 80px #451b0e;

霓虹文字

text-shadow: 0 0 5px #fff,

0 0 20px #fefcc9,

10px -10px 30px #feec85,

-20px -20px 40px #ffae34,

20px -40px 50px #ec760c,

-20px -60px 60px #cd4606,

0 -80px 70px #973716,

1 10px -90px 80px #451b0e;

22. 三角形的绘制  border

width: 0;
height: 0;

border-top: 100px solid red;
border-right:100px solid green;
border-bottom:100px solid pink;
border-left:100px solid yellow;

如果想要三角形，只需要给其中一个边的颜色改为transparent即可。

width: 100px;

height: 0;

border-top:100px solid green;

border-left:100px solid transparent;

border-right:100px solid transparent;

23. 背景background

background:颜色 图片地址 是否重复 位置/背景图片大小 随...滚动 背景图片起始位置 剪裁位置

重点：颜色 地址 是否重复 位置/大小

color url repeat center center/size

如果一次给同一个写了多个背景，后来者居下，先写的优先级越高

background-color 背景颜色

background-image:url(地址)  背景图片

background-repeat:是否重复

repeat:重复

no-repeat 不重复

repeat-x 横向重复

repeat-y 纵向重复

round 背景图片可能被缩放，直到充满整个容器

space 背景图片以相同的间距填充，直到充满整个间距，不会缩放。

原图 图片原比例	round  图片被拉伸
代码：	space
width: 800px; height: 600px; background:yellow; background-image:url(../images/01.jpg); background-repeat:space;

background-attachment 设置或检索背景图像是随对象内容滚动还是固定

fixed:背景图像相当于窗体固定

scroll:背景图像相对于元素（标签）固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身，但会随元素的祖先元素和窗体一起滚动。

local:C3属性，背景图像相对于元素内容滚动，当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总要跟着内容。

background-origin 背景的参考位置原点  origin 起源的意思

padding-box 从padding区域（包含padding）开始显示背景图像

border-box 从border区域 （包含 border）开始显示背景图像

content-box 从content内容区域开始显示背景图像

background-clip:对象的背景图向外剪裁的区域

border-box 从border区域（不含border）开始向外剪裁

padding-box 从padding区域（不含区域）开始向外剪裁

content-box 从content区域开始向外剪裁

background-size 背景图像的尺寸

auto 自动

cover 将背景图像等比例到完全覆盖容器，背景图像有可能超出容器

contain 将背景图像等比例缩放到宽度或者高度与容器的宽度或者高度相等，背景图像始终都被包含在容器内。

24. 文本书写模式

direction:rtl;	direction:rtl;  unicode-bidi:bidi-override;	writing-mode:vertical-lr;

25. 精灵图（雪碧图）

目的：节省服务器带宽

缺点：增大开发的难度，通过定位

26. 浮动的影响

子元素不浮动的时候，会将父元素的高度撑起来

如果子元素浮动，父元素不能获取子元素的高度，自身的高度就为0

想让父级元素高度自动撑起来的方法：

1.单独设置一个div，清除浮动

缺点：多设置一个标签，这种方式现在不常使用

1. 如果父级容器是一个BFC容器的话，就能让父级容器获取到元素的高度，从而自己有高度

a) overflow：hidden  缺点：超出部分会隐藏

b) display:inline-block

c) float:left/right

d) position:absolute/fixed 缺点：为了获取子级div的高度，让自身设置了浮动和定位

1. 使用::after进行清除浮动，这种方法比较常见

.demo::after {
    content: '';
    display: block;
    clear: both;
}

27. 自定义字体font-face

自定义字体：正常情况下，需要使用用户电脑都有的字体，但是非得用特殊字体，用户电脑又没有，自己通过@font-face这种字体，需要通过font-family引用这种字体。

注意：font-face中引入的font-family必须要和给定元素的font-family 保持一致

@font-face {
    font-family: "简娃娃";
    src: url(../fonts/jianwawa.ttf);
}
div{
    font-family:"简娃娃";
}

28. 过渡transition

transition复合属性：过渡属性 过渡总时间 过渡动画类型 过渡的延迟时间

如果过渡多个属性，而且效果都一致的话 可直接写 all 代表所有属性

transition-property 过渡属性

给什么过渡就写什么transition-property:background  给背景过渡

transition-duration 过渡的持续时间  单位s  ms

transition-timing-function 过渡的动画类型

linear 线性过渡

ease 平滑过渡

ease-in 由慢到快

ease-out 由快到慢

ease-in-out 由慢到快再到慢

transition-delay 过渡的延迟时间 单位s ms

注意：text-align display 不能过渡

如果需要给过渡的盒子离开也过渡的话，需要给盒子也加过渡

三、javascript

形参个数 函数名.length

鼠标经过选择表单  select()  选择功能 选中方法

txt.onmouseover  = function () {
    txt.select();
}

所有input里取出来的值都是字符型

parseInt(10,2)   结果是2   就是把10转换为2进制

 

全局变量

没有var的就是全局变量，var a=b=c=9; 虽然在函数内，但是b c 没有var 所以是全局变量

变量提升

什么是变量提升

function fun(){

console.log(num);

var num = 20;

}

相当于 ---

function fun(){

var num;

console.log(num);

Num = 20;

}

在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。