（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新特性的使用的更多相关文章

  1. HTML学习笔记之HTML5新特性

    目录 1.拖放 2.画布 3.可伸缩矢量图形 4.地理定位 5.Web 存储 6.应用缓存 7.Web Worker 1.拖放 拖放是一种常见的特性,用于抓取对象以后拖到另一个位置,它是 HTML5 ...

  2. C++ 学习笔记（一些新特性总结3）

    C++ 学习笔记(一些新特性总结3) public.protected 和 private 继承 public 继承时,基类的存取限制是不变的. class MyClass { public: // ...

  3. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  4. [原创]java WEB学习笔记14：JSP的9 个隐含对象 及 JSP 的基本语法

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  5. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  6. Groovy学习笔记-Java 5新特性支持

    1.枚举enum enum CoffeeSize{ SHORT, SMALL, MEDIUM, LARGE, MUG } def orderCoffee(size){ print "Coff ...

  7. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  8. 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时，利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记：重要语法特性

    基于.net的分布式系统限流组件   在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...

  9. [原创]java WEB学习笔记75：Struts2 学习之路-- 总结 和 目录

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  10. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

随机推荐

  1. chrome浏览器模拟手机端：jquery click()点击无效解决方法

    $(".sku-wrap .ok").click(); chrome浏览器模拟手机端,在油猴插件中写JS代码,然后发现click()点击失效. 解决方法:jquery的click( ...

  2. QT中添加工具条QToolBar

    项目用的QT5.3,设计师中没有直接拖工具条的控件,那要怎么加工具条呢? 其实.ui文件是xml类型的文本文件,用uedit或记事本打开,找到之前有的工具条段落,复制粘贴一个,保存,再在vs中用设计师 ...

  3. CSS：margin和padding之谜

    margin外边距,padding内边距.光看书本的介绍,理解起来好费劲,那咱就举个荔枝:你家的保险箱,是那种镶在墙壁里的,保险箱与墙壁的距离就是margin,保险箱壁就是所谓的border,保险箱与 ...

  4. 使用JS判断不同的终端设备

    const ua: string = window.navigator.userAgent; const isWeixin: boolean = /MicroMessenger/i.test(ua); ...

  5. eregi

    eregi (PHP 4, PHP 5) eregi — 不区分大小写的正则表达式匹配 说明 int eregi ( string $pattern , string $string [, array ...

  6. shutil

    import shutil#功能是将db文件中的内容拷贝到haha这个文件中去,但是haha原有的内容会被清空#shutil.copyfileobj(open('db','r',encoding='u ...

  7. day46-python爬虫学习

    一.定义 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟 ...

  8. tensorflow estimator API小栗子

    TensorFlow的高级机器学习API(tf.estimator)可以轻松配置,训练和评估各种机器学习模型. 在本教程中,您将使用tf.estimator构建一个神经网络分类器,并在Iris数据集上 ...

  9. bash快捷方式

    cmd /k "cd /d E:/site/collect/"                                                            ...

  10. C++之 类型定义语句--typedef

    typedef的作用是给一个已经存在的数据类型起个别名. 使用的语法形式是:typedef   已有类型名  新类型名表;. 新类型名表中可以有多个标识符,它们之间用逗号分开,就是在一个typedef ...