Zusammenfassung des HTML-Wissens (1) Grundlegende Tags, Listen, Tabellen, Hyperlinks

HTML-Wissenszusammenfassung (1)

Inhaltsverzeichnis

HTML-Wissenszusammenfassung

1. Was ist HTML?

Zweitens die grundlegenden Tags der Webseite

1. Titel-Tag

2. Absatz-Tags

3. Newline-Label

4. Horizontale Linienbeschriftung

5. Schriftstiletikett

6. Kommentare und spezielle Symbole

3. Bilder, Hyperlinks, Webseitenlayout

1. Bild

2. Hyperlink

Viertens Listen, Tabellen, Medienelemente

1. Liste

2. Formular

3. Medienelemente

 


1. Was ist HTML?

  • Der vollständige Name von HTML lautet Hyper Text Markup Language (Hyper Text Markup Language).

Der sogenannte Hypertext bedeutet, dass HTML über den Textbereich hinaus nicht nur Text, sondern auch Bilder, Videos, Audios usw. verarbeiten kann.

  • Die neueste Version ist die HTML5-Version
  • Alle gängigen Browser unterstützen HTML
  • Befolgen Sie den W3C-Standard (World Wide Web Consortium)

Das Folgende ist ein Beispiel für die grundlegendste HTML-Seite

<!--DOCTYPE:告诉浏览器我们要是用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta 描述性标签,用来描述网站的一些信息-->
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<!--body代表网页主体-->
<body>
hello,world!
</body>
</html>

Zweitens die grundlegenden Tags der Webseite

1. Titel-Tag

<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

2. Absatz-Tags

<!--段落标签-->
<p>这是一个段落</p>

3. Newline-Label

Dies ist ein selbstschließendes Etikett

<!--换行标签-->
<br/>
<br>

4. Horizontale Linienbeschriftung

Das Etikett gibt direkt eine horizontale Linie auf der Webseite aus

<!--水平线便签-->
<hr/>
<hr>

5. Schriftstiletikett

<!--粗体,斜体-->
<strong>粗体</strong>
<em>斜体</em>

6. Kommentare und spezielle Symbole

Spezielle Symbole, verwenden Sie einfach Baidu

<!--特殊符号-->
空格 &nbsp;
大于号 &gt;
小于号 &lt;

3. Bilder, Hyperlinks, Webseitenlayout

1. Bild

<!--图像标签-->
<img src="图片地址",alt="图片不显示时显示的内容",title="图片悬停显示文字",width="宽度",height="高度">

2. Hyperlink

  • Allgemeiner Hyperlink
<!--
a标签超链接:
href为超链接的地址
target为超链接打开的地方(当前页面,新页面等)
-->
<a href="https://www.baidu.com" target="_blank">百度一下,你就知道</a>
<a src="https://www.baidu.com"><img src="图片地址"></a>
  • Ankerverbindung

Ankerverknüpfungen realisieren Sprünge zu verschiedenen Positionen, einschließlich derselben Seite und verschiedener Seiten

<!--
锚链接:
1.设置锚点
2.执行跳转
-->
<!--锚点-->
<a name="anchor1">锚点一</a>
<!--同文件-->
<a href="#anchor1">跳转到锚点一</a>
<!--跨文件-->
<a href="路径/文件#anchor1"></a>
  • Funktionsverbindung
<!--
邮件链接
-->
<a href="mailto:[email protected]">点击联系我们</a>

Viertens Listen, Tabellen, Medienelemente

1. Liste

Die Liste kann die Informationen strukturieren, organisieren und im Stil einer Liste anzeigen

  • Bestellliste
<!--有序列表 ordered list-->
<ol>
    <li>迪迦奥特曼</li>
    <li>泰罗奥特曼</li>
    <li>雷欧奥特曼</li>
    <li>捷德奥特曼</li>
    <li>欧布奥特曼</li>
</ol>
  • Ungeordnete Liste
<!--无序列表 unordered list-->
<ul>
    <li>迪迦奥特曼</li>
    <li>泰罗奥特曼</li>
    <li>雷欧奥特曼</li>
    <li>捷德奥特曼</li>
    <li>欧布奥特曼</li>
</ul>
  • Benutzerdefinierte Liste
<!--
自定义列表 DIY list
dt:列表名字
dd:列表内容
-->
<dl>
    <dt>奥特曼</dt>
    <dd>迪迦奥特曼</dd>
    <dd>泰罗奥特曼</dd>
    <dd>雷欧奥特曼</dd>
    <dd>捷德奥特曼</dd>
    <dd>欧布奥特曼</dd>
</dl>

 

2. Formular

Colspan: Kreuzsäule

Zeilenbereich: Zwischenzeilen

<!--表格 table
行 tr
列 td
-->

<table border="1px">
    <tr>
        <td colspan="4">   </td>
    </tr>
    <tr>
        <td rowspan="2">   </td>
        <td>   </td>
        <td>   </td>
        <td>   </td>
    </tr>
    <tr>
        <td>   </td>
        <td>   </td>
        <td>   </td>
    </tr>
</table>

3. Medienelemente

<!--视频元素
controls:控制控件
autoplay:自动播放
-->
<video src="视频地址" controls autoplay></video>

<!--音频元素-->
<audio src="音频地址" controls autoplay></audio>

 


Der Inhalt des Artikels ist nach dem Selbststudium des HTML-Teils von " Meeting Crazy God" organisiert . Ich möchte dem Blogger hier danken . Klicken Sie hier für den Link von Station b .

Ich denke du magst

Origin blog.csdn.net/qq_41459262/article/details/113183625
Empfohlen
Rangfolge