前端三要素
前言：人，既无虎狼之爪牙，亦无狮象之力量，却能擒狼缚虎，驯狮猎象，无他，唯智慧耳。——《千门秘典》
要素一、H5
1、5点建议：
不区分大小写；单边和双边标签；属性都是键值对；建议都用双引号；在Java代码中嵌套建议使用单引号；
H标签：默认加粗自动换行且留白
所有的标签都有的属性：id name class style
2、掌握
转义字符：> >、< <、空格
b、i、u、del、face
斜体italics、字体
超链接a
href、target、title、name
_blank(在空白页面打开)
路径、跳转方式
text-decoration: none;去除下划线：一般放全局
padding: 15px;/超链接之间设置距离/
锚点跳转
锚点：网页制作中超级链接的一种
跳转到c位置
返回原位置
图片img
src、alt、title、href
展示图片路径、src为空时的提示信息、点击图片显示的文字、点击图片跳转路径
audio和video
autoplay、controls
video多两个属性：
width height
播放、播放栏
3、表格table
属性：border（边框1px）、align、valign（对齐方式）
子标签(包含)：tr、th、td、rowspan、colspan
行、表头、列、合并行、合并列
去除边框空隙：style=“border-collapse: collapse;”
列表标签:
- 有序列表项
-
定义列表（definition list） dl、dt、dd dd比dt多一个table
4、form
action：提交路径
method：提交方式GET/POST
GET：通过URL明文传参
POST：隐含传递参数
可以使用浏览器里面的开发者工具->netword->找到发送给哪一个
文件->from data
?和&（连接两个提交的数据）
input
type：text、password、radio、date、checkbox、file、button、hidden、reset、submit、email、textarea
一般用style="width: 200px;"来控制宽度
select下拉选框
option子标签
selected默认选中
细节
多个input使用radio时，要求name属性一致，value不一致
爱好中name用like[]比较好
单选框和多选框默认使用checked，下拉使用selected。
5、div自动换行
float: left;可将两个div放一行
浮动之后的换行
要素二、CSS
1、概念
层叠样式表，加样式为了渲染标签，样式遵从后来的覆盖前面的
引入css的方式：
写入
href=“CSS文件所在路径” URL
type=“text/html” 可视化的HTML文件
type=“text/css” 可视化的CSS文件
type=“text/javascript” 可视化的JS文件
2、选择器
id、class、属性、标签、组合、**层级、通配符
#id名{}、.cls名{}、input[type=text]{} 、p{}、p, .sdj, #chunjie {逗号隔开}、#box 不写、{}
/选择器居中对齐/
text-align: center;
伪类
第一次加载时(a:link{})基本不用
未点击状态（a:visited）
鼠标悬停（a:hover{}）
鼠标点击之后（a:active{}）
字体尺寸设置
font-family:字体种类
***text-indent:2em首行缩进
overflow:hidden超出部分隐藏
text-overflow:ellipsis超出部分用…替换
white-space：nowrap强制不换行
***text-shadow：5px 5px 1px red；
x方向、y方向偏移、虚化程度、参数阴影颜色
展示
***display: inline-block：去除列表图形
***text-decoration:none;去除下划线
***text-indent:2em首行缩进
***text-shadow：5px 5px 1px red；
3、框模型
margin(外边距) border(边框) padding(内边距)
设置大小的时候顺时针顺序 上右下左
solid:实线dashed:虚线double:双实线
特点：使用style属性
如果存在多个CSS样式，用分号隔开
Ajax：异步Js与Xml
最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
要素三、JS
开发者选项：ctrl+ shift + i
1.通常的做法是把函数放入 部分中
js输出
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到HTML文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
2.js语法
常量：定面量
js语句用分号分割
js是区分大小写的
函数 getElementById 与 getElementbyID 是不同的。
JavaScript 使用 Unicode 字符集
JavaScript 中，常见的是驼峰法的命名规则
您也可能看到不带有分号的案例。
在 JavaScript 中，用分号来结束语句是可选的。
关键字是编译器保留用作token字，如int, void, unsigned。
而标识符一般作为c语言变量名和函数名而自定义的，并且有一定的命名规则。
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
可以在文本字符串中使用反斜杠对代码行进行换行
3.应用注释符号验证浏览器是否支持 JavaScript 脚本功能
HTML注释符号是以 <-- 开始以 --> 结束的。如果在此注释符号内编写 JavaScrip t脚本，如果浏览器支持 JavaScript 将输出此字符串，如果不支持将不输出此字符串
4.在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined，表示变量不含有值，可以通过将变量的值设置为 null 来清空变量。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
5.js对象：{key:“value”}
对象的创建，一般推荐使用
var people = {name : ‘Tom’, age : 21 , eat : function(){ } }
对象值的调用：
name=person.lastname;
name=person[“lastname”];
javaScript对象中属性具有唯一性（这里的属性包括方法），如果有两个重复的属性，则以最后赋值为准。
6.js函数
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用。
ES6 新增箭头函数，定义函数时更加简洁、易读。
7.js作用域
在 ES6 中，提供了 let 关键字和 const 关键字。
let 的声明方式与 var 相同，用 let 来代替 var 来声明变量，就可以把变量限制在当前代码块中。
使用 const 声明的是常量，其值一旦被设定便不可被更改。
let 和 var 的区别代码实例：
function varTest() {
var x = 1;
if (true) {
var x = 2; // 同样的变量!
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
if (true) {
let x = 2; // 不同的变量
console.log(x); // 2
}
console.log(x); // 1
}
8.js事件
现在的时间是?
以上实例中，JavaScript 代码将修改 id=“demo” 元素的内容。
在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):
现在的时间是?
9js字符串
var x = “John”;
var y = new String(“John”);
typeof x // 返回 String
typeof y // 返回 Object
=== 为绝对相等，即数据类型与值都必须相等。
JavaScript == 与 === 区别
1、对于 string、number 等基础类型，== 和 === 是有区别的
a）不同类型间比较，== 之比较 “转化成同一类型后的值” 看 “值” 是否相等，=== 如果类型不同，其结果就是不等。
b）同类型比较，直接进行 “值” 比较，两者结果一样。
2、对于 Array,Object 等高级类型，== 和 === 是没有区别的
进行 “指针地址” 比较
3、基础类型与高级类型，== 和 === 是有区别的
a）对于 ，将高级转化为基础类型，进行 “值” 比较
b）因为类型不同，= 结果为 false
4、!= 为 == 的非运算，!== 为 === 的非运算
10.常见的不同类型运算的转换方式：
数字和布尔值相加，布尔值 false 转成 0，true 转成 1
字符串与布尔值相加，布尔值转化成字符串
取模运算的结果符号只与左边值的符号有关：
var x = 7 % 3; // 结果为 1
var y = 7 % (-3); // 结果为 1
var z = (-7) % 3; // 结果为 -1
数字与 null(空值) 相加，null 转化为数字 0：
var car=null+3+4; // 结果为7
字符串与 任意类型相加都转成字符串
多元运算符：
p>1?p
p>1? 整体 :p=3
11js循环
JavaScript for/in 语句循环遍历对象的属性或者数组：
实例
var person={fname:“John”,lname:“Doe”,age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
var x
var nums = [1, 3, 5];
for (x in nums)
{
document.write(nums[x]+ “
”); // x 为数组索引
}
for…of 是 ES6 新引入的特性。它既比传统的for循环简洁，同时弥补了forEach和for-in循环的短板。
for-of 循环使用例子：
循环一个数组(Array):
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30
我们可以使用const来替代let，这样它就变成了在循环里的不可修改的静态变量。
let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30
循环一个字符串：
let iterable = “boo”;
for (let value of iterable) {
console.log(value);
}
// “b”
// “o”
// “o”
循环一个类型化的数组(TypedArray)：
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
}
// 0
// 255
循环一个Map:
let iterable = new Map([[“a”, 1], [“b”, 2], [“c”, 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]
循环一个 Set:
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
循环一个 DOM collection
循环一个DOM collections，比如NodeList，之前我们讨论过如何循环一个NodeList，现在方便了，可以直接使用for-of循环：
// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll(“article > p”);
for (let paragraph of articleParagraphs) {
paragraph.classList.add(“read”);
}
for–of循环并不能直接使用在普通的对象上，但如果我们按对象所拥有的属性进行循环，可使用内置的Object.keys()方法：
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
循环一个生成器(generators)
我们可循环一个生成器(generators):
function* fibonacci() { // a generator function
let [prev, curr] = [0, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}
}
break 的作用是跳出代码块, 所以 break 可以与循环和 switch一起使用等
continue 的作用是进入下一个迭代, 所以 continue 只能用于循环的代码块。
12.js中的操作符
typeof false // 返回 boolean
在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
用 typeof 检测 null 返回是object。
用 typeof 检测 undefined 返回是undefined。
你可以设置为 null 来清空对象:
你也可以设置为 undefined 来清空对象:
typeof 3.14 // 返回 number
typeof NaN // 返回 number
“John”.constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
可以使用 constructor 属性来查看对象是否为数组 (包含字符串 “Array”):
function isArray(myArray) {
return myArray.constructor.toString().indexOf(“Array”) > -1;
}
检测数据类型：typeof 与 instanceof
typeof 用以获取一个变量或者表达式的类型，typeof 一般只能返回如下几个结果：
number,boolean,string,function（函数）,object（NULL,数组，对象）,undefined。
instanceof 操作符来判断对象的具体类型，语法格式:
var result = objectName instanceof objectType
JS的概念
JavaScript是基于对象、只需解释就可以执行、都区分大小写
type=“text/javascript” 可视化的JS文件
语法
声明：var 变量名=初始化值;
5 原始类型Undefined、Null、Boolean、Number 和 String.
typeof返回值：undefined、object、boolean、number、string
函数定义格式：function 函数名(){}
事件:console.log();输出语句
字符串
urlStr.split("&");以&切分成数组
arrays[i].indexOf(“rsv_sug4”)以指定字符开头
window
window.onload加载完页面执行
window.location.href=""：跳转地址
window.history.go(1)前进
window.history.go(-1)后退
消息框：alert(prompt(“请输入您的姓名”));
DOM文件对象模型
getElementById();
getElementsByClassName();返回数组
getElementsByName();返回数组
getElementsByTagName();返回数组
事件和函数
表单事件
文本框获得焦点:doc.onfocus
文本框失去焦点:doc.onblur
下拉选框改变：change
鼠标事件
单击：e03.onclick
双击：e03.ondblclick
鼠标移上：e02.onmouseover
鼠标移出：e02.onmouseout
鼠标按下：e02.onmousedown
鼠标弹起：e02.onmouseup
键盘事件
键盘按下：e01.onkeydown
键盘按键：e01.onkeypress，长时间处于按下状态
键盘弹起：e01.onkeyup
注意事项
变量没有定义的称之为野值
JS中的方法名尽量不要同名
JS放在head中在页面加载完成之前就执行了，放在body中加载完成后才执行，一般放在body中比较好。