HTML5 was designed to do virtually anything you want to do online without having to download browser plugins or other software. Want to create animations? Embed music and movies? Build advanced applications that run in your browser? You can with HTML5.
In this post, we’ll cover everything you need to know about HTML5, including:
- what it is
- what’s the difference between HTML vs. HTML5
- what’s new in HTML5
- how to use HTML5
- when HTML5 came out
- which browsers support HTML5
什么是HTML5？
HTML5是最新版本HTML。该术语指的是两件事。一种是更新的HTML语言本身，具有新的元素和属性。第二个是与此新版本的HTML一起使用的较大的技术，例如新的视频格式 - 使您能够构建更复杂，更强大的网站和应用程序。
To understand how HTML has evolved over the years, let’s look at the differences between HTML and HTML5.
HTML vs HTML5
HTML is the World Wide Web's core markup language. Originally designed to semantically describe scientific documents, it has since evolved to describe much more.
今天大多数页面在web上使用HTML4建成。Although much improved since the first version of HTML written in 1993, HTML4 still had its limitations. It’s biggest was if web developers or designers wanted to add content or features to their site that weren’t supported in HTML. In that case, they would have to use non-standard proprietary technologies, like Adobe Flash, which required users to install browser plugins. Even then, some users wouldn’t be able to access that content or feature. Users on iPhones and iPads, for example, wouldn’t be able to since those devices don't support Flash.
Cue, HTML5. HTML5 was designed to cut out the need for those non-standard proprietary technologies. With this new version of HTML, you can create web applications that work offline, support high-definition video and animations, and know where you are geographically located.
To understand how HTML5 can do all that, let’s look at what’s new in this latest version of HTML.
What is new in HTML5?
HTML5设计的主要目标包括：
- Making code easier to read for users and screen readers
- Reducing the overlap between HTML, CSS, and JavaScript
- 促进浏览器之间的设计响应能力和一致性
- 支持多媒体无需闪光灯或其他插件
Each of these objectives informed the changes in this new version of HTML. Let’s focus on seven of those changes below.
新的语义元素
HTML5 introduced several new semantically meaningful tags. These include
Inline SVG
Using HTML4, you’d need Flash, Silverlight, or another technology to add scalable vector graphics (SVGs) to your web pages. With HTML5, you can add vector graphics directly in HTML documents using the
看到笔Drawing a Circular Shape with inline SVG克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot) onCodepen。
形式功能
由于HTML5的扩展表单选项，您可以创建更智能的表格。除了所有标准表单类型外，HTML5还提供更多，包括：DateTime，DateTime-Local，日期，月，周，时间，时间，范围，范围，电子邮件和URL。您还可以通过新的占位符属性添加日期选择器，滑块，验证和占位符文本，我们将在后面进行讨论。
WebM视频格式
Before HTML5, you needed browser plugins to embed audio and video content into web pages. Not only did HTML5 introduce
占位符属性
HTML5 introduced the placeholder attribute. You can use this with the element to provide a short hint to help users fill in passwords or other data entry fields. This can help you create better forms. However, it’s important to note that this attribute is not accessible to assistive technologies. Feel free to read more about the占位符属性的问题。
服务器范围事件
A server-sent event is when a web page automatically gets updated data from a server. This was possible with HTML4, but the web page would have to ask
HTML5支持单向服务器发送的事件。,我ans, data is continuously sent from a server to the browser. Think of how useful this would be if your website included stock prices, news feeds, Twitter feeds, and so on. Server-sent events were supported in the previous version of HTML, but the web page would have to repeatedly request it.
Local Web Storage
With the previous version of HTML, data is stored locally via cookies. With HTML5, web storage is used in place of cookies thanks to a scripting API. This allows you to store data locally, like cookies, but in much larger quantities.
既然我们了解新的HTML5,让我们take a look at why you should be using it on your website.
Why HTML5?
HTML5 offers a wide range of benefits over previous versions of HTML — some of which we’ve mentioned briefly above. Let’s take a closer look at just a few reasons why HTML5 is so special.
It’s compatible across browsers.
HTML5得到了所有主要浏览器的支持，包括Chrome，Firefox，Safari，Opera，以及Chrome和Safari和Android浏览器的iOS。它甚至可以与Internet Explorer这样的较旧且较不受欢迎的浏览器配合使用。这意味着，在使用HTML5构建时，您知道您的网站上都会有一致的体验，无论他们使用什么浏览器，或者无论是在移动设备还是在台式机上。
它可以脱机浏览。
HTML5 allows you to build offline applications. Browsers that support HTML5 offline applications (which is most) will download the HTML, CSS, JavaScript, images, and other resources that make up the application and cache them locally. Then, when the user tries to access the web application without a network connection, the browser will render the local copies. That means you won’t have to worry about your site not loading if the user loses or doesn’t have an active internet connection.
它允许您编写清洁器代码。
With HTML5’s new semantic elements, you can create cleaner and more descriptive code bases. Before HTML5, developers had to use a lot of general elements like divs and style them with CSS to display like headers or navigation menus. The result? A lot of divs and class names that made the code more difficult to read.
HTML5 allows you to write more semantically meaningful code, which enables you and other readers to separate style and content.
It’s more accessible.
Also thanks to HTML5’s new semantic elements, you can create websites and apps that are more accessible. Before these elements, screen readers could not determine that a div with a class or ID name “header” was actually a header. Now with the
如何使用HTML5
要开始在网站上使用HTML5，建议您首先创建HTML模板。然后，您可以将其用作未来所有项目的样板。这是一个基本模板的样子：
这是页面的标题
This is a Heading
这是一个段落。
让我们逐步逐步构建此文件，以便您可以为您的Web项目创建HTML模板。您可以使用一个basic text editor像记事本++。
- First, declare the type of document as HTML5. To do so, you’d add the special code on the very first line. There’s no need to add “5” in this declaration since HTML5 is just an evolution of previous HTML standards.
- Next, define the root element. Since this element signals what language you’re going to write in, it’s always going to be in an HTML5 doc.
- Include a language attribute and define it in the opening tag of the HTML element. Without a language attribute, screen readers will default to the operating system’s language, which could result in mispronunciations of the title and other content on the page. Specifying the attribute will ensure screen readers can determine what language the document is in and使您的网站更访问。Since we’re writing this post in English, we’ll set the file’s lang attribute to “en.”
- Also include the manifest attribute in your opening HTML tag. This points to your application’s manifest file, which is a list of resources that your web application might need to access while it’s disconnected from the network. This makes it possible for a browser to load your site even when a user loses or doesn’t have an internet connection.
- Create the head section of the doc by writing an opening and closing tag. In the head, you’ll put meta information about the page that will not be visible on the front end.
- In the head section, name your HTML5 document. Wrap the name in
tags. - Below the title, add meta information that specifies the character set the browser should use when displaying the page. Generally, pages written in English use UTF-8 so add the line: .
- Below, add links to any external stylesheets you’re using. If you’re loadingBootstrap CSSonto your project, for example, it will look something like this: . For the sake of this demo, I’ll include a dummy link and acomment in HTMLnoting that it’s optional.
- 现在，通过编写开口并关闭标签来创建文档的主体部分。身体部分包含所有在前端可见的信息，例如您的段落，图像和链接。
- 在身体部分中，添加标题和段落。您将写出标题名称并将其包装在
>
标签中，并写出段落并将其包装在
标签中。 - Lastly, don’t forget the closing tag of the html element.
When you’re done, you can save your file with the .html extension and load it into a browser to see how it looks.
When did HTML5 come out?
The first public draft of HTML5 was released by the Web Hypertext Application Technology Working Group (WHATWG) in 2008. However, it was not released as a World Wide Web Consortium (W3C) recommendation until October 28, 2014. This recommendation was then merged with the HTML Living Standard by WHATWG in 2019.
To understand why the specification process spanned over a decade, let’s look at the complicated history of HTML5.
In 1999, the year after HTML4 was released, the W3C decided to stop working on HTML and instead focus on developing an XML-based equivalent called XHTML. Four years later, there was a renewed interest in evolving HTML as people began to realize the deployment of XML relied entirely on new technologies like RSS.
2004年，Mozilla和Opera提出，HTML应该在W3C研讨会上继续发展。当W3C成员拒绝该提案以继续开发基于XML的替代品时，Apple加入了Mozilla和Opera，启动了Web Hypertext Application技术工作组（WHATWG），以继续发展HTML。
In 2006, the W3C reversed course and indicated they were interested in participating in the development of the HTML5 specification. A year later, a group was formed to work with the WHATWG. These two groups worked together for a number of years until 2011, when they decided they had two separate goals. While the W3C wanted to publish a finished version of HTML5, the WHATWG wanted to publish and continuously maintain a living standard for HTML.
2014年，W3C发布了他们的“最终”版本的HTML5版本，Whatwg继续在其网站上保持“生活”版本。这两个文件在2019年合并时W3C and WHATWG signed an agreementto collaborate on the development of a single version of HTML moving forward.
Which browsers support HTML5?
All the latest versions of major browsers — including Google Chrome, Opera, Mozilla Firefox, Apple Safari, and Internet Explorer — support many HTML5 features but not all. Currently, Chrome and Opera are the most compatible with HTML5, with Firefox and Safari following closely behind. Internet Explorer is the least compatible, although it partially or fully supports most HTML5 features.
Below is a table to show the varying compatibility of the major browsers. Here's a key:
- ✓ Fully supported
- ≈Partially supported
- ✗ Not supported
| Chrome | opera | Firefox | 苹果浏览器 | Internet explorer | |
| 新的语义元素 | ✓ | ✓ | ✓ | ✓ | ≈ |
| Inline SVG | ✓ | ✓ | ✓ | ✓ | ✓ |
| Expanded form features | ✓ | ✓ | ≈ | ≈ | ≈ |
| WebM video format | ✓ | ✓ | ✓ | ≈ | ✗ |
| 占位符属性 | ✓ | ✓ | ✓ | ✓ | ≈ |
| Server-sent events | ✓ | ✓ | ✓ | ✓ | ✗ |
| 本地网络存储 | ✓ | ✓ | ✓ | ✓ | ✓ |
If you want a more detailed breakdown of the different versions of browsers that support HTML5, check outcaniuse.com。
HTML5 is the Future of the World Wide Web
凭借其新的语义元素，扩展的表单选项，独立于格式的视频标签等等，HTML5正在彻底改变开发人员如何构建网页。反过来，这正在改变消费者的在线体验。现在，我们可以观看视频而无需要求更新Flash或下载其他软件。bob电竞官方下载当我们没有互联网连接时，我们可以使用应用程序。无论是使用手机，平板电脑还是智能电视，我们都可以在网站上拥有相同的出色体验。
Originally published Feb 12, 2021 7:00:00 AM, updated May 24 2021
话题：
HTML