二、HTML常用标签

HTML、CSS基础课程系列 HTML

HTML常用标签

标题和段落

很多的结构化文本都是由标题(Headings)和段落(Paragraphs)组成,包括学习教材、报纸、新闻阅读类的APP。
在HTML中,每个段落都必须包含在一个<p>元素中,如下所示:

1
<p>我是一个段落!</p>

每个标题都必须包含在标题元素中:

1
<h1>我是一个主标题!</h1>

标题元素有六个,分别为<h1><h2><h3><h4><h5><h6>,每个标题代表的含义也不相同,h1代表主标题,h2代表副标题,h3代表副标题,按照重要性依次类推。

注意:标题很重要,请确保html heading 标签只用于标题,而不是仅仅为了产生加粗或大号的文本使用标题!

语义化

语义依赖于我们周围的任何地方,我们依靠经验来判断日常对象的功能是什么:当我们看到某些东西时,我们就知道它的功能是什么。举个例子,比如您看到一份涂抹了黄油的面包,马上就会联想到吃、早餐、流口水等现象。
类似的,我们需要确保我们使用的是正确的元素,给我们内容正确的意义,功能或外观。那么,<h1>标签也是一个语义元素,它包含页面顶级标题的含义:

1
<h1>我是本页面顶级标题!</h1>

通常情况,h1标签会有一个较大的字体,使其看起来像一个标题,更重要的是,语义的价值会体现在更多地方,例如搜索引擎等等。
但是,后面课程如果大家学习了css,那么也可以使任何元素看起来像一个标题:

1
<span style="font-size: 32px; margin: 21px 0;">我也是一个顶级标题吗?</span>

这是一个<span>标签,它没有语义。仅仅是当你想使用cssjavascript时,它可以用来包装内容,而不给予任何的含义。
由于它没有任何含义,也不会得到上述说的语义化的任何好处。(大家会在后续的课程中学习到相关css的内容)

列表

列表(Lists),也是无处不在。论文的目录、领导讲话的要点、医生开具的药物清单等等,列表主要有如下两种:

无序列表

无序列表<ul>用于标记项目顺序无关的项目列表,以药物清单为例:

1
2
3
4
5
6
<ul>
<li>小儿氨酚黄那敏颗粒</li>
<li>小儿止咳糖浆</li>
<li>双黄连口服液</li>
<li>小儿清肺口服液</li>
</ul>

每个无序列表都是从<ul>开始,这包含所有的列表项<li>,所有的内容都在<li>(list item)元素中。

有序列表

无序列表<ol>用于标记项目是有序的,以日程表为例:

1
2
3
4
5
6
<ol>
<li>去菜市场买菜</li>
<li>接女儿放学</li>
<li>准备晚饭</li>
<li>和老婆躺床上看电视</li>
</ol>

结构和无序列表相同,但是列表是包含在<ol>中,而不是<ul>里面。

重要性

在人类的语言中,不管是中文还是英文,都有很多强调某些词语来改变句子的含义。在html中,提供了很多这种语义化元素,这里我们介绍集中常见的元素。
下面我们来看一个经典的例子:

(1)没说他偷了你的iphone——可是有人这么说的。
(2)我说他偷了你的iphone——我确实没有这么说。
(3)我没他偷了你的iphone——可是我是这么暗示的。
(4)我没说偷了你的iphone——可是有人偷了。
(5)我没说他偷了你的iphone——可能是他借去了。
(6)我没说他偷了你的iphone——他偷了别人的iphone。
(7)我没说他偷了你的iphone——他偷了别的东西。

同样一句话,语气重读不同,意思就大为不同。这里强调重要的话语,我们使用<strong>(strong important)元素来标记这些实例,浏览器默认将其作为粗体文本。

1
2
<p><strong></strong>喜欢你!</p>
<p>你不要令我<strong>失望</strong>!</p>

换行和分割线

换行

在前面的课程里,相信大家已经发现了,在html里面直接按回车键(Enter)换行,而显示在浏览器上面是没有效果的。那么,如何在浏览器上面换行呢。
这里就需要用到<br>标签。

