前端
2019-06-25 16:29:12 1 举报
AI智能生成
前端
作者其他创作
大纲/内容
HTML
html标签:超文本标记语言
head标签
title标签:显示网页的标题
metal标签:提供有关页面的元信息
style标签:定义内部样式
link标签:链接CSS资源文件、网站图标
script标签:链接脚本js文件
body标签
h1~h6标签
P段落标签
ul无序列表标签
子标签为li
type属性
square:方形
circle:圆心
ol有序列表标签
子标签为li
type属性
a
A
i
I
start属性
定义开始的位置
div盒子标签
网页排版中非常重要的一个标签
table标签
th定义表头
tr定义表行
td定义表单元格数据
from表单标签
action
定义表单被提交时发生的动作,提交给服务器处理程序的地址
method
作用:定义表单提交数据时的方式
取值
get
默认值,明文提交,所提交的数据可以显示在地址上
提交数据大小有限制,最大为2kb
post
隐式提交:所提交的内容不会显示到地址栏上,安全性高
大小无限制
enctype
编码类型,即表单数据进行编码的方式,允许表单将什么样的数据提交给服务器
取值:1.application/x-www-form-urlencoded默认。允许将普通字符,特殊字符,都提交给服务器,不允许提交文件
2.multipart/form-data,允许将文件提交给服务器
3.text/align 只允许提交普通字符,特殊字符,文件都无法提交
注意:如果有文件需要提交给服务器,method必须为post,enctype必须为multipart、form-data
表单控件分类
textarea文本域
作用:允许用户录入多行数据到表单控件中
属性
cols:指定文本区域的列数,变相设置当前元素宽度
rows:指定文本区域的行数,变相设置当前元素的高度
select和option选项框
select属性
size取值大于1的话,则为滚动列表否则就是下拉选项框
multiple设置多选,该属性出现在select中,那么就允许多选
option属性
value选项的值
select预选中,注意:如果不设置selected属性的话,那么选项中的第一项会默认选中
input组元素
type
button;普通按钮,与form表单没有任何关系
text:明文显示用户输入的数据
password:密文显示用户输入的数据
radio:单选按钮
checkbox:复选框
submit:功能固定化,负责将表中的表单控件提交给服务端
file:上传文件用
datetime
lable功能:关联文本与表单元素的,点击文本时,如同点击表单元素一样
for属性表示与该label相关联的表单控件元素的id值
img标签
src:图片的资源地址
alt:图片加载失败时显示的标题
title:鼠标悬浮是显示的标题
br换行标签
hr分割线标签
 :空格字符
