ホームページ > 記事 > ウェブフロントエンド > HTML5 の主な新しいタグのコード共有
HTML5 の主な新しいタグのコード共有
- 黄舟オリジナル
- 2017-03-30 13:12:252415ブラウズ
HTML5はじめに
HTML5 は、HTML4 の後の次世代の HTML 標準仕様です。いくつかの新しい要素と属性。新しいタイプのタグは、検索エンジンとセマンティック分析に有益であると同時に、小さな画面のデバイスや視覚障害のある人にとっても役立ちます。さらに、要約すると、次のような新しい機能も提供されます。 :
1. HTML4 の一部の廃止された要素タグと属性タグには、CSS によって置き換えられた 240cb830ca84ebaabbd07850110b414d や bacbf9e1ad7f40415ce1670e31edfee3 などの純粋な表示タグが含まれます。たとえば、新しい HTML タグのヘッダー、フッター、ダイアログ、サイド、図などを使用すると、以前の開発者は通常、ドキュメントをより意味的に作成できるようになります。これらの機能を実装します。
2. コンテンツと展開の分離b タグと i タグは以前とは異なります。太字または斜体のスタイルを設定する代わりに、u、フォント、センター、ストライクのタグが完全に削除されました
、メールアドレス、その他など。 HTML5 では、機械が認識できるタグでコンテンツにラベルを付ける方法である microdata も導入されており、全体として、これらの構造の改善により、コンテンツ作成者はよりクリーンで管理しやすくなりました。検索エンジンやスクリーン リーダーなどにとってより使いやすい Web ページ より多くの
メディア オブジェクトが object や embedTag にバインドされなくなりましたが、ビデオにはビデオ タグが含まれ、オーディオにはバインドされなくなりました。オーディオ タグ 5. ローカル ストレージ localStorage/sessionStorage/indexedDB などのブラウザ側のストレージ関数を追加しました
により、ブラウザでグラフィックを直接描画できるようになります 7. 新しい
API は、HTMLDocument インターフェイスと HTMLElement インターフェイスの新しい API 拡張機能を提供します(1) DOCTYPE
HTML5 の HTML 構文では、ドキュメントで DOCTYPE を宣言する必要があります。ブラウザが標準モードでページを表示できることを確認します。 宣言方法は次のとおりです。
<!DOCTYPE html>
大文字と小文字は区別されません。 (2) Charset
HTML5 の HTML 構文では、エンコーディング タイプを宣言する 3 つの形式があります。
stringの: トランスポートレベルで、HTTPインスタンスのヘッダーにContent-Typeを設定します。
ファイルの先頭に、Unicode バイト オーダー マーク (BOM) を設定します。この文字は、ファイルのエンコード方式の署名を提供します。
ドキュメントの最初の 1024 バイトで、charset 属性を持つメタ要素を使用してエンコード方法を宣言します。例: 。
(3) MathML と SVG
HTML5 の HTML 構文では、ドキュメント内で MathML (数学的マークアップ言語) および SVG (スケーラブル
ベクター グラフィックス) 要素を使用できます。たとえば、非常に単純な HTML ページには、svg 要素によって描かれた円が含まれています。 <!doctype html><title>SVG in text/html</title><p>
A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg></p>
Section 要素は、ページのドキュメント構造を分割する最も基本的で主要な構造要素であり、主に Web サイトを整理するために使用されます。または アプリケーション内のページのコンテンツは階層的に分かれています。通常、セクション要素はコンテンツとそのタイトルで構成されます。
要素の内容をまとめて表示して対応する意味を表現できる場合にはarticle要素として定義することができ、section要素を使用する必要はありません。 セクション要素は一般的なコンテナ要素ではないため、要素で対応するスタイルまたはスクリプトを定義する必要がある場合は、セクションを使用することでこの要素のコンテンツを明確に表示できるようにすることをお勧めします。文書。
例: <!DOCTYPE Html><html><head> <title>Graduation Ceremony Summer 2022</title></head><body> <h1>Graduation</h1> <section> <h1>Ceremony</h1> <p>Opening Procession</p> <p>Speech by Validactorian</p> <p>Speech by Class President</p> <p>Presentation of Diplomas</p> <p>Closing Speech by Headmaster</p> </section> <section> <h1>Graduates</h1> <ul> <li>Molly Carpenter</li> <li>Anastasia Luccio</li> <li>Ebenezar McCoy</li> <li>Karrin Murphy</li> <li>Thomas Raith</li> <li>Susan Rodriguez</li> </ul> </section></body></html>article
article 元素代表文档、页面或应用程序中的所有“正文”部分，它所描述的内容应该是独立的、完整的、可以独自被外部引用的，可以是一篇博客、一篇报刊中的文章、一篇论坛帖子、一段用户评论、一个独立的插件，或任何独立于上下文中其他部分的内容。
article是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块。一般来说，article会有标题部分。
当article内嵌article时，原则上来说，内部的article的内容是和外层的article内容相关的。例如，一篇博客中，包含用户提交的评论的article应该嵌套在包含博客文章article中。
<article> <h1>Safari 5 released</h1> <p>7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC.</p> <p>Apple announced the release of Safari 5 for Windows and Mac......</p></article>nav
nav 元素是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。一个页面可以拥有多个nav元素，作为页面整体不同部分的导航。在nav元素中，一般以ul列表的形式来具体放置该组链接元素。
下面是w3c给出的一个示例代码：
<body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul> </nav> <article> <header> <h1> Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <p> <section id="public"> <h1>Public demonstrations</h1> <p> ...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... </p> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>© copyright 1998 Exampland Emperor</small></p> </footer></body>aside
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他有别于主要内容的部分。
根据目前的规范，aside元素有两种使用方法：
被包含在article中作为主要内容的附属信息部分，其中的内容可以是当前文章有关的引用，词汇列表等。
在article外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏，其中的内容可以是友情链接、附属导航或广告单元等。
下面的代码示例综合了以上两种方法：
<body> <header> <h1>My Blog</h1> </header> <article> <h1>My Blog Post</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <aside> <h1>Glossary</h1> <dl> <dt>Lorem</dt> <dd>ipsum dolor sit amet</dd> </dl> </aside> </article> <aside> <h2>Blogroll</h2> <ul> <li><a href="#">My Friend</a></li> <li><a href="#">My Other Friend</a></li> <li><a href="#">My Best Friend</a></li> </ul> </aside></body>hgroup
hgroup 元素是将标题及其子标题进行分组的元素。hgroup元素通常对h1~h6元素进行分组，如将一个内容区块的标题及其子标题划为一组：
<hgroup> <h1>Welcome to my WWF</h1> <h2>For a living planet</h2></hgroup><p>The rest of the content...</p>
header
header 元素是一种具有引导作用和导航作用的结构元素，通常用来放置整个页面或页面内的一个article元素或section元素的标题，也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。
我们可以使用该标签来显示整个网页的标题部分：
<header> <h1>The most important heading on this page</h1></header>同一个页面内，每一个内容区块都可以有自己的header元素，例如：
<header> <h1>The most important heading on this page</h1></header><article> <header> <h1>Title of this article</h1> </header> <p>...Lorem Ipsum dolor set amet...</p></article>footer
footer 元素可以作为其上层父级内容区块或一个根区块的脚注。footer 元素通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。
过去(及目前)，我们通常使用类似下面这样的代码来写页面的页脚：
<p id="footer"> <ul> <li>copyright</li> <li>sitemap</li> <li>contact</li> <li>to top</li> </ul><p>在HTML5中，我们可以不使用p，而用更加语义化的footer来写：
<footer> <ul> <li>copyright</li> <li>sitemap</li> <li>contact</li> <li>to top</li> </ul></footer>在同一个页面中可以使用多个footer元素，即可以用作页面整体页脚，也可以作为一个内容区块的结尾，例如，我们可以将footer直接写在section或是article中：
<section> Section content appears here. <footer> Footer information for section. </footer></section><article> Article content appears here. <footer> Footer information for article. </footer></article>address
address元素用来在文档中呈现联系信息，包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等；address不只是用来呈现电子邮箱或真实地址这样的“地址”概念，而应该包括与文档创建人相关的各类联系方式信息。
根据以上定义，我们可以使用下面的代码来展示一些志愿者的名字及主页链接：
The HTML5 Doctor is run by the following group of volunteers:<address> <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>, <a href="http://html5doctor.com/author/richc">Rich Clark</a>, <a href="http://html5doctor.com/author/miker">Mike Robinson</a>, </address>
下面是另一个范例：
<footer> <p class="vcard"> by <address class="author"> <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em> </address> on <time datetime="2009-11-04" class="published updated">November 4th, 2009</time> </p></footer>video
通过39000f942b2545a5315c57fa3276f220标签，我们可以抛弃最近不怎么讨好的Flash，直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式，但该元素标签同样支持音频与图片。
过去(及目前)，我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中，但这种方式要求浏览器安装有Flash插件，并支持JavaScript：
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed></object>
HTML5的方式：
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> <p> Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead. </p></video>39000f942b2545a5315c57fa3276f220标签有如下几个常用属性：
Autoplay: 用来设定视频是否在页面加载后自动播放。
Src: 为视频指定文件链接或下载路径，当浏览器不支持39000f942b2545a5315c57fa3276f220标签或发生某种播放错误时，可以提供给用户进行下载。
Autobuffer: 用来设定视频是否自动缓冲；如果设定，那么页面加载之后，视频会自动下载缓冲，当用户点击播放按钮后，至少已经有一部分视频可以直接观看而无需等待了。
Poster: 用来为视频设置一个“相框默认图片”性质的背景图片；当视频无法正常加载播放时可以向用户呈现。
Controls: 用来设置是否为视频添加控制条，例如“播放”、“暂停”等；控制条的外观可以自定义。
Loop: 用来设置视频是否循环播放。
Width , Height: 用来控制视频的宽度与高度。
audio
HTML5中的新元素标签b97864c2e0ef2353a16c4d64c7734e92是被大家等待已久的，它有原生支持音频播放的功能，而不需要浏览器安装额外的扩展
b97864c2e0ef2353a16c4d64c7734e92元素标签的一些常用属性：
src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：设置是否显示播放控制面板。
可以看到这些属性和39000f942b2545a5315c57fa3276f220元素标签的属性很类似。下面我们来看一个代码范例：
<audio src="elvis.ogg" controls autobuffer></audio>
根据定义规范，以下几种API方法是可以使用的：
play()：播放音频
pause()：暂停播放
canPlayType()：命令浏览器判断当前音频文件是否可以被播放
buffered()：设定文件需要缓冲部分的开始与结束时间点。
另外，我们可以使用e02da388656c3265154666b7c71a8ddc元素标签来配合b97864c2e0ef2353a16c4d64c7734e92；e02da388656c3265154666b7c71a8ddc用来指定多个音频文件，如果当前浏览器不支持第一个文件，那么b97864c2e0ef2353a16c4d64c7734e92会自动尝试播放下面一个e02da388656c3265154666b7c71a8ddc中指定的文件；我们还可以在它们后面加上目前常规的d8e2720730be5ddc9c2a3782839e8eb6代码来加载Flash播放器，作为后备方案；范例如下：
<audio controls autobuffer> <source src="elvis.ogg" /> <source src="elvis.mp3" /> <!-- now include flash fall back --></audio>
datalist
datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。
<input list="browsers"><datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"></datalist>
以上がHTML5 の主な新しいタグのコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。