Maison > Article > interface Web > 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标签来将,最重要的是语义
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
< p> Paragraphe
>
Syntaxe de base CSS
lien pour présenter l'externe Le fichier CSS
Selector{
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
Couleur
couleur couleur du texte
Mot- espacement espacement des mots
espacement des lettres espacement des lettres 1px 2em Espace de 2 mots
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!