HTML5旨在几乎可以在线进行任何内容,而无需下载浏览器插件或其他软件。雷竞技苹果下载官方版想要创建动画?嵌入音乐和电影?构建在浏览器中运行的高级应用程序?你可以用html5。
在这篇文章中,我们将涵盖你需要知道的关于HTML5的一切,包括:
什么是html5?
HTML5是最新版本超文本标记语言.这个词是指两件事。一个是更新的HTML语言本身,具有新的元素和属性。第二种技术是使用这种新版本的HTML的较大技术 - 如新的视频格式 - 并使您能够构建更复杂和强大的网站和应用程序。
为了理解这些年来HTML是如何演变的,让我们来看看HTML和HTML5之间的区别。
HTML和HTML5
HTML是万维网的核心标记语言。最初旨在语义描述科学文件,它已经发展到了更多的形容。
今天的大多数网页都是使用HTML4构建的。尽管HTML4比1993年编写的第一个HTML版本有了很大的改进,但它仍然有其局限性。最大的问题是,如果网页开发者或设计师想要在他们的网站上添加HTML不支持的内容或功能。在这种情况下,他们将不得不使用非标准的专有技术,如Adobe Flash,这要求用户安装浏览器插件。即便如此,一些用户也无法访问这些内容或功能。例如,iphone和ipad的用户就不能使用Flash,因为这些设备不支持Flash。
提示,HTML5。HTML5的设计是为了减少对那些非标准专有技术的需求。有了这个新版本的HTML,你可以创建离线工作的web应用程序,支持高清视频和动画,并知道你的地理位置。
为了理解HTML5是如何做到这一切的,让我们来看看这个最新版本的HTML有什么新功能。
HTML5有什么新特点?
HTML5设计有主要目标,包括:
- 制作代码更容易阅读用户和屏幕阅读器
- 减少HTML、CSS和JavaScript之间的重叠
- 促进浏览器的设计响应能力和一致性
- 支持多媒体而无需闪存或其他插件
这些目标中的每一个都反映了新版本HTML的变化。让我们关注下面的七个变化。
新的语义元素
HTML5推出了几个新的语义有意义的标签。这些包括<章节>,<标题>,
内联SVG
使用HTML4,你需要Flash, Silverlight或其他技术来添加可伸缩矢量图形(svg)到你的网页。使用HTML5,您可以使用
看笔用内联SVG绘制圆形形状由克里斯蒂娜百科(@hubspot.) 上Codepen..
表格特征
由于HTML5的展开表单选项,您可以创建更智能的表单。除了所有标准表单输入类型之外,HTML5还提供更多,包括:日期时间,日期函数,日期,月,周,时间,数字,范围,电子邮件和URL。您还可以通过新的占位符属性添加日期选择器,滑块,验证和占位符文本,我们将稍后讨论。
WebM视频格式
在HTML5之前,你需要浏览器插件来将音频和视频内容嵌入到网页中。HTML5不仅引入了
占位符属性
HTML5引入了占位符属性。您可以将其与元素一起使用,以提供一个简短提示,帮助用户填写密码或其他数据输入字段。这可以帮助您创建更好的表单。但是,需要注意的是,辅助技术不能访问此属性。请随意阅读更多关于占位符属性的问题.
服务器发送的事件
服务器发送的事件是Web页面自动从服务器获取更新的数据时。这是可能的HTML4可能的,但网页必须询问
HTML5支持单向服务器发送的事件。这意味着,数据从服务器持续发送到浏览器。如果您的网站包括股票价格,新闻源,Twitter源等,请考虑这将是有用的。raybetapp先前版本的HTML中支持服务器发送的事件,但网页必须重复请求。
本地Web存储
使用以前版本的HTML,数据通过cookie本地存储。使用HTML5,通过脚本API使用Web存储代替Cookie。这允许您在本地存储数据,如cookie,但数量大。
既然我们了解HTML5中的新功能,让我们来看看为什么你应该在网站上使用它。
为什么HTML5 ?
与以前的HTML版本相比,HTML5提供了广泛的优点——其中一些我们在上面已经简要提到了。让我们仔细看看HTML5如此特殊的几个原因。
它跨浏览器兼容。
所有主要浏览器都支持HTML5,包括Chrome,Firefox,Safari,Opera以及Chrome和Safari和Android浏览器的iOS。它甚至可以与互联网资源管理器这样的较旧的和不那么受欢迎的浏览器合作。这意味着与HTML5建立时,您知道用户在您的网站上有一致的体验,无论他们使用什么浏览器或是否在移动或桌面上。
它允许离线浏览。
HTML5允许你构建离线应用程序。支持HTML5离线应用程序的浏览器(大多数)将下载组成应用程序的HTML、CSS、JavaScript、图像和其他资源,并在本地缓存它们。reybet雷竞技下载然后,当用户尝试在没有网络连接的情况下访问web应用程序时,浏览器将呈现本地副本。这意味着如果用户丢失或没有活跃的互联网连接,你不必担心你的网站无法加载。
它允许您编写更清晰的代码。
有了HTML5新的语义元素,你就可以创建更清晰、更具描述性的代码库。在HTML5之前,开发人员必须使用许多通用元素,如div,并使用CSS样式来显示它们,如标题或导航菜单。结果呢?大量的div和类名使得代码更加难以阅读。
HTML5允许您编写更多的语义有意义的代码,这使您和其他读者能够分开样式和内容。
这是更容易。
还要感谢HTML5的新语义元素,您可以创建更可访问的网站和应用程序。在这些元素之前,屏幕读者无法确定具有类或ID名称“标题”的div实际上是标题。现在使用<标题>和其他HTML5语义标记,屏幕阅读器可以更清楚地检查HTML文件并为需要它们的用户提供更好的体验。
如何使用html5
要在您的网站上开始使用HTML5,建议您首先创建HTML模板。然后,您可以将其作为Boilerplate作为您未来的项目向前移动。这是一个基本模板的样子:
<!doctype html>
<头>
这是页面 title>的标题
时才需要
<风格>
/ *只有在添加内部CSS * /时,才需要这些样式标记
style>
head>
身体< >
这是一个标题 h1>
这是一个段落。 p>
body>
html>
让我们穿过逐行构建此文件的过程,以便您为Web项目创建一个HTML模板。你可以沿着使用基本的文本编辑器喜欢记事本++。
- 首先,将文档类型声明为HTML5。为此,您需要添加特殊代码在第一行。没有必要在这个声明中添加“5”,因为HTML5只是以前HTML标准的演变。
- 接下来,定义根元素。由于此元素发出了您要写的语言,因此在HTML5 Doc中始终将在中。
- 包括语言属性并在HTML元素的“打开”标记中定义它。如果没有语言属性,屏幕读者将默认为操作系统的语言,这可能导致页面上标题和其他内容的错误分子。指定属性将确保屏幕阅读器可以确定文档中的语言让您的网站更容易访问.因为我们是用英语写这篇文章,所以我们将文件的lang属性设置为“en”。
- 还要在打开的HTML标记中包含manifest属性。这指向应用程序的清单文件,它是web应用程序断开网络连接时可能需要访问的资源列表。reybet雷竞技下载这使得浏览器可以加载您的网站,即使用户丢失或没有互联网连接。
- 通过写一个开始的和结束的标签来创建文档的head部分。在头部,您将放置关于页面的元信息,这些元信息在前端是不可见的。
- 在“头部”部分中,将HTML5文档命名。将名称包装在
title>标记中。 - 在标题下面,添加元信息,指定浏览器在显示页面时应该使用的字符集。通常,用英文写的页面使用UTF-8,所以添加一行:。
- 下面,添加链接到您正在使用的任何外部样式表。如果你正在加载Bootstrap CSS.例如,在您的项目上,它将看起来像这样:<链接rel =“stylesheet”rel =“noopener”target =“_空白”href =“bootstrap / css / bootstrap.min.css”>。为了这个演示,我将包括一个虚拟链接和一个在HTML评论注意它是可选的。
- 现在通过写入和关闭 body>标记来创建文档的主体部分。主体部分包含在前端可见的所有信息,如您的段落,图像和链接。
- 在主体部分中,添加标题和段落。您将写出标题名称并将其包装在
h1>标签中,并在
p>标记中写出段落并将其包装。
- 最后,不要忘记HTML元素的结束标记。
完成后,您可以保存扩展名为.html的文件,并将其加载到浏览器中,以查看其外观。
HTML5什么时候出来?
Web超文本应用技术工作组(Whatwg)于2008年由Web超文本应用技术工作组(WHOWG)发布了第一个公共草案。然而,直到2014年10月28日,它并未作为全球网络联盟(W3C)推荐。然后将该建议合并Whatwg在2019年的HTML生活标准。
为了理解为什么规范过程跨越了10年,让我们来看看HTML5复杂的历史。
在HTML4发布后的1999年,W3C决定停止HTML的工作,转而专注于开发基于xml的等价的XHTML。四年后,随着人们开始意识到XML的部署完全依赖于RSS等新技术,人们对HTML的发展重新产生了兴趣。
2004年,Mozilla和Opera提议,HTML应继续在W3C研讨会上进化。当W3C成员拒绝提出的提议,支持继续开发基于XML的替代,Mozilla和Opera - Apple加入 - 推出了Web超文本应用技术工作组(Whatwg)以继续不断发展HTML。
2006年,W3C逆转课程并表示他们有兴趣参与HTML5规范的发展。一年后,一组群体与Whatwg合作。这两组团体在2011年才致以多年,当他们决定他们有两个独立的目标时。虽然W3C想要发布完整版本的HTML5,但WhatWG希望发布并不断为HTML提供生活标准。
2014年,W3C发布了“最终”版本的HTML5,WhatWG继续在其网站上维护“生活”版本。这两份文件于2019年合并,当时W3C和WHATWG签署了协议协作开发单一版本的HTML。
哪些浏览器支持HTML5?
所有主流浏览器的最新版本——包括谷歌Chrome、Opera、Mozilla Firefox、Apple Safari和Internet Explorer——都支持许多HTML5特性,但不是全部。目前,Chrome和Opera对HTML5的兼容性最强,Firefox和Safari紧随其后。Internet Explorer是最不兼容的,尽管它部分或完全支持HTML5的大部分特性。
下面是一个表来显示主要浏览器的不同兼容性。这是一个关键:
- ✓完全支持
- ≈部分支持
- ✗不支持
铬合金 | 歌剧 | Firefox. | 苹果浏览器 | IE浏览器 | |
新的语义元素 | ✓ | ✓ | ✓ | ✓ | ≈ |
内联SVG | ✓ | ✓ | ✓ | ✓ | ✓ |
扩展表单特征 | ✓ | ✓ | ≈ | ≈ | ≈ |
WebM视频格式 | ✓ | ✓ | ✓ | ≈ | ✗ |
占位符属性 | ✓ | ✓ | ✓ | ✓ | ≈ |
服务器发送的事件 | ✓ | ✓ | ✓ | ✓ | ✗ |
本地Web存储 | ✓ | ✓ | ✓ | ✓ | ✓ |
如果你想了解更多支持HTML5的浏览器版本的详细信息,请查看caniuse.com..
HTML5是万维网的未来
利用其新的语义元素,扩展表单选项,格式无关的视频标记等,HTML5正在彻底改变开发人员构建网页的方式。反过来,这是在线改变消费者的体验。我们现在可以观看视频,而不会被要求更新Flash或下载其他软件。雷竞技苹果下载官方版我们可以在没有互联网连接时使用应用程序。无论是使用手机,平板电脑还是智能电视,我们都可以在网站上拥有相同的伟大体验 - 以及更多。
最初发布于2月12日,2021年7:00:00,于5月24日更新
话题:
超文本标记语言别忘了分享这篇文章!
相关文章
扩大优惠
社交媒体内容日历模板
现在得到它