HTML5 Fundamental Syntax
2015-10-09 18:31
585 查看
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 Fundamental Syntax
HTML5 Fundamental Syntax
1 Adding Document Structure with HTML5’s New Elements
1.1 header
Is used to contain the headline(s) for a page and/or section . It can also containsupplemental information such as logos and navigational aids.
1.2 footer
Contains information about a page and/or section , such as who wrote it, links torelated information, and copyright statements.
1.3 nav
Contains the major navigation links for a page and, while not a requirement, isoften contained by header .
1.4 aside
Contains information that is related to the surrounding content but also existsindependently, such as a sidebar or pull-quotes.
1.5 section
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.1.6 article
Is used for self-contained content that could be consumed independently of the page as a whole, such as a blog entry.1.7 Modifying the Document Outline
You have a primary page title and tagline marked up with headings ( h1 and h2 , respec-tively), but you don’t want the tagline included in your document outline.<hgroup> <h1>HTML5, for Fun & Profit</h1> <h2>Tips, Tricks and Resources</h2> </hgroup>
In this example, only /h1/(the largest headline of those headlines) will be shown on the Document Outline.
2 Text
2.1 Emphasizing Text
You want to add emphasis or emphatic stress to text content.<p>My name is <em>Jane</em>, not John.</p>
2.2 Adding Importance to Text
You want to indicate a span of text that is important.<p><strong>Adding Importance to Text</strong></p>
2.3 Highlighting Text for Reference
You want to highlight the search term(s) in a list of search results.<p><mark>Highlighting Text</mark></p>
2.4 Marking Up Small Print
You want to offset a legal disclaimer and copyright statement as small print.<p><small>Small Print</small></p>
2.5 Defining Acronyms and Abbreviations
You want to provide expanded definitions for acronyms and abbreviations.<p>I love working with <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Roles</p> <p>I love working with <acronym title="Accessible Rich Internet Applications">ARIA</acronym> Roles</p><!--Not Support-->
3 Adding Links to Block-Level Content
You want to wrap your site logo and main heading with a single hyperlink.<a href="http://www.baidu.com"> <h1>HTML5, for Fun & Profit</h1> <img src="img/logo.png" alt="HTML5 for Fun and Profit" /> </a>
4 Marking Up Figures and Captions
You want to include an illustration with a caption on your web page.<figure> <img src="img/logo.png" alt="The logo of HTML5" /> <figcaption>The logo of HTML5</figcaption> </figure>
5 Marking Up Dates and Times
You want to encode date-time content for machines, but still retain human readability.<p>Published: <time datetime="2011-01-15" pubdate>January 15, 2011</time></p> <p>The class starts at <time datetime="08:00">8:00 am</time>.</p> <p>Registration opens on <time datetime="2011-01-15T08:00-07:00">January 15, 2011 at 8:00 am, Mountain Time</time>.</p> <p>Published: <time>2011-01-15</time></p>
I don't see what the diffience within an without <time>.
6 Setting the Stage for Native Expanding and Collapsing
You want to provide content that can expand and collapse with user focus (once browsers support it).<details> <summary>Upcoming Topics</summary> <p>For the new year, we have a great line up of articles!</p> <ul> <li>Understanding the Outline Algorithm</li> <li>When to Use <code>hgroup</code></li> <li>Machine Semantics with Microdata</li> </ul> </details>
7 Controlling the Numbering of Your Lists
You want an ordered list to have numbering different than the default of starting with 1.<ol start="2"> <li>Apple</li> <li>Bananas</li> <li>Oranges</li> </ol>
8 Hiding Content to Show Later
You have content that you want to hide until after a user logs in.<p hidden>You wouldn't see me if you don't log in.</p>
9 Making Portions of a Page Editable
You want to allow users to directly edit content in the browser.<article contenteditable> <h2>Stop <code>section</code> Abuse!</h2> <p>As the most generic of the HTML5 structural elements, <code>section</code> is often incorrectly used as a styling container, when <code>div</code> is more appropriate.</p> </article>
10 Setting the Stage for Native Drag-and-Drop
You want to allow users to drag and drop content on your web page.<h2 draggable="true">Block-Level Links</h2>
Author: mlhy
Created: 2015-10-09 五 18:31
Emacs 24.5.1 (Org mode 8.2.10)
相关文章推荐
- html5 实现输入框实时搜索
- HTML5 禁止表单提交
- HTML5实现摇一摇的功能
- MVC中基于Ajax和HTML5实现文件上传功能
- HTML5 css水平居中垂直居中
- HTML5必填项信息验证
- HTML5 WebSocket 详解
- placeholder 属性的兼容性
- html5和css3学习计划
- 移动h5 图片字体等适配
- 基于HTML5快速搭建3D机房设备面板
- HTML5本地存储详解
- HTML5获取地理位置定位信息
- 深入理解html5系列-文本标签
- HTML5上的LocalStorage基本用法
- HTML5之Canvas绘图实例——饼状图
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- 玩转html5<canvas>画图
- UC应用中心数据 HTML5应用添加近亿次
- HTML5/CSS3速成教程