HTML教程

HTML 编辑器推荐：

Notepad++：https://notepad-plus-plus.org/（当保存 HTML 文件时，既可以使用.htm也可以使用.html扩展名。两者没有区别，完全根据个人喜好。）
Sublime Text：http://www.sublimetext.com/
VS Code：https://code.visualstudio.com/
Dreamweaver
在线编辑器：W3School在线测试工具 V2
http://www.w3school.com.cn/tiy/t.asp?f=html_basic_link

HTML：超文本标记语言（Hyper Text Markup Language 简称：HTML）

是一种用于创建网页的标准标记语言（标记语言是一套标记标签），不是编程语言
使用标记标签来描述网页
HTML文档包含了HTML标签及文本内容
HTML文档也叫web网页

HTML 标签：

HTML 标记标签通常被称为HTML标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签（伪标签）【开始标签和结束标签】

HTML 文档 = 网页：

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器：

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示，并以网页的形式显示出它们。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
只有 <body></body>之间的内容才会在浏览器中显示
例子：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
例子解释：
<html>与</html>之间的文本描述网页
<body>与</body>之间的文本是可见的页面内容
<h1>与</h1>之间的文本被显示为标题
<p>与</p>之间的文本被显示为段落

HTML <head> 元素：
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

HTML <title> 元素：
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>

HTML <base> 元素：
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

HTML <link> 元素：
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

HTML <style> 元素：
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML 标题：
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的，字号依次变小
<h1> 定义最大字号的标题。<h6> 定义最小字号的标题。
注释：浏览器会自动地在标题的前后添加空行。
默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>
<body>
<h1>我的第一个标题</h1>
<h2>我的第一个标题</h2>
<h3>我的第一个标题</h3>
<h4>我的第一个标题</h4>
<h5>我的第一个标题</h5>
<h6>我的第一个标题</h6>
</body>
</html>

image.png

HTML 水平线：
<hr > 标签在 HTML 页面中创建水平线。

也可以实现同等效果
hr 元素可用于分隔内容。
实例：
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>
<body bgcolor="yellow">
<h1 align="center">我的第一个标题</h1>

<p>我的第一个段落</p>

<p>我的第二个段落</p>

<p>我的第三个段落</p>
</body>
</html>
image.png

HTML 注释：
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的：
实例：

HTML 提示 - 如何查看源代码
您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的？”
如果您想找到其中的奥秘，只需要单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

HTML 段落：
HTML 段落是通过 <p> 标签进行定义的。
注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br />（
等同于
） 标签，
代替它！（但是不要用 <br /> 标签去创建列表。）
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个标题</p>
<p>我的第一个标题</p>
<p>我的第一个标题</p>
</body>
</html>

image.png

不要忘记结束标签：
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

HTML 换行：
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
实例：
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>
<body bgcolor="yellow"> bgcolor、align旧版本使用的语法
<h1 align="center">我的第一个标题</h1>


<p>我的第一个段落
我的第二个段落
我的第三个段落</p>
</body>
</html>
image.png

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

还是 <br />：
您也许发现
与 <br /> 很相似。
在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
即使
在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

HTML 输出 - 有用的提示
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML 超链接：
HTML 链接是通过 <a> 标签进行定义的。
1.通过使用 href 属性 - 创建指向另一个文档的链接
2.通过使用 name 属性 - 创建文档内的书签
注释："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>
<body>
<a href="http://www.w3school.com.cn">这是一个连接</a>
</body>
</html>

image.png

image.png

HTML 链接 - target 属性：
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
image.png

image.png

HTML 链接 - name 属性：
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
提示：锚的名称可以是任何你喜欢的名字。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
实例：
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

HTML 图像：
HTML 图像是通过 <img> 标签进行定义的。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" />
注释：图像的名称和尺寸是以属性的形式提供的。
图片要和html文档放置于一个文件夹中(推荐)
URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>
<body>
<img src="d.jpg" width="104" height="142"
</body>
</html>

image.png

替换文本属性（Alt）：
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 元素：
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

image.png

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）或者伪标签。

HTML 元素语法：
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是从开始标签到结束标签的所有内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

嵌套的HTML元素：
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
实例：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
上面的例子包含三个 HTML 元素。
HTML 实例解释：
<p> 元素：
<p>This is my first paragraph.</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。
<body> 元素：
<body>
<p>This is my first paragraph.</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。

空的 HTML 元素：
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

就是没有关闭标签的空元素（
标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使
在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 属性：
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
注释：属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'

属性实例：
属性例子1—居中排列标题:
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
属性例子2—背景颜色
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
属性例子3:
<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）
<table border="1"> 拥有关于表格边框的附加信息。
属性例子4:
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.w3school.com.cn">This is a link</a>
实例：
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>
<body bgcolor="yellow">
<h1 align="center">我的第一个标题</h1>
<p>我的第一个段落</p>
<p>我的第二个段落</p>
<p>我的第三个段落</p>
</body>
</html>

image.png

HTML 样式
HTML的style属性
style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。

HTML 样式实例 - 背景颜色：
background-color 属性为元素定义了背景颜色：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>html样式-背景颜色</title>
</head>
<body style="background-color:yellow">
<h2 style="background-color:red">这是一个标题</h2>
<p style="background-color:green">这是一个段落</p>
</body>
</html>

image.png

HTML 样式实例 - 字体、颜色和尺寸：
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>字体颜色尺寸</title>
</head>
<body style="background-color:yellow">
<h1 style="font-family：verdana">这是一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px">这是一个段落</p>
</body>
</html>
image.png

