HTML5与微信开发(1)-HTML标签语法变化和使用概念
什么是HTML5
HTML5 是下一代 HTML 标准。
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5是如何发展的
HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
2012年12月17日 万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日 HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。
2012年12月27日至今 进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg也进行了改进,性能得到进一步提升。
HTML5新特新
HTML5 中的一些有趣的新特性:
1、用于绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素,比如 article、footer、header、nav、section
5、新的表单控件,比如 calendar、date、time、email、url、search
HTML5浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
HTML5与HTML4的区别
1、概念的变化:HTML5专注内容和结构,而不专注内容
<header>
<hgroup>导航数据</hgroup>
</header>
<nav>菜单</nav>
<article>
<h1>HTML5与微信开发(1)-HTML标签语法变化和使用概念</h1>
</article>
为什么这么说呢,之前我们写HTML代码时候,基本上是想怎么写就怎么写,只要是页面做的漂亮就行,没有什么规范。HTML5就不一样,HTML5 除了表示出规定的样式,还要注重内容和结构,而不注重外在的表现。外在的表现CSS就可以做的很好了,用不着HTML去做。以后我会单独拿出一个版块来介绍CSS,大家先不要着急。
还有一个大家有疑问了,我们使用HTML5做出的样式我们使用HTML4/4.0/4.1都能很好地实现,我们为什么还使用HTML5呢?这个内容到底专注到什么地方?
我就来给大家解释一下,比如我们上边这几行代码,里面的标签大家几乎都不认识,但是大家才应该也能猜到,< header>应该是头部,< nav>
应该是侧边栏菜单,< article>应该是内容。但是这些标签都不带样式,和一个div标签没什么区别,我们为什么不用div标签呢?大家想啊,我们使用div标签的时候是不是需要定义div的名称或者class才能定义div的样式,定义名称的时候根本就没有规范,有人命名header,有人命名head,有人直接命名toubu或者first……五花八门,什么样的也有,你说浏览器怎么去识别你编写的HTML的结构,怎么提取内容?所以说在HTML5中样式已经不是最重要的了,结构和内容才是最重要的。
2、声明与标签:HTML5更加的简洁
<1>HTML4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
>
</html>
<2>HTML5声明
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
</html>
简洁太多了,在学HTML的时候,除了,后面的那一大坨代码我都不知道是干什么的。我查了一下资料:
声明必须是 HTML 文档的第一行,位于 < html> 标签之前。
声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML,所以不需要引用 DTD。
HTML 5
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5语法标签
(1)不允许写的结束符的标签:area、basebr、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr
(2)可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th
(3)可以完全省略的标签:html、head、body、colgroup、tbody
HTML5新增标签
<article> 标记定义一篇文章
<aside> 标记定义页面内容部分的侧边栏
<audio> 标记定义音频内容
<canvas> 标记定义图片
<command> 标记定义一个命令按钮
<datalist> 标记定义一个下拉列表
<details> 标记定义一个元素的详细内容
<dialog> 标记定义一个对话框(会话框)
<embed> 标记定义外部的可交互的内容或插件
<figure> 标记定义一组媒体内容以及它们的标题
<footer> 标记定义一个页面或一个区域的底部
<header> 标记定义一个页面或一个区域的头部
<hgroup> 标记定义文件中一个区块的相关信息
<keygen> 标记定义表单里一个生成的键值
<mark> 标记定义有标记的文本
<meter> 标记定义 measurementwithin apredefinedrange
<nav> 标记定义导航链接
<output> 标记定义一些输出类型
<progress> 标记定义任务的过程
<rp> 标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示
<rt> 标记定义对rubyannotations的解释
<ruby> 标记定义 rubyannotations.
<section> 标记定义一个区域
<source> 标记定义媒体资源
<time> 标记定义一个日期/时间
<video> 标记定义一个视频
HTML5的简单示例
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>页面结构</title>
<style type="text/css">header,nav,article,footer {border:solid 1px #666;padding:5px} header{width:500px} nav{float:left;width:60px;height:300px} article{float:left;width:428px;height:300px} footer{clear:both;width:500px}</style>
</head>
<body><header><hgroup>导航相关数据</hgroup></header><nav>菜单</nav><article><h1>标题:HTML5专题视频教程</h1>发布日期:<time>19:00</time><time datetime="2013-2-14">情人节</time><p>测试相关内容</p></article><footer><address>地址:xx省xxx市xxx</address></footer>
</body>
</html>
HTML5与微信开发(1)-HTML标签语法变化和使用概念相关推荐
- 使用Html5+C#+微信 开发移动端游戏详细教程 :(三)使用html5引擎搭建游戏框架...
教程里的案例我们是通过H5游戏引擎开发,目前H5的游戏引擎比较好用的是白鹭,不过对于新手来说白鹭的开发环境和工具使用过于复杂,这里推荐一个国内大神编写的游戏引擎:lufylegend. 直接在页面引入 ...
- 使用Html5+C#+微信 开发移动端游戏详细教程 总目录
(一).序(关于作者创业失败的感想) (二).准备工作&开发环境 (三).使用html5引擎搭建游戏框架 (四).游戏中层的概念与设计 (五).游戏图像的加载与操作 (六).游戏界面布局与性能 ...
- 《HTML5移动应用开发入门经典》—— 2.4 HTML5中的HTML语法变化
本节书摘来异步社区<HTML5移动应用开发入门经典>一书中的第2章,第2.4节,作者:[美]Jennifer Kyrnin,更多章节内容可以访问云栖社区"异步社区"公众 ...
- html5标签云,TagCanvas - HTML5 Canvas技术开发的标签云动画
TagCanvas 是一个基于HTML5Canvas技术开发的标签云动画.还提供一个以jQuery插件形式实现的版本.它支持文本和图片两种格式,能够以 Sphere, hcylinder 或 vcy ...
- 微信开发语言和html的异同,微信小程序与HTML5的区别
原标题:微信小程序与HTML5的区别 沙漠风从前端开发的视角,为大家分析下微信小程序和HTML5与之间的主要区别 第一条是运行环境的不同 传统的HTML5的运行环境是浏览器,包括webview,而微信 ...
- HTML5的优势,语法变化以及基础常用标签
HTML的全称是Hyper Text Markup Language,也就是超文本标记语言,它是互联网上应用最广泛的标记语言 此篇着重介绍HTML5的优势,语法变化,以及常用标签所代表的意义方便大家记 ...
- 微信开发——开放标签
微信开发--开放标签 前期准备 前端 后端 前期准备 ①微信开放标签可以让第三方页面直接唤起App,避免了通过右上角浏览器中打开再唤起App的麻烦操作.一切按照官方文档说明开发. ②安装微信开发者工具 ...
- 微信开发HTML5轻游戏中的几个坑
发表于2014-07-25 09:40| 2384次阅读| 来源深海的博客| 7 条评论| 作者深海 游戏 微信 html5 产品设计 数据库 微信支付 微信开发者大会 摘要:基于微信开发的HTML5 ...
- 分享一个使用Java+HTML5,自己开发的功能——微信签到系统
使用Java+HTML5,自己开发的功能--微信签到系统. 主要分为三部分: 1.微信签到.关注公众后,输入签到,填写签到信息,签到完成. 2.签到信息在大屏显示 3.签到信息管理,例如获取所有签到人 ...
最新文章
- Lintcode42 Maximum Subarray II solution 题解
- CocoStudio 1.3和1.4.1导入Flash文件注意事项(转载并有修改)
- C#的修饰符作用的范围
- 软件测试Web数据分析工具HttpWatch安装
- java暂停的方法_Java使用join方法暂停当前线程
- 疯子的算法总结(九) 图论中的矩阵应用 Part 2 矩阵树 基尔霍夫矩阵定理 生成树计数 Matrix-Tree
- 树控件,多条件组合查询与混合数据源
- 同前端联调过程中遇到的坑
- java xml接口实例_Java访问WebService接口方法 , 返回xml数据,能根据 下面的能给我写个实例吗?略急...
- java实现马尔科夫链_java – 马尔可夫链文本生成
- 计算机游戏动漫制作自我鉴定,动漫设计专业自我鉴定
- 自考计算机应用技术题,全国自考计算机应用技术试题及答案解析-20210522014558.docx-原创力文档...
- 「Android」Lenovo K860 root脚本备忘
- mysql 建表结构_MySQL学习系列之二——创建表及对表结构的基本操作
- U盘刻录ubuntu系统
- UIControl 纠错
- 【VOLTE】VOLTE-通话信令流程
- 自我学习从阅读和记录开始
- MATLAB中.m文件命名规则
- android 系统wifi连接不上,安卓手机wifi连不上的处理操作
热门文章
- 使用NPOI 导出EXCEL,设置样式,字体等详细代码方法教程
- 【定制项目】【触摸屏一体机】【自启动运行】【M15 消防安全宣传】主要模块:视频 + 音频 + 图标 + 问答游戏
- 蜉蝣掘阅,麻衣如雪。心之忧矣,于我归说。2022.3.15 杭州
- Mysql数据库常用查询方法及演示(where条件查询、分页、排序等)
- 【python面向对象】类和对象(一)
- Pycharm小技巧(一) 快速删除空白行
- c#中快速解析和提取json字符串
- php用户登录注销,php开发中实现用户登录与注销的代码示例
- 通信报文中的校验方式
- 百度钱包、百付宝、baifubao接入支付的常见问题