HTML+CSS勉強記(2)

1. Web ページを検索エンジンがよりよく理解できるようにする

タグの目的: Web ページの制作を学ぶときに、よく耳にする言葉です。セマンティック。では、セマンティクスとは何でしょうか? 簡単に言うと、各タグの目的を理解することです (たとえば、Web ページ上の記事のタイトルには title タグを使用できます)。また、Web ページ上の各列のタイトルタグも名前に使用できます。記事内のコンテンツの段落は段落タグ内に配置する必要があります。記事内で強調したいテキストがある場合は、em タグを使用して強調などを表現できます。

セマンティクスについてたくさん話してきましたが、セマンティクスはどのような利点をもたらすのでしょうか?

1. 検索エンジンによってインデックスされやすくなります。
2. スクリーン リーダーが Web コンテンツを読みやすくします。

2. d01e1fe22ff10bee585005ce8c01aed3 タグが必要なので、記事の段落を e388a4556c0f65e1904146cc1a846bee タグ内に置きます。

文法: e388a4556c0f65e1904146cc1a846bee段落テキスト94b3e26ee717c64999d7867364b1b4a3 ニュース記事にテキストの段落が 2 つある場合は、その 2 つの段落を配置する必要があることに注意してください。 2 つの e388a4556c0f65e1904146cc1a846bee タグについては、セクション 2 のコードを参照してください。e388a4556c0f65e1904146cc1a846bee タグのデフォルトのスタイルは、セクション 2 の図で確認できます。この空白が気に入らない場合は、CSS スタイルを使用して削除または変更できます。

4. 4fc71829d7d7f105985af72054fc4928 タグを理解して Web ページにタイトルを追加します。

記事の段落では e388a4556c0f65e1904146cc1a846bee タグを使用する必要があります。記事のタイトルは？このセクションでは、4fc71829d7d7f105985af72054fc4928 タグを使用して記事のタイトルを作成します。 title タグは、第 1 段目見出し、第 2 段目見出し、第 3 段目見出し、第 4 段目見出し、h1、h2、h3、h4、h5、h6 の合計 6 つあります。 、および第 6 レベルの見出しです。そして重要度の降順に。

は最高レベルです。構文: 4fc71829d7d7f105985af72054fc4928タイトルテキスト204c8ffa078c87c26d918bbcb1cc4f3c (xは1～6) 前述のように、タイトルタグは記事のタイトルに使用できますが、Web 上のさまざまなコラムのタイトルにも使用できます。ページ。注: Web ページでは h1 タグの方が重要であるため、通常、h1 タグは Web サイト名に使用されます。 Tencent の Web サイトではこれが行われます。例: 4a249f0d628e2318394fd9b75b4636b1Tencent473f0a7621bec819994bb5020d29372a.

5. 必要に応じて、8e99a69fbe029cd4e2b854e244eab143 タグと 907fae80ddef53131f3292ee4f81644b タグを使用します。段落内の特定の単語を強調するには、907fae80ddef53131f3292ee4f81644b または 8e99a69fbe029cd4e2b854e244eab143 タグを使用します。ただし、強調の調子には違いがあります。907fae80ddef53131f3292ee4f81644b は強調を意味し、8e99a69fbe029cd4e2b854e244eab143 はより強い強調を意味します。ブラウザでは、 はデフォルトで斜体で表現され、 は太字で表現されます。 2 つのタグと比較して、国内のフロントエンド プログラマは現在、強調を表現するために を使用することを好みます。

Gramtax: 907fae80ddef53131f3292ee4f81644b強調する必要があるテキストd1c6776b927dc33c5d9114750b5863388e99a69fbe029cd4e2b854e244eab143強調する必要があるテキスト128dba7a3a77be0113eb0bea6ea0a5d0

6. 45a2772a6b6107b401db3c9b82c049c2テキスト用に個別のスタイルを設定します

3 つのタグ 907fae80ddef53131f3292ee4f81644b、8e99a69fbe029cd4e2b854e244eab143、45a2772a6b6107b401db3c9b82c049c2 をまとめてみましょう:

907fae80ddef53131f3292ee4f81644b ;strong> タグは段落内のキーワードを強調するために使用され、その意味は強調です。
45a2772a6b6107b401db3c9b82c049c2 タグには、別のスタイルを設定する機能がありません。
ここで、前のセクションの最初の段落にある 3 つの単語「American Dream」を青に設定したいとしますが、「American Dream」だけを強調しないように注意してください。他のテキストとは異なるスタイルにしたい場合 (スクリーン リーダーに「American Dream」という 3 つの単語をアクセント付きで発音させたくない)、この場合は 45a2772a6b6107b401db3c9b82c049c2 タグを使用できます。例:

