【黑马程序员济南】前端与移动开发就业班笔记Html5:day01
什么是HTML5:
1. 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改 2.支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的傲游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力 3. HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式 4. 增加了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性,CSS3特性 5.相比之前的进步:取消了一些过时的HTML4标记,将内容和展示分离,一些全新的表单输入对象,全新的,更合理的Tag,本地数据库,Canvas 对象,浏览器中的真正程序,Html5取代Flash在移动设备的地位 6. 优点: a) 提高可用性和改进用户的友好体验; b) 有几个新的标签,这将有助于开发人员定义重要的内容; c) 可以给站点带来更多的多媒体元素(视频和音频); d) 可以很好的替代FLASH和Silverlight; e) 当涉及到网站的抓取和索引的时候,对于SEO很友好; f) 将被大量应用于移动应用程序和游戏; g) 可移植性好。 7.缺点:该标准并未能很好的被Pc端浏览器所支持。因新标签的引入,各浏览器之间将缺少一种统一的数据描述格式,造成用户体验不佳。 8.未来趋势 a) 移动优先 b) 游戏开发者领衔“主演”
HTML5中的新增标签 为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如:图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。 canvas 标签 | | | 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
多媒体 标签 | | | | | | | 定义多媒体资源 <video> 和 <audio> 字体 | | | | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
表单 标签 | | | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 | | | | |
语义和结构 HTML5提供了新的元素来创建更好的页面结构: 标签 | | | | | | | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 | | | | | | | | | | | | | | 定义 section 或 document 的页脚。 | | | | | | | | | | | | | | | | 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 | | | | | | |
三HTML中移除的标签: 以下的 HTML 4.01 元素在HTML5中已经被删除: <acronym> 字体兼容 <applet> java组件 <basefont> 字体 <big> <center> <dir> 目录 <font> <frame> <frameset> <noframes> <strike>
HTML中的语义标签 1. 传统页面的标签使用 2. HTML5页面中的标签使用,如: [HTML] 纯文本查看 复制代码 <body>
<header>定义了文档的头部区域</header>
<div>
<article>定义页面的侧边栏内容</article>
<aside>定义页面内容之外的内容</aside>
</div>
<footer>定义 section 或 document 的页脚</footer>
</body> 兼容处理: 1. 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了。 2. 处理方式:在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题(测试在IE下面的兼容性:ieTester软件的使用) [JavaScript] 纯文本查看 复制代码 <script src="../js/html5shiv.min.js"></script>
HTML5中表单新增的标签 1. <datalist>:与input配合使用:类似于拥有输入功能的下拉列表 file:///C:/Users/Somnus/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg 2. <keygen>:提供一种验证用户数据的可靠方法。在提交表单数据的时候,会生成两个键,一个私钥,一个公钥。私钥存储在本地,公钥发送到服务器。在需要做验证的时候,我们可以从服务器下载一个客户端证书,通过私钥和证书来实现相关的验证操作。 3. <meter>:度量器,可用于标示级别 属性 | | | | | | | | | | | | | | | | | 定义什么样的度量值是最佳的值。 如果该值高于 "high" 属性,则意味着值越高越好。 如果该值低于 "low" 属性的值,则意味着值越低越好。 | | | |
4. <output>:用于展示内容,只能展示,不能进行编辑
表单新增的属性 placeholder 占位符 autofocus 获取焦点 multiple 文件上传多选或多个邮箱地址 autocomplete 自动完成,用于表单元素,也可用于表单自身 form 指定表单项属于哪个form,处理复杂表单时会需要 novalidate 关闭验证,可用于<form>标签 required 验证条件,必填项 pattern 正则表达式 验证表单 [HTML] 纯文本查看 复制代码 autocomplete:属性规定表单是否应该启用自动完成功能。autocomplete 属性适用于 <form>,以及下面的 input 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。<br>
<form action="" autocomplete="on">
autofocus定位文本框焦点:<input type="text" autofocus> <br>
placeholder设置文本框默认提示:<input type="text" placeholder="请输入***"><br>
email邮件类型自带验证和提示:<input type="email"> <br>
required属性设置非空特性:<input type="tel" required><br>
pattern设置验证规则:<input type="tel" name="tel" required pattern="^(\+86)?1[358]\d{5}$"><br>
multiple多文件选择:<input type="file" multiple><br>
<input type="submit" value="提交"/>
</form>
表单的输入类型 a) email: 输入email格式 b) tel: 手机号码 c) url: 只能输入url格式 d) number: 只能输入数字 e) search: 搜索框 f) range: 范围,可以进行拖动,通过value进行取值 g) color :拾色器,通过value进行取值 h) time :时间 i) date:日期 不是绝对的 j) datetime: 时间日期 k) month: 月份 l) week: 星期 说明:部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。
表单新增的事件: oninput 用户输入内容时触发,可用于移动端输入字数统计 oninvalid 验证不通过时触发 [JavaScript] 纯文本查看 复制代码 <script>
/*oninput可以监听用户的每一次输入*/
document.getElementById("name").oninput=function(){
console.log(this.value);
}
/*监听键盘弹起,每一个键盘弹出触发一次*/
document.getElementById("name").onkeyup=function(){
console.log("---"+this.value);
}
/*当指定表单元素验证不通过时触发*/
document.getElementById("phone").oninvalid=function(){
console.log("验证不通过");
}
</script>
新增表单元素和属性的案例 效果图: file:///C:/Users/Somnus/AppData/Local/Temp/msohtmlclip1/01/clip_image004.jpg 代码 a)样式 [CSS] 纯文本查看 复制代码 <style>
*{
margin: 0;
padding: 0;
}
body{
max-width:600px;
margin: 0 auto;
}
form{
width:100%;
}
form fieldset{
padding:20px 20px 10px;
}
form fieldset label{
font-weight:bold;
line-height:20px;
}
form input,
form meter{
width:100%;
margin:10px 0;
display: block;
height:30px;
border: 1px solid #ccc;
padding-left:5px;
}
form meter{
width:100%;
border: none;
padding-left:0;
}
.btn{
width:100%;
height: 40px;
margin-top: 20px;
}
</style>
b) 结构 [HTML] 纯文本查看 复制代码 <body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入姓名" required>
<label for="phone">手机号码:</label>
<input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$">
<label for="email">邮箱地址:</label>
<input type="email" name="email" id="email">
所属学院:
<input type="text" list="school" name="college" id="college" placeholder="请选择">
<datalist id="school">
<option>移动与前端开发学院</option>
<option>IOS</option>
<option>andriod</option>
<option>c++</option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" step="1" name="score" id="score" value="0">
<label for="level">基础水平</label>
<!--通过low/high的值来设置meter的颜色-->
<meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></meter>
<label for="inTime">入学日期</label>
<input type="date" name="inTime" id="inTime">
<label for="leaveTime">毕业日期</label>
<input type="date" name="leaveTime" id="leaveTime">
<input type="submit" name="submit" id="submit" class="btn">
</fieldset>
</form>
<script>
/*通过score成绩的输入,动态修改meter的颜色*/
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
说明: 1.<fieldset>标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
多媒体 1.音频播放:audio标签的使用: a) 属性: autoplay | | | | | | | | | | | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | | | |
b)示例:播放音频 [HTML] 纯文本查看 复制代码 <audio src="../mp3/See.mp3" controls autoplay></audio>
3.视频播放:video标签的使用 a)属性: autoplay | | | | | | | | | | | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 | | | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | | | | | | |
b)视频播放 [HTML] 纯文本查看 复制代码 <video src="../mp3/561902ae6ac6e6649.mp4" controls></video>
c)说明:由于版权等原因,不同的浏览器可支持播放的格式是不一样的
file:///C:/Users/Somnus/AppData/Local/Temp/msohtmlclip1/01/clip_image006.jpg DOM扩展: 1. 获取元素: a) document.getElementsByClassName('class') 通过类名获取元素,以类数组形式存在。getElementsByTagName b) document.querySelector('selector')通过CSS选择器获取元素,符合匹配条件的第1个元素。 c) document.querySelectorAll('selector')通过CSS选择器获取元素,以类数组形式存在。 2. 类名操作: a) Node.classList.add('class')添加class b) Node.classList.remove('class')移除class c) Node.classList.toggle('class')切换class,有则移除,无则添加 d) Node.classList.contains('class')检测是否存在class 3. 自定义属性: a) 在HTML5中我们可以自定义属性,其格式如下data-*="",例如:data-info="我是自定义属性",通过Node.dataset['info'] 我们便可以获取到自定义的属性值。 b) 当我们如下格式设置时,则需要以驼峰格式才能正确获取:data-my-name="itcast",获取Node.dataset['myName'] 4. 小案例:tab标签页 1、 练习重点: i.获取元素的方式 ii.自定义属性的使用 iii.类名操作:如添加类样式,移除类样式 2、效果图 file:///C:/Users/Somnus/AppData/Local/Temp/msohtmlclip1/01/clip_image008.jpg 3、结构 [HTML] 纯文本查看 复制代码 <div class="tabs">
<div>
<a href="javascript:;" data-target="local">国内新闻</a>
<a href="javascript:;" data-target="global">国际新闻</a>
<a href="javascript:;" data-target="sports">体育新闻</a>
<a href="javascript:;" data-target="funny">娱乐新闻</a>
</div> <section class="cont active" id="local">
<ol>
<li>习近平向2名晋升为上将军官颁发命令状</li>
<li>郭声琨了解指导公安消防部队抗洪工作</li>
<li>媒体:曾任职中办的这位官员仕途有变</li>
<li>广西警方端掉地下兵工厂缴获大批炮弹</li>
<li>她完美诠释奇葩考题夺金牌</li>
<li>中国奥运选手在里约多次遭抢劫</li>
</ol>
</section>
<section class="cont active" 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>河南再次发生矿难,死伤人数超过10</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>
4、js代码 [JavaScript] 纯文本查看 复制代码 <script>
(function(key){
//1.获取所有a标签
var allA=document.querySelector(".tabs").querySelector("div:first-child").querySelectorAll("a");
//初始化操作
for(var i=0;i<allA.length;i++){
if(i==key){
allA[i].classList.add("active");
var active=allA[i].dataset["target"];
document.querySelector("#"+active).style.display='block';
}
//2.循环遍历所有的a标签,为其添加点击事件
allA[i].onclick=function(){
//3.判断当前是否是当前已激活的页,如果是,则不进行处理
if(this.classList.contains("active")){
return;
}
//4.否则,则需要找到当前a标签对应的data-target属性,利用这个属性找到对应id的section进行样式的设置,让其显示
//4.1先移除之前a标签的active类样式
var aActive=document.querySelector(".active");
aActive.classList.remove("active");
//4.2让之前显示的section隐藏
var currentTarget=aActive.dataset["target"]; document.querySelector("#"+currentTarget) .style.display ="none";
//4.3为其添加active样式
this.classList.add("active");
//4.4获取当前被点击的a标签的data-target属性
var value=this.dataset["target"];
//4.5让对应id的section显示--添加active类样式即可
document.querySelector("#"+value).style.display="block";
};
}
})(0);
</script> 如果你想了解更多黑马课程请点击这里,如果你想加入黑马这个大家庭学习先进技术,广交天下好友!
黑马程序员济南中心联系电话:0531-55696830
|