一、HTML5 的新特性
HTML5
定义了 HTML
标准的最新版本,是对 HTML
的第五次重大修改;
两个概念:
1、HTML5
拓展了哪些内容
① 语义化标签
② 本地存储
③ 兼容特性
④ 2D、3D
⑤ 动画、过渡
⑥ CSS3 特性
⑦ 性能和集成
2、HTML5
的现状
HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性基本是 IE9+ 以上版本的浏览器才支持;
二、HTML5 新增属性
1、HTML5 新增的语义化标签
以前布局基本用 div 来做,但div 对于搜索引擎来说,是没有语义的。
新增的语义化标签:
- <body>
- <header> 头部标签 </header>
- <nav> 导航标签 </nav>
- <article> 内容标签 </article>
- <section> 定义文档某个区域 </section>
- <aside> 侧边栏标签 </aside>
- <footer> 尾部标签 </footer>
- </body>
- <div class=“header”> </div>
- <div class=“nav”> </div>
- <div class=“content”> </div>
- <div class=“footer”> </div>
注意:
这种语义化标准主要是针对搜索引擎的 ,这些新标签页面中可以使用多次 ,
在 IE9 中,需要把这些元素转换为块级元素;
语义化标签,在移动端支持比较友好;
2、HTML5 新增的多媒体标签
-
-
-
embed:标签定义嵌入的内容
-
audio:播放音频
-
video:播放视频
特点:
HTML5在不使用插件的情况下,也可以原生的支持音频格式文件的播放,可以很方便的在页面中嵌入音频和视频,而不再去使用 flash 和其他浏览器插件(flash常常崩溃)但支持格式有限;
1、多媒体 embed(会使用)
embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
因为兼容性问题,我们这里只讲解 插入网络视频, 后面H5会讲解 audio 和video 视频多媒体。
- <embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
2、视频:<video>
当前 <video>
元素支持三种视频格式: 尽量使用 mp4格式 ,低版本不支持:
(1)语法:
- <video src="文件地址" controls="controls" width="300" autoplay="autoplay" muted="muted"> </video>
- // 播放录像
- <video controls="controls" width="300">
- <source src="move.ogg" type="video/ogg" >
- <source src="move.mp4" type="video/mp4" >
- </ video >
(2)常见属性
属性 | 值 | 描述 |
src |
url |
视频url地址 |
controls |
controls |
播放控件 |
autoplay |
autoplay |
自动播放,谷歌默认muted |
loop |
loop |
循环播放 |
width |
pixelx(像素) |
播放器宽度 |
height |
pixelx(像素) |
播放器高度 |
preload |
auto(预先加载) none(不加载) |
预先加载(有autoplay忽略) |
poster |
imgurl |
加载等待的画面图片,默认第一帧 |
muted |
muted |
静音播放,谷歌默认 |
(3)案例:
- <style>
- video {
- width: 100%;
- }
- </style>
- <body>
- <video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/pic.jpg">
- </video>
- </body>
3、音频: <audio>
当前 <audio>
元素支持三种音频格式:主要是用mp3
(1)语法:
- <audio src="文件地址" controls="controls"></audio>
- < audio controls="controls" >
- <source src="happy.mp3" type="audio/mpeg" >
- <source src="happy.ogg" type="audio/ogg" >
- 您的浏览器暂不支持 <audio> 标签。
- </ audio>
(2)属性:
属性 | 值 | 描述 |
src |
url |
视频url地址 |
autoplay |
autoplay |
自动播放,谷歌默认muted |
controls |
controls |
播放控件 |
loop |
loop |
循环播放 |
谷歌浏览器把音频和视频自动播放禁止了;
3、多媒体
1、插入音频、视频和flash
语法:
- <embed src=”多媒体文件地址” width=””> </embed>
2、插入背景音乐
loop可选值:
Loop=”2”表示重复两次;
loop=”infinite”表示无限循环;
loop=”-1”无限次;
3、 HTML5 新增的 input 类型
1、新增类型
属性值 | 说明:限制用户输入的类型 |
type="email" |
邮件类型 |
type="url" |
地址类型 |
type="date" |
日期类型 |
type="time" |
时间类型 |
type="month" |
月份类型 |
type="week" |
周类型 |
type="color" |
生成一个颜色表单 |
type="number" |
数字类型(常用) |
type="tel" |
手机号码(常用) |
type="search" |
搜索框(常用) |
2、新增表单属性
属性 | 值 | 说明 |
required |
required |
表单拥有该属性表示内容不能为空,必填 |
placeholder |
提示文本 |
表单的提示信息,不占位 |
autofocus |
autofocus |
页面加载完自动聚焦到指定表单 |
autocomplete |
off/on |
当用户在字段键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项;默认打开,如 autocompplete="on"需要放在表单内,同时加name属性,成功提交 |
multiple |
multiple |
多选文件提交 |
- <style>
- /* 可以通过以下设置方式修改placeholder里面的字体颜色: */
- input::placeholder {
- color: pink;
- }
- </style>
- <body>
- <form action="">
- <ul>
- <li>数量:<input type="number"></li>
- <li>手机号码:<input type="tel"></li>
- <li>搜索:<input type="search"></li>
- </ul>
- </form>
- </body>
综合表单案例:
- <form action="">
- <fieldset>
- <legend>学生档案</legend>
- <label for="userName">姓名:</label>
- <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
- <label for="userPhone">手机号码:</label>
- <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
- <label for="email">邮箱地址:</label>
- <input type="email" required name="email" id="email"><br>
- <label for="collage">所属学院:</label>
- <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
- <datalist id="cList">
- <option value="前端与移动开发学院"></option>
- <option value="java学院"></option>
- <option value="c++学院"></option>
- </datalist><br>
- <label for="score">入学成绩:</label>
- <input type="number" max="100" min="0" value="0" id="score"><br>
- <label for="level">基础水平:</label>
- <meter id="level" max="100" min="0" low="59" high="90"></meter><br>
- <label for="inTime">入学日期:</label>
- <input type="date" id="inTime" name="inTime"><br>
- <label for="leaveTime">毕业日期:</label>
- <input type="date" id="leaveTime" name="leaveTime"><br>
- <input type="submit">
- </fieldset>
- </form>
三、广义的HTML5
广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
虽然 HTML5 的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势。
HTML5 MDN 介绍:
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
HTML标签附录
HTML大概有七八百个标签
属性 描述
- accesskey 规定激活元素的快捷键。
- class 规定元素的一个或多个类名(引用样式表中的类)。
- contenteditable 规定元素内容是否可编辑。
- contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
- data-* 用于存储页面或应用程序的私有定制数据。
- dir 规定元素中内容的文本方向。
- draggable 规定元素是否可拖动。
- dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
- hidden 规定元素仍未或不再相关。
- id 规定元素的唯一 id。
- lang 规定元素内容的语言。
- spellcheck 规定是否对元素进行拼写和语法检查。
- style 规定元素的行内 CSS 样式。
- tabindex 规定元素的 tab 键次序。
- title 规定有关元素的额外信息。
- translate 规定是否应该翻译元素内容。
-