1
2
3
<span>我是上面一行的</span>
<br>
<span>我是下面一行的</span>

<br>这种,只有开始标签,没有内容和结束标签的元素叫做空元素,也叫自闭合标签。

注意,使用空的<p></p>段落标签来换行是个坏习惯,用<br>标签去代替它。

分割线

同样是空元素的<hr>是分割线标签。

1
2
3
<p>一些普通内容</p>
<hr>
<p>另外一些普通内容</p>

注释

html有个特殊的标签,叫做注释标签<!-- -->,凡是在注释标签里面的内容都会被浏览器忽视掉。比如:

1
2
<!-- 我是html注释内容 我不会在浏览器中显示 -->
<p>我是正常的文本内容 我会在浏览器上正常显示</p>

上面的代码可以看出,第一行不会在浏览器中展示,第二行将在浏览器中正常显示。
注释的作用就是,可以对您的代码进行解释,这样做的好处是帮助记忆理解您或者同事的代码,当你在大型项目中时尤其有用。

超链接和图片

什么是超链接

超链接非常重要,它使WEB称为了网络,超链接是网络提供的最令人激动的创新之一,
它允许我们将文档链接到我们想要的任何文档(或其他资源),也可以通过链接,访问到浏览器的另一个网址(URL)。

如何使用超链接

<a>标签就是超链接,当然它和其他元素不同的是,它有一个必须的属性href,这个属性链接跳转指向的地址。

1
<p>我想去<a href="https://www.baidu.com">百度</a>搜索一些东西。</p>

它给我们一个结果:

一个指向百度页面的网址 百度

URL和路径的快速入门

我们已经发现,<a>标签的href属性会链接一个地址,那么这个地址是怎么分类的呢:

绝对路径地址

绝对路径地址,是指完整的描述路径的地址,一般指向由其在网络上的绝对位置定义的位置,包括协议和域名,以httphttps开头的地址。
在本地的windows操作系统下,以C:/D:/开头的地址也是绝对地址。又或者,在linux或类linux操作系统下,以/开头的都是绝对地址。

1
2
3
4
5
<!-- windows操作系统下 -->
<a href="D:/lesson/new/HTML&CSS/lesson1/HTML常用标签.html">本文件位置</a>
<!-- linux操作系统下-->
<a href="/var/www/html/index.html">web服务器主页地址</a>

相对路径地址

相对路径地址就跟操作系统的目录息息相关了,主要分为下面几种情况:

  • 同级目录:当前目录或文件夹下有着另外一个web文件index2.html,访问它的方式是直接写上文件名称./文件名称,这里的./代表当前目录。

    1
    <a href="./index2.html">访问index2.html页面</a>
  • 上级目录:如果index2.html这个文件在当前文件的上一级目录,访问方式是../文件名称。如果是上级的上级,就使用../../,同理可推多个上级。

    1
    <a href="../index2.html">访问上级目录的index2.html页面</a>
  • 下级目录:如果index2.html这个文件在当前目录的pages这个目录下,那么访问方式是./pages/index2.html,这里加上目录名称即可。

    1
    <a href="./pages/index2.html">访问pages目录下的index2.html页面</a>

图像

最早,网络知识文字,这很无聊,幸运的是,页面可以使用图像了。

在网页上放置图像,我们使用<img>这个元素,这也是一个空元素(意味着没有内容和结束标签),
但是它同<a>标签很类似,都有一个必须的属性src(source 资源),src属性包含一个指向图像资源地址的路径。

1
<img src="../images/panda.jpg">

那么它显示出来的样子,一只睡觉的熊猫:

同样的,凡是看到有路径地址的地方,都有绝对路径和相对路径之分,和<a>标签的href属性具有相同的地方。

小结

这节课程应该给你一个很好的了解如何开始标记HTML中的文本,并介绍了这方面的一些最重要的元素。
在这一领域有很多的语义元素,我们将在后面的课程中看到更多的语义元素。

作业

①. 利用这节课所学知识,使用html文档写一份求职信,要求标题、段落分明,结合图片,突出自己优势重点。

教材编写 myxxqy@gmail.com 张超
2017.06.28