suchen
HeimWeb-FrontendHTML-TutorialTeilen Sie eine Zusammenfassung der Grundkenntnisse von HTML

  Grundlegendes Verständnis von HTML

1. Einführung

 1. HTML ist Hypertext Markup Language, eine Anwendung unter Standard Universal Markup Language, einer interpretierten Sprache.

 2. „Hypertext“ bedeutet, dass die Seite Bilder, Links und sogar Nicht-Text-Elemente wie Musik und Programme enthalten kann.

3. Die Struktur der Hypertext-Auszeichnungssprache umfasst einen „Kopf“-Teil (englisch: Head) und einen „Haupt“-Teil (englisch: Body), wobei der „Kopf“-Teil sorgt Informationen über die Webseite mit Informationen, der Abschnitt „Hauptteil“ stellt den spezifischen Inhalt der Webseite bereit.

2. Sprachfunktionen (Inhalt aus --Baidu-Enzyklopädie)

1 .Einfachheit: Die Hypertext-Markup-Sprachversion wird mithilfe einer Superset-Methode aktualisiert, wodurch sie flexibler und praktischer wird.  

2. Skalierbarkeit: Die breite Anwendung der Hypertext-Markup-Sprache hat Anforderungen an die Stärkung von Funktionen, das Hinzufügen von Bezeichnern usw. mit sich gebracht. Die Hypertext-Markup-Sprache übernimmt den Elementansatz von Unterklassen bringt Garantien für Systemerweiterungen.

3. Plattformunabhängigkeit: Obwohl Personalcomputer beliebt sind, gibt es viele Leute, die andere Maschinen wie MAC verwenden. Hypertext Markup Language kann auf einer Vielzahl von Plattformen verwendet werden, was ebenfalls der Fall ist Der Fall des World Wide Web (WWW) ist einer der Gründe für seine Popularität.

 4. Vielseitigkeit: Darüber hinaus ist HTML die universelle Sprache des Internets, eine einfache und universelle All-in-One-Auszeichnungssprache. Es ermöglicht Webseitenerstellern, komplexe Seiten zu erstellen, die Text und Bilder kombinieren, und diese Seiten können von jedem anderen im Internet angezeigt werden, unabhängig vom Typ des Computers oder des verwendeten Browsers.

3. Gesamtstruktur

HTML-Standarddateistruktur hat eine grundlegende Gesamtstruktur, das heißt die Anfangs- und Endmarkierungen des Hypertext-Markups Sprachdatei und die Header- und Entity-Teile der Hypertext Markup Language. Zur Bestätigung der Gesamtstruktur der Seite werden drei Doppelmarkierungen verwendet.

1. Der zu beschreibende Gesamtdateicode

(vollständiger Name), einer Hypertext Markup Language-Datei.

 

2. Header-Inhalt

 

; . Die im Header enthaltenen Tags sind Titel, Vorwort, Beschreibung und andere Inhalte der Seite. Sie werden nicht als Inhalt selbst angezeigt, beeinflussen aber den Anzeigeeffekt der Webseite. Die am häufigsten verwendeten Tags im Header sind der Titel-Tag und der Meta-Tag

Der Titel-Tag wird verwendet, um den Titel der Webseite zu definieren, und sein Inhalt wird im angezeigt Die Titel der Webseiten können von Browsern als Lesezeichen und Favoriten verwendet werden.

HTML-Kopfelement:

Das Meta-Tag in HTML

Das Meta-Tag in HTML
 1 nbsp;html> 2  3      4         <title>HTML当中的meta标签</title> 5          6         <!--设置网页的编码--> 7         <meta> 8          9         <!--设置网页的关键字-->10         <meta>11         12         <!--设置网页的描述-->13         <meta>14         15         <!--设置网页的更新信息-->16         <meta>17         18         <!--设置网页刷新频率以及跳转地址-->19         <meta>20         21         <!--设置标题处的ico小图标-->22         <link>23         24         <!--引入一个外部的css层叠样式表-->25         <link>26     27     28     29 
 Script-Tag und Style-Tag im Head-Tag

