<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--html5废弃的标签-->
<!--能使用css代替的标签-->
<font></font>
<basefont>
<big></big>
<center></center>
<s></s>
<strike></strike>
<tt></tt>
<u></u>
<!--框架结构-->
<frameset></frameset>
<noframes></noframes>
<!--注意：iframe在html5中是支持的-->
<iframe marginheight="0" hspace="0" frameborder="0" scrolling="no"
src="http://weather.qq.com/24.htm" allowtransparency="true" height="300" width="300"></iframe>
<!--只有部分浏览器支持的标签-->
<applet></applet>
<bgsound></bgsound>
<blink></blink>
<marquee behavior="" direction="">561651</marquee>
html5新增标签
<canvas>
画布
</canvas>
<audio src=""></audio>
<video src="">
<source src="flv">
<source src="mp4">
<source src="avi">
</video>
<embed src="" type="">定义嵌入的内容，比如插件
<track>为video或audio等媒体资源规定外部的文本轨道
<!--新的表单元素-->
<datalist></datalist>
<!--定义选项列表，与input配合使用，来定义input可能的值-->
<input list="browsers">
<datalist id="browsers">
<option value="IE"></option>
<option value="FireFox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
<keygen />规定用于表单的密钥对 生成器字段
<output>规定不同类型的输出，比如脚本的输出</output>
<!--上面都除了canvas audio video datalist 其他都可以不看，下面的要做到基本掌握-->
<article>定义页面独立的内容区域</article>
<aside>定义页面的侧边栏内容</aside>
<bdi>允许设置一段文本，使其脱离父级文本方向</bdi>
<command>定义命令按钮，比如单选框，复选框或按钮（只有ie支持）
<details>描述文档或文档的某个细节</details>
<dialog>定义对话框</dialog>
<summary>定义标签包含details的标题</summary>
<figure>规定独立的文档流内容</figure>
<figcaption>定义figure的标题</figcaption>
<footer>定义section或document文档的页脚</footer>
<header>定义文档的头部</header>
<mark>定义带标签的文本</mark>
<meter>定义度量衡</meter>
<nav>定义导航链接</nav>
<progress>定义任何类型的任务进度</progress>
<ruby>定义注释，可以用于中文的注音</ruby>
<rt>定义字符的解释或发音，也可以用于中文的注音</rt>
<rp>在ruby中使用，定义不支持ruby元素的浏览器所显示的内容</rp>
<section>定义文档中的节</section>
<time>定义日期或时间</time>
<wbr>规定在文本中何处添加换行符
</body>
</html>
<script>
//dom文档对象模型，document object model
//获取dom js中的选择器
let list=document.getElementById('list')
let liRed=document.getElementsByClassName('liRed')//collection集合拥有跟数组完全一致的方法等
let lis=document.getElementsByTagName('li')//collection集合，可以理解为伪数组
// dom可以做什么
//1、改变html输出流 可以把内容输出到页面上
document.write(new Date())
//2、改变html内容
liRed[1].innerHTML='狗东西'
//3、改变html属性
list.title='15445'
//4、改变html样式
liRed[1].style.color='red'
//5、使用事件
// 鼠标事件：onmouseover onmouseenter onmousedown onmouseup onmousewheel onmousemove onmouseleave onmouseout onclick
//键盘事件：onkeydown onkeyup onkeypress
//窗口事件：onload onscroll
//表单事件：onfocus onblur onsubmit onchange
let ipt =document.getElementById('ipt')
let screen = document.getElementById('screen')
// ipt.oninput=function () {
// // screen.innerHTML=ipt.value
// }
ipt.onchange=function () {
console.log(111)
screen.innerHTML=ipt.value
// onchange只要输入框的内容改变就输出
//onblur 只要失去焦点就输出
}
//字符串
let str1=''
let str2=''
let str3=''
//写一个函数可以生成随机的颜色
// function randomRgbColor() { //随机生成RGB颜色
// let r = Math.floor(Math.random() * 256); //随机生成256以内r值
// let g = Math.floor(Math.random() * 256); //随机生成256以内g值
// let b = Math.floor(Math.random() * 256); //随机生成256以内b值
// return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
//
// }
function randColor() {
return "rgb("+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')'
}
// list.style.background=randColor()
// list.style.color=randColor()
let color =randColor()
list.style.background=color
list.style.color=color
let str4="I am a student!"
//charAt()返回在指定位置的字符 几乎不用 用str[3]代替
console.log(str4.charAt(3))
//空格也占位子
console.log(str4[3])
//concat 连接两个字符串，生成新字符串
console.log(str4.concat(str3))
//一般不用，用+
let num=123
console.log(num+'')//js的奇迹淫巧快速把数字转化为字符串
//endsWith() 判断当前字符串是否与指定字符串结尾 区分大小写 返回布尔值
console.log(str4)
console.log(str4.endsWith('nt!'))
console.log(str4.startsWith("I"))
//indexOf 返回某字符串在当前首次出现的位置 如果没有则返回负一
console.log(str4.indexOf('a'))
// lastIndexOf 使用方法与上相同，返回某字符串中最后出现的位置
//includes 查找字符串中是否存在指定字符串
console.log( str4.includes('a'))
//match 查找一个或多个正则表达式的匹配
console.log(str4.match(/\ba\b/g))
//不加g 查找到第一个结果就结束输出，加了g，找到一个不结束，继续找，直到把所有满足条件的字符串都找到为止
//如果找不到。则输出null
//repeat 复制字符串指定的次数，并连接到一起返回
console.log(str4.repeat(3))
// replace在字符串中查找对应的子串，然后替换成新内容,生成新字符串
console.log(str4.replace(/a/g,'b'))
//可以用正则，正则后可加g，则所有满足条件的字符串都将被替换
// replaceAll
console.log(str4.replace(/a/,'b'))
//不能用正则，所有的a都会换掉
let str5='abcdeFG1234567hijkmln'
// search 查找字符串中满足正则的字符串，返回索引
console.log( str5.search(/\d{7}/))
//slice 从字符串中截取某部分
console.log(str5.slice(7,14))
//split 以某字符为界限切割字符串生成新数组
console.log(str5.split(''))//以空为界限切割字符串
// substring() 从字符串中提取指定两个索引间的字符串
console.log(str5.substring(7,14))
//substr() 从字符串中，从指定位置，提取指定数量的字符串
console.log(str5.substr(7,14))
// 生成新的字符串，把新字符串所以有字母改成改成小写
console.log(str5.toLowerCase())
console.log(str5.toLowerCase())
let str6=' abc def '
console.log(str6.trim())//去掉字符串两端的空格
// toString
let a=123
console.log(a.toString())
console.log(String(a))
console.log(a+'')//最简
//数组方法 unshift shift push pop splice
//concat()连接两个或更多数组，并返回结果
// copyWithin 从数组指定位置拷贝元素到另一个指定位置
//every()
let arr=[2,4,6,9,10]
console.log(arr.every(item=>item%2===0))
let years=[2000,2004,2008]
// 能被4整除，不能被100整除，或者被400整除是闰年
console.log(years.every(item=>item%4===0&&item%400===0||item%100!==0))
//过滤 筛选 filter
let arr2=[1,2,3,4,5,6,7,8,9]
let arr3=arr2.filter(item=>item%2===1)
//把原数组中所有满足此条件的元素组成新的数组
console.log(arr3)
let arr4=arr3.map(item=>item*2)
console.log(arr4)
let total=arr4.reduce((pre,next)=>pre+next,0)
console.log(total)
console.log( arr2.filter(item=>item%2))
console.log(
arr2.filter(item=>item%2===1)
.map(item => item*2)
.reduce((pre,next) =>pre+next,0))
//没有filter(过滤） map（映射） reduce 等高阶函数时，我们要使用以下代码实现上一行功能
var brr=[]
for (var i =0;i<arr2.length;i++){
if (arr2[i]%2===1){
brr.push(arr2[i])
}
}
console.log(brr)
for (var i =0;i<brr.length;i++){
brr[i]=brr[i]*2
}
console.log(brr)
var result=0
for (var i=0;i<brr.length;i++){
}
console.log(result)
console.log(typeof '112'==='string')
let arr7=['a','b','c']
arr7.every(tiem=>typeof item==='string')
//find
console.log(arr2)
console.log(arr2.find(item=>item===3))
//判断数组中是否有某个值 undefined 没有
const arr8=[
{account:123456,password:"abcdefg"},
{account:123457,password:"abcdefg"},
{account:123458,password:"abcdefg"},
{account:123459,password:"abcdefg"},
]
console.log(arr8.find(item=>item.account===123458))
// for (var i=0;i<arr.length;i++){
// if (arr[8].account===123458){
// console.log(arr8[i])
// }
// }
console.log(arr8.findIndex(item=>item.account===123458))
// arr2.forEach(item,index) =>arr2[index]=item *2)
//跟map几乎一致，但没有返回值 不能链式调用
console.log(arr2)
//from
arr2=Array.from(arr2,item=>item/2)
console.log(arr2)
//includes 判断数组中是否包含指定的值
//indexOf 搜索数组中的元素，并返回它所在的值
//lastIndexOf 返回它最后出现的位置
//isArray 判断是否是一个数组
console.log(Array.isArray(arr8[0]))
// if (typeof arr8[0]==="object"&&Array.isArray(arr8[0])===false){
// console.log('是对象')
// }
//判断是否为对象object
console.log(typeof arr8[0]==='object'&&arr8[0].length===undefined)
console.log(typeof arr8[0]==='object'&&!arr8[0].length)
//弱类型转换 null undefined ‘’NaN 0 被转换为布尔值false
//join数组转字符
console.log(arr2.join())
//reverse 反转数组
console.log(arr2.reverse())
//反转字符串
let strA='a,b,c,d,e,f,g'
console.log(strA.split(',').reverse().join())
let strB='abcdefg'//gfedcba
console.log(strB.split('').reverse().join(''))
//map()映射
//pop() push() shift() unshift()
// reduceRight() 从右往左算
// slice()选取数组中的一部分，返回新数组
// some()检测数组中是否有元素符合的指定条件，跟includes相同
// sort() 对数组元素排序
let arr9=['Banana','Orange','Apple','Mango']
arr.sort()//默认按照字母升序排列
console.log(arr9)
let arr10=[8,7,45,3,9,97]
arr10.sort()
console.log(arr10)
//按照数字升序排列
arr10.sort((next,pre)=>next-pre)
console.log(arr10)
//数字降序排列
arr10.sort((next,pre)=>pre-next)
console.log(arr10)
// 随机生成
let arr11=['a','b','c','d','e','f','g','h','i','j','k']
console.log(arr.sort(()=>Math.random()-.5))
//toString()数组转字符串
//object
function able(){
console.log('正在打电动')
}
let gender='男'
let obj1={
name:'文勇君',
age:18,
bobbies:['王者','pvz','三国杀'],
able,
gender
// able:function () {
// console.log('正在打电动')
}
console.log(obj1.name)//最优
console.log(obj1['age'])
obj1.bobbies.map(item=>console.log(item))
// map有返回值，会生成一个新数组
// obj1.hobbies.forEach(item=>console.log(item))
// 后者更好
obj1.able()
var test=1
var test=2
var j=3
for (var j=0;j<arr11.length;j++){
console.log(j)//内存泄漏
}
console.log(j)
let test2=1
//let test2=2 let不允许重复声明
let m=3
for (let m=0;m<arr11.length;m++){
}
console.log(m)
//作用域：全局
//局部作用域 es6新增块级作用域
var n=1
function xxx() {
console.log(n)// undefined 暂时性死区，作用域内，一旦var let 声明了某变量 那么此作用域就不会向外查找该变量
var n //var 存在变量提升，作用域内，后面声明了某变量，则在面前也可以使用，只不过其值为undefined
n=2
console.log(n)//2
}
xxx()
console.log(n)//
let x=1
function yyy() {
console.log(x)//1
x=2
console.log(x)//2
}
yyy()
</script>
浙公网安备 33010602011771号