1.知识点
- lang = “en” 所用语言是英文
- 文档结构更简洁
- IE8一下不支持h5c3
- 书写更宽松
- div没有语义
- 标签语义化:在合适的地方使用合适的标签
- 对seo优化友谊
- 网页经典布局
- 页头、导航、主题(左右)、页尾
- max-wifth、min-最大最小宽度
<!-- 头部 --> <div class="header"> <ul class="nav"></ul> </div> <!-- 主体部分 --> <div class="main"> <!-- 文章 --> <div class="article"></div> <!-- 侧边栏 --> <div class="aside"></div> </div> <!-- 底部 --> <div class="footer"></div>
H5经典网页布局
<!-- 头部 --> <header> <ul class="nav"></ul> </header> <!-- 主体部分 --> <div class="main"> <!-- 文章 --> <article></article> <!-- 侧边栏 --> <aside></aside> </div> <!-- 底部 --> <footer></footer>
语义化标签
header页头、nav导航、sectioc:区/块 aside侧边栏、article文章、footer页脚、figure媒介内容与分组(与ul>li做个比较)、
mark表示标记(带用UI)、progress进度、time日期
本质上新语义标签与<div>、<span>没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。
通过检测IE浏览器的版本来加载三方的一个JS库来解决H5兼容问题
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
表单
收集用户信息、H5自动验证表单、form表单、fieldset表单分组、legend表单名、
新增(兼容较差):email:邮箱、color:取色器、url:网址、
search:搜索栏(带有删除符号、手机端会显示键盘)、number:只能输入数值(step:步长)
tel:电话(没有自动验证)、time:时间、week:周、month:月、date:日期、
datetime:时间、range滑动条
部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。
表单元素(标签)
<datelist>数据列表 与input配合使用
<input type="text" list="data"> <datelist id="data"> <option>boy</option> <option>girl</option> <option>gay</option> </datelist>
<keygen> 生成加密字符串
<output> 不可当做数据提交?
<meter> 表示度量器,不建议用作进度条
<meter value="81" min="0" max="100" low="60" high="80" />
表单属性:
placeholder:提示文字(占位符,输入文字后,提示文字消失)
autofocus:自动获取焦点
autocomplete:on/off 自动匹配已经输入国的内容;
required:必填项
mulitiple:多选
novalidate:关闭表单自动验证功能(只能加给form)
pattern = “正则表达式” ; 自定义正则验证
<form action="" >
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名:<input type="text" placeholder="例如:李狗蛋" autofocus
name="userName" autocomplete="on" required/>
</label>
<label for="">
电话:<input type="tel" pattern="1d{10}" />
</label>
<!-- 上次文件-->
<input type="file" name="file" multiple/>
<input type="submit" formaction=“XXX.PHP/>
</fieldset>
</form>
表单事件:
oninput:一般用于字数统计 事件源.oninput
oninvalid:验证不通过的时候触发,用来设置验证不通过的时候提示文字 事件源.setCustomValifity("提示文字")
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <form action=""> <fieldset> <legend>表单事件</legend> <label for=""> 邮箱:<input type="email" name="" id="txt1"/> </label> <label for=""> 密码:<input type="text" name="" id="txt2"/> </label> <input type="submit" /> </fieldset> </form> <script> //表单事件: oninput 当用户输入的时候 // oninvalid 当验证不通过是触发 var txt1=document.getElementById('txt1'); var txt2=document.getElementById('txt2'); var num=0; txt1.oninput=function(){ num++; // 将字数显示在txt2中 txt2.value=num; } // oninvalid 当验证不通过是触发 // 一般用于设置验证不通过时的 提示文字 txt1.oninvalid=function(){ // 用于设置验证不通过时的 提示文字 this.setCustomValidity('亲,请输入正确的邮箱格式!'); } </script> </body>
多媒体:
之前在网页上播放多媒体必须依靠第三方插件
mediaplay/快播/false插件
H5新增音频视频标签
audio音频标签、video视频标签
controls:播放控制条
autoplay:自动播放
loop:循环播放
音频支持:mp3/wav/ogg
视频支持:mp4/ogg/webm/
<audio controls autoplay>
<source src = "music.mp3">
<source src = "music.ogg">
<source src = "music.wav">
抱歉,你的浏览器不支持音频标签
</audio>
DOM
类操作
var new = document.querySelector("选择器“);只会选择符合条件的第一个元素;
var newArr=document.querySelectorAll("选择器“);
box.classList.add("类名“) ;添加类名
box.classList.remove("类名“);删除类名
box.classList.toggle("class");切换class,有则删除无则添加
box.classList.contains("类名“);是否包含某个类名
自定义属性
在HTML5中我们可以自定义属性,其格式如下data-*="",例如
data-info="我是自定义属性",通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
Node.dataset是以类对象形式存在的
当我们如下格式设置时,则需要以驼峰格式才能正确获取
data-my-name="itcast",获取Node.dataset['myName']
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab 标签</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .tabs { 400px; margin: 30px auto; background-color: #FFF; border: 1px solid #C0DCC0; box-sizing: border-box; } .tabs nav { height: 40px; text-align: center; line-height: 40px; overflow: hidden; background-color: #C0DCC0; display: flex; } nav a { display: block; 100px; border-right: 1px solid #FFF; color: #000; text-decoration: none; } nav a:last-child { border-right: 0 none; } nav a.active { background-color: #9BAF9B; } .cont { overflow: hidden; display: none; } .cont ol { line-height: 30px; } </style> </head> <body> <div class="tabs"> <nav> <a href="javascript:;" data-cont="local">国内新闻</a> <a href="javascript:;" data-cont="global">国际新闻</a> <a href="javascript:;" data-cont="sports">体育新闻</a> <a href="javascript:;" data-cont="funny">娱乐新闻</a> </nav> <section class="cont" id="local" > <ol> <li>河感在生矿难,死伤在全10</li> <li>禽流感在感在广1处继续蔓延,温家宝指示</li> <li>南方大旱,农作物减产绝收面积上亩</li> <li>猪流感在广在全国暴发</li> <li>禽流感在全国多处继续蔓延,温家宝指示</li> <li>南方大旱,农作物减产绝收面积上亩</li> <li>猪流感在广东群体性暴发</li> </ol> </section> <section class="cont" id="global"> <ol> <li>河南再次发生矿难,死伤人数超过100</li> <li>禽流感次发生蔓延,温家宝指示</li> <li>南方大旱,农作物减产绝收面积上亩</li> <li>猪流感在广减产绝收发</li> <li>禽流感在全国多作物减产绝收面积上亩</li> <li>猪流感在广东群体性暴发</li> </ol> </section> <section class="cont" id="sports"> <ol> <li>333河南再次发生矿难,死伤人数超过100</li> <li>禽流感在全国多处农作物农延,温家宝指示</li> <li>南方大旱,农作物减产绝收面积上亩</li> <li>猪流感在广东群体性暴发</li> <li>禽流感在全农作物继续蔓延,温家宝指示</li> <li>南方大农作物减产绝收面积上亩</li> <li>猪流感在广东群体性暴发</li> </ol> </section> <section class="cont" id="funny"> <ol> <li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li> <li>四川原副省长李成云被查 5年前曾违纪又复出</li> <li>胡歌反对粉丝探班:以前请吃饭现在会黑脸</li> <li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li> <li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li> <li>国子监大街门匾现错字 已悬挂近10年(图)</li> <li>猪流感在广东群体性暴发</li> </ol> </section> </div> <script> // 目标: 默认显示一个 当前的样式 // 点击导航,实现切换 // key 表示的当前显示的是第几个 (function(key){ // 获取所有的导航 var navs=document.querySelectorAll('nav a'); // 遍历 给导航 绑定事件,并且添加当前样式 for(var i=0;i<navs.length;i++){ // 如果是用户指定的当前样式 if(key==i){ navs[i].classList.add('active'); // 拿到要显示内容section的id var secId=navs[i].dataset['cont']; // 获取对应的section标签 document.querySelector('#'+secId).style.display='block'; } // 给每一个导航绑定点击事件 navs[i].onclick=function(){ // 排他 // 之前有active样式的清除, 之前显示的section 隐藏 var currentNav=document.querySelector('.active'); // 获取对应的内容区域 ,让其隐藏 var currentId=currentNav.dataset['cont']; // 去掉导航的active 样式 currentNav.classList.remove('active'); // 对应的内容区域 document.querySelector('#'+currentId).style.display='none'; // 突出显示自己 导航添加样式 对应的section 显示 // 给自己添加active样式 this.classList.add('active'); // 对应的section模块显示出来 var myId=this.dataset['cont']; document.querySelector('#'+myId).style.display='block'; } } })(0); </script> </body> </html>