Heim >Web-Frontend >H5-Tutorial >Umfassende Analyse der HTML5-Dokumentstruktur und neuer Tags

Umfassende Analyse der HTML5-Dokumentstruktur und neuer Tags

黄舟Original: 2017-04-24 10:22:282344Durchsuche

In diesem Artikel wird hauptsächlich die Dokumentstruktur von HTML5 und die vollständige Analyse des neuen -Tags vorgestellt

eins. HTML5-Dokumentstruktur

Schritt eins: Öffnen Sie die Entwicklungstools und öffnen Sie den angegebenen Ordner

2. Speichern Sie die Datei index.html. .html ist das Webseitensuffix;

3: Beginnen Sie mit dem Schreiben des Grundformats von HTML5.

<!DOCTYPE html> //文档类型声明
<html lang="zh-cn"> //表示 HTML 文档开始。1. 
<head> //包含文档元数据开始
<meta charset="utf-8"> //声明字符编码
<title>基本结构</title> //设置文档标题
</head> //包含文档元数据结束
<body> //表示 HTML 文档内容
<a href="http://www.baidu.com">百度</a> //一个超链接元素（标签）
</body> //表示 HTML
</html> //表示 HTML 文档结束

2. Dokumentstrukturanalyse

1.Doctype

Dokumenttypdeklaration (Dokument Typdeklaration, auch Doctype genannt ). Im Grunde teilt es dem Browser
den Typ der angezeigten Datei mit. In früheren HTML4.01- und XHTML1.0-Versionen stellte es eine bestimmte HTML-Version und einen bestimmten HTML-Stil dar.
Jetzt muss HTML5 keine Version und keinen Stil mehr ausdrücken.
8b05045a5be5764f313ed5b9168a17e6 //Groß-/Kleinschreibung nicht beachtet

2.html-Element

Element bedeutet zunächst Beschriftung, HTML-Element Das heißt, HTML-Tags. Die HTML-Elemente sind die Elemente, die das Dokument beginnen und beenden. Es handelt sich um eine Doppelbezeichnung, bei der Anfang und Ende einander widerspiegeln und Inhalt enthalten.

Dieses Element hat ein -Attribut und einen Wert: lang="zh-cn",
gibt an, dass die Sprache des Dokuments ist: Vereinfachtes Chinesisch.
b0af4c405c16b766c0529255680204e2 //Wenn es Englisch ist, ist es en'

Seite für vereinfachtes Chinesisch: html lang=zh-cmn-Hans
Seite für traditionelles Chinesisch : html lang=zh-cmn-Hant
Englische Seite: html lang=en

3.head-Element

wird zur Aufnahme von Metadateninhalten verwendet , Metadaten Zu den Daten gehören: 2cdf5bf648cf2f33323966d7f58a7f3f, e8e496c15ba93d81f6ea4fe5f55a2244, 2b0b25ff593c5b6c03403dd6234ffb2c, 3f1c4e4b6b16bbbd69b2ee476dc4f83a,
c9ccee2e6ea535a969eb3f532ad9fe89, b2386ffb911b14667cb8f0f91ea547a7. Diese Inhalte werden vom Browser verwendet, um Informationen bereitzustellen, z. B. einen Link, der CSS-Informationen bereitstellt, ein Skript
, das JavaScript-Informationen bereitstellt, einen Titel, der einen Seitentitel bereitstellt usw.
93f0f5c25f18dab9d176bd4f6de5d30e...9c3bca370b5104690d9ef395f2c5f8d1 //Diese Informationen sind auf der Seite nicht sichtbar

Das 2b0b25ff593c5b6c03403dd6234ffb2c-Element wird verwendet, um alternativen Inhalt (Text) zu definieren nicht ausgeführt.

Dieses Tag kann von Browsern verwendet werden, die das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag erkennen, aber das darin enthaltene Skript nicht unterstützen können.

4.meta-Element

Dieses Element wird verwendet, um Informationen über das Dokument bereitzustellen. Die Startstruktur hat ein Attribut: charset="utf8". Gibt
an, um dem Browser mitzuteilen, welche Codierung die Seite verwendet. Im Allgemeinen verwenden wir utf8. Wenn die Datei gespeichert wird, ist sie natürlich auch
utf8, und der Browser stellt auch utf8 ein, um Chinesisch korrekt anzuzeigen.
09477266eebbc8a01f42387ae29e71dd //Zusätzlich zum Festlegen der Kodierung gibt es noch andere Dinge

5.title-Element

Dieses Element ist, wie der Name schon sagt, sehr einfach: Legen Sie den Titel in der oberen linken Ecke des Browsers fest.
b2386ffb911b14667cb8f0f91ea547a7Grundstruktur6e916e0f7d1e588d4f442bf645aedb2f

