HTML - 基本元素

发表于   |   分类于   |  

HTML 主要由三大部分组成：

  • 头部信息，即 <head> 标签；
  • 网页内容，即 <body> 标签；
  • HTML 文件，即 <html> 标签；
1
2
3
4
5
6
7
8
<html>
<head>
	<title>标题</title>
</head>
<body>
网页主体内容
</body>
</html>

HTML 是由一个个元素组成，元素就是一个一个的标签，例如：

1
2
3
4
5
<p></p>
<hr/>
<head></head>
<title></title>
<body></body>

以上这些都是 HTML 元素。

HTML 属性

属性为 HTML 元素提供附加信息。HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，属性总是在 HTML 元素的开始标签中规定。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。

1
2
3
4
5
6
7
8
<html>
<head>
	<title>标题</title>
</head>
<body bgcolor="red">
网页主体内容
</body>
</html>

上面的 bgcolor="red" 就是一个 HTML 属性。

HTML 注释

1
2
3
4
<body bgcolor="red">
<p>hello html!</p>/*p是段落*/
<hr/> <!--hr是水平线-->
</body>

文档声明

建立符合标准的网页，需要所有网页中的内容在浏览器中正确一致的显示，我们需要告诉浏览器你要使用 HTML 或者 XML 的哪个版本。所以我们需要声明 <!DOCTYPE> 类型。

<!DOCTYPE> 必须放在 HTML 文档的第一行；

<!DOCTYPE> 声明不是 HTML 的标签；

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
</head>
<body bgcolor="gray">
<p>HELLO,everyone.This is my first page!</p>
</body>
</html>

网页编码

有时我们编写的网页会出现中文乱码的情况，这是因为我们没有告诉浏览器我们使用的语言和编码形式。这种情况可以在 <head></head> 中使用 <meta/> 标签设定网页的编码形式。

国内常用的编码形式是 UTF-8 和 GB2312。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
	<!--网页头部内容-->
	<title>文字和段落标签</title>
	<meta http-equiv="Content - Type" content="text/html" charset="utf-8"/>
</head>
<body bgcolor="gray">
	<!--网页主体内容-->
	超文本
</body>
</html>

文本和段落

HTML 中对文本的层次处理大致是使用下面的几种标签：

标签名 标记
标题 <h1></h1> ~ <h6></h6>
段落 <p></p>
换行 <br/>
空格 &nbsp;
与编辑器中相同的格式 <pre></pre>

上面我们学到，标签就是元素，元素可以有属性来提供附加信息，文本处理方面也有一个重要的属性，也就是对齐属性。对齐的 key 是 align，有以下几个 value：

值 描述
left 左对齐
right 右对齐
center 居中对齐
justify 对行进行伸展，这样每行都可以有相等的长度。

修饰符和特殊符号

HTML 中常用的修饰符号有：

标签名 标记
水平线 <hr/>
斜体 <i></i> <em></em>
加粗 <b></b> <strong></strong>
下标 <sub>
上标 <sup>
下划线 <ins>
删除线 <del>

水平线有以下几种常用属性：

属性 描述
width 水平线宽度，可以是像素或百分比。
color 水平线颜色。
align 水平线居中对齐。
noshade 水平线无阴影。

常用的特殊符号有：

属性 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&reg; ® 已注册
&copy; © 版权
&trade; ™ 商标
&nbsp; Space 不断行的空白

列表标签

HTML 列表分为有序列表和无序列表，无序列表使用 <ul></ul> 包裹，列表项使用 <li></li> 包裹，无序列表中经常用的是属性是 type，代表列表项前面的符号，有圆形、方形、空心圆几种：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
	<!--网页头部内容-->
	<title>文字和段落标签</title>
	<meta http-equiv="Content - Type" content="text/html" charset="utf-8"/>
</head>
<body bgcolor="gray">
	<!--网页主体内容-->
	<ul type="disc">
		<li>春</li>
		<li>夏</li>
		<li>秋</li>
		<li>冬</li>
	</ul>
	<ul type="square">
		<li>春</li>
		<li>夏</li>
		<li>秋</li>
		<li>冬</li>
	</ul>
	<ul type="circle">
		<li>春</li>
		<li>夏</li>
		<li>秋</li>
		<li>冬</li>
	</ul>
</body>

有序列表使用 <ol></ol> 包裹，列表项同样使用 <li></li> 包裹，有序列表中的 type 有以下几个值：

值 描述
1 阿拉伯数字排序。
a 小写英文字母排序。
A 大写英文字母排序。
i 小写罗马数字排序。
I 大写罗马数字排序。

HTML 路径

HTML 的路径分为相对路径和绝对路径，绝对路径是以本地的盘符或网络主机开始的路径，相对路径是资源文件相对于网页的路径，相对路径有以下几种描述：

路径 描述
同级目录 filename 或 ./filename
上级目录 ../filename
下级目录 foldername/filename
上级目录的上级目录 ../../filename
下级目录的下级目录 foldername/foldername/filename

图像和超链接

HTML 中显示一张图片使用 <img src="" alt="" .../> 标签，<img/> 标签有以以下几个常用属性：

属性 描述
src 图片 url
alt 图片无法显示时的代替文字
height 像素或百分比
width 像素或百分比

超链接标签的语语法是 <a href=""></a>，href 可以是内部标签，也可以是外部标签。

1
2
3
4
5
6
<div>
    <span>1:</span>
    <a href="baidu.com">
        <img src="example.png" width="60%" atl="example">
    </a>
</div>

<a></a> 的常用属性有以下几种：

属性 描述
href 链接地址或 #锚点名 或空链接 #。
target 链接的目标窗口，有 self、blank、top、parent 等值。
title 链接提示文字。
name 链接命名，一般用于锚点。

打开另一个网页中的锚点

1
2
3
4
页面A
<a href="页面B#锚点名"></a>
页面B
<a name="锚点名"></a>

邮件链接

1
<a href="mailto:邮箱地址"></a>
参数 描述
mailto:name@email.com 向 email 地址发邮件
cc=name@email.com 抄送邮件
bcc=name@email.com 暗送邮件
subject=subject text email 的题目
body=body text email 的内容
? 和浏览器地址操作一样，第一个参数符号是？
& 其他参数符号是&

下载链接

1
<a href="../file.zip"></a>