Script-Tag und Style-Tag im Head-Tag

  3.主体内容

    ;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

    HTML当中的文本标签

 1 nbsp;html> 2  3      4         <title>HTML当中的文本标签</title> 5         <meta> 6      7      8         <!--标题标签--> 9         <h1 id="让我们来看一下-u-字体-u-字体的大小变化">让我们来看一下,<u>字体</u>字体的大小变化</h1>10         <h2 id="让我们来看一下-字体的大小变化">让我们来看一下,字体的大小变化</h2>11         <h3 id="让我们来看一下-字体的大小变化">让我们来看一下,字体的大小变化</h3>12         <h4 id="让我们来看一下-字体的大小变化">让我们来看一下,字体的大小变化</h4>13         <h5 id="让我们来看一下-字体的大小变化">让我们来看一下,字体的大小变化</h5>14         <h6 id="让我们来看一下-字体的大小变化">让我们来看一下,字体的大小变化</h6>15         16         <!--水平线标签-->17         <hr>18         19         <!--b标签:普通的加粗标签-->20         <b>文字加粗</b><br>21         22         <!--strong标签:加粗强调的作用,SEO可以着重抓取到的内容-->23         <strong>文字加粗(强调)</strong><br>24         25         <!--斜体、强调标签-->26         <em>斜体(强调)</em><br>27         28         <!--普通的斜体标签-->29         <i>让你随时<u>脉动</u>回来!</i><br>30         31         <!--普通的斜体标签-->32         <cite>让你随时脉动回来!</cite><br>33         34         <!--下标标签-->35         H<sub>2</sub>0<br>36         37         <!--上标标签-->38         2<sup>2</sup>=439         40         <!--段落标签-->41         <p>p标签代表段落,一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>42         43     44 
HTML当中的文本标签

   文本标签页面展示效果:

 

 1 nbsp;html> 2  3      4         <title>HTML当中的文本标签</title> 5         <meta> 6      7      8         <h1 id="HTML当中的文本标签">HTML当中的文本标签</h1> 9         10         <!--定义文档的输出方向-->11         <bdo>正大光明</bdo><br>12         <bdo>正大光明</bdo><br>13         14         <!--定义一个短的引用-->15         沙僧说:<q>师傅,大师兄和二师兄被妖怪抓走啦~~</q><br>16         17         <!--表示一个缩写的形式-->18         <abbr>US</abbr><br>19         20         <!--删除线标签-->21         测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师?</del>,<del>被删除了哈哈</del><br>22         23         <!--定义一段被隐藏的文字,summary标签可以定义列表的标题-->24         <details>25             <summary>鬼吹灯系列丛书</summary>26             鬼吹灯之精绝古城<br>27             鬼吹灯之黄皮子坟<br>28             鬼吹灯之云南虫谷<br>29         </details>30         31         <!--对话标签-->32         <dialog>33             <dt>男:</dt>
<dd>我们分手吧~~</dd>34             <dt>女:</dt>
<dd>为什么?</dd>35             <dt>男:</dt>
<dd>我怀孕了~~</dd>36             <dt>女:</dt>
<dd>不,不可能,我不相信……</dd>37             <dt>男:</dt>
<dd>你看你,我们连最起码的信任都没有了,还谈什么?</dd>38             <dt>女:</dt>
<dd>…………</dd>39         </dialog>40     41 
HTML当中的文本标签

 

   HTML当中的列表标签

 1 nbsp;html> 2  3      4         <title>HTML当中的列表标签</title> 5         <meta> 6      7      8         <h1 id="HTML当中的列表标签">HTML当中的列表标签</h1> 9         <!--有序列表-->10         <ol>11             <li>有序列表1</li>12             <li>有序列表2</li>13             <li>有序列表3</li>14         </ol>15         16         <!--无序列表-->17         
    18             
  • 无序列表1
  • 19             
  • 无序列表2
  • 20             
  • 无序列表3
  • 21         
