Heim >Web-Frontend >HTML-Tutorial >Detaillierte Einführung in grundlegende HTML-Routinen
Detaillierte Einführung in grundlegende HTML-Routinen
- 高洛峰Original
- 2017-03-23 10:15:551806Durchsuche
In dieser Notiz werden die grundlegendsten Tags und Verwendungsroutinen aufgezeichnet. Sie werden hier aufgezeichnet, um die zukünftige Konsolidierung zu erleichtern, und auch für andere Kollegen als Referenz und für einfache Beispiele, die bereits in jungen Jahren und so trivial sind wie HTML 5 muss Schritt für Schritt bewältigt werden, es gibt keinen anderen guten Weg!
Darüber hinaus ist meine Programmierumgebung wie folgt konfiguriert: HTML 5-Bearbeitungs-IDE verwendet Klammern, PHP verwendet Notepad ++.
Routine 1: Hallo Welt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个教程</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>Erklärung:
8b05045a5be5764f313ed5b9168a17e6 ist als HTML5-Dokument deklariert. Das
100db36a723c770d327fc0aef2ce13b1 >
Das Element 93f0f5c25f18dab9d176bd4f6de5d30e enthält die Metadaten des Dokuments b2386ffb911b14667cb8f0f91ea547a7 Das Element beschreibt den Titel des Dokuments 6c04bd5ca3fcae76e30b72ad730ca86d InhaltDas Element
4a249f0d628e2318394fd9b75b4636b1 definiert einen großen Titel e388a4556c0f65e1904146cc1a846bee Das Element definiert einen Absatz Routine 2: Titel<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<h1>我的标题1</h1>
<h2>我的标题2</h2>
<h3>我的标题3</h3>
<h4>我的标题4</h4>
<h5>我的标题5</h5>
<h6>我的标题6</h6>
</body>
</html> Routine 3: HTML-Absatz<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<h1>我的标题1</h1>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
</body>
</html>Routine 4: HTML-Link<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<a href="http://www.runoob.com">网易</a>
</body>
</html>Routine 5 HTML-Bild<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<img src="screenshots/quick-edit.png" width="200" height="200">
</body>
</html>Routine 6: Fügen Sie eine Zeile zum hinzu Webseitenzeile<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<img src="screenshots/quick-edit.png" width="200" height="200">
<hr>
<p>段落1</p>
<hr>
<p>段落2</p>
<hr>
</body>
</html>Routine 7: Kommentare zum Programm hinzufügen<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<!-- 在网页上显示图片 -->
<img src="screenshots/quick-edit.png" width="200" height="200">
<hr>
<!-- 段落1的内容 -->
<p>段落1</p>
<hr>
<p>段落2</p>
<hr>
</body>
</html>Routine 8 Ausgabe der Schriftartformatierung<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二个例子</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br> 这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>Routine 9 HTML-CSS
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的例程</title> </head> <body> <a href="http://www.163,com/" >访问网易!</a> <h1 style="text-align:center">居中对齐</h1> </body> </html>Routine 10 Tabelle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的例程</title>
</head>
<body>
<table border="1">
<tr>
<th>头部1</th>
<th>头部2</th>
</tr>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
</body>
</html>Routine 11 Ungeordnete Liste<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的例程</title>
</head>
<body>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</body>
</html>Routine 12: Geordnete Liste<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的例程</title>
</head>
<body>
<ol>
<li>呵呵</li>
<li>呵呵</li>
<li>呵呵</li>
</ol>
<ol start="50">
<li>呵呵</li>
<li>呵呵</li>
<li>呵呵</li>
</ol>
</body>
</html>Routine 13: Blockbereich Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in grundlegende HTML-Routinen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!