Heim > Artikel > Web-Frontend > Code-Sharing für die wichtigsten neuen Tags in HTML5

Code-Sharing für die wichtigsten neuen Tags in HTML5

黄舟Original: 2017-03-30 13:12:252526Durchsuche

HTML5Einführung

HTML5 ist Die nächste Generation der HTML-Standardspezifikation nach HTML4 bietet einige neue Elemente und Attribute . Neue Tags sind für die Suchmaschine und die semantische Analyse von Vorteil und unterstützen außerdem kleine Bildschirme. Es bietet auch einige neue Funktionen:

1. Einige veraltete Elemente in HTML4 wurden gestrichen Anzeige-Tags wie 240cb830ca84ebaabbd07850110b414d, die durch CSS ersetzt wurden, haben einige Vorschläge von XHTML2 übernommen, darunter einige zur Verbesserung der Dokumentation, wie z. B. die Verwendung neuer HTML-Tags für Kopfzeile, Fußzeile. Dialog, Aside, Figure usw. ermöglichen es den Erstellern von Inhalten, Dokumente semantischer zu erstellen 🎜>2 >

Die Tags „b“ und „i“ bleiben erhalten, ihre Bedeutung unterscheidet sich jedoch von zuvor. Die Bedeutung dieser Tags besteht darin, einen Textabschnitt zu kennzeichnen, anstatt die Schriftart „u“, „font“, „center“, „fett“ oder „kursiv“ festzulegen. und Strike-Tags werden vollständig entfernt.

Einige neue Formulare hinzufügen Objekte

>E-Mail

-Adresse, andere -Objekte haben Unterstützung für nicht-lateinische Zeichen hinzugefügt. HTML5 führt außerdem Mikrodaten ein, eine Methode zum Annotieren von Inhalten mit maschinenlesbaren Tags, was die Arbeit mit dem Semantic Web erleichtert. Insgesamt ermöglichen diese strukturellen Verbesserungen den Erstellern von Inhalten, sauberere, effizientere Inhalte zu erstellen, die einfacher zu verwalten und für Suchmaschinen und Bildschirmlesesoftware benutzerfreundlicher sind. 🎜>MehrereMedienobjekte werden nicht mehr im Objekt- oder EmbedTag gebunden, aber das Video hat das Video-Tag und das Audio hat das Audio-Tag 5. Lokaler Speicher

Browser hinzugefügt. Nebenspeicherfunktionen wie localStorage/sessionStorage/indexedDB 6. Canvas-Objekt Bietet die Möglichkeit, Grafiken direkt zu zeichnen und zu bearbeiten 7. Neue

API

-Erweiterungen

für HTMLDocument und Die HTMLElement-Schnittstelle bietet neue API-Erweiterungen.

8. Neue Syntax

(1) DOCTYPE

Die HTML-Syntax von HTML5 erfordert, dass das Dokument DOCTYPE deklariert, um sicherzustellen, dass der Browser darin funktionieren kann Standardmodus Anzeigeseite. Die Deklarationsmethode ist:

Die Groß-/Kleinschreibung wird nicht beachtet. (2) Zeichensatz

In der HTML-Syntax von HTML5 gibt es drei Formen, um den Codierungstyp von

String

zu deklarieren: Legen Sie auf der Transportebene den Content-Type im Header der HTTP-Instanz fest.

Setzen Sie am Anfang der Datei ein Unicode Bype Order Mark (BOM). Dieses Zeichen stellt eine Signatur für die Codierungsmethode der Datei bereit.

Verwenden Sie im Inhalt zwischen den ersten 1024 Bytes des Dokuments das Meta-Element mit dem charset-Attribut, um die Kodierungsmethode zu deklarieren. Beispiel: 09477266eebbc8a01f42387ae29e71dd.

<!DOCTYPE html>

(3) MathML und SVG

Die HTML-Syntax von HTML5 ermöglicht die Verwendung von MathML (Mathematical Markup Language) und SVG (Scalable

Vektorgrafiken

) Element. Beispielsweise enthält eine sehr einfache HTML-Seite einen Kreis, der von einem SVG-Element gezeichnet wird:

Abschnitt

Das Abschnittselement ist das letzte Element, das die Seite unterteilt Dokumentstruktur Das grundlegende und wichtigste Strukturelement dient hauptsächlich der hierarchischen Aufteilung der Inhalte auf den Seiten der Website oder Anwendung. Ein Abschnittselement besteht normalerweise aus Inhalt und Titel.
section-Element ist kein allgemeines Containerelement. Wenn ein Element daher einen entsprechenden Stil oder ein entsprechendes Skript definieren muss, wird empfohlen, das p-Element zu verwenden. Durch die Verwendung von section wird sichergestellt, dass der Inhalt dieses Elements definiert werden kann im Dokument klar ersichtlich sein.
```
<!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" />
  </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>
```

Das obige ist der detaillierte Inhalt vonCode-Sharing für die wichtigsten neuen Tags in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Einführung in das neue HTML5-Label CanvasNächster Artikel：Detaillierte Einführung in das neue HTML5-Label Canvas

In Verbindung stehende Artikel

Mehr sehen

Code-Sharing für die wichtigsten neuen Tags in HTML5

HTML5Einführung

article

nav

aside

hgroup

header

footer

address

video

audio

datalist

In Verbindung stehende Artikel