Compréhension de base du HTML
1. Introduction
1. HTML est Hypertext Markup Language, une application sous Standard Universal Markup Language, un langage interprété.
2. « 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.
3. La structure du langage de balisage hypertexte comprend la partie « head » (anglais : Head) et la partie « main » (anglais : Body), où la partie « head » fournit informations sur la page Web d'informations, la section « Corps principal » fournit le contenu spécifique de la page Web.
2. Caractéristiques linguistiques (Contenu extrait de --Encyclopédie Baidu)
1 .Simplicité : la version du langage de balisage hypertexte est mise à niveau à l'aide d'une méthode de surensemble, ce qui la rend plus flexible et plus pratique.
2. Évolutivité : la large application du langage de balisage hypertexte a entraîné des exigences en matière de renforcement des fonctions, d'ajout d'identifiants, etc. Le langage de balisage hypertexte adopte des sous-classes L'approche élément apporte des garanties pour l’expansion du système.
3. Indépendance de la plate-forme : bien que les ordinateurs personnels soient populaires, de nombreuses personnes utilisent d'autres machines telles que MAC qui peuvent être utilisées sur un large éventail de plates-formes, ce qui est également le cas. le cas du World Wide Web (WWW) est l'une des raisons de sa popularité.
4. Polyvalence : De plus, HTML est le langage universel d'Internet, un langage de balisage tout-en-un simple et universel. Il permet aux producteurs de pages Web de créer des pages complexes combinant du texte et des images, et ces pages peuvent être consultées par toute autre personne sur Internet, quel que soit le type d'ordinateur ou de navigateur utilisé.
3. Structure globale
La structure de fichier standard HTML a une structure globale de base, c'est-à-dire les marques de début et de fin du balisage hypertexte. Fichier de langue et parties d'en-tête et d'entité du langage de balisage hypertexte. Il existe trois balises doubles utilisées pour confirmer la structure globale de la page.
1. Le code global du fichier
(Nom complet) à décrire, d'un fichier Hypertext Markup Language.
2. Contenu de l'en-tête
; ces deux balises représentent respectivement le début et la fin. . Les balises contenues dans l'en-tête sont le titre, la préface, la description et tout autre contenu de la page. Elles ne sont pas affichées en tant que contenu lui-même, mais affectent l'effet d'affichage de la page Web. Les balises les plus couramment utilisées dans l'en-tête sont la balise titre et la balise méta,. La balise titre est utilisée pour définir le titre de la page Web, et son contenu est affiché dans l'en-tête. barre de fenêtre de la page Web. Les titres des pages Web peuvent être utilisés par les navigateurs comme signets et favoris.
Élément d'en-tête HTML :
La balise méta en HTML
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的meta标签</title> 5 6 <!--设置网页的编码--> 7 <meta charset="utf-8"/> 8 9 <!--设置网页的关键字-->10 <meta name="keywords" content="页面关键字"/>11 12 <!--设置网页的描述-->13 <meta name="description" content="网页相关描述信息" />14 15 <!--设置网页的更新信息-->16 <meta name="revised" content="更新信息,2017年3月2日09:55:00"/>17 18 <!--设置网页刷新频率以及跳转地址-->19 <meta http-equiv="refresh" content="3," />20 21 <!--设置标题处的ico小图标-->22 <link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/>23 24 <!--引入一个外部的css层叠样式表-->25 <link rel="stylesheet" href="./css.css?1.1.11" type="text/css"/>26 </head>27 <body>28 </body>29 </html>
3.主体内容
;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
HTML当中的文本标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的文本标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <!--标题标签--> 9 <h1>让我们来看一下,<u>字体</u>字体的大小变化</h1>10 <h2>让我们来看一下,字体的大小变化</h2>11 <h3>让我们来看一下,字体的大小变化</h3>12 <h4>让我们来看一下,字体的大小变化</h4>13 <h5>让我们来看一下,字体的大小变化</h5>14 <h6>让我们来看一下,字体的大小变化</h6>15 16 <!--水平线标签-->17 <hr/>18 19 <!--b标签:普通的加粗标签-->20 <b>文字加粗</b><br/>21 22 <!--strong标签:加粗强调的作用,SEO可以着重抓取到的内容-->23 <strong>文字加粗(强调)</strong><br/>24 25 <!--斜体、强调标签-->26 <em>斜体(强调)</em><br/>27 28 <!--普通的斜体标签-->29 <i>让你随时<u>脉动</u>回来!</i><br/>30 31 <!--普通的斜体标签-->32 <cite>让你随时脉动回来!</cite><br/>33 34 <!--下标标签-->35 H<sub>2</sub>0<br/>36 37 <!--上标标签-->38 2<sup>2</sup>=439 40 <!--段落标签-->41 <p>p标签代表段落,一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>42 43 </body>44 </html>
文本标签页面展示效果:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的文本标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML当中的文本标签</h1> 9 10 <!--定义文档的输出方向-->11 <bdo dir="ltr">正大光明</bdo><br/>12 <bdo dir="rtl">正大光明</bdo><br/>13 14 <!--定义一个短的引用-->15 沙僧说:<q>师傅,大师兄和二师兄被妖怪抓走啦~~</q><br/>16 17 <!--表示一个缩写的形式-->18 <abbr title="United States">US</abbr><br/>19 20 <!--删除线标签-->21 测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师?</del>,<del>被删除了哈哈</del><br/>22 23 <!--定义一段被隐藏的文字,summary标签可以定义列表的标题-->24 <details>25 <summary>鬼吹灯系列丛书</summary>26 鬼吹灯之精绝古城<br/>27 鬼吹灯之黄皮子坟<br/>28 鬼吹灯之云南虫谷<br/>29 </details>30 31 <!--对话标签-->32 <dialog open>33 <dt>男:</dt><dd>我们分手吧~~</dd>34 <dt>女:</dt><dd>为什么?</dd>35 <dt>男:</dt><dd>我怀孕了~~</dd>36 <dt>女:</dt><dd>不,不可能,我不相信……</dd>37 <dt>男:</dt><dd>你看你,我们连最起码的信任都没有了,还谈什么?</dd>38 <dt>女:</dt><dd>…………</dd>39 </dialog>40 </body>41 </html>
HTML当中的列表标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的列表标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML当中的列表标签</h1> 9 <!--有序列表-->10 <ol type="A">11 <li>有序列表1</li>12 <li>有序列表2</li>13 <li>有序列表3</li>14 </ol>15 16 <!--无序列表-->17 <ul type="circle">18 <li>无序列表1</li>19 <li>无序列表2</li>20 <li>无序列表3</li>21 </ul>22 23 <!--格式化输出标签-->24 <pre class="brush:php;toolbar:false">25 *26 * *27 * * *28 * * * *2930
31