`

html5

阅读更多

HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a
programming language, but rather a markup language. This tutorial gives very good
understanding on HTML5.
HTML5 Overview
HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and
XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-and-drop that have been
previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight,
and Google Gears.
Browser Support:
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many
HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all
have excellent support for HTML5.
New Features:
HTML5 introduces a number of new elements and attributes that helps in building a modern
websites. Following are great features introduced in HTML5.
 
New Semantic Elements: These are like <header>, <footer>, and <section>.
Forms 2.0: Improvements to HTML web forms where new attributes have been
introduced for <input> tag.
Persistent Local Storage: To achieve without resorting to third-party plugins.
WebSocket : A a next-generation bidirectional communication technology for web
applications.
Server-Sent Events: HTML5 introduces events which flow from web server to the web
browsers and they are called Server-Sent Events (SSE).
Canvas: This supports a two-dimensional drawing surface that you can program with
JavaScript.
Audio & Video: You can embed audio or video on your web pages without resorting to
third-party plugins.
Geolocation: Now visitors can choose to share their physical location with your web
application.
Microdata: This lets you create your own vocabularies beyond HTML5 and extend your
web pages with custom semantics.
Drag and drop: Drag and drop the items from one location to another location on a
the same webpage.
Backward Compatibility
HTML5 is designed, as much as possible, to be backward compatible with existing web browsers.
New features build on existing features and allow you to provide fallback content for older
browsers.
It is suggested to detect support for individual HTML5 features using a few lines of JavaScript.
If you are not familiar with any previous version of HTML, I would recommend to go through our
HTML Tutorial before you explore further concepts of HTM5.
HTML5 Syntax
The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1
documents published on the Web, but is not compatible with the more esoteric SGML features of
HTML 4.
HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag
names, quoting our attributes,an attribute had to have a value and to close all empty elements.
But HTML5 is coming with lots of flexibility and would support the followings:
 
Uppercase tag names.
Quotes are optional for attributes.
Attribute values are optional.
Closing empty elements are optional.
The DOCTYPE:
DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based

and therefore required a reference to a DTD.
HTML 5 authors would use simple syntax to specify DOCTYPE as follows:
<!DOCTYPE html>
All the above syntax is case-insensitive.
Character Encoding:
HTML 5 authors can use simple syntax to specify Character Encoding as follows:
<meta charset="UTF-8">
All the above syntax is case-insensitive.
The <script> tag:
It's common practice to add a type attribute with a value of "text/javascript" to script elements
as follows:
<script type="text/javascript" src="scriptfile.js"></script>
HTML 5 removes extra information required and you can use simply following syntax:
<script src="scriptfile.js"></script>
The <link> tag:
So far you were writing <link> as follows:
<link rel="stylesheet" type="text/css" href="stylefile.css">
HTML 5 removes extra information required and you can use simply following syntax:
<link rel="stylesheet" href="stylefile.css">
HTML5 Elements:
HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle
brackets with the tag name in between.
The difference between start tags and end tags is that the latter includes a slash before the tag
name.
Following is the example of an HTML5 element:
<p>...</p>
HTML5 tag names are case insensitive and may be written in all uppercase or mixed case,
although the most common convention is to stick with lowercase.
Most of the elements contain some content like <p>...</p> contains a paragraph. Some
elements, however, are forbidden from containing any content at all and these are known as
void elements. For example, br, hr, link and meta etc.
HTML5 Attributes:
Elements may contain attributes that are used to set various properties of an element.
Some attributes are defined globally and can be used on any element, while others are defined
for specific elements only. All attributes have a name and a value and look like as shown below
in the example.
Following is the example of an HTML5 attributes which illustrates how to mark up a div element
with an attribute named class using a value of "example":
<div class="example">...</div>
Attributes may only be specified within start tags and must never be used in end tags.
HTML5 attributes are case insensitive and may be written in all uppercase or mixed case,
although the most common convention is to stick with lowercase.
HTML5 Document:
The following tags have been introduced for better structure:








section: This tag represents a generic document or application section. It can be used
together with h1-h6 to indicate the document structure.
article: This tag represents an independent piece of content of a document, such as a
blog entry or newspaper article.
aside: This tag represents a piece of content that is only slightly related to the rest of
the page.
header: This tag represents the header of a section.
footer: This tag represents a footer for a section and can contain information about the
author, copyright information, et cetera.
nav: This tag represents a section of the document intended for navigation.
dialog: This tag can be used to mark up a conversation.
figure: This tag can be used to associate a caption together with some embedded
content, such as a graphic or video.
The markup for an HTM 5 document would look like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
HTML5 Attributes
As explained in previous chapter, elements may contain attributes that are used to set various
properties of an element.
Some attributes are defined globally and can be used on any element, while others are defined
for specific elements only. All attributes have a name and a value and look like as shown below
in the example.
Following is the example of an HTML5 attributes which illustrates how to mark up a div element
with an attribute named class using a value of "example":
<div class="example">...</div>
Attributes may only be specified within start tags and must never be used in end tags.
HTML5 attributes are case insensitive and may be written in all uppercase or mixed case,
although the most common convention is to stick with lowercase.
Standard Attributes:
The attributes listed below are supported by almost all the HTML 5 tags.
Attribute Options Function
accesskey User Defined Specifies a keyboard shortcut to access an element.
align right, left, center Horizontally aligns tags
background URL Places an background image behind an element
bgcolor numeric, hexidecimal, Places a background color behind an element
        RGB values
class User Defined Classifies an element for use with Cascading Style
                  Sheets.
contenteditable true, false Specifies if the user can edit the element's content or
not.

分享到:
评论

相关推荐

    html5网站实例

    HTML5是现代网页开发的核心标准,它在原有HTML4的基础上引入了诸多新特性,极大地提升了网页的交互性和表现力。本实例将详细讲解如何利用HTML5来构建一个完整的网站,包括布局、登录功能以及内容展示。 一、HTML5的...

    html5介绍.ppt

    ### HTML5介绍 #### 什么是HTML5? HTML5是一种用于构建网页的标准标记语言,它不仅扩展了HTML4的功能,还引入了许多新特性来增强网页的表现力和交互性。HTML5的发展始于2004年,由WHATWG(Web Hypertext ...

    html5网站整站源码

    HTML5是下一代网页标准,它的出现极大地丰富了网页的表现力和功能,为开发者提供了更强大的工具和更多可能性。本资源包含一个"html5网站整站源码",这是一个基于HTML5技术构建的完整网站模板,适合用于学习和参考。...

    html5最终版规范pdf版

    HTML5是下一代超文本标记语言,它在2014年由W3C(World Wide Web Consortium,万维网联盟)正式发布最终规范。这个“html5最终版规范pdf版”包含的是HTML5完整且权威的标准定义,对于Web开发者来说,是理解和掌握...

    HTML5经典中文教程大全-从入门到精通-含html5案例代码

    HTML5经典中文教程大全 html5从入门到精通 含html5案例代码 HTML 5结构元素 这真是大快人心。目前,我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达...

    html5饼图、柱状图、折线图,Html5+JS开发

    HTML5是一种先进的网页标准,它在图形和交互性方面提供了许多增强功能,使得开发者能够创建出更加生动和富有表现力的网页应用。本资源包含了一系列使用HTML5和JavaScript技术实现的图表,包括饼图、柱状图和折线图,...

    html5播放rtsp视频流.zip

    HTML5是一种强大的网页开发技术,它提供了许多增强用户体验的功能,包括多媒体元素的处理。然而,HTML5原生并不支持RTSP(Real Time Streaming Protocol)视频流的播放,这是专为实时音视频传输设计的一种协议。为了...

    HTML5快速开发模板生成器

    HTML5快速开发模板生成器是一种高效工具,旨在帮助开发者迅速构建基于HTML5的网页项目,大大缩短了开发周期。HTML5作为现代Web开发的标准,引入了许多新的元素、API和功能,使得网页更具交互性和表现力。这个模板...

    HTML5参考手册大全7本合集.chm

    HTML5是现代网页开发的核心标准,它在HTML4的基础上进行了大量的改进和扩展,旨在提供更丰富的功能和更好的用户体验。这个“HTML5参考手册大全7本合集”包含了多个关于HTML5及其相关版本的手册,是学习和理解HTML5的...

    html5 个人网站源码

    HTML5是下一代网页标准,它在2014年正式成为W3C推荐标准,显著地增强了网页的交互性和表现力。此“html5个人网站源码”是一个理想的起点,尤其是对于初学者,想要了解和掌握HTML5的核心特性的实践应用。 首先,`...

    HTML5视频(MP4)播放器

    HTML5视频播放器是利用HTML5的`&lt;video&gt;`标签实现的一种网页内嵌式媒体播放功能。这个技术的出现使得开发者无需依赖Flash等第三方插件就能在网页上播放音频和视频,大大提升了用户体验,同时也降低了对浏览器兼容性的...

    html5+css3+JS代码

    HTML5、CSS3和JavaScript是构建现代网页和应用程序的核心技术,它们共同构成了Web开发的三驾马车。在本篇文章中,我们将深入探讨这三种技术的详细知识点,并结合《精通html5+css3+JavaScript页面设计》这本书中的...

    《HTML5开发精要与实例详解》配套源码

    此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔,内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点,几乎每个知识点都将配一个精心...

    html5课程设计

    HTML5是现代网页开发的核心标准,它在2014年被正式确立为W3C推荐标准,极大地推动了互联网内容的丰富性和交互性。HTML5的出现旨在解决早期HTML版本的一些局限性,并引入了许多新的元素、属性和API,使得开发者能够更...

    html5手机版问卷

    HTML5手机版问卷是一种基于Web技术实现的移动端调查工具,它利用HTML5的先进特性,为用户提供了一种在手机或平板电脑上填写问卷的便捷方式。本压缩包包含了一个基本的HTML5问卷模板,该模板设计简洁,易于理解和修改...

    html5 仿微信聊天界面

    HTML5技术在现代网页开发中扮演着至关重要的角色,它为构建交互性强、功能丰富的用户界面提供了强大的支持。"html5 仿微信聊天界面"项目就是利用HTML5特性实现的一个类似微信网页版的聊天界面。这个项目展示了如何...

    80个HTML5小游戏源码

    HTML5小游戏源码集合是一个非常宝贵的资源,尤其对于想要学习和提升HTML5游戏开发技能的开发者来说。这个压缩包包含了80个不同的小游戏,每个都是按照微信小游戏的标准和风格设计的,提供了丰富的实践素材和灵感来源...

    30个html5手机网站源码

    HTML5手机网站源码是现代网页开发的重要组成部分,尤其对于初学者来说,这些源码提供了宝贵的实践和学习机会。在本篇文章中,我们将深入探讨HTML5在手机网站开发中的应用,以及通过分析30个不同的手机网站源码,你...

    html5+css3课件打包

    HTML5和CSS3是现代网页开发的两大核心技术,它们共同为网页设计师和开发者提供了丰富的功能和优雅的样式控制。此“html5+css3课件打包”资源包含了从基础到高级的一系列课程材料,旨在帮助学习者全面掌握这两门语言...

    计算机毕业翻译文献(HTML5相关)

    描述:“毕业翻译文献资料HTML5相关,英文,题目为《The Future of Mobile E-health Application Development: Exploring HTML5 for Context-aware Diabetes Monitoring》” 知识点解析: 1. 移动E-health应用开发...

Global site tag (gtag.js) - Google Analytics