HTML 样式实例 - 文本对齐：
text-align 属性规定了元素中文本的水平对齐方式：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>文本对齐</title>
</head>
<body style="background-color:yellow">
<h1 style="text-align:center">这是一个标题</h1>
<p> 你好，世界！</p>
</body>
</html>
image.png

HTML <q> 用于短的引用：
HTML <q> 元素定义短的引用。
浏览器通常会为 <q> 元素包围引号。
实例：
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
image.png

用于长引用的HTML <blockquote>：
HTML <blockquote> 元素定义被引用的节。
浏览器通常会对 <blockquote> 元素进行缩进处理。
实例：
<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
image.png

用于缩略词的 HTML <abbr>：
HTML <abbr> 元素定义缩写或首字母缩略语。
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>引用</title>
</head>
<body >
<p>
<abbr title="World Health Organization">WHO</abbr>成立于1948年。
</p>
</body>
</html>
image.png

用于联系信息的 HTML <address>：
HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。
此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
实例：
<address>
Written by Donald Duck.

Visit us at:

Example.com

Box 564, Disneyland

USA
</address>
image.png

用于著作标题的 HTML <cite>：
HTML <cite> 元素定义著作的标题。
浏览器通常会以斜体显示 <cite> 元素。
实例：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>著作标题</title>
</head>
<body >
<p>
<cite>The Scream</cite> by Edward Munch. Painted in 1893.
</p>
</html>
image.png

用于双向重写的 HTML <bdo>：
HTML <bdo> 元素定义双流向覆盖（bi-directional override）。
<bdo> 元素用于覆盖当前文本方向：
实例：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>双向重写</title>
</head>
<body >
<bdo dir="rtl">This text will be written from right to left</bdo>
</body>
</html>
image.png

HTML 计算机代码格式:
通常，HTML 使用可变的字母尺寸，以及可变的字母间距。
在显示计算机代码示例时，并不需要如此。
<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。
HTML 键盘格式:
HTML <kbd> 元素定义键盘输入：
实例:
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
HTML 样本格式:
HTML <samp> 元素定义计算机输出示例：
实例:
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
HTML 代码格式:
HTML <code> 元素定义编程代码示例：
实例:
<code>
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>
<code> 元素不保留多余的空格和折行：
实例:
<p>Coding Example:</p>
<code>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</code>
如需解决该问题，您必须在** <pre> 元素**中包围代码：
实例:
<p>Coding Example:</p>
<code>
<pre>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
</code>
HTML 变量格式化
HTML <var> 元素定义数学变量：
实例:
<p>Einstein wrote:</p>
<p><var>E = m c2</var></p>
HTML 计算机代码元素:
标签 描述
<code> 定义计算机代码文本
<kbd> 定义键盘文本
<samp>定义计算机代码示例
<var> 定义变量
<pre> 定义预格式化文本
image.png

HTML 变量格式化”
HTML <var> 元素定义数学变量：
实例
<p>Einstein wrote:</p>
<p><var>E = m c2</var></p>
image.png

如何使用样式”
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表:
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表：
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式：
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
image.png

表格：
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1"> border代表表格有框
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

image.png

表格的表头：
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本
image.png

表格中的空单元格：
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
<html>
<head>
<meta charset="utf-8">
<title>表格空单元格</title>
</head>
<body>
<table border="1">
<tr>
<th>标题一</th>
<th> 标题二</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td> </td> 单元格为空时有时候不显示边框，可用空格占位符&nbsp将边框显示出来
<td>4</td>
</tr>
</table>
</body>
</html>
image.png

无序列表：
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
image.png

有序列表：
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
image.png

定义列表：
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>概要</dt>
<dd>123</dd>
<dt>背景</dt>
<dd>456</dd>
<dt>目的</dt>
<dd>789</dd>
</dl>
image.png

HTML类：
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
<html>
<head>
<style>
.cites{
background-color:black;
color:white;
margin:20px;
padding:20px
}
</style>
</head>
<body>
<div class="cites">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</body>
</html>
image.png

分类块级元素：
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：
<html>
<head>
<style>
.cites{
background-color:black;
color:white;
margin:20px;
padding:20px
}
</style>
</head>
<body>
<div class="cites">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
<div class="cites">
<h2>Paries</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="cites">
<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.</p>
</div>
</body>
</html>
image.png

分类行内元素：
HTML <span> 元素是行内元素，能够用作文本的容器。
设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。
<html>
<head>
<style>
span.red{color:red}
</style>
</head>
<body>
<h1>my <span class="red">important</span> heading</h1>
</body>
</html>
image.png

使用 <div> 元素的 HTML 布局：
注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
这个例子使用了四个 <div> 元素来创建多列布局：
<html>
<head>

<style>

header{

background-color:black;
color:white;
text-align:center;
padding:5px
    }

nav{

line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px
    }

section{

width:350px;
float:left;
padding:10px
    }

footer{

background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px
    }

</style>
</head>
<body>

<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London

Paris

Tokyo

</div>
<div id="section">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3school.com.cn
</div>
</body>
</html>

image.png

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
禁止转载，如需转载请通过简信或评论联系作者。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,544评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,430评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,764评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,193评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,216评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,182评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,063评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,917评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,329评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,425评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,019评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2赞 353

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1赞 92
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,887评论 0赞 0
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,474评论 1赞 45
  • HTML 教程
    什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text ...
    Y_yao13阅读 869评论 0赞 3
  • #HTML教程(标签)
    1 .基本结构 <!DOCTYPE html> 标题文本... 内容文本... 基本解释 <!D...
    mavin_235阅读 437评论 0赞 0