Une lecture incontournable, une introduction systématique aux points de connaissances de base du HTML et CSS front-end

Front-end

1 Qu'est-ce que le front-end

Le front-end est la partie frontale du site Web, qui fonctionne sur PC, mobile et autres navigateurs et affiche les pages Web que les utilisateurs peuvent parcourir. Avec le développement de la technologie Internet, l'application des frameworks HTML5, CSS3 et front-end, la conception Web réactive multiplateforme peut s'adapter à différentes résolutions d'écran, et une conception dynamique parfaite peut offrir aux utilisateurs une expérience utilisateur très élevée.

La technologie front-end est généralement divisée en conception front-end et développement front-end. La conception front-end peut généralement être comprise comme la conception visuelle du site Web, et le développement front-end est le front-end. implémentation du code du site Web, y compris HTML, CSS et JavaScript de base

2 Pile technologique pour le développement front-end

HTML

• Langage de balisage hyper texte

• « Hypertexte » signifie que la page peut contenir des images, des liens et même des éléments non textuels tels que de la musique et des programmes.

• est responsable pour compléter la structure de la page

CSS

• Feuille de style en cascade

• Responsable de la conception de style, style et beauté de la page

JavaScript

• Langage de script de navigateur, vous pouvez écrire des programmes qui s'exécutent sur le navigateur

• Un langage de programmation approprié

• Responsable de l'écriture des effets spéciaux de la page, appelant l'API du navigateur (BOM), opérant pour modifier le contenu de la page (DOM), obtenir des données du backend (Ajax), rendre la page, etc.

• jQuery est une bibliothèque de JavaScript

• Vue, Angular, React , etc. sont des frameworks JavaScript

Bases du HTML5

1.HTML

1.1 Qu'est-ce que HTML

• HTML est utilisé pour créer un langage de balisage de pages Web

• HTML est Hypertext Markup L'abréviation anglaise de Language, c'est-à-dire Hypertext Markup Language

• Le langage HTML est un langage de balisage qui ne nécessite pas de compilation et peut être exécuté directement avec le navigateur

• Le fichier HTML est un fichier texte qui contient des éléments HTML, des balises, etc.

• Les fichiers HTML doivent utiliser .html ou .html. Demandez le suffixe du nom de fichier

• Le HTML n'est pas sensible à la taille, il est recommandé d'utiliser des minuscules <.>

• HTML est maintenu par le W3C (World Wide Web Consortium)

• HTML est la clé du monde de la technologie WEB

1.2 Historique du développement

• HTML a commencé avec la version 2.0, et il n'y a en fait aucune spécification officielle pour la version 1.0 publiée en tant que version de travail de l'Internet Engineering Task Force (IETF) dans. Juin 1993 (pas un standard) HTML 2.0 - Publié sous le nom de RFC 1866 en novembre 1995, déclaré obsolète après la publication de RFC 2854 en juin 2000

• HTML 3.2 - 14 janvier 1997, W3C Recommandation

• HTML 4.0 - 18 décembre 1997, Recommandation du W3C

• HTML 4.01 (amélioration mineure) - 24 décembre 1999, Norme recommandée par le W3C

• HTML 5 - 28 octobre 2014 Japon, standard recommandé par le W3C (ce que nous utilisons actuellement est HTML5)

1.3 L'origine du HTML5

• Le prédécesseur du projet HTML5 était Web Applications 1.0, proposé par WHATWG en 2004, accepté par le W3C en 2007, et une nouvelle équipe de travail HTML a été créée.

• La première version officielle de HTML 5 a été publiée le 22 janvier 2008. HTML5 est toujours un travail en cours. Cependant, la plupart des navigateurs modernes prennent déjà en charge HTML5.

• Le 17 décembre 2012, le World Wide Web Consortium (W3C) a officiellement annoncé que la spécification HTML5, qui a rassemblé les efforts d'un grand nombre de travailleurs du réseau, a été officiellement finalisée. . Selon le discours du W3C : "HTML5 est la pierre angulaire de la plateforme de réseau Web ouverte."

• Le 6 mai 2013, la version officielle de HTML 5.1 a été annoncée. La spécification définit la cinquième version majeure, la première à réviser le langage de base du World Wide Web : Hypertext Markup Language (HTML). Dans cette version, de nouvelles fonctionnalités sont continuellement introduites pour aider les auteurs d'applications Web dans le but d'améliorer l'interopérabilité des nouveaux éléments.

• Le 29 octobre 2014, le World Wide Web Consortium a annoncé qu'après près de 8 ans de travail acharné, la spécification standard était enfin achevée.

