HTML5プレビュー HTML/Xhtml Webページ制作-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5プレビュー HTML/Xhtml Webページ制作

PHP中文网

May 16, 2016 pm 04:44 PM

&quothtmlof要素できる供給書類プレビュー

原文: http://www.php.cn/ 著者: ラクラン・ハント翻訳者: zhaozy (3user.com) まとめ Web は常に進化しており、あらゆる面で HTML の限界を押し広げている、新しい Web サイトが毎日登場しています。HTML 4 が登場してから約 10 年が経ち、出版社は常に
オリジナルテキストの提供を求めています。 http://www.php.cn/
著者: Lachlan Hunt
翻訳者: zhaozy in 3user.com
概要
インターネットは常に進化し続けており、新しく創造的な Web サイトです。 HTML 4 が登場してからほぼ 10 年が経ち、パブリッシャーはより強力な機能を提供する新しいテクノロジーを常に探しています。、しかし、マークアップ言語とブラウザの制約により、道はでこぼこであることがよくあります。作成者にさらなる柔軟性と相互運用性を提供するために、マルチインタラクティブでエキサイティングな Web サイトやアプリケーションについては、HTML
5 では、フォームコントロール、アプリケーションプログラミングインターフェイス (API)、マルチメディア、構造化、セマンティクスなどのさまざまな機能が導入および強化されています。HTML 5 は 2004 年に開始され、は現在、W3C
HTML WG と WHATWG の共同の取り組みを通じて完全に実装されています。多くの主要なプレーヤーが W3C の取り組みに関与しています。最も注目すべきは、Apple、Mozilla、Opera、Microsoft の 4 つの主要なブラウザメーカーです。 ; さまざまな関心や専門知識を持つ他の機関や個人もいます。詳細な仕様を作成する作業はまだ進行中であり、議論されている機能についても、まだ長い道のりがあります。この記事では、将来変更される可能性を排除するものではありません。この記事では、現在のドラフトの主要な機能の概要を説明するだけです。構造

HTML 5 では、ページの構築を容易にするためのまったく新しい要素セットが導入されています。ほとんどのページは
HTML に基づいています。 4 ヘッダー、フッター、列などのさまざまな共通構造が含まれています。これらのブロックを p 個の要素で構成し、説明的な ID またはクラスを定義します。この図は、id 属性と class 属性を持つ p 要素でマークされた一般的な 2 列のレイアウトを示しています。これには、ヘッダーとフッターが含まれています。ヘッダーの下には水平ナビゲーションバーがあり、メインコンテンツには右側に記事 (記事) とサイドバー (サイドバー) が含まれています。現在の
HTML では、p 要素が多数使用されています。 4 バージョンには、これらのブロックを説明する明確なセマンティクスがありません。
HTML
5 では、これらの異なるブロックを表す新しい要素が導入されています。これらの p 要素は、header、nav、などの新しい要素で置き換えることができます。セクション、記事、サイド、フッター。

<body>
 <header>...</header>
 <nav>...</nav>
 <article>
 <section>
 ...
 </section>
 </article>
 <aside>...</aside>
 <footer>...</footer>
</body>

これらの新しい要素を使用すると、(

と比較して) いくつかの利点があります。 HTML 4)。タイトル要素 (h1 ～ h6) と一緒に使用すると、以前のバージョンの HTML
の 6 レベルを超えて、ネストされた章タイトルレベルをマークできます。この仕様には詳細なアルゴリズムが含まれています。これにより、構造化が考慮され、以前のバージョンとの下位互換性が保たれ、ユーザーがドキュメント内を移動できるように目次を生成できます。例:ネストされた章と h1 要素を使用します:

<section>
 <h1 id="Level-nbsp">Level 1</h1>
 <section>
 <h1 id="Level-nbsp">Level 2</h1>
 <section>
 <h1 id="Level-nbsp">Level 3</h1>
 </section>
 </section>
</section>

