总结学习HTML需要哪些知识点？-html教程-PHP中文网

基础框架

<!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>

登录后复制

了解HTML的代码注释

什么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：

<code>

认识标签<code><head>

文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

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

登录后复制

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

登录后复制

<code><body>标签，网页上显示的内容放在这里

在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。

开始学习<code>标签，添加段落

如果想在网页上显示文章，这时就需要<code>标签了，把文章的段落放到<code>标签中。

语法： <code>段落文本

注意一段文字一个<code>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<code>标签中。如下图所示。

了解<code><hx(1-6)>标签，为你的网页添加标题

文章的段落用<code>标签，那么文章的标题用什么标签呢？在本节我们将使用<code><hx>标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<code><h1>是最高的等级。

语法：<code><hx>标题文本 x:1-6

注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<code><h1>腾讯网

h1-h6标签的默认样式：
标签代码：

在浏览器中显示的样式：

加入强调语气，使用<code>和<code>标签

有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<code>或<code>标签
但两者在强调的语气上有区别:

在浏览器中默认样式是有区别的：

浏览器中的样子，如下图。

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

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

代码实现:

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

语法：<code>文本

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

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

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

登录后复制

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

span{color:blue;
}

登录后复制

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

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

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

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

栗子：

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

登录后复制

讲解:

下图是代码显示结果：

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

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

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

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

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

登录后复制

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

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

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

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

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

登录后复制

诗文在浏览器中显示为：

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

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

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

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

输入空格的正确方法：

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

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

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

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

语法：

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

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

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

登录后复制

想加入一行代码吗？使用<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);
    }

登录后复制