【HTML5】HTML5
HTML5 新元素
自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如:图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者,等。
<canvas> 新元素
标签 | 描述 |
---|---|
<canvas> | 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
新多媒体元素
标签 | 描述 |
---|---|
<audio> | 定义音频内容 |
<video> | 定义视频(video 或者 movie) |
<source> | 定义多媒体资源 <video> 和 <audio> |
<embed> | 定义嵌入的内容,比如插件。 |
<track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
新表单元素
标签 | 描述 |
---|---|
<datalist> | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 |
<keygen> | 规定用于表单的密钥对生成器字段。 |
<output> | 定义不同类型的输出,比如脚本的输出。 |
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:
标签 | 描述 |
---|---|
<article> | 定义页面独立的内容区域。 |
<aside> | 定义页面的侧边栏内容。 |
<bdi> | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 |
<command> | 定义命令按钮,比如单选按钮、复选框或按钮 |
<details> | 用于描述文档或文档某个部分的细节 |
<dialog> | 定义对话框,比如提示框 |
<summary> | 标签包含 details 元素的标题 |
<figure> | 规定独立的流内容(图像、图表、照片、代码等等)。 |
<figcaption> | 定义 <figure> 元素的标题 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义了文档的头部区域 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分。 |
<progress> | 定义任何类型的任务的进度。 |
<ruby> | 定义 ruby 注释(中文注音或字符)。 |
<rt> | 定义字符(中文注音或字符)的解释或发音。 |
<rp> | 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> | 定义文档中的节(section、区段)。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
HTML5新标签
<datalist> | 指定一个预先定义的输入控件选项列表 |
<keygen> | 定义了表单的密钥对生成器字段 |
<output> | 定义一个计算结果 |
IE9 以下版本浏览器兼容HTML5的方法,使用本站的静态资源的html5shiv包:
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif] -->
载入后,初始化新标签的CSS:
将 HTML5 元素定义为块元素
HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是块级 元素。
为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:
Internet Explorer 浏览器问题
你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是:
Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。 |
我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。
注意:国内用户请使用本站静态资源库(Google 资源库在国内不稳定):
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。
【HTML5】HTML5相关推荐
- 【翻译】HTML5开发——轻量级JSON存储解决方案Lawnchair.js
[翻译]HTML5开发--轻量级JSON存储解决方案Lawnchair.js 参考文章: (1)[翻译]HTML5开发--轻量级JSON存储解决方案Lawnchair.js (2)https://ww ...
- 【Demo】HTML5 拍照上传
本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...
- 【HTML】HTML5给网页音频带来的变化
[HTML]HTML5给网页音频带来的变化 引言 内容速递:看了本文您能了解到的知识! 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计 ...
- 【HTML】HTML5的介绍
[HTML]HTML5的介绍 学习完python基础以后,我们来了解一下 html 的相关知识,有助于我们以后对于爬虫内容的学习理解. 制作我们第一个网页 在我们进行正式学习之前,先来热热身,首先在桌 ...
- 【前端】HTML5+CSS3 CSS浮动(四)
文章目录 [前端]HTML5+CSS3 CSS浮动(四) 1.浮动的简介 2.浮动的特点 3.脱离文档流的特点 4.页面简单布局 5.实战小练习 [前端]HTML5+CSS3 CSS浮动(四) 1.浮 ...
- 【转】HTML5第一人称射击游戏发布
[CSON原创]HTML5第一人称射击游戏发布 功能说明: 游戏中在躲避敌人攻击的同时,需要收集三种不同的钥匙,开启对应的门,最后到达目的地. 该游戏同样基于自己开发的HTML5游戏框架cnGameJ ...
- 【Day05】Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5?
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...
- 【转】HTML5斯诺克桌球俱乐部【译】
[http://www.cnblogs.com/sxwgf/archive/2011/11/20/2256359.html] 不久前,我翻译了一些技术文章,放在我的博客上,没看过的且有兴趣的朋友可以去 ...
- 【04】HTML5+CSS3:01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...
- 【资源】HTML5工具篇:10个营销人也能轻松使用的在线编辑平台
一 3, 2015 in 资源 作者:Teeya 2014年,HTML5 页面作为营销界新宠儿,"多快好省"的杰出代表,其灵活性高.开发成本低且制作周期短的种种特性使其在移动营销领 ...
最新文章
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题...
- [architecture]-armv8-aarch64种的SIMD/FP指令介绍
- FastReport4.6程序员手册_翻译 转
- 阿里云中间件首席架构师李小平:云原生实践助力企业高效创新
- 用过 mongodb 吧, 这三个大坑踩过吗?
- 【计算机系统设计】重点 · 学习笔记(0)(数据通路设计思想)
- MyBatis : Mapper 接口以及 Example 使用实例、详解
- mysql引擎模式_mysql引擎,完整的见表语句,数据库模式, 常用数据类型,约束条件...
- springboot+vue+element+mybatisplus项目(前端)
- 难道千元机的品质真的不如旗舰机吗?
- c# 串口发送接收数据
- C++ 引用计数技术及智能指针的简单实现
- flash 围棋_17岁攻读剑桥计算机,围棋只有业余一段,研发阿尔法狗战胜柯洁
- C/C++和MFC的批处理特定文件
- 考勤统计,一张表查询每月的员工考勤数据
- Springboot—JpaRepository—【duplicate entry for key 】
- samsung 手机webview 加载https 页面不显示问题
- Feature Selective Anchor-Free Module for Single-Shot Object Detection论文阅读翻译 - 2019CVPR
- 基于SSM旅游纪念品购物网站(idea-javaweb-javaee-j2ee-springboot)订单管理-购物评价-会员管理-购物车实现
- 基于likeadmin管理后台搭建—通用CRM管理系统