Eine Pflichtlektüre, eine systematische Einführung in die grundlegenden Wissenspunkte von Front-End-HTML und CSS

Frontend

1 Was ist Frontend?

Das Frontend ist der Frontend-Teil der Website, der auf PCs, Mobilgeräten und anderen Browsern läuft und zeigt die Webseiten an, die Benutzer durchsuchen können. Mit der Entwicklung der Internettechnologie, der Anwendung von HTML5, CSS3 und Front-End-Frameworks kann sich plattformübergreifendes responsives Webdesign an verschiedene Bildschirmauflösungen anpassen und perfektes dynamisches Design kann Benutzern ein sehr hohes Benutzererlebnis bieten.

Front-End-Technologie wird im Allgemeinen in Front-End-Design und Front-End-Entwicklung unterteilt. Unter Front-End-Design kann im Allgemeinen das visuelle Design der Website verstanden werden, und Front-End-Entwicklung ist das Front-End Code-Implementierung der Website, einschließlich grundlegendem HTML, CSS und JavaScript

2 Technologie-Stack für die Front-End-Entwicklung

HTML

• Hyper Text Markup Language

• „Hypertext“ bedeutet, dass die Seite Bilder, Links und sogar Nicht-Text-Elemente wie Musik und Programme enthalten kann.

• ist dafür verantwortlich für die Vervollständigung der Struktur der Seite

CSS

• Cascading Style Sheet

• Verantwortlich für die Stildesign, Stil und Schönheit der Seite

JavaScript

• Browser-Skriptsprache, Sie können Programme schreiben, die im Browser ausgeführt werden

• Eine richtige Programmiersprache

• Verantwortlich für das Schreiben von Seitenspezialeffekten, das Aufrufen der API (BOM) des Browsers und das Ändern des Seiteninhalts (DOM), Daten vom Backend (Ajax) abrufen, die Seite rendern usw.

• jQuery ist eine JavaScript-Bibliothek

• Vue, Angular, React usw. sind JavaScript-Frameworks

HTML5-Grundlagen

1.HTML

1.1 Was ist HTML

• HTML wird verwendet, um eine Webseiten-Markup-Sprache zu erstellen

• HTML ist Hypertext Markup. Die englische Abkürzung für Language, also Hypertext Markup Language

• HTML-Sprache ist eine Auszeichnungssprache, die keine Kompilierung erfordert und direkt mit dem Browser ausgeführt werden kann

• HTML-Datei ist eine Textdatei, die einige HTML-Elemente, Tags usw. enthält.

• HTML-Dateien müssen .html oder .html verwenden. Fragen Sie nach dem Dateinamensuffix

• HTML ist nicht größenabhängig, es wird empfohlen, Kleinbuchstaben

• HTML wird vom W3C (World Wide Web Consortium) gepflegt

• HTML ist der Schlüssel zur Welt der WEB-Technologie

1.2 Entwicklungsgeschichte

• HTML begann mit Version 2.0 und es gibt tatsächlich keine offizielle Spezifikation für 1.0. Veröffentlicht als Arbeitsentwurf der Internet Engineering Task Force (IETF). Juni 1993 (kein Standard) HTML 2.0 – Veröffentlicht als RFC 1866 im November 1995, nach der Veröffentlichung von RFC 2854 im Juni 2000 für veraltet erklärt

• HTML 3.2 – 14. Januar 1997, W3C Empfehlung

• HTML 4.0 – 18. Dezember 1997, W3C-Empfehlung

• HTML 4.01 (geringfügige Verbesserung) – 24. Dezember 1999, W3C-Empfehlung

• HTML 5 – 28. Oktober 2014 Japan, vom W3C empfohlener Standard (was wir jetzt verwenden, ist HTML5)

1.3 Der Ursprung von HTML5

• Der Vorgänger des HTML5-Entwurfs hieß Web Applications 1.0, wurde 2004 von WHATWG vorgeschlagen, 2007 vom W3C akzeptiert und ein neues HTML-Arbeitsteam wurde gegründet.

• Der erste offizielle Entwurf von HTML 5 wurde am 22. Januar 2008 veröffentlicht. HTML5 ist noch in Arbeit. Allerdings verfügen die meisten modernen Browser bereits über eine gewisse HTML5-Unterstützung.

• Am 17. Dezember 2012 gab das World Wide Web Consortium (W3C) offiziell bekannt, dass die HTML5-Spezifikation, die die Bemühungen einer großen Anzahl von Netzwerkarbeitern gebündelt hat, offiziell fertiggestellt wurde . In der Rede des W3C heißt es: „HTML5 ist der Grundstein der offenen Web-Netzwerkplattform.“

• Am 6. Mai 2013 wurde der offizielle Entwurf von HTML 5.1 angekündigt. Die Spezifikation definiert die fünfte Hauptversion, die erste, die die Kernsprache des World Wide Web überarbeitet: Hypertext Markup Language (HTML). In dieser Version werden kontinuierlich neue Funktionen eingeführt, um Webanwendungsautoren dabei zu helfen, die Interoperabilität neuer Elemente zu verbessern.

• Am 29. Oktober 2014 gab das World Wide Web Consortium bekannt, dass die Standardspezifikation nach fast acht Jahren harter Arbeit endlich fertiggestellt wurde.

1.4 Vorteile von HTML5

• 1. Verbessern Sie die Benutzerfreundlichkeit und das benutzerfreundliche Erlebnis; 2. Es gibt mehrere neue Tags, die Entwicklern helfen, wichtige Inhalte zu definieren.

• 3. Kann mehr Multimedia-Elemente (Video und Audio) auf die Website bringen; >
  4. Kann ein guter Ersatz für FLASH und Silverlight sein

• 5. ;

• Wird häufig in mobilen Anwendungen und Spielen verwendet

• 7.

• 1.5 HTML5-Kompatibilität

• Internet Explorer 9 und höher

Chrome, Safari, Opera, Firefox und verschiedene inländische Browser mit Wekkit als Kern

• 2 Grundlegende HTML-Syntax
• 2.1 HTML-Tags
  * Tags sind HTML Die grundlegendste Einheit und wichtiger Bestandteil von

* verwendet normalerweise zwei Eckklammern: < und >

* Die Tags sind geschlossen (zwei Formen: paarweise gepaart mit oder nicht)

* 双标签（成对）：<标签名> 可以加内容 如：`

内容` 显示开始结束

* 单标签（不成对）：<标签名/> 两个单标签内不可加内容 如： `
`   ,   `

---

`   里面的左斜杠可以省略

* 标签大小写都可以，推荐使用小写

* 对与HTML标签来将，最重要的是语义

2.2 HTML标签属性

• HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。

• 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。

• 标签可以拥有多个属性。

• 属性由属性名和值成对出现。

• 语法格式如下：

<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">

单标签

双标签

2.3 HTML代码格式

任何回车或空格在源代码中都是不起作用，一般标签嵌套用缩进所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以Tab键为准。

2.4 HTML 注释

 

可以在里面写单行注释，也可以写多行

注释里的！符号和-- 要连起来不能空格

2.5 HTML实体

注意：用来表示特殊符号，跟转义字符有像

• &nbsq; 表示一个空格

• <表示特殊符号 <

• > 表示符号 <

• ©表示版权符号 ©上海公安 版权号333333455

• ¥表示人民币符号 ¥1000

• &表示实体本身& 如果是空格则就显示& 如果是符号 则&符号

3 HTML常用标签

文档声明

3.1 主体结构

•  此元素可告知浏览器其自身是一个 HTML 文档。

• 用于定义文档的头部，它是所有头部元素的容器,对文件的描述。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

• 代表文件内容,定义文档的主体

3.2HEAD头部标签

• 双标签内写标题，网页标题

• 标签为页面上的所有链接规定默认地址或默认目标

• 写在最上面，因为下面有输入字符，指定网页的元信息可指定字符编码，关键字，描述信息属性：charset , name ,content

            指定编码

• 导入css 文档，或者指定的网页图标 属性 src ， type ，rel

从文件导入css 

• <script></script>标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

<script></p> <p>alert('OK')</p> <p></script>

3.3 Formatierungs-Tags

• 1~6 Titel

