A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

【黑马程序员济南】前端与移动开发就业班笔记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
  
标签
  
描述
<canvas>
标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
多媒体
  
标签
  
描述
<audio>
定义音频内容
<video>
定义视频(video 或者 movie)
<source>
定义多媒体资源 <video> 和 <audio>  字体
<embed>
定义嵌入的内容,比如插件。
<track>
为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
表单
  
标签
  
描述
<datalist>
定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen>
规定用于表单的密钥对生成器字段。
<output>
定义不同类型的输出,比如脚本的输出。
语义和结构
HTML5提供了新的元素来创建更好的页面结构:
  
标签
  
描述
<article>
定义页面的侧边栏内容
<aside>
定义页面内容之外的内容。
<bdi>
允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command>
定义命令按钮,比如单选按钮、复选框或按钮
<details>
用于描述文档或文档某个部分的细节
<dialog>
定义对话框,比如提示框
<summary>
标签包含 details 元素的标题
<figure>
规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>
定义 <figure> 元素的标题
<footer>
定义 section 或 document 的页脚。
<header>
定义了文档的头部区域
<mark>
定义带有记号的文本。
<meter>
定义度量衡。仅用于已知最大和最小值的度量。
<nav>
定义运行中的进度(进程)。
<progress>
定义任何类型的任务的进度。
<ruby>
定义 ruby 注释(中文注音或字符)。
<rt>
定义字符(中文注音或字符)的解释或发音。
<rp>
在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section>
定义文档中的节(section、区段)。
<time>
定义日期或时间。
<wbr>
规定在文本中的何处适合添加换行符。
三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
number
定义度量的值位于哪个点,被界定为高的值。
low
number
定义度量的值位于哪个点,被界定为低的值。
max
number
定义最大值。默认值是 1。
min
number
定义最小值。默认值是 0。
optimum
number
定义什么样的度量值是最佳的值。
  
如果该值高于 "high"  属性,则意味着值越高越好。
  
如果该值低于 "low" 属性的值,则意味着值越低越好。
value
number
定义度量的值
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 效果,或者甚至可创建一个子表单来处理这些元素。
2.legend 元素为 fieldset 元素定义标题(caption)。

多媒体
1.音频播放:audio标签的使用:
a)        属性:
autoplay
autoplay
如果出现该属性,则音频在就绪后马上播放。
controls
controls
如果出现该属性,则向用户显示控件,比如播放按钮。
loop
loop
如果出现该属性,则每当音频结束时重新开始播放。
preload
preload
如果出现该属性,则音频在页面加载时进行加载,并预备播放。  
如果使用 "autoplay",则忽略该属性。
src
url
要播放的音频的 URL。
b)示例:播放音频
[HTML] 纯文本查看 复制代码
<audio src="../mp3/See.mp3" controls autoplay></audio>

3.视频播放:video标签的使用
a)属性:
  
autoplay
  
autoplay
如果出现该属性,则视频在就绪后马上播放。
controls
controls
如果出现该属性,则向用户显示控件,比如播放按钮。
height
pixels
设置视频播放器的高度。
loop
loop
如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload
preload
如果出现该属性,则视频在页面加载时进行加载,并预备播放。  
如果使用 "autoplay",则忽略该属性。
src
url
要播放的视频的 URL。
width
pixels
设置视频播放器的宽度。
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

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马