6.body-Element

ist ein Element, das zur Aufnahme des Inhalts des Dokuments verwendet wird sichtbarer Bereich des Browserteils. Alle sichtbaren Inhalte sollten innerhalb dieses
-Elements hinzugefügt werden.

6c04bd5ca3fcae76e30b72ad730ca86d...36cc49f0c466276486e50c850b7e4956

7.a Element

Ein Hyperlink, der später ausführlich besprochen wird .

d59c4c4db1ec8444185f9719c98024b0Baidu5db79b134e9f6b82c0b36e0489ee08ed

Drei. Diskussion von Element-Tags

HTML ist eine Auszeichnungssprache, und wir haben die Struktur gerade ausführlich besprochen. Lassen Sie uns hier analysieren, wie diese
„Marken“ oder „Tags“, die in der Schrift oft als „Elemente“ bezeichnet werden, zusammengesetzt sind.

1. Element Das

-Element ist eine Reihe von Tags, die dem Browser mitteilen, wie einige Inhalte verarbeitet werden sollen. Jedes Element hat ein Schlüsselwort, z. B.
6c04bd5ca3fcae76e30b72ad730ca86d, b2386ffb911b14667cb8f0f91ea547a7, e8e496c15ba93d81f6ea4fe5f55a2244 Verschiedene Tag-Namen repräsentieren unterschiedliche Bedeutungen. Absatz-Tags, Text-Tags, Link-Tags, Bild-Tags usw. werden später berücksichtigt.

Elemente werden im Allgemeinen in zwei Typen unterteilt: Einzel-Tag (leeres Element) und Doppel-Tag. Einzelne Tags werden im Allgemeinen verwendet, um ein bestimmtes Element zu deklarieren oder einzufügen. Verwenden Sie beispielsweise e8e496c15ba93d81f6ea4fe5f55a2244, um die Zeichenkodierung zu deklarieren, und verwenden Sie a1f02c36ba31691bcfe87b2722de723b, um den Inhalt eines Elements festzulegen Region und fügen Sie sie ein, beispielsweise den Absatz e388a4556c0f65e1904146cc1a846bee...94b3e26ee717c64999d7867364b1b4a3.

2. Attribute und Werte

Zusätzlich zu ungeraden und geraden Elementen können auch Attribute und Werte innerhalb des Elements festgelegt werden. Diese Attributwerte werden verwendet, um einige

Aspekte des

Verhaltens des Elements zu ändern. Beispielsweise können Sie im href-Attribut von Hyperlink: 3499910bf9dac5ae3c52d5ede7383485 auf verschiedene Websites verlinken, indem Sie die darin enthaltene URL ersetzen.

4. Entität

HTML 实体就是将有特殊意义的字符通过实体代码显示出来。

显示结果实体名称实体编号描述

空格

5f43da2e8ef7bbca26647856befd8f7d > > 大于号
& & & 和号
" " " 引号
' ' ' 撇号
￠ ¢ ¢ 分
£ £ £ 镑
¥ ¥ ¥ 日圆
€ € € 欧元
§ § § 小节
© © © 版权
® ® ® 注册商标
™ ™ ™ 商标
× × × 乘号
÷ ÷ ÷ 除号

五. 新增结构标签

article元素

表示页面中一块与上下文不相关的独立内容。比如一篇文章,一篇博文,一篇论坛帖子,可以嵌套使用的

section元素

表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中2f8332c8dcfd5c7dec030a070bf652c3……4d7ab0de9a42de71c682b0860bad1410;HTML4 中e388a4556c0f65e1904146cc1a846bee ……94b3e26ee717c64999d7867364b1b4a3。

aside元素

表示article元素内容之外的、与article元素内容相关的辅助信息。

header元素

表示页面中一个内容区块或真个页面的标题。

hgroup元素

表示对真个页面或页面中的一个内容区块的标题进行组合。

footer元素

表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

nav元素

表示页面中导航链接的部分。

figure元素

表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如：

<figure> 
<figcaption>PRC</figcaption> 
<p>The People&#39;s Republic of China was born in 1949</p> 
</figure>

五．元数据

e8e496c15ba93d81f6ea4fe5f55a2244元素可以定义文档中的各种元数据，而且一个 HTML 页面可以包含多个e8e496c15ba93d81f6ea4fe5f55a2244
元素。

1.指定名/值元数据对

<meta name="author" content="bnbbs">
<meta name="description" content="这是一个 HTML5 页面">
<meta name="keywords" content="html5,css3,响应式">
<meta name="generator" content="sublime text 3">

元数据名称说明

author 当前页面的作者

