HTML 知识总结

HTML 简介

HTML 的全称是超文本标记语言(HyperText Markup Language),它不是编程语言,而是标记语言。Web 前端的核心知识包括 HTML、CSS 和 JavaScript,HTML 是前端的骨架,它定义了网页内容的含义和结构,如果类比一座房子,HTML 就是砖瓦、钢筋混泥土;CSS 的全称叫层叠样式表(cascading style sheet),通常用来描述一个网页的表现与展示效果,好比一座房子的外观样式;JavaScript 主要用来实现网页的功能与行为。这些内容我都会在后面逐一介绍。

光说不干都是扯淡,我们来看下面的结合了 HTML + CSS + JavaScript 的小栗子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
p {color: blue; }
</style>
<script type="text/javascript">
function myFunction(){document.write("Hello World.");}
</script>
</head>
<body>
<h1 align="center">This is a heading 1</h1>
<p>This is a paragraph.</p>
<button type="button" onclick="myFunction()">click me</button>
</body>
</html>

将以上代码使用 txt 等编辑器保存为 html 文件格式的文件,然后用浏览器打来即可看到效果。对以上代码的简要解释:!DOCTYPE html 是 HTML5 的声明,它已经是新一代标准;<html>…</html>、<head>…</head>、<body>…</body>、<titile>…</title>、<h1>…</h1>、<p>…</p>、<button></button>等是 html 标签,一般都是成对出现,一个是开始标签,一个是结束标签,如果你将这些标签的含义套用到写文章上就比较好理解了;<stype>…</stype> 标签下定义了一个 p 标签的元素选择器,用来修饰段落的,让段落的颜色显示蓝色;<script>…</script> 标签嵌入了一段 JavaScript 代码,逻辑就是向网页输出 Hello World;再看看 <button>…</button> 标签,基本逻辑就是点击了 click me 按钮就会触发 JavaScript 代码,输出 Hello World。

HTML 常用元素总结

上一节已经对 HTML 作了简要介绍,这一节再对 HTML 进行更详细的解释。“HTML 不是编程语言而是标记语言”,相信通过上面的例子对这句话理解更深刻了。以下对 HTML 常用的元素及属性进行总结。

<html> 元素

<html> 元素定义了整个 HTML 文档,每个 HTML 文档都应该包含该元素。

<head> 元素

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。head 标签下通常会有 meta 标签、title 标签、link/style 标签和 script 标签,在编写 HTML 的 head 部分时建议也是按照这个顺序来编写。因为,meta 最好写在第一个,特别是 meta chaset 设定必须写第一个,它们是元数据,能让数据获取方得知此页面的元数据;title 紧随 meta 之后是因为可能获取方需要知道页面标题信息,并且在最先获取 chaset 信息后知道此标题的编码方式;link、style 紧随 meta,其实还是主要为 link 大部分都是 CSS 样式文件考虑;script 放在最后,是基于script 不光是下载还是执行都会阻塞页面考虑,让它尽量偏后。

<meta> 标签

meta 标签是 HTML 中 head 头部的一个辅助性标签,它位于 HTML 文档头部的 head 和 title 标记之间,它提供用户不可见的信息。虽然这部分信息用户不可见,但是其作用非常强大,特别是当今的前端开发工作中,设置合适的 meta 标签可以大大提升网站页面的可用性。比如在桌面端开发中,meta 标签通常用来为搜索引擎优化(SEO)及 robots 定义页面主题,或者是定义用户浏览器上的 cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置 RASC 内容等级,等等。以下是它的简单示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<!--声明文档使用的字符编码-->
<meta charset="utf-8">
<!--简体中文生声明-->
<!-- Web 应用的名称(仅当网站被用作为一个应用时才使用)-->
<meta name="application-name" content="应用名称">
<!-- 在客户端存储 cookie,web 浏览器的客户端识别 -->
<title>页面标题</title>>
...
</head>
...
</html>

