本章介绍了 HTML 中较为常用的基础标签的实例以及 HTML 基础知识。您可能还没接触过这些实例,不过不用担心,阅读完本章您就能够掌握它们了! 1
HTML 标题(Heading)是通过 <h1> - <h6> 标签来定义的.
h
是英文header
标题的缩写,标题无处不在,它的应用范围十分广泛:网站结构、写作文、PPT 等。
这里有六个标题元素标签 —— <h1>
、<h2>
、<h3>
、<h4>
、<h5>
、<h6>
,每个元素代表文档中不同级别的内容:
<h1>
表示主标题( the main heading ),<h2>
表示二级子标题( subheadings ),<h3>
表示三级子标题( sub-subheadings ),<h4>
、<h5>
、<h6>
字体的大小依次递减。
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
你也可以通过实战实验来尝试挑战一个 h2 标题的设置:
HTML标题实战实验
HTML 段落是通过标签<p>
来定义的,P
是英文paragraph
段落的缩写,经常被用来创建一个段落,就和你写作文一样,您可以进行实战演练。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
下面这个实例讲述了标题和段落的结构层次:
<h1>三国演义</h1>
<p>罗贯中</p>
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
<p>话说天下大势,分久必合,合久必分。</p>
<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
<p>且说董卓字仲颖</p>
<h3>却说张飞</h3>
<p>却说张飞饮了数杯闷酒</p>
上述实例所涉及的元素具体代表什么,完全取决于作者编辑的内容,只要确保层次结构是合理的。在创建此类结构时,您只需要记住以下几点:
<h1>
,这是主标题,所有其他标题位于层次结构中的下方。<h3>
来表示副标题,后面跟<h2>
来表示副副标题,这是没有意义的,会导致奇怪的结果。在代码中可能包含了很多的空格——这是没有必要的
下面的两个代码片段是等价的:
<p>狗 狗 很 呆 萌。</p>
<p>狗 狗 很
呆 萌。</p>
无论你用了多少空格(包括空格字符,包括换行),当渲染这些代码的时候,HTML 解释器会将连续出现的空格字符减少为一个单独的空格符。
为什么我们会使用那么多的空格呢?
答案就是为了可读性——如果你的代码被很好地进行格式化,那么就很容易理解你的代码,反之就会很混乱。在我们的 HTML 代码中,我们让每一个嵌套的元素以两个空格缩进。
你使用什么风格来格式化你的代码取决于你(比如所对于每层缩进使用多少个空格),但是记住你应该坚持使用某种风格。
HTML 链接是通过标签<a>
来定义的。a
标签,也叫anchor(锚点)
元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。
<a href="http://www.w3cschool.cn">这是一个链接</a>
提示:在href
属性中指定链接的地址。
(您将在本教程稍后的章节中学习更多有关属性的知识)
HTML链接实战测验
HTML 图像是通过标签<img>
来定义的。使用img
元素来为你的网站添加图片,使用src
属性指向一个图片的具体地址。
举例如下:<img src="https://www.your-image-source.com/your-image.jpg" rel="external nofollow" >
请注意:img
元素是自关闭元素,不需要结束标记。
<img src="logonew2.png" width="206" height="36">
注意: 图像的名称和尺寸是以属性的形式提供的。
HTML 图像实战测验
在人类语言中,为了突出一句话的意思,我们通常强调某些词,并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。HTML 提供了许多语义化的元素,并且允许我们通过这些元素的意义标记正文内容,在这个章节中,我们将看到最常见的一小部分元素。
在 HTML 中我们可以使用em(emphasis)
元素来标记这样的情况,浏览器默认风格为斜体:
<p>我 <em>很高兴</em>你不 <em>讨厌我</em>.</p>
在 HTML 中我们还可以使用<strong>(strong importance)
元素来标记这样的请况,浏览器默认风格为粗体:
<p>这种液体是<strong>高毒性的</strong>.</p>
<p>我就指望你<strong>不会</strong> 迟到!</p>
注意:为了不同的字体风格,我们应该使用元素和一些 CSS 的样式.