Résumez quels points de connaissances sont nécessaires pour apprendre le HTML ?-tutoriel HTML-php.cn

Cadre de base

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>标题标签</title></head><body><h1>了不起的盖茨比</h1><p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。</p></body></html>

Copier après la connexion

Comprendre les commentaires de code HTML

Que sont les commentaires de code ? La fonction des commentaires de code est d'aider les programmeurs à marquer le but du code. Si vous regardez le code que vous avez écrit après un certain temps, vous vous en souviendrez rapidement. Les commentaires de code permettent non seulement aux programmeurs de se souvenir plus facilement de l'objectif du code précédent, mais aident également les autres programmeurs à comprendre rapidement les fonctions de votre programme, facilitant ainsi la collaboration entre plusieurs personnes pour développer le code d'une page Web.

Syntaxe :

<code>

Comprendre les balises <code><head>

L'en-tête du document décrit divers attributs et informations du document, y compris le titre du document, etc. Les données contenues dans l’en-tête de la plupart des documents ne seront pas réellement affichées aux lecteurs en tant que contenu.

<head><title>...</title><meta><link><style>...</style><script>...</script></head>

Copier après la connexion

<head> <title>hello world</title></head>

Copier après la connexion

Balise

<code><body>, le contenu affiché sur la page Web est placé ici

Le contenu de la page à afficher sur la page Web doit être placé dans le corps de l’étiquette. L'image ci-dessous est une page Web d'un article de presse.

Commencez à apprendre la balise <code> et ajoutez des paragraphes

Si vous souhaitez afficher l'article sur la page Web, alors vous avez besoin du Balise <code> , mettez les paragraphes de l'article dans la balise <code>.

Grammaire : <code>段落文本

Notez qu'un paragraphe de texte a une balise <code>. Par exemple, s'il y a trois paragraphes de texte dans un article d'actualité, ces trois paragraphes doivent être. placé dans trois paragraphes distincts <code> balise. Comme indiqué ci-dessous.

Comprenez la balise <code><hx(1-6)> et ajoutez un titre à votre page Web

Utilisez la balise <code> pour les paragraphes de l'article, puis utilisez le titre de l'article Quelle étiquette ? Dans cette section, nous utiliserons la balise <code><hx> pour créer le titre de l'article. Il y a 6 balises de titre au total, h1, h2, h3, h4, h5 et h6 sont le titre de premier niveau, le titre de deuxième niveau, le titre de troisième niveau, le titre de quatrième niveau, le cinquième -titre de niveau et le titre de sixième niveau respectivement. et par ordre décroissant d'importance. <code><h1> est le niveau le plus élevé.

Syntaxe : <code><hx>标题文本 x:1-6

Remarque : Étant donné que la balise h1 est plus importante dans les pages Web, la balise h1 est généralement utilisée dans le nom du site Web. Le site Web de Tencent fait cela. Par exemple : <code><h1>腾讯网

Style par défaut des balises h1-h6 : Code de balise :

Style affiché dans le navigateur :

Ajoutez de l'emphase, utilisez les balises <code> et <code>

Avec les paragraphes et les titres, maintenant si vous souhaitez souligner certains mots dans un paragraphe, vous pouvez utiliser les balises <code> ou <code> , mais il y a une différence dans le ton d'emphase :

Le style par défaut dans le navigateur est différent :

À quoi il ressemble dans le navigateur est comme indiqué ci-dessous .

语法：
<code>需要强调的文本
<code>需要强调的文本

栗子：
在网上商城中，某产品的打折后的价格是需要强调的。如下图。

代码实现:

使用<code>标签为文字设置单独样式

语法：<code>文本

我们对<code>、<code>、<code>这三个标签进行一下总结：

如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<code>标签了。
如下面例子：

<p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，
离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，<strong>股票</strong>飞涨的时代。
为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>

Copier après la connexion

我们如果想设置“美国梦”三个字设置成blue（蓝色），只需要在<code><style>标签中加入：

span{color:blue;
}

Copier après la connexion

css部分，以后会聊，你能大概明白span就是能干单独设置样式的活，就ok了

<code><q>标签，短文本引用

想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<code><q>标签是你所需要的。

语法：<code><q>引用文本

栗子：

<p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。
后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。</p>

Copier après la connexion

讲解:

下图是代码显示结果：

注意这里用标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。

<code><blockquote>标签，长文本引用

<code><blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。
等等，上一节<code><q>标签不是也是对文本的引用吗？不要忘记<code><q>标签是对简短文本的引用，比如说引用一句话就用到<code><q>标签。
如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用<code><blockquote>。

语法：<code><blockquote>引用文本
如下面例子：

<blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>

Copier après la connexion

浏览器对<code><blockquote>标签的解析是缩进样式。如下图所示：

使用<code> 标签分行显示文本

例子，我们想让一首诗显示得更美观些，如显示下面效果：

怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<code> 标签了，在需要加回车换行的地方加入<code> ，<code> 标签作用相当于word文档中的回车。
代码改为：

<h2>《咏桂》</h2><p>暗淡轻黄体性柔，<br />情疏迹远只香留。<br />何须浅碧深红色，<br />自是花中第一流。

Copier après la connexion

诗文在浏览器中显示为：

为你的网页中添加一些空格

在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入<code>nbsp;。不要忘了那个分号

在html代码中输入空格是不起作用的，如下代码。

在浏览中显示，还是没有空格效果。

输入空格的正确方法：

在浏览器中的显示出来的空格效果。如下图所示。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！

认识<code><hr>标签，添加水平横线

在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示：

语法：

<code><address>标签，为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<code><address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
栗子：

<address>
本文的作者：<a href="mailto:zhaoliangsyn@163.com">zhaolion</a></address>

Copier après la connexion

想加入一行代码吗？使用<code><code>标签

在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code><code>标签了，如下面例子：

<code><code>var i = a + b;

注意：在文章中一般如果要插入多行代码时不能使用<code><code>标签了。如果是多行代码，可以使用<code><pre class="brush:php;toolbar:false"></code>标签。<hr/><h2>使用<code><pre class="brush:php;toolbar:false"></code>标签为你的网页加入大段代码</h2>在上节中介绍加入一行代码的标签为<code><code></code>，但是在大多数情况下是需要加入大段代码的，如下图：<div class="image-package"><img src="https://img.php.cn/upload/article/000/000/001/9a5ce712329e3462c06f976964093ef2-18.jpg" alt=""/></div>怎么办？不会是每一代码都加入一个<code><code></code>标签吧，没有这么复杂，这时候就可以使用<code><pre class="brush:php;toolbar:false"></code>标签。语法：<code><pre class="brush:php;toolbar:false">语言代码段</pre>

<code>

</code>标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。<br/>如下代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="hljs abnf"><pre class="brush:php;toolbar:false">
    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }

Copier après la connexion