你好！ 这是我自己编辑的一些知识点。如果你想学习1+X知识点的有关知识, 可以仔细阅读这篇文章，了解一下关于1+X知识点的基本语法知识。
1+X初级知识点
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
</head>
<body>
</body>
<script src=""></script>
</html>
HTML注释
<- 注释 ->
块元素：
h1-h6,div,p,ul,ol,dl,li,dt,dd,hr,pre,iframe,table,th,tr,td,form,
header,main,section,article,aside,details,time,address,code,canvas,audio,video,source,d
atalist,dialog,figuar,frameset,legend
- 能够识别宽高
- margin和padding的上下左右可设置
- 自动换行
- 排列顺序自上而下
行内元素：
span、a、i、em
- 设置宽高无效
- margin左右有效，上下无效；padding都有效
- 不换行
行内块元素：
input、img、button
- 不换行
- 识别宽高
- 从左到右排序
转换元素
-
块/行内块->行内：display:inline;
-
行内/行内块->块：display:block;
-
块/行内->行内块：display:inline-block;
单标签
br,hr,img（最好添加alt属性、width和height）,input,meta,link
H5语义化标签
header
nav
main
aside
article
section
footer
标签属性
id,class,title,style,name,width,height,border,align,cellpadding,cellspacing,colcode,row code,src,href,type,disabled,readonly,placeholder,data-*等。
CSS注释
/* 注释 */
CSS选择器
1）类别选择器
div.box{
}
div .box{
}
2）标签选择器
3）ID选择器：值必须是唯一的。
4）后代选择器
p code{
}
5）子选择器
p>code{
}
6）伪类选择器
p:first-child{
}
p:nth-child(2){
}
7）通用选择器(在项目开发时，不要使用)
*{
}
8）群组选择器
.p1,.p2{
}
9）相邻同胞选择器
p+code{
}
10）属性选择器
p[title]{
}
input[type=text][name]{
}
11）伪元素选择器
.box:before{
content:"";
}
.box::before{
content:"";
}
12）结构性伪类选择器
.container:nth-of-type(3){
}
13）UI元素状态伪类选择器
主要用于form表单元素，ui元素的状态一般包括 启用|禁用 选中|未选中 获得焦点|失去焦点
:input{
}
:disabled{
}
input:focus{
}
CSS属性
CSS: color,background,font,border,margin,padding,width,height,position,left,top,bottom,right ,display等
CSS3:box-shadow/text-shadow,transform,transition,animation,border-radius,box-sizing等
a标签的伪类
a:link：未访问的链接
a:visited：已访问的链接
a:hover：当有鼠标悬停在链接上
a:active：被选择的链接
权重
!important(10000)>style行间(1000)>id(100)>class(10)>标签（1）
弹性盒子
/*指定主轴方向*/
• flex-direction: row | row-reverse | column | column-reverse;
/*设置是否换行*/
• flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow: row nowrap;
是flex-direction属性和flex-wrap属性的简写形式
flex-flow: flex-direction flex-wrap;
/*设置主轴上的子元素排列方式*/
• justify-content: flex-start | flex-end | center | space-between | space-around；
/*设置侧轴上的子元素排列方式*/
• align-items: stretch | center | flex-start | flex-end | baseline；
/*设置侧轴上的子元素的排列方式（多行）*/
• align-content: stretch | center | flex-start | flex-end | space-between | space-around；
JavaScript组成
ECMAScript+DOM+BOM
js数据类型
-
基本数据类型:number string boolean undefifined null
-
引用类型:object array function
运算符
- 算术运算符：+、-、*、/、%、++、–
- 关系运算符：>、>=、<、<=、、=、!=、!==
- 逻辑运算符：&&、||、!
- 三元运算：exp1 ? exp2 : exp3;
循环
1）for（计数循环）：用在循环次数是已知的情况。 for(初值;终值;步长){
循环体;
}
for(var i = 1,sum;i <= 100;i++){
sum += i;
}
console.log('1+3+...+99=' + sum) // 只在开发时用于调试
2）while（当型循环）：可以用在循环次数是已知或未知的情况。
while(条件){
循环体；
}
3）do...while直到型循环:用法与while一样。 do{
循环体；
}while(条件);
4）forEach：遍历数组
数组名.forEach(function(item,index){
数组内容处理
})
5）for...in for(var 变量名 in 数组名){
...
}
内置对象
Math对象：
Math.PI圆周率
Math.floor()向下取整
Math.ceil()向上取整
Math.round()四舍五入版 就近取整
Math.abs()绝对值
Math.max()/Math.min()求最大和最小值
Math.random()获取范围在[0,1)内的随机值
日期对象：
getFullYear()获取当年
getMonth()获取当月(0-11)
getDate()获取当天日期
getDay()获取星期几(周日0 到周六6)
getHours()获取当前小时
getMinutes()获取当前分钟
getSeconds()获取当前秒钟
getTime()获取时间戳
数组方法
push()/pop()：追加/删除数组数据
unshift()/shift()：在头部添加/删除数组数据
concat()：连接数组
join()：将数组转换为字符串
forEach()：数组遍历
slice()：从已有的数组中返回你选择的某段数组元素
splice()：从数组中添加或删除元素，然后返回被删除的数组元素
字符串
split()：把字符串分割成字符串数组
sort()：排序
reverse()：反转
toLowerCase()：把字符串转为小写
toUpperCase()：把字符串转为大写
indexOf()：返回某个指定的子字符串在字符串中第一次出现的位置
charAt()：返回指定下标位置的字符
charCodeAt()：返回指定下标位置的字符的unicode编码
toString()：转换为字符型
substr()：返回从指定下标开始指定长度的的子字符串
substring()：提取字符串中介于两个指定下标之间的字符
replace()：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
trim()：删除字符串前后的空格
正则表达式
定义：
- 字面量
var reg = /正则匹配/参数(i,g,m)
tel: /^1[3-9]\d{9}$/
- new
var reg = new RegExp(正则，参数);
方法：
match()返回数组
test()返回Boolean值
replace()替换
DOM操作
// 创建
createElement()
// 添加
appendClild()
// 获取DOM
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.body document.forms
document.images document.querySelector()
document.querySelectorAll()
// 获取/设置文本/值/属性
nnerHTML
innerText
value
setAtrribute()
getAttribute()
事件
onload
onunload
// 鼠标事件
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout
onmouseenter
onmouseleave
onmousemove
// 键盘事件
onkeydown
onkeyup
onkeypress
// 表单事件
onsubmit
onblur
onfocus
onchange input选框状态变化
// 窗口事件
onresize 窗口大小变化
onscroll 滚动条变化
阻止冒泡和默认行为
使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。
使用event.preventDefault()可以取消默认事件。
事件监听
DOM对象.addEventListener('事件',回调函数，true/false);
BOM操作
- window对象
属性：
document对 Document 对象的只读引用。
history对 History 对象的只读引用。
length设置或返回窗口中的框架数量。
location用于窗口或框架的 Location 对象。
name设置或返回窗口的名称。
navigator对 Navigator 对象的只读引用。
opener返回对创建此窗口的窗口的引用。
parent返回父窗口。
screen对 Screen 对象的只读引用。
self返回对当前窗口的引用。等价于 Window 属性。
screenLeft
screenTop
screenX
screenY
status设置窗口状态栏的文本。
方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
prompt() 显示可提示用户输入的对话框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
close() 关闭浏览器窗口。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
- location对象
属性：
hash 设置或返回从井号开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
href 设置或返回完整的 URL。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
方法：
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。
- history对象
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
- navigator对象
appName返回浏览器的名称
userAgent返回由客户机发送服务器的user-agent 头部的值