HTML(HyperText Markup Language,超文本标记语言)也就是我们常说的网页。浏览器从服务器获取HTML文件,并显示给用户。HTML是为了创建网页而设计的语言。
HTML是用一系列的HTML标签写成的,每种HTML标签都有对应的语义和大致的外观。html文件通常以.html
作为后缀名。下文中HTML的相关内容均基于HTML5标准来介绍。
编写 HTML
HTML是一种用于创建网页的语言,用HTML语言编写的网页我们称为HTML文件,一般以.html
后缀来命名。一个最简单的HTML文件可以是这样的:
<!DOCTYPE html>
<html>
<head>
<title>Hello, Catty!</title>
</head>
<body>
<p>I like fruits!!!</p>
</body>
</html>
我们对上述代码稍作解释。第一行DOCTYPE声明并非页面的一部分,它属于浏览器指示,像浏览器说明当前HTML文件使用的HTML语言版本。
接着是一个<html>
标签,标签要用尖括号包含起来,该标签与文件尾的</html>
成对。一对标签之间的内容均为该标签的子元素,比如<html>
标签有两个子元素:<head>
和<body>
。
其中<head>
包含的内容往往用来设置HTML的元信息(metadata)。比如外部样式表、页面脚本、文件编码、视口信息等。
<body>
中的内容则被显示在页面上。上述<body>
标签包含一个子标签<p>
,它表示一个段落(paragraph)。
查看HTML文件
把上述文本保存为hello.html
,使用浏览器打开它,你会看到:
<title>
中的内容显示在了标题栏中,而<p>
(passage,段落标签)之间的内容显示在了页面上。<body>
中只有一个<p>
标签,接着我们来试试其他的标签!
h 标签
大多数HTML标签都是用来显示和输入信息的,它们被用在<body>
标签之中。除了上述的<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标签,或者某个标签的使用方法,请参见:W3C School: HTML Tags
更多文章请访问天码营网站