22         23         24         
25         *26         * *27         * * *28         * * * *29         
30     31 
HTML当中的列表标签

  页面显示效果:

  

    标签中增加 type 属性,使其属性值为 A or a or 1 会显示不同的排序编码,可视情况而定

 

   HTML当中的超链接标签

  :超链接标签
      属性: 值:
      href: 路径或外部网站
      title: 鼠标移入链接时提示的内容
      target: _self (默认,从当前标签页打开链接)
           _blank (在新标签页中打开链接)
           _parent (在父级框架中打开链接)
           _top (在顶级框架中打开链接)
           framename(在制定框架名的位置打开链接)

 1 nbsp;html> 2  3      4         <title>HTML当中的超链接标签 a</title> 5         <meta> 6      7      8         <!--相对路径链接到本地的文件--> 9         <a>链接本地HTML文件</a><br><br>10         11         <!--链接到了一个外部的网站-->12         <a>英雄联盟官网</a>13         14         <!--使用绝对路径链接到本地文件-->15         <a>5.html</a>16         17     18 
HTML当中的超链接标签

 

  页面显示效果:

  a标签的锚点功能

    使 a 链接标签可跳转到页面指定元素的位置

 1 nbsp;html> 2  3      4         <title>a标签的锚点功能</title> 5         <meta> 6         <style> 7             /*找到4个div添加了一些属性*/ 8             div{ 9                 /*设置一下div的宽度*/10                 width:500px;11                 12                 /*设置一下div的高度*/13                 height:500px;14                 15                 /*设置一下div的边框:1像素宽,实线,红色*/16                 border:1px solid red;17             }18         </style>19     20     21         <h1 id="a标签的锚点功能">a标签的锚点功能</h1>22         <a>第一章:三打白骨将</a><br>23         <a>第二章:倒拔垂杨柳</a><br>24         <a>第三章:火烧赤壁</a><br>25         <a>第四章:刘姥姥进大观园</a><br>26         27         <!--第一章-->28         <h2>
<a></a>第一章:三打白骨将</h2>29         <div>30             <p>胡八一(靳东饰)上山下乡来到中蒙边境的岗岗营子,带上了家中仅存的一本书——《十六字阴阳风水秘术》①,闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏,遇上雪崩掉落一条巨大的地沟当中,胡八一利用自己懂得的墓葬秘术逃得不死。复员后,胡八一和好友王胖子(赵达饰)一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址,进入了地下“鬼洞”。洞中机关重重、陷阱不断,这神秘的鬼洞似乎在一位先知的掌控之中。31             </p>32         </div>33         34         <!--第二章-->35         <h2>
<a></a>第二章:倒拔垂杨柳</h2>36         <div>37             <p>胡八一(靳东饰)上山下乡来到中蒙边境的岗岗营子,带上了家中仅存的一本书——《十六字阴阳风水秘术》①,闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏,遇上雪崩掉落一条巨大的地沟当中,胡八一利用自己懂得的墓葬秘术逃得不死。复员后,胡八一和好友王胖子(赵达饰)一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址,进入了地下“鬼洞”。洞中机关重重、陷阱不断,这神秘的鬼洞似乎在一位先知的掌控之中。38             </p>39         </div>40         41         <!--第三章-->42         <h2>
<a></a>第三章:火烧赤壁</h2>43         <div>44             <p>胡八一(靳东饰)上山下乡来到中蒙边境的岗岗营子,带上了家中仅存的一本书——《十六字阴阳风水秘术》①,闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏,遇上雪崩掉落一条巨大的地沟当中,胡八一利用自己懂得的墓葬秘术逃得不死。复员后,胡八一和好友王胖子(赵达饰)一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址,进入了地下“鬼洞”。洞中机关重重、陷阱不断,这神秘的鬼洞似乎在一位先知的掌控之中。45             </p>46         </div>47         48         <!--第四章-->49         <h2>
<a></a>第四章:刘姥姥进大观园</h2>50         <div>51             <p>胡八一(靳东饰)上山下乡来到中蒙边境的岗岗营子,带上了家中仅存的一本书——《十六字阴阳风水秘术》①,闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏,遇上雪崩掉落一条巨大的地沟当中,胡八一利用自己懂得的墓葬秘术逃得不死。复员后,胡八一和好友王胖子(赵达饰)一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址,进入了地下“鬼洞”。洞中机关重重、陷阱不断,这神秘的鬼洞似乎在一位先知的掌控之中。52             </p>53         </div>54     55 
a标签的锚点功能

 

 

   

  HTML当中的常见实体内容:

 

 