1.4 Avantages du HTML5

• 1. Améliorer la convivialité et l'expérience conviviale

• 2. Il existe plusieurs nouvelles balises qui aideront les développeurs à définir le contenu important

• 3. Peut apporter plus d'éléments multimédias (vidéo et audio) au site ; >
  4. Peut être un bon remplacement pour FLASH et Silverlight

• 5. En ce qui concerne l'exploration et l'indexation de sites Web, très convivial pour le référencement (moteurs de recherche) ; ;

• 6. Sera largement utilisé dans les applications mobiles et les jeux

• 7.

• Compatibilité HTML5 1.5

Internet Explorer 9 et supérieur

• chrome, Safari , opera, Firefox et divers navigateurs nationaux avec wekkit comme noyau

• 2 Syntaxe HTML de base

2.1 Balises HTML

* Les balises sont HTML L'unité la plus basique et composant important de

* utilise généralement deux crochets d'angle : < et >

* les balises sont fermées (deux formes : par paires associées ou non)

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

内容` 显示开始结束

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

---

`   里面的左斜杠可以省略

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

* 对与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 Balises de formatage

• 1~6 Titre

• < p> Paragraphe

• Sortie telle quelle

• 
  >

---

séparés
balises sans aucune sémantique
3.4 Les balises de texte

sont soulignées en italique
Pour le gras
H5 ajouté signifie sélectionné
L'indice chimique eau
Le contenu supprimé est souligné
< /ruby> / Pinyin H5 ajouté ;/rt> Ajouter l'affichage de nihao au-dessus de Bonjour

• Syntaxe de base CSS

Utiliser CSS

lien pour présenter l'externe Le fichier CSS

est écrit en html
en utilisant l'attribut style de l'élément html
Format

• Selector{

Propriété CSS : value;

CSS property: value;

}

Sélecteur {property:value;property:value}

Commentaires

/* */

Unité de longueur CSS

px pixels

em Multiples de la taille par défaut

Pourcentage La taille par défaut fait référence à

cm

mm

pt

Unité de couleur CSS

colorName : rouge/vert/bue/violet/orange/jaune/rose/bleu ciel

numéro rgb rgb(34,45 ,23) rgb(20%, 57%, 100%)

Hexadécimal #abcdef #f90 #ccc

5 sélecteur CSS

#Sélecteur de nom de balise

tagName {

}

# Nom de la classe

.className {

}

#Sélecteur d'ID

#idName {

}

# Sélecteur global

* {

}

# Éléments descendants combinés

sélecteur sélecteur .list li

# Combinaison d'éléments enfants

sélecteur>sélecteur .list>li

# Groupe

sélecteur, sélecteur, sélecteur h1 , h2,p,.list

# Conditions multiples .item.frist_item

p.item

6 Priorité du sélecteur

ID > tagName > *

Comparaison du nombre de sélecteurs de combinaison en fonction des priorités

7 Propriétés CSS couramment utilisées

Police

police -family font-family : "Arial", "Helvetica", "宋体", sans-serif ; ou serif font serif

font-size taille de police 10px 1.3em peut être utilisé
font-weight normal/gras largeur de police par défaut et gras
font-style normal/italic style de police italique par défaut
variante de police normale/petites majuscules déformation de la police petites majuscules par défaut
attribut composite de police
police :[poids | style | variante] taille famille

• Couleur

couleur couleur du texte

texte

• Mot- espacement espacement des mots

espacement des lettres espacement des lettres 1px 2em Espace de 2 mots

alignement du texte : texte gauche/centre/droite aligné horizontalement à gauche centre gauche
alignement vertical : ligne de base / milieu .... La méthode d'alignement vertical par défaut pour les images et le texte est au milieu
line-height Lorsque la hauteur de la ligne est une ligne, la hauteur est la même que la hauteur de la ligne. Lorsque la hauteur est la même, elle est centrée à gauche
text-decoration. : none/overline/underline/line-through La décoration du texte est par défaut surlignée et soulignée barrée
text-indent : 2em de première ligne de retrait de texte
word-wrap : break-word Le mot est trop long ou l'url peut être enveloppée
overflow-wrap alias de word-wrap CSS3
pré-enveloppement d'espaces blancs Conservez l'entrée telle quelle Lorsque le texte atteint la limite, enveloppez
Articles connexes :

• Front- bases de fin (zéro) bases du CSS

Notes d'étude du front-end pour les nouveaux arrivants - points de connaissances de base de html/css/js

Vidéos associées :

Tutoriels vidéo d'introduction de base HTML et CSS - tutoriels vidéo en ligne gratuits

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!