HTML5随笔

1 首先介绍一下html5,以及为什么用html5,

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 是下一代 HTML 标准。

2 再看一下html5的一些新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

3 html5的使用

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<![endif]-->

这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。

上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

4 接下来仔细介绍html5的具体功能

用于绘画的canvas元素这个也许是html5最炫的功能了，由于API比较多所以放在以后专门的随笔介绍。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

您的浏览器不支持Video标签。

</video>

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

<audio controls>

  <source src="horse.mp3" type="audio/mpeg">

您的浏览器不支持 audio 元素。

</audio>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。

新的语义元素

语义= 意义.

语义元素 = 元素的意义.

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如，

网页上的文章的标题就可以用标题标签，网页上的各个栏目的 栏目名称 也可以使用标题标签。

文章中内容的段落就得放在 段落标签 中，在文章中有想强调的文本，就可以使用em标签表示强调等等。

语义化的好处

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

3. 能够更好的体现页面的主题

4.兼容性更好，支持更多的网络设备

HTML5提供了新的语义元素来明确一个Web页面的不同部分:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8">

<title>aaron</title> 

</head>

<body>

<header>

    <h1>Internet Explorer 9</h1>

    <p><time pubdate datetime="2011-03-15"></time></p>

</header>

<nav>

    <a href="/html/">HTML</a> |

    <a href="/css/">CSS</a> |

    <a href="/js/">JavaScript</a> |

    <a href="/jquery/">jQuery</a>

</nav>

<section>

  <h1>WWF's Panda symbol</h1>

  <p>The Panda has become the symbol opanda named Chi Chi</p>

</section>

<article>

  <h1>Internet Explorer 9</h1>

  <p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>

</article>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

<footer>

  <p>Posted by: Hege Refsnes</p>

  <p><time pubdate datetime="2012-03-01"></time></p>

</footer>

</body>

</html>

下面是效果

<header>元素描述了文档的头部区域

<header>元素注意用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

根据W3C HTML5文档: section 包含了一组内容及其标题。

<article> 标签定义独立的内容。

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

aside 标签的内容应与主区域的内容相关.

<footer> 元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个 <footer>元素.

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption> 标签定义 <figure> 元素的标题.

表单相关

HTML5 拥有多个新的表单输入类型：color date datetime datetime-local email month number range search tel time url week

<input type="color" name="favcolor">

HTML5 有以下新的表单元素:<datalist> <keygen> <output>

<input list="browsers">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

<form>新属性：autocomplete novalidate

<form action="demo-form.php" novalidate>

  E-mail: <input type="email" name="user_email">

  <input type="submit">

</form>

<input>新属性：autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height与width list min与max multiple pattern placeholder required step

First name:<input type="text" name="fname" autofocus><!--自动聚焦-->

Web Storage

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

HTML5随笔的更多相关文章

一个HTML5培训班毕业生的找工作随笔
昨天刚参加完一个面试,通过了.写个随笔记录一下. 先介绍一下背景. 我是今年十月份的时候从某个培训机构的HTML5 Web前端培训班毕业的,是一个刚进入IT行业的新人. 本人毕业于某三流学校,在参加培 ...
开辟html5和css3学习随笔（2015-3-2）
1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
闲扯游戏编程之html5篇--山寨版《flappy bird》源码
新年新气象,最近事情不多,继续闲暇学习记点随笔,欢迎拍砖.之前的〈简单游戏学编程语言python篇〉写的比较幼稚和粗糙,且告一段落.开启新的一篇关于javascript+html5的从零开始的学习.仍 ...
html5 localStorage实现表单本地存储
随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!! 进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新 ...
HTML5 history API实践
一.history API知识点总结在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...
Ajax异步刷新地址栏url改变（利用Html5 history.pushState实现）
早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...
iOS 开发之路（使用WKWebView加载Html5）四
基于Swift 3 . Xcode 8 . iOS 10 下的WKWebView的使用. 首先是WKWebView的基本用法: var wk:WKWebView! var progBar:UIProg ...
HTML5系列二（标签元素、FileReader、拖放）
nav元素的使用场合页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来.nav元素是一个可以用来作为页面导航的链接组:其中的导航元素链接到 ...

随机推荐

winform学习日志（十九）----------真正三层架构之登录
摘要:一:三层构架的基础知识在项目开发的过程中,有时把整个项目分为三层架构,其中包括:表示层(UI).业务逻辑层(BLL)和数据访问层(DAL).三层的作用分别如下: 表示层:为用户提供交互操作界面, ...
分布式事务的管理--atomikos
在一些业务场景及技术架构下,跨库的事务时不可避免的,这时候如何统一管理事务,保证事务的强一致性是整个系统稳定.可用基石.一些中间件如tuxedo.cics就是凭借这个能力占据了金融.电信.银行等很大的 ...
Android日期时间选择器实现以及自定义大小
本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...
理解 PHP 中的 Streams
Streams 是PHP提供的一个强有力的工具,我们常常在不经意会使用到它,如果善加利用将大大提高PHP的生产力. 驾驭Streams的强大力量后,应用程序将提升到一个新的高度. 下面是PHP手册中对 ...
优化tomcat——jvm
Tomcat 的启动参数位于tomcat的安装目录\bin目录下,如果你是Linux操作系统就是catalina.sh文件,如果你是Windows操作系统那么你需要改动的就是catalina.bat文 ...
Use powerful plugins in your vim.
# setup by root wget http://prdownloads.sourceforge.net/ctags/ctags-5.8.tar.gz tar -xzvf ctags-5.8.t ...
Android开发之ADT导入Support Library
在工程中增加(例如 support-v4 Library) 在ADT中需要按照以下步骤: 1.右击当前工程,查找Properties 2.选择Java Build Path 3.选择Librarie ...
函数 buf_block_init
/********************************************************************//** Initializes a buffer contr ...
Nhibernate与Dapper对比，及Nhibernate增删改和9种查询语法
1,Sql语法. NH:HQL Dapper:原生Sql. 点评:原生Sql可以直接放在数据库里执行,Hql不行,且Hql增加学习负担.(Hn也可以原生Sql,但好像用的不多呀) 2,开发速度. NH ...
UVALive 3713 Astronauts （2-SAT，变形）
题意: 有A,B,C三种任务,每个人必获得1个任务,大于等于平均年龄的可以选择A和C,小于平均年龄的可以选择B和C.这些人有一些是互相讨厌的,必须不能执行同任务,问能否安排他们工作?若行,输出任意一组 ...

HTML5随笔

HTML5随笔的更多相关文章

随机推荐

热门专题