meta 标签根据属性的不同,可分为两大部分:http-equiv 和 name 属性。http-equiv:相当于 http 的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容;name 属性:主要用于描述网页,与之对应的属性值为 content,content 中的内容主要是便于浏览器,搜索引擎等机器人识别,等等。

<title> 元素

title 标签定义文档的标题。其实该字段还会对 SEO 有帮助,建议不要缺省。

样式表

样式表有三种,分别为:外部样式表、内部样式表和内联样式表。当 HTML 代码中如果涉及三种不同的样式表时,它们的优先级是这样的:外部样式表 < 内部样式表 < 内联样式表。

外部样式表

外部样式表如下所示,使用 link 标签链接外部 css 资源。

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

内部样式表如下所示,在 head 标签内部声明并定义 css 样式。

1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

内联样式表如下所示,在用到某个元素标签时以元素的属性的形式定义显示样式。

1
2
3
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

<script> 元素

script 标签用于定义客户端脚本,比如 JavaScript。script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型 JavaScript 最常用于图片操作、表单验证以及内容动态更新。

通过 src 属性指向外部脚本文件的例子:

1
<script src="./static/demo.js"></script>

script 标签包含脚本语句的例子(在 HTML5 中 type 属性可缺省):

1
2
3
<script type="text/javascript">
document.write("Hello World!")
</script>

<body> 元素

body 元素定义了 HTML 文档的主体。在 body 元素下面的元素及属性等就很多了,这里只介绍常用的。

<h1> - <h6> 元素

h1 到 h6 字体会逐渐变小,值得注意的是,在使用的时候不要觉得它有放大文字的功能就在需要放大字体的场景下去使用 h1 等标签,h1 等的使用场景还是需要跟语义保持一致。简单示例如下(由于比较简单,显示效果就不放上了):

1
2
3
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>

<p> 元素

p 标签是 paragraph 的缩写,是段落的意思,还是那句话,使用场景需要跟语义保持一致,需要用段落去排版的时候就用这个标签。简单示例代码如下所示:

1
2
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<a> 元素

a 元素主要用作超链接,属性 href 中指定 url,然后在内容框中输入要显示的文字即可:

1
<a href="http://www.w3school.com.cn">This is a link</a>

<img> 元素

img 标签用于显示图片, src 属性指定图片的路径。需要注意的是 img 标签不需要结束标签,使用的时候不要忘了在最后面加上结束符号 ‘/‘,示例如下所示:

1
<img src="w3school.jpg" width="104" height="142" />

<br /> 元素

br 标签用于换行,跟 img 标签一样没有借宿标签,使用的时候不要忘了在最后面加上结束符号 ‘/‘。

style 属性

style 属性用于改变 HTML 元素的样式。不局限于在 body 标签下使用,凡是 html 标签均可。示例代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
<!--整个 html 页面背景设置为黄色-->
<body style="background-color:yellow">
<!--h2 背景设置为红色-->
<h2 style="background-color:red">This is a heading</h2>
<!--段落 p 背景设置为绿色-->
<p style="background-color:green">This is a paragraph.</p>
<!--h1 字体设置为 verdana-->
<h1 style="font-family:verdana">A heading</h1>
<!--段落 p 字体为 arial,颜色红色,字体大小为 20 个像素-->
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<!--h1 中心对齐-->
<h1 style="text-align:center">This is a heading</h1>

html 文本格式化

直接看例子就会用,代码:

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
<!DOCTYPE html>
<html>
<head>
<title>formattings</title>
</head>
<body>
<b>定义粗体文本。</b>
<br />
<big>定义大号字。</big>
<br />
<em>定义着重文字。</em>
<br />
<i>定义斜体字。</i>
<br />
<small>定义小号字。</small>
<br />
<strong>定义加重语气。</strong>
<br />
<sub>定义下标字。</sub>
<br />
<sup>定义上标字。</sup>
<br />
<ins>定义插入字。</ins>
<br />
<del>定义删除字。</del>
<br />
</body>
</html>

