Cet article présente principalement les connaissances HTML qui doivent être acquises pour le développement front-end et présente les technologies de base qui doivent être maîtrisées pour apprendre le développement front-end Web. Les amis intéressés peuvent se référer à
<.>1 Introduction au HTML
1.1 Première expérience avec le code, création de la première page Web
<!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 La relation entre HTML et CSS
Apprendre les technologies de base de Le développement web front-end nécessite la maîtrise : du langage HTML, CSS , JavaScript. Jetons un coup d'œil à ce que ces trois technologies servent à réaliser :1. HTML est le support du contenu Web. Le contenu est l'information que les créateurs de pages Web mettent sur la page pour que les utilisateurs puissent la parcourir et peut inclure du texte, des images, des vidéos, etc.
2. Le style CSS est la performance. C'est comme un manteau pour une page Web. Par exemple, la police du titre, les changements de couleur ou l'ajout d'images d'arrière-plan, de bordures, etc. au titre. Toutes ces choses utilisées pour modifier l’apparence du contenu sont appelées présentations.
3. JavaScript est utilisé pour implémenter des effets spéciaux sur les pages Web. Par exemple : le menu déroulant apparaît lorsque la souris passe dessus. Ou bien la couleur d’arrière-plan du tableau change lorsque la souris passe dessus. Il y a aussi une rotation d'actualités brûlantes (images d'actualité). On comprend que l'animation et l'interaction sont généralement implémentées à l'aide de JavaScript.
Le code suivant démontre l'effet du CSS. Le HTML est utilisé pour représenter les éléments d'une page Web. Le CSS rend les éléments plus expressifs, tels que la position, la taille, la couleur, la police, etc. :
<!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>
(2) La ligne 9 du code affecte le changement de couleur du texte de la fenêtre.
(3) Ligne 10, modifications qui affectent le centrage du texte de la fenêtre.
1.3 Comprendre les balises HTML
Diverses pages Web sont composées de balises html. Ce qui suit est une simple page Web :<!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>
Analyse En quoi consiste le HTML de cette page Web :
(1) "Courage" est le titre de l'article de contenu Web,
la page Web est écrite sous la formeQuand j'étais en troisième année... je n'ai pas eu le courage de participer.
1.4 Syntaxe des étiquettes
1. Une étiquette est entourée de crochets anglais < et >, comme une étiquette.2. Les balises en HTML apparaissent généralement par paires, divisées en balises de début et de fin. La balise de fermeture a un / de plus que la balise d'ouverture.
3. Le diagramme de structure des balises est le suivant :
5. Mais l'ordre peut être imbriqué. doit être cohérent. Par exemple :
est imbriqué dans
, alors
doit être placé devant . Comme indiqué ci-dessous.7. Test : Il y a un code de page Web, mais il manque le code sur la 9ème ligne, veuillez ajouter :
<!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 Comprendre la structure de base des fichiers HTML
Apprendre la structure des fichiers HTML : Un fichier HTML a sa propre structure fixe.<html> <head>...</head> <body>...</body> </html>
代码讲解:
1. 称为根标签,所有的网页标签都在中。
2.