HTML 基础

HTML 基础- 在线实例

本章介绍了 HTML 中较为常用的标签的实例。

您可能还没接触过这些实例,不过不用担心,阅读完本章您就能够掌握它们了! 

HTML 标题

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>依次递减字体的大小。

实例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>khtml教程</title>
  </head>
<body>

  <h1>这是标题1</h1>
  <h2>这是标题2</h2>
  <h3>这是标题3</h3>
  <h4>这是标题4</h4>
  <h5>这是标题5</h5>
  <h6>这是标题6</h6>

</body>
</html>
尝试一下 »

HTML 段落

HTML 段落是通过标签<p>来定义的,P是英文paragraph段落的缩写,经常被用来创建一个段落,就和你写作文一样

实例
<p>这是一个段落。</p>          
<p>这是另外一个段落。</p>
尝试一下 »

下面这个实例讲述了标题和段落的结构层次:    

<h2 align="center">春晓</h2>
<h3 align="center">唐·孟浩然 </h3>
<hr align="center" width="300" color="red">
<p align="center">春眠不觉晓,处处闻啼鸟。</p>
<p align="center"><font color="red">夜来风雨声,花落知多少。</font></p>

上述实例所涉及的元素具体代表什么,完全取决于作者编辑的内容,只要确保层次结构是合理的。在创建此类结构时,您只需要记住以下几点:

HTML中的空格

在代码中可能包含了很多的空格——这是没有必要的

下面的两个代码片段是等价的:

<p>春 眠 不 觉 晓</p>
<p>春 眠 不     觉晓</p>

无论你用了多少空格(包括空格字符,包括换行),当渲染这些代码的时候,HTML解释器会将连续出现的空格字符减少为一个单独的空格符。

为什么我们会使用那么多的空格呢? 

答案就是为了可读性——如果你的代码被很好地进行格式化,那么就很容易理解你的代码,反之就会很混乱。在我们的HTML代码中,我们让每一个嵌套的元素以两个空格缩进。

你使用什么风格来格式化你的代码取决于你(比如所对于每层缩进使用多少个空格),但是记住你应该坚持使用某种风格。

HTML 链接

HTML 链接是通过标签<a>来定义的。a标签,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。    

实例
<a href="https://www.khtml.com">这是一个链接</a>
尝试一下 »

 提示:href属性中指定链接的地址。

 (您将在本教程稍后的章节中学习更多有关属性的知识)

HTML 图像

HTML 图像是通过标签<img>来定义的。使用img元素来为你的网站添加图片,使用src 属性指向一个图片的具体地址。

举例如下:<img src="https://www.your-image-source.com/your-image.jpg">

请注意:img元素是自关闭元素,不需要结束标记。

实例
<img src="myimages.png" width="206" height="36">
尝试一下 »

注意: 图像的名称和尺寸是以属性的形式提供的。     

HTML 强调

在人类语言中,为了突出一句话的意思,我们通常强调某些词,并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。HTML 提供了许多语义化的元素,并且允许我们通过这些元素的意义标记正文内容,在这个章节中,我们将看到最常见的一小部分元素。

在HTML中我们可以使用em(emphasis)元素来标记这样的情况,浏览器默认风格为斜体:

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

在HTML中我们还可以使用<strong>(strong importance)元素来标记这样的请况,浏览器默认风格为粗体:    

<p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>

注意:为了获得字体风格,我们更应该使用元素和一些CSS