Maison > Article > interface Web > Connaissances HTML qui doivent être acquises pour le développement front-end
Connaissances HTML qui doivent être acquises pour le développement front-end
- 高洛峰original
- 2017-03-10 11:53:431105parcourir
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> (1) La ligne 8 du code affecte la taille du texte de la fenêtre. (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>
(1) "Courage" est le titre de l'article de contenu Web, 4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a la page Web est écrite sous la forme 4a249f0d628e2318394fd9b75b4636b1Couragef45b5526ab8dd9c4e29680fb336df693.
(2) "Quand j'étais en troisième année... je n'avais pas le courage de participer." est le paragraphe de l'article sur la page Web, et e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 balise de paragraphe. Le code sur la page Web indique e388a4556c0f65e1904146cc1a846beeQuand j'étais en troisième année... je n'ai pas eu le courage de participer. 94b3e26ee717c64999d7867364b1b4a3
(3) L'image de la petite fille sur la page Web est complétée par la balise img. Son code sur la page Web est écrit comme 4faf7b57895b870867b99beee44351ac
1.4 Syntaxe des étiquettes
1. Une étiquette est entourée de crochets anglais 16c874977c0ec376136df4dbc6fc1c03, 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 :
(3) 45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114
5. Mais l'ordre peut être imbriqué. doit être cohérent. Par exemple : e388a4556c0f65e1904146cc1a846bee est imbriqué dans e388a4556c0f65e1904146cc1a846bee, alors 94b3e26ee717c64999d7867364b1b4a3 doit être placé devant 94b3e26ee717c64999d7867364b1b4a3. 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. 100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e称为根标签，所有的网页标签都在100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e中。
2.93f0f5c25f18dab9d176bd4f6de5d30e 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有b2386ffb911b14667cb8f0f91ea547a7、3f1c4e4b6b16bbbd69b2ee476dc4f83a、 c9ccee2e6ea535a969eb3f532ad9fe89、2cdf5bf648cf2f33323966d7f58a7f3f、 e8e496c15ba93d81f6ea4fe5f55a2244等标签，头部标签在下一小节中会有详细介绍。
3.在6c04bd5ca3fcae76e30b72ad730ca86d和36cc49f0c466276486e50c850b7e4956标签之间的内容是网页的主要内容，如4a249f0d628e2318394fd9b75b4636b1、e388a4556c0f65e1904146cc1a846bee、3499910bf9dac5ae3c52d5ede7383485、a1f02c36ba31691bcfe87b2722de723b等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
下面的代码的HTML文件结构不完整，因为缺少标签100db36a723c770d327fc0aef2ce13b1和73a6ac4ed44ffec12cee46588e518a5e：
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html文件基本结构</title>
</head>
<body>
<h1>在本小节中，你将学会认识html文件基本结构</h1>
</body>
1.6 head标签
•标签的作用：文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
•下面的标签可以在head部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
•b2386ffb911b14667cb8f0f91ea547a7标签：在b2386ffb911b14667cb8f0f91ea547a7和6e916e0f7d1e588d4f442bf645aedb2f标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
例如，b2386ffb911b14667cb8f0f91ea547a7标签的内容“hello world”会在浏览器中的标题栏上显示出来，如图：
<head>
<title>hello world</title>
</head>
1.7 了解HTML的代码注释
代码注释的作用：帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
语法：
20bef4e8dd3adb180086fee82c5c25f9
下面代码的第 8、12 行都是注释代码，但是发现他们是不会在结果窗口中显示出来的：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML的代码注释</title>
</head>
<body>
<!--在线咨询 begin-->
<p>
<p>一站式报名咨询！<a href="#">向报名顾问咨询</a></p>
</p>
<!--在线咨询 end-->
</body>
</html>
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!