HTML5(一) - 飄落的葉子

HTML5(一)

HTML5初识

HTML5是继htnl\html4.01后下一代，设计目的是为了在移动设备上支持多媒体，简单易学。
优点

提高可用性和改进用户的友好体验。
有几个新的标签，这将有助于开发人员定义重要的内容。
可以给站点带来更多的多媒体元素(视频和音频)。
可以很好的替代FLASH和Silverlight。
将被大量应用于移动应用程序和游戏。
可移植性好。

HTML5中移出的标签

<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>

HTML中的语义标签

<header> 定义了文档的头部区域
<nav> 定义导航链接的部分
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<footer> 定义 section 或 document 的页脚
<progress>定义任何类型的任务的进度
<section>定义文档中的节（section、区段）
<command>定义命令按钮，比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框，比如提示框
<summary>标签包含 details 元素的标题

HTML5 新的表单元素

<datalist> 元素规定输入域的选项列表，<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用 <input> 元素的列表属性与 <datalist> 元素绑定。

1 <!-- html5中的下拉菜单 -->
2     <input type="text" list="inp">
3     <datalist id="inp">
4         <option value="01">我会飞</option>
5         <option value="01">我会跑</option>
6         <option value="01">我会跳</option>
7     </datalist>

<output> 定义不同类型的输出，比如脚本的输出

1 <!--oninput 用户输入内容时触发，可用于移动端输入字数统计 -->
2     <!-- output  输出  name:你要操作的表单元素的变量   for:定义一个或者多个元素的输出域的元素 多个用空格隔开-->
3     <form oninput="x.value = parseInt(inp1.value) + parseInt(inp2.value)">
4         <input type="number" id="inp1" value="1"> +
5         <input type="nUmber" id="inp2" value="1"> =
6         <output name="x" for="inp1 inp2">2</output>
7     </form>

HTML5 新的表单属性

 1 <form action="">
 2         <!-- search  搜索框-->
 3         search Google:<input type="search" name="googlesearch">
 4  
 5         <input type="submit">
 6  
 7         <!-- 获取焦点  autofocus -->
 8         <input type="text" autofocus placeholder="在这里">autofocus
 9  
10         <!-- autocomplete 自动完成表单的验证，记录上次的结果 -->
11         <input type="text" placeholder="autocomplete">
12  
13         <!-- required 属性为必填项 
              novalidate给表单from添加后，表单验证失效-->
14         <!-- email  输入email格式 匹配@邮箱,只匹配@ -->
15         <input type="email" required placeholder="请输入邮箱">
16  
17         <!-- color 拾色器，通过value进行取值-->
18         <input type="color" value="red">color
19  
20         <!-- number  只能输入数字-->
21         <input type="number" placeholder="只能输入数字">
22  
23         <!--  date 日期 不是绝对的 允许你从一个日期选择器选择一个日期-->
24         <input type="date">date
25  
26         <!-- time 允许你选择一个时间 -->
27         <input type="time">time
28  
29         <!-- month 允许你选择一个月份 -->
30         <input type="month">month
31  
32         <!-- week 允许你选择周和年-->
33         <input type="week">week
34  
35         <!-- url 只能输入网址  https://www.baidu.com -->
36         <input type="url" name="" id="">url
37  
38         <!-- maxlength 最大长度 minlength 最小长度 -->
39         <input type="text" maxlength="7" minlength="3">maxlength minlength
40  
41         <!-- 匹配正则 pattern -->
42         <input type="text" pattern="^[0-9]{9}$">pattern
43  
44         <!-- range： 范围，可以进行拖动，通过value进行取值 -->
45         <input type="range" value="1" min="1" max="20" step="1" id="inp1">
46     </form>

HTML5表单新增的事件

oninput 用户输入内容时触发，可用于移动端输入字数统计
document.getElementById("name").oninput=function(){console.log(this.value);}

HTML5多媒体

Audio(音频)

controls 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）

loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
muted 如果出现该属性，则音频输出为静音

 1 <body>
 2     <!-- 支持 mp3、amr、ogg、wav、wma -->
 3     <audio loop controls id="audio1">
 4         <source src="audio/llh.amr">
 5         <source src="audio/llh.ogg">
 6         <source src="audio/llh.wav">
 7         <source src="audio/llh.wma">
 8         <source src="audio/llh.mp3">
 9     </audio>
10     <button id="btn1">make play</button>
11 </body>
12 <script>
13     var v = document.getElementById('audio1');
14     var btn1 = document.getElementById('btn1');
15     btn1.onclick = function () {
16         if (v.paused) {
17             v.play()
18         } else {
19             v.pause()
20         }
21     }

Video(视频)

controls 如果出现该属性，则向用户显示控件，比如播放按钮
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
muted 如果出现该属性，视频的音频输出为静音
height 设置视频播放器的高度
width 设置视频播放器的宽度
paused 属性，暂停(音视同用)
play() 开始播放方法(音视同用)
pause() 暂停播放方法(音视同用)

 1 <body>
 2     <!-- controls 视频控制按钮 -->
 3     <!-- HTML5 视频支持mp4、Ogg、webm -->
 4     <video src="video/captian .mp4" id="video1" controls>
 5         <!-- source 添加更多
 6         <source src='./video/captian.mp4'>
 7         <source>-->
 8     </video>
 9     <button id="btn1">make bigger</button>
10     <button id="btn2">make smaller</button>
11     <button id="btn3">make normal</button>
12     <button id="btn4">make play</button>
13 </body>
14 <script>
15     var v = document.getElementById('video1');
16     var btn1 = document.getElementById('btn1');
17     var btn2 = document.getElementById('btn2');
18     var btn3 = document.getElementById('btn3');
19     var plbtn4ay = document.getElementById('btn4');
20     btn1.onclick = function () {
21         v.width = '1000'
22     }
23  
24  
25     btn2.onclick = function () {
26         v.width = '100'
27     }
28  
29  
30     btn3.onclick = function () {
31         v.width = '350'
32     }//没有开始播放属性只有方法 play()
33     // paused  属性，暂停
34     //play()  开始播放方法
35     //pause()  暂停播放方法
36     btn4.onclick = function () {
37         if (v.paused) {
38             v.play()
39         } else {
40             v.pause()
41         }
42     }
43 </script>

处理兼容性问题 主要是ie9以下不兼容

1 <!--[if lt IE 9]>
2 　　<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
3 　　<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
4 <![endif]-->

posted on 2020-08-18 08:52 飄落的葉子阅读(127) 评论(0) 收藏举报

刷新页面返回顶部