效果图:

Bgcolor 属性

背景颜色(Bgcolor)属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。如:

1
2
3
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Backgrounds 属性

背景(Background)属性将背景设置为图像。属性值为图像的 URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

1
2
<body background="clt.jpg">
<body background="http://www.chenliangtang.top/clt.jpg">

URL 可以是相对地址,如第一行代码。也可以是绝对地址,如第二行代码。

HTML 表格

html 表格使用 table (表格)标签定义,表格的字段名称或者列名称用 th (表格头部)定义,表格的行用 tr (表格行)表示,每行的列用 td (表格数据)表示,简单示例如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>table</title>
</head>
<body>
<table border="1">
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2,cell 2</td>
</tr>
</table>
</body>
</html>

效果图如下所示:

HTML 列表

html 列表常用的有有序列表 ol,无序列表 ul,li 是具体的某项列表,它们支持嵌套,简单的代码示例如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>list</title>
</head>
<body>
<h4>biology</h4>
<ul>
<li>monkey</li>
<li>orangutan</li>
<li>baboon</li>
<li>human</li>
<ol type="a">
<li>man</li>
<li>woman</li>
</ol>
</ul>
</body>
</html>

效果如下所示:

HTML 块
<div>

div 是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。同是块级元素的还有 <h1>, <p>, <ul>, <table> 等。

<span>

span 是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上 <span></span> 标记可以通过在 span 上定义样式来设定其内容的样式。同是内联元素的还有 <b>, <td>, <a>, <img> 等。

栗子
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
<!DOCTYPE html>
<html>
<head>
<title>the difference between div and span</title>
</head>
<body>
<div style="float:left">
<h3>This is a header.</h3>
<p>This is a paragraph.</p>
</div>
<div style="float:left;display:inline">
<h3>This is a header.</h3>
<p>This is a paragraph.</p>
</div>
<div style="float:left;display:block">
<h3>This is a header.</h3>
<p>This is a paragraph.</p>
</div>
<br />
<span style="display:block">span style is block display</span>
<span>span style is default(inline).</span>
<span style="display:inline">span style is inline display.</span>
<span>span style is default(inline).</span>
</body>
</html>

效果如下所示:

HTML 表单

HTML 表单用于收集用户输入,整个表单的结构由 form 标签包裹着。表单的输入多数情况下被用到的表单标签是输入标签 input,输入类型是由类型属性 type 定义的,多数经常被用到的输入类型如下:文本域(Text Fields),当用户要在表单中键入字母、数字等内容时,就会用到文本域;单选按钮(Radio Buttons);复选框(Checkboxes);表单的动作属性(Action)和确认按钮。当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。可以通过下面的例子感受感受:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<html lang="zh-cmn-Hans">
<meta name="application-name" content="form app">
<title>form demo</title>
</head>
<body>
<h3>个人基本信息</h3>

<form action=“html5.html” method=“post”> <!---定义采用 post 方式向 html5.html 文件发送表单数据-->
<br />
GitHub 账号
<br />
<table> <!--用表格控制输入框的对齐-->
<tr>
<td>用户名:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password"></td>
</tr>
</table>
你的爱好
<br />
看书<input type="checkbox"> <!--复选框-->
旅游<input type="checkbox">
写作<input type="checkbox">
看电影<input type="checkbox">
<br />
请选择您的性别:
<input type="radio" name="sex"> <!--单选框-->
<input type="radio" name="sex">
保密<input type="radio" name="sex">
<br />
请选择您常用的网站
<select> <!--下拉列表-->
<option>www.baidu.com</option>
<option>www.google.com</option>
<option>www.github.com</option>
</select>
<br />
个人简介:<textarea name="text" rows="5" cols="30"></textarea> <!--文本域-->
<br />
<br />
<input type="submit" value="提交"> <!--提交表单到 html5.html 文件中-->
</form>
</body>
</html>

