HTML | Adresse |
---|---|
Grundlegende HTML-Hinweise | HTML-Grundlagen – super detailliert – keine Grundlagen – einfach und leicht zu verstehen_ddddddyus Blog-CSDN-Blog |
Erweiterte HTML5-Hinweise | Erweiterte HTML5-Notizen – sehr detailliert – prägnant und leicht verständlich_ddddddyus Blog-CSDN-Blog |
1 Einführung in HTML
Website: Nach bestimmten Regeln eine Sammlung von Webseiten, die mit HTML erstellt wurden, um bestimmte Inhalte im Internet anzuzeigen
Webseite: Eine „Seite“ in einer Website ist das Grundelement, aus dem eine Website besteht, normalerweise eine Datei im HTML-Format (.htm oder .html), die von einem Browser gelesen wird
HTML: Hypertext (über die Grenzen von Text hinaus, Hyperlink-Text), Hypertext-Markup-Sprache
1.1 Gängige Browser und Kernel:
Browser | Kernel | Anmerkung |
---|---|---|
IE | Dreizack | IE, Cheetah Security, 360 Speed Browser, Baidu Browser |
Feuerfuchs | Gecko | Es ist schade, dass es in den letzten Jahren zurückgegangen ist, mit langsamer Öffnungsgeschwindigkeit, häufigen Upgrades, schweineähnlichem Teamkollegen-Blitz und gottähnlichem Gegner-Chrom. |
Safari | Webkit | Viele Leute nennen Webkit jetzt fälschlicherweise den Chrome-Kernel (obwohl der Chrome-Kernel bereits blinkt). Apple fühlte sich, als hätte jemand ihre Schwiegertochter ausgeraubt, und sie wurde ohnmächtig, weil sie auf der Toilette weinte. |
Chrom | Chrom/Blink | Entwickeln Sie die Blink-Rendering-Engine (Browserkern) im Chromium-Projekt, die in den Chrome-Browser integriert ist. Blink ist eigentlich ein Fork von WebKit. Die neuesten Versionen der meisten inländischen Browser verwenden den Blink-Kernel. sekundäre Entwicklung |
Oper | blinken | Folgen Sie nun Chrome mit dem Blink-Kernel. |
1.2 Webstandards
Strukturstandards, Leistungsstandards und Verhaltensstandards
Standard | veranschaulichen |
---|---|
Struktur | Die Struktur wird zum Organisieren und Klassifizieren von Webseitenelementen verwendet . Wir lernen hauptsächlich HTML. |
Leistung | Es wird verwendet, um das Layout, die Farbe, die Größe und andere Darstellungsstile von Webseitenelementen festzulegen , wobei es sich hauptsächlich auf CSS bezieht |
Verhalten | Verhalten bezieht sich auf die Definition des Webseitenmodells und das Schreiben von Interaktionen . Wir lernen hauptsächlich Javascript |
Vorteile von Webstandards: einfache Wartung, schnelle Seitenreaktion, Zugänglichkeit, Gerätekompatibilität
2 HTML-Syntaxspezifikation
Grundlegende Syntaxübersicht:
- Schlüsselwörter in spitzen Klammern: <html>
- Erscheinen normalerweise paarweise (doppelte Tags): <html> und </html>
- Sehr wenige einzelne Tags:<br />
Etikettenbeziehung: enthalten, parallel
3 HTML-Grundstruktur-Tags
Verlinke den Namen | Definition | veranschaulichen |
---|---|---|
<html></html> | HTML-Tags | Wir nennen es das größte Tag auf der Seite: das Root-Tag |
<Kopf><Kopf> | Dokumentenkopf | Hinweis: Das Tag, das wir im Head-Tag setzen müssen, ist title |
<title></title> | der Titel des Dokuments | Lassen Sie die Seite einen eigenen Seitentitel haben |
<body></body> | Hauptteil des Dokuments | Das Element enthält den gesamten Inhalt des Dokuments, und der Inhalt der Seite wird grundsätzlich im Hauptteil platziert |
4 Einige Anweisungen im automatischen HTML-Generierungsgerüst
4.1 Dokumenttyp-Deklarations-Tag: <!DOCTYPE>
Die Dokumenttypdeklaration wird verwendet, um dem Browser mitzuteilen, welche HTML-Version zur Anzeige der Webseite verwendet werden soll
<!DOCTYPE html>
Die Bedeutung dieses Codes: Die aktuelle Seite verwendet die HTML5-Version, um die Webseite anzuzeigen
Notiz:
- Die <!DOCTYPE>-Deklaration wird ganz vorne im Dokument vor dem <html>-Tag platziert
- <!DOCTYPE> ist kein HTML-Tag, sondern ein Dokumenttyp-Deklarations-Tag
4.2 Sprachtypen von lang
Wird verwendet, um die im aktuellen Dokument angezeigte Sprache zu definieren
- en definiert die Sprache als Englisch
- zh-CN definiert die Sprache als Chinesisch
<html lang="en">
4.3 Zeichensatz:
Dabei handelt es sich um eine Sammlung mehrerer Zeichen, sodass der Computer verschiedene Zeichen erkennen und speichern kann
Im <head>-Tag können Sie über das charset-Attribut des <meta>-Tags angeben, welche Zeichenkodierung das HTML-Dokument verwenden soll
<meta charset="UTF-8" />
Die am häufigsten verwendeten Zeichensatzwerte sind: GB2312, BIG5, GBK, UTF-8, wobei UTF-8 auch als Universalcode bezeichnet wird und im Wesentlichen die Zeichen enthält, die alle Länder der Welt verwenden müssen
5 gängige Tags in HTML
Verlinke den Namen | Definition | Merkmale |
---|---|---|
<h1> - <h6> | Titel-Tag | 1-6 in abnehmender Bedeutung, exklusive Zeile |
<p></p> | Absatz-Tag | Der Text wird automatisch entsprechend der Fenstergröße umbrochen und es gibt Lücken zwischen den Absätzen |
<br /> | Newline-Tag | Einzelnes Tag, einfach eine neue Zeile beginnen, p-Tags haben einen vertikalen Abstand, Zeilenumbrüche nicht |
<hr /> | Horizontale Linienbeschriftung | eine Linie |
Textformatierung | ||
<strong> </strong> | deutlich |
Es wird empfohlen, Ersteres zu verwenden |
<b> </b> | deutlich | |
<em> </em>或<i> </i> | Neigung | |
<del> </del> oder <s>. </s> | durchgestrichen | |
<ins> </ins> und <u> </u> | unterstreichen | |
<div>- und <span>-Tags | keine Semantik | Wird für das Layout verwendet, ein Div pro Zeile, mehrere Bereiche pro Zeile (kann später mit CSS geändert werden) |
5.1 Bild-Tag: <img src="image URL" />
Attribute | Attributwert | beschreiben |
---|---|---|
src | Bildpfad | erforderliches Attribut |
alt |
Text | Ersatztext, Text, der in Bildern nicht angezeigt werden kann |
Titel | Text | Eingabeaufforderungstext: Bewegen Sie die Maus über das Bild und der angezeigte Text |
Breite | Pixel | Legen Sie die Breite des Bildes fest |
Höhe | Pixel | Stellen Sie die Höhe des Bildes ein |
Grenze | Pixel | Legen Sie die Randstärke des Bildes fest |
Weg:
relativer Pfad | Einstufung | |
Weg auf gleicher Ebene: | <img src="baidu.gif" /> | |
Pfad der nächsten Ebene: / | <img src="image/baidu.gif" /> | |
Pfad der oberen Ebene: ../ | <img src="../image/baidu.gif" /> | |
绝对路径 | 本地绝对路径 | "D:\web\img\logo.gif" |
完整网络地址 | "http://jerry-z-j-r.github.io" |
5.2 超链接标签
<a href="跳转目标" target="目标窗口的弹出方式"></a>
target:
- _self:默认值
- _blank:在新窗口中打开的方式
链接类型:外部链接、内部链接、空连接、下载链接、锚点链接(搭配id使用 #two 目标位置id=“two”)
6 HTML中的注释与特殊字符
注释:<!--注释语句-->
特殊字符:
7 表格标签
<table>
<tr> <th>姓名</th> </tr>
<tr> <td>单元格内的文字</td> </tr>
</table>
<table></table> | 用于定义表格的标签 | |
<tr> </tr> | 用于定义表格中的行 | 必须嵌套在 <table> </table> 标签中 |
<td> </td> | 用于定义表格中的单元格 | 必须嵌套在 <tr> </tr> 标签中、单元格里面可以放任何的元素 |
<th>姓名</th> | 表头标签 | 嵌套在 <tr> </tr> 标签中 |
7.1 表格属性:不常用,一般通过CSS设置
属性 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对位周围元素的对齐方式 |
border | 1 或 "" | 边框 |
cellpadding | 像素值 | 单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
7.2 表格结构标签:写在<table></table>中
<thead> </thead> | 头部区域 | 内部必须拥有 <tr> 标签,一般是位于第一行 |
<tbody> </tbody> | 主体区域 | 用于定义表格的主体,主要用于放数据本体 |
7.3 合并单元格:对单元格td操作!
合并方式:跨行(rowspan)、跨列(colspan)
合并三步曲:
- 先确定是跨行还是跨列合并
- 找到目标单元格,写上合并方式=合并的单元格数量,比如:<td colspan="2"> </td>
- 删除多余单元格
8 列表标签
列表用来布局,更加整齐有序
标签名 | 定义 | 说明 |
---|---|---|
<ul> </ul> | 无序标签 | 里面只能包含li,没有顺序。li里面可以包含任何标签 |
<ol> </ol> | 有序标签 | 里面只能包含li,有顺序 |
<dl> </dl> | 自定义标签 | 里面只能包含dt和dd,dt和dd里面可以放任何标签 |
9 表单标签
收集用户信息的作用
9.1 表单域:是一个包含表单元素的区域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
<form> 会把它范围内的表单元素信息提交给服务器
常用属性:
属性 | 属性值 | 说明 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为 get 或 post |
name | 表单域名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
9.2 表单元素:<input type="属性值" />
是个单标签,用于收集用户信息,根据type属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)
type属性:
属性值 | 说明 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本) |
checkbox | 定义复选框,即:多选框,在一组复选框中,要求它们必须拥有相同的 name |
file | 定义输入字段和 “浏览” 按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码 |
radio | 定义单选按钮,在一组单选按钮中,要求它们必须拥有相同的 name |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符 |
除 type 属性外,<input />标签还有很多其他很多属性,其常用属性如下:
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义 input 元素的名称 |
value | 由用户自定义 | 规定 input 元素的值 |
checked | checked | 规定此 input 元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中字符的最大长度 |
- name 和 value 是每个表单元素都有的属性值,主要给后端人员使用。
- name 是表单元素的名字,要求 单选框和复选框要有相同的name值
- checked 属性主要针对于单选框和复选框,主要作用是一打开页面,就可以默认选中某个表单元素
<label> 标签:
- <label> 标签用于绑定一个表单元素,当点击 <label> 标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
- <label> 标签的 for 属性应当与相关元素的 id 属性相同
<label for="nan">男</label>
<input type="radio" name="sex" id="man" />
9.3 <select> 表单元素
- 在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用 <select> 标签控件定义下拉列表
- <select> 中至少包含一对 <option>
- 在 <option> 中定义 selected="selected" 时,当前项即为默认选中项
<select>
<option>选项1</option>
<option>选项2</option>
...
</select>
9.4 <textarea> 表单元素
- 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 <textarea> 标签
- 通过 <textarea> 标签可以轻松地创建多行文本输入框
- cols="Die Anzahl der Zeichen in jeder Zeile", rows="Die Anzahl der angezeigten Zeilen", wir werden es in der tatsächlichen Entwicklung nicht verwenden, wir werden CSS verwenden, um die Größe zu ändern
<textarea rows="3" cols="20">
文本内容
</textarea>
9.5 Formularzusammenfassung
Wir haben drei Gruppen von Formelementen gelernt
-
Eingabe-Eingabeformularelement
-
Wählen Sie ein Dropdown-Formularelement aus
-
textarea-Textfeld-Formularelement
Diese drei Gruppen von Formularelementen sollten im Formularfeld enthalten sein und über ein Namensattribut verfügen
Verweise:
Video und Materialien für Lehrer in Pink der Station B