<!DOCTYPE html>
. Diese Deklaration teilt dem Browser mit, welche Dokumenttypdefinition (DTD) dieses Dokument übernimmt. Als nächstes folgt das <html>
-Tag, das verwendet wird, um den Anfang und das Ende der Webseite anzuzeigen. Innerhalb des <html>
-Tags gibt es normalerweise zwei wichtige Unter-Tags: <head>
und <body>
. <!DOCTYPE html>
。这个声明告诉浏览器这个文档采用哪个文档类型定义(DTD)。紧接着是 <html>
标签,用来表示网页的开始和结束。在 <html>
标签内,通常会有两个重要的子标签:<head>
和 <body>
。
<ul>
<li>
<head>
标签:它里面的内容不会直接显示在浏览器中,主要是为提供页面的元数据(metadata)。其中可以包含 <title>
标签(用来设置网页的标题)和 <meta>
标签(用来设置网页的关键字、描述等信息)等。
<li>
<body>
标签: 这是页面的主要部分,包含了网页内容的 HTML 标签。
<p>下面是一个基本的 HTML 结构代码:
<!DOCTYPE html> <html> <head> <title>我的网页标题</title> <meta charset="utf-8"> </head> <body> 这里是内容 </body> </html>
<p>
标签,表示一个段落。
<p>这是一个段落。</p>
<p>
标签内的文本“这是一个段落。”就是一个段落的文本内容。同时,HTML 还提供多种级别的标题 (h1、h2、h3……h6)
,以加强文章的层次感和结构感。
<h1>这是一个一级标题。</h1> <h2>这是一个二级标题。</h2>
<img>
标签来插入图像。
<img src="图片路径" alt="图片描述">
src
属性是必须的,用来指定图像文件的 URL 或相对文件路径。alt
属性是为了当图片无法显示时,在页面上显示一段文字来说明图片的内容。
<a>
标签来创建一个链接。
<a href="http://www.example.com">这是一个链接</a>
href
属性是必须的,用来指定链接的目标 URL。同时,还可以在 <a>
标签中添加 title
属性,来增加鼠标悬停时的提示信息。
<p>如果要链接到同一目录下的其他 HTML 文档,还可以使用相对路径:
<a href="./about.html">关于我们</a>
<ul>
和 <li>
标签来创建无序列表,使用 <ol>
和 <li>
标签来创建有序列表。
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
<table>
、<tr>
、<th>
和 <td>
标签来创建表格。
<table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>22</td> <td>女</td> </tr> </table>
<th>
标签表示表头单元格,<td>
标签表示数据单元格,<tr>
标签表示行,<table>
标签表示整个表格。
<form>
、<input>
、<label>
、<select>
和 <textarea>
等标签来创建表单。
<form> <label>用户名:</label> <input type="text" name="username"><br> <label>密码:</label> <input type="password" name="password"><br> <label>年龄:</label> <input type="number" name="age"><br> <label>性别:</label> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女<br> <label>兴趣爱好:</label> <input type="checkbox" name="hobby" value="reading">阅读 <input type="checkbox" name="hobby" value="traveling">旅游 <input type="checkbox" name="hobby" value="swimming">游泳<br> <label>个人介绍:</label><br> <textarea name="introduction" rows="6" cols="50"></textarea><br> <input type="submit" value="提交"> </form>
<input>
标签表示表单元素,name
属性表示表单数据的名称,type
属性表示表单元素的类型,value
属性表示表单元素的值,<select>
标签表示下拉菜单,<textarea>
标签表示多行文本框,<label>
标签用来描述表单元素,<form>
标签用来包含表单元素,<input type="submit">
<ul>
<head>
Tag: Der darin enthaltene Inhalt wird nicht direkt im Browser angezeigt, sondern dient hauptsächlich der Bereitstellung von Metadaten für die Seite. Es kann <title>
-Tags (zum Festlegen des Titels der Webseite) und <meta>
-Tags (zum Festlegen von Schlüsselwörtern, Beschreibung und anderen Informationen) enthalten der Webseite) usw. .
<body>
Tag: Dies ist der Hauptteil der Seite und enthält die HTML-Tags für den Webinhalt. <p>
, das einen Absatz darstellt. 🎜rrreee🎜Im obigen Code ist der Text „Dies ist ein Absatz“ im <p>
-Tag der Textinhalt eines Absatzes. Gleichzeitig bietet HTML auch mehrere Titelebenen (h1, h2, h3...h6)
, um die Schichtung und Struktur des Artikels zu verbessern. 🎜rrreee<img>
verwenden, um Bilder einzufügen. 🎜rrreee🎜Unter diesen ist das Attribut src
erforderlich und wird verwendet, um die URL oder den relativen Dateipfad der Bilddatei anzugeben. Das Attribut alt
wird verwendet, um einen Text auf der Seite anzuzeigen, der den Inhalt des Bildes beschreibt, wenn das Bild nicht angezeigt werden kann. 🎜<a>
verwenden, um einen Link zu erstellen. 🎜rrreee🎜Das Attribut href
ist erforderlich und wird verwendet, um die Ziel-URL des Links anzugeben. Gleichzeitig können Sie auch das Attribut title
zum Tag <a>
hinzufügen, um Eingabeaufforderungsinformationen hinzuzufügen, wenn sich die Maus darüber bewegt. 🎜🎜Wenn Sie auf andere HTML-Dokumente im selben Verzeichnis verlinken möchten, können Sie auch relative Pfade verwenden: 🎜rrreee<ul> verwenden ;
- und <li>
-Tags zum Erstellen ungeordneter Listen sowie <ol>
- und <li>
-Tags zum Erstellen geordnete Listen. 🎜rrreee<table>
, <tr>
, < th>
- und <td>
-Tags zum Erstellen von Tabellen. 🎜rrreee🎜Unter diesen stellt das Label <th>
die Kopfzelle dar, das Label <td>
stellt die Datenzelle dar und <tr>
Das Label > stellt eine Zeile dar und das Label <table>
stellt die gesamte Tabelle dar. 🎜<form>
, <input> verwenden ;
, <label>
, <select>
und <textarea>
, um ein Formular zu erstellen. 🎜rrreee🎜Unter diesen stellt das Tag <input>
das Formularelement dar, das Attribut name
stellt den Namen der Formulardaten dar und der Tag type Das Attribut „code>“ stellt den Typ des Formularelements dar, das Attribut „<code>value“
stellt den Wert des Formularelements dar, die Bezeichnung „<select>
“ stellt das Dropdown-Menü dar. Die Bezeichnung <textarea>
stellt das mehrzeilige Textfeld dar, die Bezeichnung <label>
wird zur Beschreibung von Formularelementen verwendet, <form>
label wird verwendet, um Formularelemente zu enthalten, <input type="submit"> stellt die Schaltfläche „Senden“ dar. 🎜🎜🎜Andere Tags🎜🎜🎜Es gibt viele andere Tags in HTML, wie z. B. Audio- und Videowiedergabe, Animation, Canvas usw. Wenn Sie weitere Tags und Implementierungsmethoden kennen müssen, können Sie auf die offizielle HTML-Dokumentation oder verwandte Tutorials und Bücher zurückgreifen. 🎜🎜Kurz gesagt erfordert das Schreiben von HTML-Code die Beherrschung der grundlegenden Syntax und Tags sowie die flexible Verwendung verschiedener Tags und Attribute, um schöne und funktionale Webseiten zu erstellen. 🎜
Das obige ist der detaillierte Inhalt vonWie schreibe ich HTML-Code?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!