效果如下图所示:

当然,HTML 表单的内容远远不止这些,但用法都大同小异,这里就不一一展开了,感兴趣的同学可以再查找相关资料学习学习。

HTML5 语义化与布局

H5 语义元素的页面大致结构如下图所示:

header 标签通常放在页面或页面某个区域的顶部,用来设置页眉;nav 标签可以用来定义导航链接的集合,点击链接可以跳转到其他页面;article 标签中的内容比较独立,可以是一篇新闻报道,一篇博客,它可以独立于页面的其他内容进行阅读;section 标签表示页面中的一个区域,通常对页面进行分块或对内容进行分段,section 标签和 article 标签可以互相嵌套;aside 标签用来表示除页面主要内容之外的内容,比如侧边栏;footer 标签位于页面或页面某个区域的底部,用来设置页脚,通常包含版权信息,联系方式等。以下通过个例子看看:

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
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<html lang="zh-cmn-Hans">
<meta name="application-name" content="form app">
<title>HTML5 语义化</title>
</head>
<body>
<header>
<h1>How to learn Front-end</h1>
<p>You need to learn HTML、CSS、JavaScript first.</p>
</header>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
</nav>

<section>
<h1>What is HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.</p>
</section>

<article>
<h1>What is CSS</h1>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
</article>

<aside>
<h1>What is JavaScript</h1>
<p>Javascript is a simple programming language built into Netscape 2.0 and greater. It is integrated with and embedded in HTML. It allows greater control of web page behavior than does HTML alone. Since the Javascript interpreter is part of Netscape, it is platform-independent: Javascript incorporated into HTML runs on Windows, Macintosh, and other Netscape-supported systems.</p>
</aside>

<footer>
<p>Posted by: ChenLiangtang</p>
<p>Contact information: <a href="709320543@qq.com">
709320543@qq.com</a>.</p>
</footer>

</body>
</html>

效果如下图所示:

HTML 响应式 Web 设计

