Detaillierte Erläuterung der Markup- und Dokumentstruktur der HTML-Programmierung_HTML/Xhtml_Webseitenproduktion

WBOY
Freigeben: 2016-05-16 16:36:16
Original
1406 Leute haben es durchsucht

Der Zweck der Markierung von Inhalten mit HTML besteht darin, der Webseite Semantik zu verleihen. Mit anderen Worten: Sie müssen dem Inhalt Ihrer Webseite eine Bedeutung geben, die der Benutzeragent verstehen kann.

HTML spezifiziert eine Reihe von Tags, um Inhalte unterschiedlich zu kennzeichnen. Jedes Tag ist eine Beschreibung dessen, was es enthält. Die am häufigsten verwendeten HTML-Beschreibungen sind Titel, Absätze, Links und Bilder. Derzeit verfügt HTML über insgesamt 114 Tags, aber nach dem 80/20-Prinzip kann die Verwendung von etwa 25 davon 80 % des Markup-Bedarfs decken.

Die neueste Version von HTML, HTML5, schreibt eine neue Reihe strukturierter Tags vor, die zum Gruppieren von Tags verwandter Inhalte verwendet werden, um die Gesamtstruktur der Webseite besser zu standardisieren. Zu diesen neuen Tags gehören

,

In HTML5 können Sie den letzten schließenden Schrägstrich weglassen und schreiben:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <img src="images/dog.jpg " alt="Das ist mein Hund." >

2. Attribute

Tipp: Von sehbehinderten Benutzern verwendete Bildschirmleseprogramme lesen den Inhalt des Alt-Attributs laut vor. Stellen Sie daher sicher, dass Sie Inhalte zum
Alt-Attribut des Tags hinzufügen, die die Leute auf einen Blick (oder auf einen Blick) verstehen können.

3. Titel und Absätze
4. Zusammengesetzte Elemente

HTML spezifiziert nicht nur grundlegende Inhalts-Tags wie Titel, Bilder und Absätze, sondern auch Tags zum Erstellen komplexer Benutzeroberflächenkomponenten wie Listen, Tabellen und Formulare. Dies sind sogenannte zusammengesetzte Elemente Es besteht aus mehreren
-Tags.

5. Verschachtelte Tags

Um es einfach auszudrücken: Es geht darum, ein Tag in ein anderes Tag zu verschachteln.


6.HTML5-Vorlage

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3.  <Kopf>  
  4.  <meta charset="utf- 8" />  
  5.  <Titel>Eine HTML-Vorlage Titel>  
  6.  Kopf>  
  7.  <Körper>  
  8.    
  9.  Körper>  
  10. html>  

7.块级元素和行内元素

文档流效果:HTML 元素会按照它们各自在标记中出现的先后顺序,依次从页面上方流向下方.

    几乎所有HTML 元素的 display 属性要么为, 要么为 inline.最明显的一个例外是 table Anzeige 值。

    块级元素(比如标题和段落)会相互堆叠在一起沿页面向下排列,每个元素分别占一行.而行内元素(比如链接和图片)则会相互并列,只有在空间不足以并列的情况下才会折到下一行显示.

    HTML ?知道了这一点之后,就可以在编写标记的时候,预想到某个元素在初始状态下是如何定位的,这样才能进一步想好将来怎么用 CSS 重新定位它.

有两点要知道的:

    块级元素盒子会扩展到与父元素同宽.

    行内元素盒子会 收缩包裹 其内容,并且会尽可能包紧.
201581172030371.png (301×322)

7.嵌套的元素

在标记中嵌套的是HTML标签,而在屏幕上嵌套的则是一个个的盒子.
8.文档对象模型

文档对象模型(简称 DOM)是从浏览器的视角来观察页面中的元素以及每个元素的属性,由此得出这些元素的一个家族树.通过DOM,可以确定元素之间的相互关系。在 CSS 中引用 DOM
中特定的位置,就可以选中相应的 HTML 元素,并修改其样式属性.

CSS und DOM后,比如修改了宽度或者在标记里插入了一个伪元素,这些变化会立即在 DOM 中发生,并体现在页面上.

简而言之, 就是通过 HTML 标记来构建 DOM, 然后在页面初次加载和用户与页面交互时, 使用 CSS 来修改 DOM.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage