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

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 属性指向外部脚本文件。

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

Link zur Einführung in die externe CSS-Datei

Selector{

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

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

Farbe

Farbe Textfarbe

Wortabstand -spacing

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

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!