认识html5

我们经常在电脑的文件资源管理器里面看见以“.htm”或“.html”为后缀名的文件。当双击它,以文本打开的时候,我们看见的是一行一行的代码,它的特点就是有很多的尖括号;当我们选择用浏览器打开的时候,看到的是一个有字、有图、有链接、有音频的网页。

由这种现象,我们可以想到,我们在浏览器上看到的网页,它是用一种带有很多“尖括号”的语言写成的。这种带有很多“尖括号”的语言称为“HTML语言”,简称 HTML。

什么是HTML?

HTML 的英文全称为“HyperText Markup Language”,中文名称为“超文本标记语言”。

HTML是一种用于创建网页的标准标记语言。HTML 之所以称为超文本标记语言,是因为其中包含了“超级链接”点——就是一种 URL 指针。通过点击它,可在浏览器上打开一个新的页面。

HTML是一种标准,它通过标记符号来标记要显示在网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。

什么是 HTML5?

HTML5 是 HTML 最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。HTML5 的设计目的是为了在移动设备上支持多媒体。

HTML5的新特性

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

HTML5的改进

  • 新元素
  • 新属性
  • 完全支持 CSS3
  • Video 和 Audio
  • 2D/3D 制图
  • 本地存储
  • 本地 SQL 数据
  • Web 应用

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:
- < acronym>
- < applet>
- < basefont>
- < big>
- < center>
- < dir>
- < font>
- < frame>
- < frameset>
- < noframes>
- < strike>

HTML5 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

一些疑问及解答

htm 与 html 的区别是什么?

htm是超文本标记(Hypertext Markup),html是超文本标记语言(Hypertext Markup Language)
。在大部分情况下,htm=html。这两种都是静态文件扩展名,可以互相更换而不发生错误(如将html改成htm,或将htm改为html)

为什么会产生 htm 和 html 两种扩展名?

htm 是来源于老的 8.3 文件格式,DOS 操作系统只能支持长度为三位的后缀名,所以是 htm,但在 windows 下无所谓 HTM 与 HTML,html 是为长文件名的格式命名的。所以 htm 是为了兼容过去的DOS命名格式存在的,在效果上没有区别的。以前 htm 和 html 作为不同的服务器上的超文本文件,但现在通用。

浏览器对html文件中的语法错误是否会有提示?

不会。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

HTML 5 特性 官方详细的文档是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性: • 语义化标记 • Form 表单增强功能 • 视频 / 音频 • 画布(Canvas) • 可编辑内容 • 拖放 • 稳健的数据存储 检测浏览器支持 在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走: • 何时能用 • 网页设计师的浏览器支持列表 • HTML5 测试 • 布局引擎对比 你还可以运行 Javascript(用Javascript 检测浏览器特性)来检测 HTML5 特性的支持。你还应该用用Modernizr: 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。 你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。 值得注意的变更点 除了新的特征,你还应该记下这些重要的变更点: • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:。它有意不使用版本,因此文档将会适用所有版本的HTML。 • 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang="en"> 将对 HTML5 有效。 • 简单易记的编码类型 你现在可以在 meta 标签中使用 "charset":<meta charset="utf-8″ /> • 不需要闭合标签 在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。 • 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp> 简单代码示例: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> </body> </html> 你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。 语义化标记 HTML5 新增的一些新标签除了不仅仅是更具语义的 标签的替代品,并不提供额外的功能。这些都是新增的标签:、、、、<header>,、、、、 和 。 这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+)支持。Javascript 提供了document.createElement(tagName) 的方法,让你可以用来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。 你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset: • HTML5 Reset CSS • Reset5 简单代码示例: 兼容 IE 的 HTML5 页面布局 <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> [removed][removed] <![endif]--> </head> <body> <header> Page Header Page Sub Heading </header> Home Projects Portfolio Profile Contact <header> Article Heading May 5th, 2010 </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <header> Section Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Section Footer: Pellentesque volutpat, leo nec auctor euismod <header> Section Heading </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. FigCaption: Club, Heart, Spade and Diamond Ut sapien enim, porttitor id feugiat non, ultrices non odio Section Footer: Pellentesque volutpat, leo nec auctor euismod est. Article Footer <header> Siderbar Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Page Footer </body> </html> 注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值