web前端笔记整理,从入门到上天,周周更新
由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客 http://www.cnblogs.com/luxiaoyao/ 一、HTML 1.注释 格式:<!-- 注释内容 --> 作用: 1....
由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客
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>
注意:
- table的子级:thead,tbody,tfoot,caption,tr
- tr的子级:td,th
- td/th的内容随便写
- 推荐将thead,tbody,tfoot写入到table中,表格的结构会更加明确
- 如果不加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属性,没有实际效果
注意:
- 属性值在页面中唯一,主要以后为JS获取DOM对象提供方便
- 由字母数字下划线_和中划线-组成,不能以数字开头
class:所有的标签都可以设置class属性,没有实际效果
注意:
- 由字母数字下划线_和中划线-组成,不能以数字开头
- 属性值在页面中定义多个,给多个标签设置相同的样式和设置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样式
- 内嵌式:将css代码嵌入到HTML标签中
<h3 style="color:red">hello world</h3>
- 内联式:通过style标签将css代码引入
<style>
h3 {
background: blue;
}
</style>
- 外联式:通过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:高度
单位:
- px固定值大小
- 百分比(以父级容器大小设置,宽度继承,高度不继承)
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 行内元素
- 不占据一行
- 不能设置宽高
代表标签:span,a,strong,b,i,em,mark,time
inline-block 行内块元素
- 不独占一行
- 可以设置宽高
代表标签:img input textarea button select
block 块元素
- 独占一行
- 可以设置宽高
代表标签: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:复合属性
注意事项:
- 复合属性必须写字体大小和字体名称(宋体,黑体..)
- 完整的格式:
font:style variant weight font-size/line-height font-family
- 字体最小为12px,默认字体大小为16px
- 字体大小为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就可以
- 让父级浮动
- 给父级添加overflow:hidden
- 设置父级为display:inline-block
- 绝对定位
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是内阴影)
注意事项:
- 影子不占据页面空间,不会影响其他元素
- 必须添加横向偏移,纵向偏移。
- 不写颜色默认是黑色
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;
|
|
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; | writing-mode:vertical-lr;
|
|
|
|
25. 精灵图(雪碧图)
目的:节省服务器带宽
缺点:增大开发的难度,通过定位
26. 浮动的影响
子元素不浮动的时候,会将父元素的高度撑起来
如果子元素浮动,父元素不能获取子元素的高度,自身的高度就为0
想让父级元素高度自动撑起来的方法:
1.单独设置一个div,清除浮动
缺点:多设置一个标签,这种方式现在不常使用
- 如果父级容器是一个BFC容器的话,就能让父级容器获取到元素的高度,从而自己有高度
a) overflow:hidden 缺点:超出部分会隐藏
b) display:inline-block
c) float:left/right
d) position:absolute/fixed 缺点:为了获取子级div的高度,让自身设置了浮动和定位
- 使用::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
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)