一、HTML5概述

1.HTML5新特性

兼容性（ie9+）、合理性、效率、安全性、分离、简化、通用性、无插件

2.HTML5构成

主要包括下面这些功能：Canvas（2D和3D）、Channel消息传送、Cross-document消息传送、Geolocation、MathML、Microdata、Server-Sent Events、Scalable Vector Graphics（SVG）、WEbSocket API及协议、Web Origin Concept、Web Storage、Web SQL database、Web Workers 、XMLHTTPRequest Level 2

二、编写第一个HTML5页面

1.检测浏览器是否支持HTML5

<head>

  <meta charset="UTF-8">

  <title></title>

  <style>

    #myCanvas{

      width:200px;

      height: 200px;

      background: red;

    }

  </style>

</head>

<body>

 <canvans id="myCanvas">该浏览器不支持HTML5的画布标记</canvas>

</body>

</html>

将该代码放在不支持HTML5的浏览器（ie8）中就会显示改行文字，而不会显示出样式

2.使用HTML5编写简单的web页面

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>第一个HTML5页面</title>

</head>

<body>

 <p>hello world！</p>

</body>

</html>

效果如下：

相比HTML4，根据HTML5设计化繁为简的准则，文档类型和字符说明都进行了简化。DOCTYPE声明是HTML文件中必不可少的，位于文件第一行

<!DOCTYPE html>
<html lang="en">

三、HTML5元素

1.新增结构元素（即新增的语义化标签元素）

header、footer、section、nav、aside、article

2.新增的功能元素

hgroup：用于对整个页面或页面中一个内容区块的标题进行组合

figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元

video、audio、embed

mark：在视觉上向用户呈现那些需要突出显示或高亮显示的文字。（比如搜索结果中的关键字）

time、canvas、output：表示不同类型的输出，比如脚本的输出

source：为媒体元素（比如video）定义媒体资源

menu：表示菜单列表，当需要列出表单控件时使用该标签

ruby：表示ruby注释

rt：表示字符的解释或发音

rp：在ruby注释中使用，以定义不支持ruby元素的浏览器所显示内容

wbr：表示软换行，与br的区别是，br白哦是此处必须换行，而wbr是浏览器窗口或父级元素足够宽时不进行换行，当宽度不够时，自动换行

command：表示命令按钮，如单选按钮，复选框或按钮。

details：表示用户要求得到并且可以得到的细节信息，可以与summary元素配合使用。summary元素提供标题或图例

datalist：表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表

datagrid：表示可选数据的列表，以树形列表的形式显示

Keygen：表示生成密钥

progress：表示运行中的进程，可以使用progress来显示JavaScript中耗费时间的函数进程

email、url、number、range、Data Pickers

3.HTML5中被废除的元素

能使用css代替的元素：basefont、big、center、font、s 、strike、tt、u

不在使用frame框架，支持iframe

只有部分浏览器支持的元素：applet、bgsound、blink、marquee

【个人学习笔记】走近H5的更多相关文章

  1. H5学习笔记1

    H5学习笔记 1.创建超链接: target=”_blank”:链接的目标网页会在新的窗口中打开. target=”_parent”:链接的目标会在当前窗口中打开,如果在框架网页中,则会在上一层框架打 ...

  2. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  3. springmvc学习笔记--支持文件上传和阿里云OSS API简介

    前言: Web开发中图片上传的功能很常见, 本篇博客来讲述下springmvc如何实现图片上传的功能. 主要讲述依赖包引入, 配置项, 本地存储和云存储方案(阿里云的OSS服务). 铺垫: 文件上传是 ...

  4. springmvc学习笔记--Interceptor机制和实践

    前言: Spring的AOP理念, 以及j2ee中责任链(过滤器链)的设计模式, 确实深入人心, 处处可以看到它的身影. 这次借项目空闲, 来总结一下SpringMVC的Interceptor机制, ...

  5. box2dweb 学习笔记--sample讲解

    前言: 之前博文"台球游戏的核心算法和AI(1)" 中, 提到过想用HTML5+Box2d来编写实现一个台球游戏. 以此来对比感慨一下游戏物理引擎的巨大威力. 做为H5+box2d ...

  6. springmvc学习笔记--REST API的异常处理

    前言: 最近使用springmvc写了不少rest api, 觉得真是一个好框架. 之前描述的几篇关于rest api的文章, 其实还是不够完善. 比如当遇到参数缺失, 类型不匹配的情况时, 直接抛出 ...

  7. Spring学习笔记--spring+mybatis集成

    前言: 技术的发展, 真的是日新月异. 作为javaer, 都不约而同地抛弃裸写jdbc代码, 而用各种持久化框架. 从hibernate, Spring的JDBCTemplate, 到ibatis, ...

  8. spring学习笔记---Jackson的使用和定制

      前言: JAVA总是把实体对象(数据库/Nosql等)转换为POJO对象再处理, 虽然有各类框架予以强力支持. 但实体对象和POJO, 由于"饮食习惯", "民族特色 ...

  9. MVC_学习笔记_2_Authorize

    MVC5_学习笔记_2_Authorize/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) *//* Author: Nico ...

  10. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

随机推荐

  1. android开发之AlertDialog点击按钮之后不消失

    最近有这样一个需求,我需要用户在一个弹出框里输入密码来验证,验证成功当然好说,但是如果验证失败则需要把alertdialog的标题改为"密码错误,请重新输入",并且这个alertd ...

  2. 安卓中的消息循环机制Handler及Looper详解

    我们知道安卓中的UI线程不是线程安全的,我们不能在UI线程中进行耗时操作,通常我们的做法是开启一个子线程在子线程中处理耗时操作,但是安卓规定不允许在子线程中进行UI的更新操作,通常我们会通过Handl ...

  3. SSH深度历险（二） Jboss+EJB的第一个实例

    学习感悟:每次学习新的知识,都会通过第一个小的实例入手,获得成就感,经典的Hello Workd实例奠定了我们成功的大门哈,这些经典的实例虽小但是五脏俱全呢,很好的理解了,Ejb的核心. 今天主要以这 ...

  4. Android开发学习之路--MediaPlayer之简单音乐播放器初体验

    很多时候我们都会用手机来播放音乐,播放视频,那么具体地要怎么实现呢,其实主要是MediaPlayer类来完成的.下面通过简单的例子来实现一首歌曲的播放吧.新建工程MediaPlayerStudy,这里 ...

  5. [rrdtool]监控和自动画图，简单的监控.md

    现在想要监控服务的流量和并发数,可是又没那么多时间来写系统,其他的运维系统又不熟悉,于是就用现有的rrdtool shell做了个简单的监控界面,临时用下,也算是个小实验把. rrdtool也是刚接触 ...

  6. javascript之DOM编程通过html元素的标签属性找节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Leetcode_112_Path Sum

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41910495 Given a binary tree an ...

  8. UIController子类控件&nbsp;UI_06

    1.UIImageView  是用来显示图片的控件,相当于相框,用来显示UIImage对象                //初始化UIImage对象及为其加载图片 //第一种方式 //    UII ...

  9. 下载Ext JS 5.1 gpl版本的方法

    先进入官网:http://www.sencha.com 然后在导航的Products中选择Sencha Ext JS,会看到以下页面: 这时候不要单击Download按钮,而是要单击导航中的DETAI ...

  10. （四十二）tableView的滑动编辑和刷新 -局部刷新和删除刷新 -待解决问题

    tableView的局部刷新有两个方法: 注意这个方法只能用于模型数据的行数不变,否则会出错. [self.tableView reloadRowsAtIndexPaths:<#(NSArray ...