©;
a链接标签
herf
title
target
self:默认值,在网页中打开新的网址
_blank:在新的空白页面打开新的网址
span标签
button按钮
行内标签
在一行内显示
不能设置宽高,默认是内容的宽高
span,a
行内快是属于行内标签
在一行内显示
可以设置宽高
img input
display
块级标签
独占一行
可以设置宽高,如果不设置宽高,那么是父亲的100%宽度
div,h1~h6,ul;li
定义:超文本标记语言
标准文档流
CSS
CSS引入方式
内嵌式
内联式
外链式
导入式
选择器
基础选择器
*:通配符选择器
匹配所有的标签,通常不建议使用通配符,因为它会遍历并命中文档中所有的元素
id选择器
匹配以唯一标识符id属性等于wrap的对象作为选择符,唯一的,只有一个
div 标签选择器
匹配div标签的选择器
.类选择器
以class属性包含myclass的对象作为选择符,类选择符可同时定义多个
高级选择器
ul>li 子代选择器
只能命中子元素
ul a 后代选择器
选择符将命中所有符合条件的后代
li+a 相邻选择器
选择紧贴在li元素之后的a元素
li~a 兄弟选择器
选择li元素后的所有的兄弟元素a
li.active
li,div,p,span
选择器的权重
行内样式1000>id选择器100>类选择器10>标签选择器1
伪类选择器
E:link
设置超链接a在未被访问前的样式
E:visited
设置超链接a在其链接地址已被访问过时的样式
E:hover
设置元素在其鼠标悬浮时的样式
E:active
按住鼠标时的样式
属性选择器
伪元素选择器
E::before
E::after
字体font
font-style:指定文本的样式
normal:正常字体
italic:斜体字体
oblique:倾斜字体
font-weight:指定文字题的粗细
normal:正常的字体
bold:粗体,相当于数字值700
bolder:更粗
lighter:定义比normal更轻的值
integer:用数字表示文本字体粗细
font-size:指定文本字体大小
font-family
指定文本使用某个字体:微软雅黑、楷体
颜色color
color
十六进制
RGB
RGBA
文本text
text-align
left:内容左对齐
center:内容居中对齐
right:内容右对齐
justify:内容两端对齐,只适用于英文
text-ident:文本的缩进,单位建议用em
text-decoration
none:文字无装饰
underline:下划线
overline:上划线
line-through:删除线
line-height
指定文本字体的行高
背景background
background-image
none:无背景图
background-image:url(./1.jpg)
background-position
设置或检索对象的背景图位置,必须先指定background-image属性
x,y
如果是正值,表示调整背景图的位置
如果为负值,表示精灵图位置,进行切图
background-repeat
repeat:背景图像在横向和纵向平铺,默认
repeat-x:背景图像横向平铺
repeat-y
背景图像纵向平铺
no-repeat:背景图像不平铺
background-attachment
scroll:背景图像相对于元素固定
fixed:背景图像相对于窗体固定
background-color
transparent:默认透明
盒模型
width:宽度
height:高度
border:边框
border-width
border-style
none
dotted:点状轮廓
dashed:虚线轮廓
solid:实线轮廓
double:双线轮廓
border-color
border-left,right,top,bottom
border-radius
50%:圆
padding
外边距四个方向值
外边距合并只会发生在上下两个按方向上,且只有块级
浮动
浮动效果
float:left
float:right
float:none
浮动特性
1.浮动可以使元素脱离文档流,不占位置,脱标
2.会使元素提升层级
3.浮动可以使块元素在一行排列,不设置宽高的时候,可以使元素适应内容
4.浮动可以使行内元素支持宽高
浮动产生的问题
在页面布局中,一般情况父元素的高度是不设置的,通过子元素来填充它的高度。但是子元素设置浮动之后,不会撑开父元素的高度,因为子元素不占位置
浮动解决方案
1.给父盒子设置固定高度
2.给浮动元素最后一个子元素后面添加一个空的块级元素,且该元素不浮动,设置clear:both
3.clearfix::after
定位
static:默认没有定位
relative:相对定位:相对于自身进行定位
absolute:绝对定位
fixed:固定定位
z-index
1.z-index属性设置元素的堆叠关系,拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素前面
2.对于同级元素,默认或position:static情况下文档流后面的元素会覆盖前面的
3.对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,z-index值越大,优先级越高
4.从父原则
定义:层叠样式表,修饰html结构,作用:让结构好看
display
inline:行内
block:块
inline-block:行内快
none:不显示
JavaScript
核心(ECMAScript)
变量
测试语句
数据类型
运算符
数据类型转换
将数值类型转换为字符串类型
隐式转换:var n1 = 123; var n2 = '123'; var n3 = n1 + n2;
强制类型转换:var str1 = String(n1); var num = 234; cosole.log(num.toString())
将字符串类型转换为数值类型
var StringNum = '789.123qwe'; var num2 = Number(stringNum);
任何数据类型都可以转换为boolean类型
流程控制
if-else
&& ||
switch
while
do-while
for
常用内置对象
Array
concat():合并数组
join():数组内容由指定额字符分隔,返回字符串
pop:移除数组的最后一个元素
shift:移除数组的第一个元素
unshift:添加数组的第一个元素
slice:切片,顾头不顾尾
push:添加数组的最后一个元素
sort:对数组进行排序
reverse:对数组进行排序
splice:万能,增加、修改、删除
isArray():判断是否为数组,返回值为true|false
length:返回数组的长度
splite()
string
charAt():返回指定索引位置的字符
cancat():返回字符串,字符串合并
replace(a,b):字符串b替换了字符串a
slice:切片
split('a',1):以字符串a拆分,返回值是数组,第二个参数,从返回的数组中获取的内容
toUpperCase():字符串转大写
toLowerCase():字符串小写
Date
创建日期对象 var myDate = new Date()
getDate():返回月份中的第几天
getMonth():获取月份
getFullYear():获取年份
getDay:获取 星期中的第几天
getHours:获取小时
getMinutes:获取分钟
getSeconds:获取秒钟
Math内置对象
Math.floor:向下取整
Math.ceil:向上取整
Math.max(a,b):求a和b中的最大值
Math.min(a,b):求a和b中的最小值
Math.random():默认0~1间的随机数
Function函数
普通函数
function add(x,y){};
add();
函数对象
var add = function(){} :没有名字的函数在js中称为匿名函数
自执行函数
(function(a,b){})(1,2)
构造函数 class
在es5中是没有class的概念,创建对象使用new关键字,建议构造函数的第一个字母为 大写
文档对象模型(DOM)
DOM节点
获取DOM的三种方式
document.getElementById():通过id获取
document.getElementsByClaasName():通过类名获取
document.getElementsByTagName():通过标签名获取
值的操作
innerText:文本内容,只包含文本不包含标签
innerHtml:渲染标签也可设置文本
value:对于标签中有value属性的设置,表单控件
样式操作:对于style对象的操作,CSS中的属性的设置,注意margin-left属性,使用js属性值额时候是oDiv.style.margin-left = '30px'
属性操作
比如标签中的id,class,title属性的设置,img的src属性,a标签中的href属性,注意:设置class的时候使用className
DOM操作
创建DOM
追加DOM
父.appendChild(子标签):适用于父DOM插入子DOM
父.insertBefore(要插入的节点,参考的节点):适用于兄弟之间
删除DOM
父.removeChild(子)
浏览器对象模型(BOM)
window.location
href:跳转
hash:返回URL中#后面的内容。包含#
hostname:主机名,包括端口号
pathname:路径名
protocol:协议,http,https
search:查询字符串
window.location.reload()
重载页面
window.open(url,target)
打开新的网址
offset/client/scroll 家族
事件
动画
深入理解函数
深入理解作用域
深入理解闭包
this指向深入
面向对象编程
0 条评论
下一页