ここ現在のブラウザとの互換性を高めるために、他の見出しも使用できることに注意してください。 h1 要素の代わりに要素 (h2 - h6) を使用します。

ページ内の章を識別することで特別な章要素を使用する正確な目的は、ユーザーがこのページを簡単にナビゲートできるようにすることです。たとえば、ナビゲーションをスキップできます。クリエイターの場合、ドキュメントから冗長な p を削除し、より明白な要素に置き換えることで、ソースコードがより明確になり、書きやすくなります。 #p#header 要素はブロックのヘッダーを表します。「ヘッダー」にはブロックのタイトル以外のものが含まれる場合があります。たとえば、ヘッダーにはサブタイトル、過去のバージョン情報、または署名がすべて含まれます。

<header>
 <h1>A Preview of 
HTML
 5</h1>
 <p class="byline">By Lachlan Hunt</p>
</header>
<header>
 <h1 id="Example-nbsp-Blog">Example Blog</h1>
 <h2 id="Insert-nbsp-tag-nbsp-line-nbsp-here">Insert tag line here.</h2>
</header>

footer元素表示用上它的那个区块的脚部, 一个具代表性的 "脚部" 包括了这个区块的一些信息, 比如谁写了它, 链接到相关的文档, 版权信息等等.

nav元素表示一个导航链接的区块. 它同时适用于站点导航和目录.

<nav>
 <ul>
 <li><a href="/">Home</a></li>
 <li><a href="/products">Products</a></li>
 <li><a href="/services">Services</a></li>
 <li><a href="/about">About</a></li>
 </ul>
</nav>

aside元素为了存放和主要内容没有太大关系的内容, 是典型的标记提要内容方法.

<aside>
 <h1 id="Archives">Archives</h1>
 <ul>
 <li><a href="/2007/09/">September 2007</a></li>
 <li><a href="/2007/08/">August 2007</a></li>
 <li><a href="/2007/07/">July 2007</a></li>
 </ul>
</aside>

section元素表示了一份文档或是一个应用程序一般意义上的区块, 比方说章节.

<section>
 <h1 id="Chapter-nbsp-nbsp-The-nbsp-Period">Chapter 1: The Period</h1>
 <p>It was the best of times, it was the worst of times,
 it was the age of wisdom, it was the age of foolishness,
 it was the epoch of belief, it was the epoch of incredulity,
 it was the season of Light, it was the season of Darkness,
 ...</p>
</section>

(引用自)
article元素表示一份文档, 站点的页面中独立的区块. 它适用于类似新闻, blog文章, 论坛帖子或者个人注释这样的内容.

<article id="comment-2">
 <header>
 <h4>
 <a href="#comment-2" rel="bookmark">Comment #2</a>
 by <a href="Jack&#39;>http://www.php.cn/">Jack O&#39;Niell</a>
 </h4>
 <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p>
 </header>
 <p>That&#39;s another great article!</p>
</article>