响应式 Web 设计的目的就是让内容布局能随用户使用显示器的不同而变化,我们看看下面的例子:

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
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta name="application-name" content="web app">
<title>Web 响应式设计</title>
<style> <!--样式向左浮动-->
.front-end {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>


<body>

<h1>Responsive web design</h1>
<br>

<div class="front-end">
<h2>HTML</h2>
<p>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.</p>
</div>

<div class="front-end">
<h2>CSS</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
</div>

<div class="front-end">
<h2>JavaScript</h2>
<p>Javascript is a simple programming language built into Netscape 2.0 and greater. It is integrated with and embedded in HTML. It allows greater control of web page behavior than does HTML alone. Since the Javascript interpreter is part of Netscape, it is platform-independent: Javascript incorporated into HTML runs on Windows, Macintosh, and other Netscape-supported systems.</p>
</div>

</body>
</html>

直接看下面的两个效果图就能明白什么是 Web 响应式设计了:

HTML(5) 代码规范

请使用正确的文档类型

请始终在文档的首行声明文档类型:

1
<!DOCTYPE html>

不建议用小写:

1
<!doctype html>

请使用小写元素名

HTML5 允许在元素名中使用混合大小写字母,但是建议全部用小写,如:

1
2
3
<section> 
<p>This is a paragraph.</p>
</section>

不要这样:

1
2
3
<SECTION> 
<p>This is a paragraph.</p>
</SECTION>

也不要这样:

1
2
3
<Section> 
<p>This is a paragraph.</p>
</SECTION>

关闭所有 HTML 元素

在 HTML5 中,可以不用关闭所有元素(例如 p 元素),但建议关闭所有 HTML 元素,如:

1
2
3
4
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

1
<meta charset="utf-8" />

不要这样:

1
2
3
4
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

使用小写属性名

HTML5 允许大小写混合的属性名,但建议使用小写属性名,同时建议属性值都加上引号,避免当属性值有空格时出错,如:

1
<div class="menu">

1
<table class="table striped">

不要这样:

1
<div CLASS="menu">

也不要这样:

1
<table class=table striped>

必需的属性

请始终对图像使用 alt 属性。当图像无法显示时该属性很重要,同时也请始终定义图像尺寸。这样做会减少闪烁,因为浏览器会在图像加载之前为图像预留空间,如:

1
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等号

等号两边的空格是合法的,但是精简空格更易阅读,建议这样:

1
<link rel="stylesheet" href="styles.css">

不建议这样:

1
<link rel = "stylesheet" href = "styles.css">

避免长代码行

当使用 HTML 编辑器时,通过左右滚动来阅读 HTML 代码很不方便,请尽量避免代码行超过 80 个字符。

空行和缩进

请勿毫无理由地增加空行。为了提高可读性,请增加空行来分隔大型或逻辑代码块。为了提高可读性,请增加两个空格的缩进。请勿使用 TAB。请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行,也没有必要缩进每个元素。如:

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>

<h1>Famous Cities</1>
<h2>Tokyo</h2>

<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>

</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
<tr>
<th>Name</th>
<th>Description</th>
<tr>
<tr>
<td>A</td>
<td>Description of A</td>
<tr>
<tr>
<td>B</td>
<td>Description of B</td>
<tr>
</table>
</p>

</body>

太简短了没必要这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>

<h1>Famous Cities</1>

<h2>Tokyo</h2>

<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>

</body>

省略 <html> 和 <body>?

在 HTML5 标准中,能够省略 <html> 标签和 <body> 标签,但不推荐省略 <html> 和 <body> 标签。

省略 <head>?

在 HTML5 标准中,<head> 标签也能够被省略。默认地,浏览器会把 <body> 之前的所有元素添加到默认的 <head> 元素,但省略标签的做法是陌生的,不建议省略。

元数据

title 元素在 HTML5 中是必需的。请尽可能制作有意义的标题,如:

1
<title>HTML5 Syntax and Coding Style</title>

为了确保恰当的解释,以及正确的搜索引擎索引,在文档中对语言和字符编码的定义越早越好,如:

1
2
3
4
5
6
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>

HTML 注释

短注释应该在单行中书写,并在 在独立的行中书写:

1
2
3
4
<!-- 
This is a long comment example. This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example. This is a long comment example.
-->

如果它们被缩进两个空格的话,长注释更易观察。

样式表

请使用简单的语法来链接样式表(type 属性不是必需的),如:

1
<link rel="stylesheet" href="styles.css">

短规则可以压缩为一行,就像这样:

1
p.into {font-family:"Verdana"; font-size:16em;}

长规则应该分为多行:

1
2
3
4
5
6
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

开括号与选择器位于同一行,在开括号之前用一个空格;使用两个字符的缩进;在每个属性与其值之间使用冒号加一个空格;在每个逗号或分号之后使用空格;在每个属性值对(包括最后一个)之后使用分号;只在值包含空格时使用引号来包围值;把闭括号放在新的一行;之前不用空格;避免每行超过 80 个字符;在逗号或分号之后添加空格,是所有书写类型的通用规则。

在 HTML 中加载 JavaScript

请使用简单的语法来加载外部脚本(type 属性不是必需的),如:

1
<script src="myscript.js">

使用“不整洁”的 HTML 样式的后果,是可能会导致 JavaScript 错误。

使用小写文件名

大多数 web 服务器(Apache、Unix)对文件名的大小写敏感,如不能以 london.jpg 访问 London.jpg。为了避免这些问题,请始终使用小写文件名。

文件扩展名

HTML 文件名应该使用扩展名 .html(而不是 .htm);CSS 文件应该使用扩展名 .css;JavaScript 文件应该使用扩展名 .js。

备注:以上的 HTML 代码有缩进的我都是只缩进两个空格,不知为何显示出来的就是一个 Tab 了,很无奈。。。