WEB学习笔记14-HTML5新特性的使用
(1)定义文档类型声明
<!DOCTYPE html>
(2)定义页面编码
<!—HTML 4.01中定义的设置页面编码的方式-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!—HTML5中定义的设置页面编码的方式-->
<meta charset="UTF-8">
(3)样式和脚本文件的引用
当<link>元素的属性rel设置为stylesheet时,且type属性没有设置时,默认的type是text/css;在<script>元素中,如果type属性没有设置,则默认的type是text/javascript。
<link rel="stylesheet" href="/css/lib/base.css"/>
<script src="jquery.min.js"></script>
(4)HTML5中的新标签
- HTML5中的新标签:语义化标签、功能性标签以及新的输入控件类型.
如下是一个符合HTML5规范的页面结构,HTML5中新引入的语义化标签包括:section、article、aside、hgroup、header、footer、nav、figure及figcaption。功能性的标签,如<svg>、<canvas>、<audio>、<video>等
body>
<header id="header">...</header>
<nav id="navigation">...</nav>
<section id="main">...</section>
<aside id="sidebar">...</aside>
<footer id="footer">...</footer>
</body>
- HTML5中新增的标签属性
(1)<script>标签的async属性
<script>标签中有两个和脚本加载时机有关的属性,即async和defer。属性async是HTML5规范中新定义的属性,它表明脚本以异步的方式加载和执行.属性defer的作用是让脚本后置加载,相当于把脚本放置于页面最后面加载和执行。属性async的作用是让脚本异步加载和执行。两个属性的差别是:设置async属性后不能保证脚本按照顺序加载和执行,脚本加载完成后会立即执行,而设置defer的脚本还是会按照原有的顺序执行。因此,如果脚本执行之间有依赖关系,则不能使用async属性;如果页面中有内联的脚本依赖于加载的脚本,则不适合使用defer属性。
<!-- HTML 4.01规范中定义了defer属性 -->
<script src="file.js" defer="defer"></script>
<!-- HTML5规范中定义了async属性 -->
<script src="file.js" async="async"></script>
(2)<base>标签的target属性
<head>
<base target="_blank">
</head>
<!--属性target设置为_blank,单击页面上的超链接时会在新窗口打开。-->
(3)<input>和<textarea>中的placeholder、required及autofocus属性
输入控件上的这几个属性是非常有用的,增强了用户体验。有关这几个属性的具体功能,可以参考W3C官方的文档。
(4)标签上的自定义属性data–*。如下示例展示了自定义数据的定义和读取:
<ol>
<li id="byond_sea" data-length="2m11s">Beyond The Sea</li>
...
</ol>
//对应的读取和设置数据的方式如下:
var beyondSea = document.getElementById('byond_sea');
// 获取数据
beyondSea.dataset['length'];
// 设置数据
beyondSea.dataset['length'] = '3m11s';
注意:
(1)<i>、<b>、<u>和<small>这4个标签表示将包含的字符设置为斜体、黑体、下划线和小字体。标签<em>和标签<i>的默认样式一样,其语义为“强调”。标签<strong>和标签<b>的默认样式也是一样的,其语义为“重要”。
(2)<script>标签除了可以包含脚本代码之外,还可以包含用户自定义的数据块。在实际应用中,<script>标签包含的数据块有HTML模板、XML数据等。
不要使用HTML5中已废弃的标签和属性
(1)标签仅仅是为了设置外观,没有任何语义,而且这些标签可以使用CSS代替。
涉及的标签包括:<basefont>、<big>、<center>、<font>、<strike>和<tt>。
<basefont>标签定义文档中默认字体颜色、大小。
<big>标签设置文本的大字体。<big>标签设置文本的大字体
<center>用于将文本居中。应该使用CSS样式(text-align:center)设置文本居中。
<font>标签用于设置文本的字体样式。应该使用CSS样式中的字体设置相关样式。
<strike>标签定义加删除线的文本,可以使用CSS样式(text-decoration:line-through)实现相同的效果。如果为了表示“删除”语义,则可以使用<del>标签。
<tt>标签用于定义打字机文本。和<big>、<strike>及<font>标签一样,也是用于设置字体样式的标签。此标签的效果可使用CSS样式font-weight设置代替。
(2)标签破坏了可用性
该类标签包括:<frame>、<frameset>、<noframes>。
(3)标签很少被使用,能引起混淆或者是有更好的代替标签
该类标签包括:<acronym>、<applet>、<isindex>和<dir>。应该使用输入控件代替使用<isindex>标签。标签<acronym>、<applet>和<dir>对应的代替标签是<abbr>、<object>、<ul>。
如何处理浏览器的兼容问题
(1)让浏览器识别HTML5规范中的新标签
IE 8/IE 7/IE 6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下:
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
<!--浏览器支持新标签后,还需要添加标签默认的样式-->
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}
<!--html5shim的使用方法很简单,在页面的head部分添加框架的引用即可-->
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
(2)HTML5中新特性的向后兼容
(3)音频和视频的兼容
浏览器支持的音频格式的列表见表
从支持的格式来看,要让所有的浏览器可以播放<audio>元素上的音频,最佳的方式是提供MP3和Ogg_Vorbis两种格式,兼容代码如下:
<audio controls>
<source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>
<!-- 向后兼容代码:如显示提示信息、提供下载链接使用Flash播放器等 -->
浏览器不支持<code>audio</code>标签
</audio>
浏览器支持的视频格式的列表
从浏览器支持的视频格式来看,最佳的方式是提供WebM和MP4两种格式的视频,兼容代码如下:
<video controls>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<!—向后兼容代码: -->
<iframe width="480" height="360"
src="http://www.*****.com/embed/xzMUyqmaqcw rel=0"
frameborder="0" allowfullscreen></iframe>
</video>
WEB学习笔记14-HTML5新特性的使用的更多相关文章
- HTML学习笔记之HTML5新特性
目录 1.拖放 2.画布 3.可伸缩矢量图形 4.地理定位 5.Web 存储 6.应用缓存 7.Web Worker 1.拖放 拖放是一种常见的特性,用于抓取对象以后拖到另一个位置,它是 HTML5 ...
- C++ 学习笔记(一些新特性总结3)
C++ 学习笔记(一些新特性总结3) public.protected 和 private 继承 public 继承时,基类的存取限制是不变的. class MyClass { public: // ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- [原创]java WEB学习笔记14:JSP的9 个隐含对象 及 JSP 的基本语法
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- Groovy学习笔记-Java 5新特性支持
1.枚举enum enum CoffeeSize{ SHORT, SMALL, MEDIUM, LARGE, MUG } def orderCoffee(size){ print "Coff ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时,利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记:重要语法特性
基于.net的分布式系统限流组件 在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...
- [原创]java WEB学习笔记75:Struts2 学习之路-- 总结 和 目录
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
随机推荐
- Spvmn测试环境搭建及其安全性讨论
一.说明 这几天都在做设备的协议分析,然后看到有个叫Spvmn的不懂要怎么操作才能触发其操作过程,问了测试部的同事说也没有测试文档,自己研究了一下这里做个记录. 按我现在理解,各厂商有自己的私有协议. ...
- Netty(一)——Netty入门程序
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7447618.html 有兴趣的可先了解下:4种I/O的对比与选型 主要内容包括: Netty开发环境的搭建 ...
- Win10系列:C#应用控件进阶10
EllipseGeometry EllipseGeometry控件可以用于绘制椭圆,通过定义EllipseGeometry控件的Center属性确定椭圆的圆心坐标,使用此控件的RadiusX 和Rad ...
- Spring实现WebSocket通信
WebSocket是两个应用之间全双工的通信通道.WebSocket最常见的应用场景是实现服务器和基于浏览器的应用之间的通信. 浏览器中的javascript客户端开启一个到服务器的连接,服务器通过这 ...
- lr_场景设计之知识点-集合点、loadgenerator
1.controller原理 通过场景设计来模拟用户的真实操作并调用bugen中的脚本,再通过设置的压力机产生压力,在场景运行中实时监控用户的执行情况,tps,响应时间,吞吐量,服务器资源使用情况: ...
- 关于node_js的比较
node_js的比较是我自己初学遇到的第一个绕脑的事情. 在比较的函数多了之后,一些函数的调用和变量提升, 搞得自己头晕,有时候函数是没有返回值的,自己还在 用变量值去比较,实际上却是undefine ...
- 配置合适的Visual Studio 2017 开发环境(其它版本的也适用)
1.VS 安装完成后,可以重新配置合适的开发环境 第一步: 第二步: 第三步: 第四步:选择合适自己的开发环境 这里我选择常规,具体的可以看窗口右边的说明
- dom 及bom
BOM的全称为Browser Object Mode,中文名是浏览器对象模型.它的一些功能和特性如下:1. BOM提供了独立于内容而与浏览器窗口进行交互的对象2. 由于BOM主要用于管理窗口与窗口之间 ...
- python运算符与数据类型
python运算符 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 以下假设变量: a=10,b=20: ...
- PHP用post来进行Soap请求
最近调了一个Soap请求C# webservice的项目.网上坑不少. 使用原生的SoapClient库请求也是失败.只好用post来进行模拟了.代码贴出来,给大家参考一下. <?php nam ...