構文: 45a2772a6b6107b401db3c9b82c049c2text54bdf357c58b8a65c66d7c19c8e4d114

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

7. 1244aa79a84dea840d8e55c52dc97869 のような短いテキスト引用符

を追加しますあなたのHTMLへの引用?たとえば、Web ページの記事で特定の作家の詩を引用し、記事をより目立つものにしたい場合は、1244aa79a84dea840d8e55c52dc97869 タグが必要です。

文法:

1244aa79a84dea840d8e55c52dc97869引用テキスト9c3e8ae475e7f023c5ba43842c1b434e

次の例のように:

説明:

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

上記の例では、「荘盛の暁の夢は蝶に執着する。皇帝の春の心はカッコウに託される。」は、後期唐の詩人、李尚音の『晋世』の詩です。 。著者自身の文章ではないため、引用には 1244aa79a84dea840d8e55c52dc978699c3e8ae475e7f023c5ba43842c1b434e を使用する必要があります。
引用するテキストを二重引用符で囲む必要はないことに注意してください。ブラウザは自動的に q タグに二重引用符を追加します。

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

8、b8a712a75cab9a5aded02f74998372b4标签，长文本引用

b8a712a75cab9a5aded02f74998372b4的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。

等等，上一节1244aa79a84dea840d8e55c52dc97869标签不是也是对文本的引用吗？不要忘记1244aa79a84dea840d8e55c52dc97869标签是对简短文本的引用，比如说引用一句话就用到1244aa79a84dea840d8e55c52dc97869标签。

如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用b8a712a75cab9a5aded02f74998372b4。

语法:

<blockquote>引用文本</blockquote>

如下面例子：

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

浏览器对b8a712a75cab9a5aded02f74998372b4标签的解析是缩进样式。

9、使用标签分行显示文本

怎么可以让每一句诗词后面加入一个折行呢？那就可以用到df250b2156c434f3390392d09b1c9563标签了，在需要加回车换行的地方加入df250b2156c434f3390392d09b1c9563，df250b2156c434f3390392d09b1c9563标签作用相当于word文档中的回车。语法：xhtml1.0写法：

<br />

html4.01写法：

<br>

大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

与以前我们学过的标签不一样，df250b2156c434f3390392d09b1c9563标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有df250b2156c434f3390392d09b1c9563、231a563c997aa9e3e0ae614bd16728b0和6ed09268cbdd0015bce8dcbbdfa9bfe4。

讲到这里，你是不是有个疑问，想折行还不好说嘛，就像在 word 文件档或记事本中，在想要折行的前面输入回车不就行了吗？很遗憾，在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。如下边的代码。

总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入df250b2156c434f3390392d09b1c9563。

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

在上一节的例子，我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入。

语法：

11、认识f32b48428a809b51f04d3228cdf461fa标签，添加水平横线

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

html4.01版本 f32b48428a809b51f04d3228cdf461fa

xhtml1.0版本 231a563c997aa9e3e0ae614bd16728b0

注意：

1.231a563c997aa9e3e0ae614bd16728b0标签和df250b2156c434f3390392d09b1c9563标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

2.231a563c997aa9e3e0ae614bd16728b0标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

1. 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

12、208700f394e4cf40a7aa505373e0130b标签，为网页加入地址信息

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

语法：

<address>联系地址信息</address>

如：

<address>文档编写：lilian 北京市西城区德外大街10号</address>

<address>本文的作者：<a href="mailto:lilian@imooc.com">lilian</a></address>

在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css 样式来修改它208700f394e4cf40a7aa505373e0130b标签的默认样式。

13、想加入一行代码吗？使用ffbe95d20f3893062224282accb13e8f标签

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

<code>var i=i+300;</code>

注意：在文章中一般如果要插入多行代码时不能使用ffbe95d20f3893062224282accb13e8f标签了。

语法：

<code>代码语言</code>

注：如果是多行代码，可以使用e03b848252eb9375d56be284e690e873标签。

14、使用e03b848252eb9375d56be284e690e873标签为你的网页加入大段代码

语法：

<pre class="brush:php;toolbar:false">语言代码段

e03b848252eb9375d56be284e690e873 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

---