• < p> Absatz

• Ausgabe wie sie ist

• 
  Zeilenumbruch

• ---

  getrennte

• Tags ohne jegliche Semantik

3.4 Text-Tags

• werden kursiv hervorgehoben

• Für Fettdruck

• H5 hinzugefügt bedeutet ausgewählt

• Tiefgestelltes chemisches Element Wasser

• < ;/ins> Hinzugefügter Inhalt ist unterstrichen

• Der gelöschte Inhalt ist unterstrichen

• Pinyin H5 hinzugefügt ;/rt> Nihaos Anzeige oben hinzufügen

CSS-Grundsyntax

Link zur Einführung in die externe CSS-Datei

ist in HTML geschrieben
Verwenden des Style-Attributs des HTML-Elements
Format

• Selector{

CSS-Eigenschaft: value;

CSS-Eigenschaft: value;

}

Selector {property:value;property:value}

Comments

/* */

CSS-Länge Einheit

Pixel Pixel

em Vielfache der Standardgröße

Prozentsatz Die Standardgröße bezieht sich auf

cm

mm

pt

CSS-Farbeinheit

Farbname: rot/grün/blau/lila/orange/gelb/rosa/himmelblau

rgb-Nummer rgb(34,45,23 ) rgb(20%, 57%, 100%)

Hexadezimal #abcdef #f90 #ccc

5 CSS-Selektor

#Tag-Namen-Selektor

tagName {

}

# Klassenname

.className {

}

#ID Selector

# idName {

}

# Globaler Selektor

* {

}

# Kombinierte Nachkommenelemente

Selektor selector .list li

# Kombinations-Unterelement

selector>selector .list>li

# Gruppe

selector, selector, selector h1, h2 ,p,.list

# Mehrere Bedingungen .item.frist_item

p.item

6 Selektorpriorität

ID > tagName > ; *

Vergleich der Anzahl der Kombinationsselektoren basierend auf Prioritäten

7 häufig verwendete CSS-Eigenschaften

Schriftart

Schriftfamilie Schriftfamilie: „Arial“, „Helvetica“, „宋体“, Sans-Serif; oder Serifenschrift Serifen

Schriftgröße 10px 1.3em kann verwendet werden
Schriftstärke normal/fett, Schriftbreite standardmäßig und fett
Schriftart normal/kursiv, Schriftart standardmäßig kursiv
Schriftvariante Normal/Kapitälchen, Standard-Kapitälchen
Schriftkompositattribut
Schriftart:[Gewicht | |. Variante] Größenfamilie

• Farbe

Farbe Textfarbe

Text

• Wortabstand -spacing

letter-spacing letter-spacing 1px 2em 2-Wort-Leerzeichen

text-align: Text links / zentriert / rechts horizontal ausgerichtet links zentriert links
vertikal-align: baseline / middle .... Die standardmäßige vertikale Ausrichtungsmethode für Bilder und Text ist in der Mitte
line-height Wenn die Zeilenhöhe eine Zeile beträgt, ist die Höhe gleich der Zeilenhöhe. Wenn die Höhe gleich ist, wird sie links zentriert
text-decoration: none /overline/underline/line-through Die Textdekoration wird standardmäßig überstrichen und durchgestrichen unterstrichen
text-indent: 2em erste Zeile des Texteinzugs
Zeilenumbruch: Umbruchwort Das Wort ist zu lang oder die URL kann umgebrochen werden
overflow-wrap Alias ​​von Word-Wrap CSS3
white-space pre pre-wrap Behalten Sie die Eingabe bei, wie sie ist. Wenn der Text die Grenze erreicht, umbrechen Sie
Verwandte Artikel:

• Front-End-Grundlagen (Null) CSS-Grundlagen

Front-End-Studiennotizen für Neulinge – grundlegende Wissenspunkte von HTML/CSS/JS

Verwandte Videos:

Grundlegende Einführungsvideo-Tutorials zu HTML und CSS – kostenlose Online-Video-Tutorials

Das obige ist der detaillierte Inhalt vonEine Pflichtlektüre, eine systematische Einführung in die grundlegenden Wissenspunkte von Front-End-HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!