前端
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有序列表标签
a
A
i
I
start属性
定义开始的位置
div盒子标签
网页排版中非常重要的一个标签
table标签
th定义表头
tr定义表行
td定义表单元格数据
from表单标签
action
定义表单被提交时发生的动作，提交给服务器处理程序的地址
method
作用：定义表单提交数据时的方式
取值
get
默认值，明文提交，所提交的数据可以显示在地址上
提交数据大小有限制，最大为2kb
post
隐式提交：所提交的内容不会显示到地址栏上，安全性高
大小无限制
enctype
编码类型，即表单数据进行编码的方式，允许表单将什么样的数据提交给服务器
取值：1.application/x-www-form-urlencoded默认。允许将普通字符，特殊字符，都提交给服务器，不允许提交文件
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
选择器的权重
行内样式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结构，作用：让结构好看
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()：返回字符串，字符串合并
slice：切片
toUpperCase()：字符串转大写
toLowerCase()：字符串小写
Date
创建日期对象 var myDate = new Date()
getDate()：返回月份中的第几天
getMonth()：获取月份
getFullYear()：获取年份
getDay：获取 星期中的第几天
getHours：获取小时
getMinutes：获取分钟
getSeconds：获取秒钟
Math内置对象
Math.floor：向下取整
Math.ceil：向上取整
Math.random()：默认0~1间的随机数
Function函数
普通函数
add();
函数对象
var add = function(){} ：没有名字的函数在js中称为匿名函数
自执行函数
构造函数 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()
重载页面
打开新的网址
offset/client/scroll 家族
事件
动画
深入理解函数
深入理解作用域
深入理解闭包
this指向深入
面向对象编程
0 条评论
回复 删除
下一页