Das obige ist der detaillierte Inhalt vonTeilen Sie eine Zusammenfassung der Grundkenntnisse von HTML. 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
Warum sind HTML -Tags für die Webentwicklung wichtig?Warum sind HTML -Tags für die Webentwicklung wichtig?May 02, 2025 am 12:03 AM

HtmltagsareessentialwebdevelopmentaTheStructureAndenhanceWebpages.1) Sie definelayout, semantics und interaktivität.2) SemantictagsimproveAccessibilityandseo.3) ordnungsgemäße Kennzeichnung.

Erläutern Sie die Bedeutung der Verwendung eines konsistenten Codierungsstils für HTML -Tags und -attribute.Erläutern Sie die Bedeutung der Verwendung eines konsistenten Codierungsstils für HTML -Tags und -attribute.May 01, 2025 am 12:01 AM

Ein konsistenter HTML -Codierungsstil ist wichtig, da er die Lesbarkeit, Wartbarkeit und Effizienz des Codes verbessert. 1) Verwenden Sie Kleinbuchstaben und Attribute, 2) Behalten Sie die konsistente Einklebung, 3) Wählen und halten Sie sich an Einzel- oder Doppelzitate.

Wie implementieren Sie Multi-Project-Karussell in Bootstrap 4?Wie implementieren Sie Multi-Project-Karussell in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Lösung zur Implementierung von Multi-Project-Karussell in Bootstrap4, das Multi-Project-Karussell in Bootstrap4 implementiert, ist keine leichte Aufgabe. Obwohl Bootstrap ...

Wie erreicht die offizielle Website von Deepseek den Effekt des durchdringenden Maus -Scroll -Events?Wie erreicht die offizielle Website von Deepseek den Effekt des durchdringenden Maus -Scroll -Events?Apr 30, 2025 pm 03:21 PM

Wie kann man den Effekt der Penetration des Maus -Scroll -Ereignisses erreichen? Wenn wir im Internet stöbern, begegnen wir oft auf spezielle Interaktionsdesigns. Zum Beispiel auf der offiziellen Website von Deepseek � ...

So ändern Sie den Wiedergabesteuerungsstil von HTML -VideoSo ändern Sie den Wiedergabesteuerungsstil von HTML -VideoApr 30, 2025 pm 03:18 PM

Der Standard -Playback -Steuerungsstil von HTML -Video kann nicht direkt über CSS geändert werden. 1. Erstellen Sie benutzerdefinierte Steuerelemente mit JavaScript. 2. verschönern diese Kontrollen durch CSS. 3. Berücksichtigen Sie Kompatibilität, Benutzererfahrung und -leistung. Wenn Sie Bibliotheken wie Video.js oder PLYR verwenden, können Sie den Prozess vereinfachen.

Welche Probleme werden durch die Verwendung von nativem Select auf Ihrem Telefon verursacht?Welche Probleme werden durch die Verwendung von nativem Select auf Ihrem Telefon verursacht?Apr 30, 2025 pm 03:15 PM

Potenzielle Probleme bei der Verwendung natives Auswahl von Mobiltelefonen bei der Entwicklung mobiler Anwendungen haben wir häufig auf die Auswahl von Kästchen. Normalerweise Entwickler ...

Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon?Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon?Apr 30, 2025 pm 03:12 PM

Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon? Bei der Entwicklung von Anwendungen auf mobilen Geräten ist es sehr wichtig, die richtigen UI -Komponenten auszuwählen. Viele Entwickler ...

Wie optimieren Sie die Kollisionsabwicklung von Dritten in einem Raum mit drei.Js und Octree?Wie optimieren Sie die Kollisionsabwicklung von Dritten in einem Raum mit drei.Js und Octree?Apr 30, 2025 pm 03:09 PM

Verwenden Sie drei.Js und Octree, um die Kollisionsabwicklung von Drittrohr im Raum zu optimieren. Verwenden Sie Octree in drei.js, um das Roaming von Drittpersonen im Raum zu implementieren, und fügen Sie Kollisionen hinzu ...

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version