HTML是什么?

HTML也就是我们常说的网页。浏览器从服务器获取HTML文件,并显示给用户。

HTML(HyperText Markup Language,超文本标记语言)是为了创建网页而设计的语言。HTML是用一系列的HTML标签写成的,每种HTML标签都有对应的语义和大致的外观。html文件通常以.html作为后缀名。

接下来的介绍基于HTML5标准。

一个HTML文件

一个简单的HTML文件是这样的:

<html>
<head>
  <title>Hello, Catty!</title>
</head>

<body>
  <p>I like fruits!!!</p>
</body>

</html>

可以看到HTML是由成对的标签构成的。比如<p></p><body></body>。HTML文件的所有内容都应包含在<html>标签之中,<head>中的内容用来描述当前文件,<body>中的内容则被显示在页面上。

查看HTML文件

把上述文本保存为hello.html,使用浏览器打开它,你会看到:

<title>中的内容显示在了标题栏中,而<p>(passage,段落标签)之间的内容显示在了页面上。<body>中只有一个<p>标签,接着我们来试试其他的标签!

h 标签

除了上述的<p>标签之外,HTML提供了多种多样的标签来显示相应的内容,比如<h1><h2>标签:

...
<body>
  <h1>Catie's Homepage</h1>
  <h2>i am a little, cute catie...</h2>
  <p>I like fruits!!!</p>
...

把它们添加到我们的hello.html中并刷新浏览器,便能看到这样的效果:

事实上,除了上述的<h1><h2>,HTML提供了一共六级标题标签。

img 标签

<img>标签用来显示图片,其src属性用来指定图片的路径。在<p>前面加入一个<img>

...
<img src="./catty.jpeg">
...

同样保存后刷新浏览器,你会看到:

注意

你要保证hello.html所在目录下存在一个catty.jpeg文件。它可以是任何图片文件,你可以去本节课的参考代码中下载。

你可能看到<img>标签并没有对应的关闭标签,这是因为<img>属于空元素,它不需要关闭标签。

HTML标签分为常规元素(normal element)和空元素(void element)。其中空元素是自关闭的(self-closing),不需要成对地添加关闭标签。

空元素包括:area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

ul 标签

<ul>是无序列表(unordered list),用来显示一组<li>(list item):

  <ul>
    <li>Cherry</li>
    <li>Peach</li>
    <li>Strawberry</li>
  </ul>

效果如下:

标签嵌套

HTML中,常规元素都是可嵌套的,比如上述的<li>中,可以加一个超链接<a>标签。同时,我们把<ul><p>放在一个<div>(division,区域)下

<div>
  <p>I like fruits!!!</p>

  <ul>
    <li>Cherry</li>
    <li>Peach</li>
    <li><a href='http://www.baidu.com'>Strawberry</a></li>
  </ul>
</div>

第三项的Strawberry将会显示为一个指向百度的超链接:

最终页面

我们把上述的标签都放在一起,形成最终的页面:

所有的文件可以在本课的参考代码中找到。

其他HTML标签

HTML标签还有哪些呢?下面列举一些重要的HTML标签:

  • 标题(h1, h2, h3等),用来显示标题。
  • 段落(p),用来显示一个段落。
  • 块(div),HTML块,主要用来组织HTML元素。
  • 输入(input),用来接受用户输入。
  • 列表(li, ul),用来显示一个列表,li(list)是有序列表,ul(unsorted list)是是无序列表。

如果你好奇一共有多少HTML标签,或者某个标签的使用方法,请参见:http://www.w3school.com.cn/tags/index.asp

登录发表评论 注册

反馈意见