第一天H5学习
新的标签名
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header{
height: 100px;
background-color: #ddd;
}
main{
height: 300px;
width: 80%;
background-color: blueviolet;
margin: 0 auto;
}
footer{
height: 100px;
background-color: brown;
}
section{
width: 50%;
height: 100px;
background-color: chartreuse;
margin: 0 auto;
}
aside{
width: 50%;
height: 50px;
background-color: darkred;
}
article{
width: 50%;
height: 50px;
background-color: fuchsia;
}
</style>
</head>
<!--[if lte IE 8]>//cc:ie6+teb键 记得要放在head和body中间，不然ie不识别
<script src="js/html5shiv.min.js"></script>
<![endif]-->
<body>
<header>header头部</header><!--头部-->
<main>main主体<!--主体-->
<video src="movie/rabbit.ogg" autoplay loop controls>
</video>
<!--<audio src="music/郝云%20-%20活着.mp3"></audio>-->
<section>section内容<!--内容部分-->
<aside>aside边栏</aside><!--边栏-->
<article>article文章</article><!--文章-->
</section>
</main>
<footer>footer底部内容</footer><!--底部-->
<header></header>
<main><section>
<aside></aside>
<article></article>
</section></main>
<footer></footer>
</body>
</html>
data自定义属性
比如data-color 在js获取中的为伪数组,打印出来的是color
data在框架中比较常见
input标签的新属性
type="color" //颜色选择器
<input type="color"/>
type="Date" //日期选择器
<input type="date"/>
type="tel" //电话类型，在移动端会出现九宫格数字键盘
<input type="tel"/>
type="range" //小滑块
<niput type="range" man="100" min="0" value="50"><output>100</output>
//可进行设置一些基本属性设置
placeholder 占位提示
<input type="name" placeholder="请输入您的名字" required/>
required 判断表单元素内容是否为0
<input type="name" placeholder="请输入您的名字" required/>
pattern 正则表达式经行判断
<input type="tel" placeholder="请输入您的电话" id="del" required pattern="\d{4}"/>
新表单事件
oninput 表示移动的时候（输入的时候）触发
onchenge 表示移动停止时触发（range停止时）或者值改变时
oninvalid 表示表单验证失败时触发
多媒体属性
视频
<video src="movie/rabbit.ogg" autoplay loop controls>
<source src="movie/rabbit.ogg">
<source src="movie/rabbit.mp4">
</video>
autoplay表示页面开启时自动播放
loop表示重复播放
conteols表示显示控件
还有width和height，视频为等比例缩放
音频
<audio src="music/郝云-活着.mp4" autoplay loop controls>
<source src="music/郝云-活着.mp4">
<source src="music/郝云-或者.ogg">
</audio>
与视频差不多，只不过没有宽高设置
Dom元素获取方式
document.querySelector（“li”） 表示获取第一个li元素
document.querySelectorAll("li") 表示获取所有的li元素
括号也可以为类名或者id名
class的操作方式
dom.classList.add("类名"); 添加类名
dom.classList.remove("类名");移除类名
dom.classList.toggle("类名"); 切换类名
dom.classList.contain("类名");判断是否存在，返回值为true或false