description 当前页面的描述

keywords 当前页面的关键字

generator 当前页面的编码工具

2.声明字符编码

ff94e7be1619a095952b0217c283b66c

3.模拟 HTTP 标头字段

//5 秒跳转到指定 URL
<meta http-equiv="refresh" content="5;http://li.cc">
//另一种声明字符编码
<meta http-equiv="content-type" content="text/html charset=utf-8">

属性值说明

refresh 重新载入当前页面，或指定一个 URL。单位秒。
content-type 另一种声明字符编码的方式

六．全局属性

在此之前，我们涉及到的元素都讲解了它的局部数据，当然也知道一些全局属性，比如

id。全局属性是所有元素共有的行为，HTML5 还提供了一些其他的全局属性。

1.id 属性

<p id="abc">段落</p>

解释： id 属性给元素分配一个唯一标识符。这种标识符通常用来给 CSS 和 JavaScript

调用选择元素。一个页面只能出现一次同一个 id 名称。

2.class 属性

<p class="abc">段落</p>
<p class="abc">段落</p>
<p class="abc">段落</p>

解释：class 属性用来给元素归类。通过是文档中某一个或多个元素同时设置 CSS 样
式。

3.accesskey 属性

<input type="text" name="user" accesskey="n">

解释：快捷键操作，windows 下 alt+指定键，前提是浏览器 alt 并不冲突。

4.contenteditable 属性

<p contenteditable="true">我可以修改吗</p>

解释：让文本处于可编辑状态，设置 true 则可以编辑，false 则不可编辑。或者直接

设置属性。

5.dir 属性

<p dir="rtl">文字到右边了</p>

解释：让文本从左到右（ltr），还是从右到左（rtl）。

6.hidden 属性

<p hidden>文字到右边了</p>

解释：隐藏元素。

7.lang 属性

<p lang="en">HTML5</p>

解释：可以局部设置语言。

8.title 属性

<p title="HTML5 教程">HTML5</p>

解释：对元素的内容进行额外的提示。

9.tabindex 属性

<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1">

解释：表单中按下 tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。

10.style 属性

<p style="color:red;">CSS 样式</p>

解释：设置元素行内 CSS 样式。

七．其它新增标签

1.details

定义和用法

a5e9d42b316b6d06c62de0deffc36939 标签用于描述文档或文档某个部分的细节。

目前只有 Chrome 支持 a5e9d42b316b6d06c62de0deffc36939 标签。

2.embed

d8e2720730be5ddc9c2a3782839e8eb6 标签定义嵌入的内容，定义外部交互内容或插件。

HTML5: <embed src="horse.wav" />

HTML4:

<object data="flash.swf"  type="application/x-shockwave-flash"></object>

3.range

4.autofocus

5. mark

f920514e6447cf1d171079d1371f007f主要用来在视觉上向用户呈现那些需要突出的文字。f920514e6447cf1d171079d1371f007f标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5: <mark></mark> 
HTML4: <span></span>

6. summary

631fb227578dfffda61e1fa4d04b7d25 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: a5e9d42b316b6d06c62de0deffc36939631fb227578dfffda61e1fa4d04b7d25HTML 5039f3e95db2a684c7b74365531eb6044This document teaches you everything you have to learn about HTML 5.857b9e4d92e41388578e3abed1e3bdfb
HTML4: none

7. detalist

fc86e7b705049fc9d4fccc89a2e80ee3 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

9. command

表示命令按钮

只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键

<menu>
<command onclick="alert(&#39;Hello World&#39;)">
Click Me!</command>
</menu>

八．废弃的标签

表现性元素

basefont
big
center
font
s
strike
tt
u

建议用语义正确的元素代替他们，并使用CSS来确保渲染后的效果

框架类元素

因框架有很多可用性及可访问性问题，HTML5规范将以下元素移除。

frame
frameset
noframes

但html5支持iframe。

属性类

很多表现性的属性也被新规范移除，如下：

align

body标签上的link、vlink、alink、text属性

bgcolor

height和width

iframe元素上的scrolling属性

valign

hspace和vspace

table标签上的cellpadding、cellspacing和border属性

header标签上的profile属性

链接标签a上的target属性

img和iframe元素的longdesc属性

abbr取代acronym（用于表示缩写）

object取代了applet

ul取代了dir

其他

Das obige ist der detaillierte Inhalt vonUmfassende Analyse der HTML5-Dokumentstruktur und neuer Tags. 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：HTML5-Drag-and-Drop-Lernen und vollständiger BeispielcodeNächster Artikel：HTML5-Drag-and-Drop-Lernen und vollständiger Beispielcode

In Verbindung stehende Artikel

Mehr sehen