【个人学习笔记】走近H5
一、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的更多相关文章
- H5学习笔记1
H5学习笔记 1.创建超链接: target=”_blank”:链接的目标网页会在新的窗口中打开. target=”_parent”:链接的目标会在当前窗口中打开,如果在框架网页中,则会在上一层框架打 ...
- CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- springmvc学习笔记--支持文件上传和阿里云OSS API简介
前言: Web开发中图片上传的功能很常见, 本篇博客来讲述下springmvc如何实现图片上传的功能. 主要讲述依赖包引入, 配置项, 本地存储和云存储方案(阿里云的OSS服务). 铺垫: 文件上传是 ...
- springmvc学习笔记--Interceptor机制和实践
前言: Spring的AOP理念, 以及j2ee中责任链(过滤器链)的设计模式, 确实深入人心, 处处可以看到它的身影. 这次借项目空闲, 来总结一下SpringMVC的Interceptor机制, ...
- box2dweb 学习笔记--sample讲解
前言: 之前博文"台球游戏的核心算法和AI(1)" 中, 提到过想用HTML5+Box2d来编写实现一个台球游戏. 以此来对比感慨一下游戏物理引擎的巨大威力. 做为H5+box2d ...
- springmvc学习笔记--REST API的异常处理
前言: 最近使用springmvc写了不少rest api, 觉得真是一个好框架. 之前描述的几篇关于rest api的文章, 其实还是不够完善. 比如当遇到参数缺失, 类型不匹配的情况时, 直接抛出 ...
- Spring学习笔记--spring+mybatis集成
前言: 技术的发展, 真的是日新月异. 作为javaer, 都不约而同地抛弃裸写jdbc代码, 而用各种持久化框架. 从hibernate, Spring的JDBCTemplate, 到ibatis, ...
- spring学习笔记---Jackson的使用和定制
前言: JAVA总是把实体对象(数据库/Nosql等)转换为POJO对象再处理, 虽然有各类框架予以强力支持. 但实体对象和POJO, 由于"饮食习惯", "民族特色 ...
- MVC_学习笔记_2_Authorize
MVC5_学习笔记_2_Authorize/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) *//* Author: Nico ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
随机推荐
- 最简单的基于FFmpeg的编码器-纯净版（不包含libavformat）
===================================================== 最简单的基于FFmpeg的视频编码器文章列表: 最简单的基于FFMPEG的视频编码器(YUV ...
- 【Unity Shaders】《Unity Shaders and Effects Cookbook》总结篇
我的唠叨 不知不觉,从发表第一篇关于<Unity Shaders and Effects Cookbook>已经快十个月了.一开始的初衷就是学习笔记,毕竟将来回过头去看的时候,再看英文难免 ...
- (NO.00005)iOS实现炸弹人游戏(三):从主场景类谈起
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我又粗粗看了下整个项目的代码,比较多: 不少类都与其他类有着千丝 ...
- 1、MyEclipse插件配置以及通过MyEclipse生成表对应的JPA代码
去除MyEclipse插件的方式是打开:WindowàCustomize Perspective窗口进行插件配置: 取出下图中不常用的插件勾,最终点击OK. 3.点击OK之后显示的效果图如下: ...
- listview下拉刷新上拉加载扩展（二）-仿美团外卖
经过前几篇的listview下拉刷新上拉加载讲解,相信你对其实现机制有了一个深刻的认识了吧,那么这篇文章我们来实现一个高级的listview下拉刷新上拉加载-仿新版美团外卖的袋鼠动画: 项目结构: 是 ...
- JavaScript中的三种弹出对话框
学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性 ...
- mxgraph进阶(三)Web绘图——mxGraph项目实战(精华篇)
Web绘图--mxGraph项目实战(精华篇) 声明 本文部分内容所属论文现已发表,请慎重对待. 需求 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式 ...
- Oracle EBS R12多组织（多OU）访问架构
Oracle EBS R12多组织访问架构 多组织架构实现了经营单位(OU)的数据安全性,在底层数据表中有一列ORG_ID来记录数据所属的经营单一,所有多OU的基表都是以"_ALL" ...
- 一致性Hash算法介绍（分布式环境算法）
32的整数环(这个环被称作一致性Hash环),根据节点名称的Hash值(其分布范围同样为0~232)将节点放置在这个Hash 环上.然后根据KEY值计算得到其Hash值(其分布范围也同样为0~232 ...
- 40个比较重要的Android面试题
1. Android的四大组件是哪些,它们的作用? 答:Activity:Activity是Android程序与用户交互的窗口,是Android构造块中最基本的一种,它需要为保持各界面的状态,做很多持 ...