视频和音频
在最近几年, 网络上的视频和音频日益增多, 像是youtube, Viddler, Revver, MySpace, 还有其他很多可以让任何一个人更容易的发布视频和音频的网站. 然而, 因为当前的HTML缺少必要的方法顺利的插入并控制多媒体, 很多网站都依赖Flash来提供这样的功能. 尽管可能可以用各种各样的插件 (就像是QuickTime, Windows Media等等) 嵌入多媒体, 但是Flash是当前唯一被广泛应用的, 提供了开发者们所渴望的跨浏览器兼容解决方案的插件.
对于各种基于Flash的媒体播放器, 创作者们对提供他们自己的用户定制设计的界面, 那一般都允许用户控制播放, 暂停, 停止, 查找或调整音量. 为浏览器提供插入视频和音频并提供DOM接口让Script控制播放的功能要通过安装本地程序支持.
视频和音频的新元素让这个工作变得更加简单. 这两者之间的大部分API都是共享的, 唯一区别就关系到可视和不可视媒体之间的固有区别.
Opera和Webkit已经放出了一个部分支持视频元素的版本, 你可以到 experimental build of Opera ( http://www.php.cn/) 或者最新的 nightly build of WebKit ( http://www.php.cn/) 去下载并试验一下这些示例. Opera支持Ogg Theora, Webkit支持所有QuickTime支持的媒体格式, 包括第三方的解码器.
插入视频最简单的方法是使用video元素, 它会允许浏览器提供一个默认的用户界面, 其中controls属性是一个boolean值属性, 这个属性是让创作者决定用户界面是否要显示(默认是不显示).

可选择的poster属性可以指定在视频播放前用来显示的图像. 尽管有一些视频格式有它们特有的预览图格式, 就像是MPEG-4, 它提供了一个可以不依赖于视频格式的可选择方案.
用audio元素在页面内插入音频文件也非常容易. audio和video元素的大部分属性都是共用的, 但非常显而易见的, audio元素没有width, height以及poster属性.

<audio src="music.oga" controls>
 <a href="music.oga">Download song</a>
</audio>

HMTL 5 提供了source 元素, 让浏览器根据媒体类型或编码器的支持来指定视频或音频文件. media属性会根据设备的局限性和被指定的媒体的类型和编码器来指定一个媒体选择查询. 当在使用 source 元素时, 上级元素( video或audio )的src属性需要省略掉, 不然 source 元素中的src属性会被忽略掉.

<video poster="poster.jpg">
 <source src="video.3gp" type="video/3gpp" media="handheld">
 <source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
 <source src="video.mp4" type="video/mp4">
</video>
<audio>
 <source src="music.oga" type="audio/ogg">
 <source src="music.mp3" type="audio/mpeg">
</audio>

为了那些需要给用户界面更多一点控制来符合页面的总设计的创作者以方便, 广泛的API提供了一些方法和事件让scripts来控制媒体文件. 最简单的方法就是用 play(), pause(), 然后可以通过设置 currentTime 来进行循环. 接下去的例子会解释怎么用.

<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;"><< Rewind</button>

还有很多这里没有讨论到的属性以及API可以被用到视频音频元素. 如果想知道更多, 你可以参考 current draft specification (http://www.php.cn/).
#p#
文档继承性
不像先前版本的 HTML 和 XHTML根据它们的语法来定义, HTML 5 是根据文档对象模型(DOM)来定义的 - 浏览器中用来描述文档的的继承型树结构. 例如, 构成一个由名称(title), 标题(heading) 和段落(paragraph) 的文档, 那么, 这个DOM 树可能看起来是这样的:

这个DOM树包括: head中的title元素, body中的h1和p元素.
根据DOM定义的HTML 5的优点是这种语言可以不依赖于它自己的语法. 有两个主要的语法用来表现HTML文档: HTML的序列和XML的序列 .
HTML 序列从HTML稍早版本的SGML语法中得到灵感而引入的一种语法, 但是却定义成更适合浏览器在真实环境下处理HTML的方式.

<!DOCTYPE html>
<html>
<head>
<title>An 
HTML
 Document</title>
</head>
<body>
 <h1 id="Example">Example</h1>
 <p>This is an example 
HTML
 document.
</body>
</html>

你会注意到, 这看起来很像是前个版本的HTML, 有些标签会自动闭合.
XML 序列引入了XML 1.0的语法和命名空间, 就像是 XHTML 1.0.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>An 
HTML
 Document</title> 
</head> 
<body> 
 <h1 id="Example">Example</h1> 
 <p>This is an example 
HTML
 document.</p>
</body>
</html>

除了间隔和xmls属性, 这两个例子几乎是相同的.
浏览器通过使用MIME类型来区别两者, 任何text/html形式的文档必须符合 HTML 序列, 任何MIME类型是XML的文档,像是 application/xhtml xml 必须符合XML 序列.
创作者可能要根据需要哪些功能来决定使用哪种序列. 没有使用它们的强制性的条件, 他们在不同情形下都可能是最优方案.
用HTML的好处 向后兼容现有的浏览器创作者已经非常熟悉语法宽容和仁慈的语法, 将不会因为无意中的一个错误而对任何对用户有不友好的 "Yellow Screen of Death". 语法相当容易记忆, 举例说: 创作者可以省略掉一些标签或是属性值.
用XHTML的好处 严格的XML语法鼓励创作者书写完整的标签, 有些用户会发现这样更容易维护. 能直接的和其它XML词表结合, 比如 SVG 和 MathML. 允许使用XML的处理过程, 有些创作者把这个过程作为他们编辑和发布过程的一部分.
如何贡献
HTML 5的工作进展很快, 但是由于要出示测试用例并实现互操作性, 它预期还会持续数年. 目前要完成的工作可能要10到15年的时间. 在这个过程中, 从各式各样的人都会有反馈, 在他们中间, web设计师和开发者, CMS和编辑工具的厂商和浏览器的厂商是确保成功的关键. 任何人都不只是欢迎, 更积极的是鼓励为HTML 5提供反馈.
除了规范之外, 还有更多相关的努力来帮助人们更好地理解这个工作.
The Differences from HTML 4 (http://www.php.cn/) 描述了和前一版本的HTML的不同.
The HTML Design Principles (http://www.php.cn/) 讨论一些原理来帮助作出决定, 这也会帮助你了解在众多的设计结果背后的原理.
The Web Developer’s Guide to HTML 5 (http://www.php.cn/) 这是最近才开始做的, 这是为了帮助web设计师和开发者理解要书写符合规范的HTML 5的文档所需要知道的一切, 并且提供了指南, 也提供了描述得相当完整的试验.
你可以在很多的方面做出贡献. 你可以加入 W3C’s HTML WG , 订阅和贡献 HTML WG邮件列表, 或者完善它(wiki). 你也可以订阅或贡献其他的 WHATWG邮件列表, 在WHATWG 论坛发表文章, 在WHATWG 博客上留言或写文章.

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

Vue中如何实现图片的滚动和缩略图预览？Aug 18, 2023 pm 01:51 PM

Vue中如何实现图片的滚动和缩略图预览？在Vue项目中，我们经常需要展示大量的图片，并希望用户能够方便地浏览和预览这些图片。本文将介绍如何使用Vue组件实现图片的滚动和缩略图预览功能。首先，我们需要安装并引入合适的Vue库，以便于实现图片的滚动和缩略图预览。在本例中，我们将使用vue-awesome-swiper和vue-image-preview两个库来实

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

未来功能抢先用 Safari 技术预览 173 版本释出Jul 02, 2023 pm 01:37 PM

Apple今日释出了Safari技术预览173版本，涵盖部分可能于Safari17推出的功能。该版本适用于macOSSonoma测试版以及macOSVentura系统，有兴趣的用户可于官方网页下载。Safari技术预览173版于设定中新增了功能标志区块，取代原先开发菜单的实验功能。该区块可让开发者快速地搜索特定功能，并以不同形式将「稳定」、「可供测试」、「预览」或「开发人员」等状态标示出来。重新设计的开发菜单可以帮助创作者更容易找到关键工具，以便建立网页、网页应用程序、其他应用程序中的网页内容、

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

如何在Vue表单处理中实现表单的图片上传与预览Aug 10, 2023 am 11:57 AM

如何在Vue表单处理中实现表单的图片上传与预览引言：在现代Web应用程序中，表单处理是一个非常常见的需求。其中一个常见的需求是，允许用户上传图片并在表单中预览这些图片。Vue.js作为前端框架，为我们提供了丰富的工具和方法来实现这个需求。在本文中，我将向您展示如何在Vue表单处理中实现图片上传和预览的功能。步骤一：定义Vue组件首先，我们需要定义一个Vue组

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。