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

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.图片必须添加的属性:altsrc

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

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

定义图像映射: map/area

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

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

// 避免浏览器表现不一致,nameid属性保持一致

 

<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.不失真的情况下,存贮形式丰富,兼有GIFJPG的色彩模式

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

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

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

缺点:

1.不支持动画应用

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

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

 

10.表格table

<table></table>

tr:行标签

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

th: 行中的每个单元格标签(居中加粗)

caption:表格的标题标签

总结:

1. tabletr之间,trtd/th之间只能是表格的标签,不能是其他标签

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

3. 不能在trth之间写其他标签

定义表格中的表头内容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:将用户名和密码提交给服务器,服务器必须告诉我一个地址

methodgetpost
    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须在minmax之间)

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

optimumhighlow之间,说明lowhigh是优值
    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文件,hrefcss地址

<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

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

注意:有时候给父盒子浮动了,也给子盒子aspan一起浮动,目的是清除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

因为paddingborder占据了内容区域的一部分空间,导致内容区域变小

15.定位position

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

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

position4种属性值

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) 如果设置了绝对定位,但是不设置topleft,该盒子默认在原位置飘着

    如果设置了topleft,以父辈或者页面为参考

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) overflowhidden  缺点:超出部分会隐藏

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;

}

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

 


更多专业前端知识,请上 【猿2048】www.mk2048.com
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