Dieser Artikel stellt hauptsächlich die HTML-Kenntnisse vor, die für die Front-End-Entwicklung erlernt werden müssen, und stellt die grundlegenden Technologien vor, die zum Erlernen der Web-Front-End-Entwicklung beherrscht werden müssen
1 Einführung in HTML
1.1 Erste Erfahrungen mit Code, Erstellen der ersten Webseite
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>制作我的第一个网页</title> </head> <body> <h1>Hello World</h1> </body> </html>
1.2 Die Beziehung zwischen HTML und CSS
Erlernen der grundlegenden Technologien von Die Web-Frontend-Entwicklung erfordert die Beherrschung der folgenden Sprachen: HTML, CSS, JavaScript. Werfen wir einen Blick darauf, was mit diesen drei Technologien erreicht wird:
1. HTML ist der Träger von Webinhalten. Inhalt sind die Informationen, die Webseitenersteller auf der Seite bereitstellen, damit Benutzer sie durchsuchen können. Dazu können Texte, Bilder, Videos usw. gehören.
2. CSS-Stil ist Leistung. Es ist wie ein Mantel für eine Webseite. Zum Beispiel die Schriftart des Titels, Farbänderungen oder das Hinzufügen von Hintergrundbildern, Rahmen usw. zum Titel. All diese Dinge, die zur Veränderung des Erscheinungsbilds von Inhalten dienen, werden Präsentationen genannt.
3. JavaScript wird verwendet, um Spezialeffekte auf Webseiten zu implementieren. Beispiel: Das Dropdown-Menü wird angezeigt, wenn die Maus darüber fährt. Oder die Hintergrundfarbe der Tabelle ändert sich, wenn die Maus darüber fährt. Es gibt auch eine Rotation aktueller Nachrichten (Nachrichtenbilder). Es versteht sich, dass Animation und Interaktion im Allgemeinen mithilfe von JavaScript implementiert werden.
Der folgende Code demonstriert die Wirkung von CSS, um Webseitenelemente wie Elementposition, Größe, Farbe, Schriftart usw. darzustellen:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Html和CSS的关系</title> <style type="text/css"> h1{ font-size:19px; color:#930; text-align:center; } </style> </head> <body> <h1>Hello World!</h1> </body> </html>
(1) Zeile 8 des Codes beeinflusst die Textgröße des Fensters.
(2) Zeile 9 des Codes beeinflusst die Änderung der Fenstertextfarbe.
(3) Zeile 10, Änderungen, die sich auf die Zentrierung des Fenstertextes auswirken.
1.3 HTML-Tags verstehen
Verschiedene Webseiten bestehen aus HTML-Tags. Das Folgende ist eine einfache Webseite:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>认识html标签</title> </head> <body> <h1>勇气</h1> <p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p> <img src="http://img.imooc.com/52b4113500018cf102000200.jpg" > </body> </html>
Der Effekt ist wie folgt:
Analyse Aus welchem HTML besteht diese Webseite:
(1) „Courage“ ist der Titel des Webinhaltsartikels,
Als ich in der dritten Klasse war ... hatte ich nicht den Mut, mitzumachen.
1.4 Beschriftungssyntax
1. Eine Beschriftung wird durch englische spitze Klammern < und > eingeschlossen.2. Tags in HTML erscheinen im Allgemeinen paarweise, unterteilt in Start-Tags und End-Tags. Das schließende Tag hat ein / mehr als das öffnende Tag.
3. Das Tag-Strukturdiagramm lautet wie folgt:
5. Die Reihenfolge ist jedoch verschachtelt muss konsistent sein. Beispiel:
ist in
verschachtelt. Wie unten gezeigt.7. Test: Es gibt einen Webseitencode, aber in der 9. Zeile fehlt der Code, bitte hinzufügen:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>标签的语法</title> </head> <body> <h1>在本教程中,你将学习如何使用 HTML 来创建站点</h1> <p>当特殊的样式需要应用到个别元素时,就可以使用内联样式。 </body> </html>
1.5 html/ head/body Verstehen Sie die Grundstruktur von HTML-Dateien
Lernen Sie die Struktur von HTML-Dateien: Eine HTML-Datei hat ihre eigene feste Struktur.<html> <head>...</head> <body>...</body> </html>
代码讲解:
1. 称为根标签,所有的网页标签都在中。
2.