知识点导航：

一：HTML 简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

实例解析

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题

<p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

二：HTML 网页结构

下面是一个可视化的HTML页面结构：

只有 <body> 区域 (白色部分) 才会在浏览器中显示。

三：<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html><!DOCTYPE HTML><!doctype html><!Doctype Html>

四：中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

五：HTML 基础- 4个实例

5.1 HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

5.2 HTML 段落

HTML 段落是通过标签 <p> 来定义的.

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

5.3 HTML 链接

HTML 链接是通过标签 <a> 来定义的.

<a href="http://www.runoob.com">这是一个链接</a>

5.4 HTML 图像

HTML 图像是通过标签 <img> 来定义的.

<img src="/images/logo.png" width="258" height="39" />

六:HTML 元素

HTML 文档由 HTML 元素定义。

HTML 元素

6.1 <p> 元素:

<p> 元素定义了 HTML 文档中的一个段落。

6.2 <body> 元素:

<body> 元素定义了 HTML 文档的主体。

6.3 <html> 元素：

<html> 元素定义了整个 HTML 文档。

七：HTML 属性

属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name="value"。

7.1 HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

7.2 HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

7.3 HTML 属性参考手册

查看完整的HTML属性列表: https://www.runoob.com/tags/html-reference.html

下面列出了适用于大多数 HTML 元素的属性：

八：HTML 标题

8.1：HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

8.2：HTML 水平线

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

hr 元素可用于分隔内容。

实例1：

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

8.3：HTML 注释

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

注释写法如下:

<!-- 这是一个注释 -->

8.4：HTML 标签参考手册

九：段落

HTML 标签参考手册

十：HTML 文本格式化

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体

	通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而，这些标签的含义是不同的： <b> 与<i> 定义粗体或斜体文本。 <strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

实例1：<b>加粗字体</b><i>斜体文本</i><code>电脑自动输出</code><sub>下标</sub><sup>上标</sup>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup></body>
</html>

实例2：文本格式化<b>加粗</b><strong>加粗</strong> <big>放大</big><small>缩小</small> <em>斜体</em>斜体<i></i>

此例演示如何在一个 HTML 文件中对文本进行格式化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head><body><b>这个文本是加粗的</b><br /><strong>这个文本是加粗的</strong><br /><big>这个文本字体放大</big><br /><em>这个文本是斜体的</em><br /><i>这个文本是斜体的</i><br /><small>这个文本是缩小的</small><br />这个文本包含
<sub>下标</sub><br />这个文本包含
<sup>上标</sup></body>
</html>

实例3：预格式文本<pre>预格式文本</pre>

此例演示如何使用 pre 标签对空行和空格进行控制。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre></body>
</html>

实例4："计算机输出"标签<code>计算机输出</code> <kbd>键盘输出</kbd> <tt>打字机文本</tt> <samp>计算机代码样本</samp> <var>计算机变量</var>

此例演示不同的"计算机输出"标签的显示效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br /><p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p></body>
</html>

实例5：<address>地址</address>

此例演示如何在 HTML 文件中写地址。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address></body>
</html>

实例6：<abbr>缩写</abbr>和<acronym>首字母缩写</acronym>

此例演示如何实现缩写或首字母缩写。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym><p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p><p>仅对于 IE 5 中的 acronym 元素有效。</p><p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p></body>
</html>

实例7：<bdo>文字方向改变</bdo>

此例演示如何改变文字的方向。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  </body>

实例8：<q>块引用</q>

此例演示如何实现长短不一的引用语。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p></body>
</html>

实例9：<del>删除字效果</del>和<ins>插入字效果</ins>

此例演示如何标记删除文本和插入文本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>My favorite color is <del>blue</del> <ins>red</ins>!</p></body>
</html>

10.1 HTML 文本格式化标签

10.2 HTML "计算机输出" 标签

10.3 HTML 引文, 引用, 及标签定义

HTML使用标签 <a>来设置超文本链接。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

十一：HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

例题1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p><p><a href="//www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p></body>
</html>

10.1 HTML 链接语法

HTML 链接语法

<a href="url">链接文本</a>

href 属性描述了链接的目标。.

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

10.2 HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

实例2：访问菜鸟教程!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a><p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p></body>
</html>

10.3：HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

10.4 基本的注意事项 - 有用的提示

注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。

10.5 HTML 链接标签

实例3：图片链接

如何使用图片链接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p><p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p></body>
</html>

实例4：在当前页面链接到指定位置

如何使用书签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>
<a href="#C4">查看章节 4</a>
</p><h2>章节 1</h2>
<p>这边显示该章节的内容……</p><h2>章节 2</h2>
<p>这边显示该章节的内容……</p><h2>章节 3</h2>
<p>这边显示该章节的内容……</p><h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p><h2>章节 5</h2>
<p>这边显示该章节的内容……</p><h2>章节 6</h2>
<p>这边显示该章节的内容……</p><h2>章节 7</h2>
<p>这边显示该章节的内容……</p><h2>章节 8</h2>
<p>这边显示该章节的内容……</p><h2>章节 9</h2>
<p>这边显示该章节的内容……</p><h2>章节 10</h2>
<p>这边显示该章节的内容……</p><h2>章节 11</h2>
<p>这边显示该章节的内容……</p><h2>章节 12</h2>
<p>这边显示该章节的内容……</p><h2>章节 13</h2>
<p>这边显示该章节的内容……</p><h2>章节 14</h2>
<p>这边显示该章节的内容……</p><h2>章节 15</h2>
<p>这边显示该章节的内容……</p><h2>章节 16</h2>
<p>这边显示该章节的内容……</p><h2>章节 17</h2>
<p>这边显示该章节的内容……</p></body>
</html>

实例5：跳出框架

本例演示如何跳出框架，假如你的页面被固定在框架之内。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>跳出框架?</p>
<a href="//www.runoob.com/" target="_top">点击这里!</a> </body>
</html>

实例6：创建电子邮件链接

注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p><p>
<b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p></body>
</html>

实例7：创建电子邮件链接 2

本例演示更加复杂的邮件链接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p><p>
<b>注意:</b> 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p></body>
</html>

十二：HTML <head>-<base> -<link> - <style> -<meta> -<title>元素

https://blog.csdn.net/liu17234050/article/details/103195525

十三：HTML 样式- CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

实例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div><div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"><div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div><h3>Look! Styles and colors</h3><div style="letter-spacing:12px;">Manipulate Text</div><div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div><div style="color:#000000;">and more...</div></div></body>
</html>

实例2：HTML使用样式

本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head><body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body></html>

实例3：本例演示如何使用样式属性做一个没有下划线的链接。

如何使用 style 属性制作一个没有下划线的链接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><a href="//www.runoob.com/" style="text-decoration:none;">访问 runoob.com!</a></body>
</html>

实例4：链接到一个外部样式表

本例演示如何标签链接到一个外部样式表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head><body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body></html>

13.1 如何使用CSS

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

13.2 内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

13.3 HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

早期背景色属性（background-color）是使用 bgcolor 属性定义。

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

13.4 HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

13.5 HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

文本对齐属性 text-align取代了旧标签 <center> 。

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

13.6 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

13.7 外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

13.8 HTML 样式标签

13.9 已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

13.10 CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。

实例：

<a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>

十四：HTML 图像

实例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228"></body>
</html>

实例2：从不同的位置插入图片

本例演示如何将其他文件夹或服务器的图片显示到网页中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>一个来自文件夹中的图像:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p>
<img src="//www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69"></body>
</html>

10.1 HTML 图像- 图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

10.2 HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

10.3 HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

10.4 基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

10.5 HTML 图像标签

实例3：排列图片

本例演示如何在文字中排列图像。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p><h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p><h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p><p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p></body>
</html>

实例4：浮动图像

本例演示如何使图片浮动至段落的左边或右边。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p><p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p><p><b>注意:</b> 在这里我们使用了 CSS "float" 属性，在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p></body>
</html>

实例5：设置图像链接

本例演示如何将图像作为一个链接使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p><p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p></body>
</html>

实例6：创建图像映射

本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>点击太阳或其他行星，注意变化：</p><img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map></body>
</html>

该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）

10.5 补充

10.5.1 矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

10.5.2 15.1 HTML 表格圆形：(圆心坐标为(X1,y1)，半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

10.5.3 多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

十五：HTML 表格

15.1 HTML 表格

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

15.2 HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

15.3 HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

实例1：

<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>

15.4 HTML 表格标签

实例2：表格中的表头(Heading)

本例演示如何显示表格表头。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr><th>Name</th><th>Telephone</th><th>Telephone</th>
</tr>
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr><th>First Name:</th><td>Bill Gates</td>
</tr>
<tr><th>Telephone:</th><td>555 77 854</td>
</tr>
<tr><th>Telephone:</th><td>555 77 855</td>
</tr>
</table>

</body>
</html>

实例3：带有标题的表格

本例演示一个带标题 (caption) 的表格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><table border="1"><caption>Monthly savings</caption><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$50</td></tr>
</table></body>
</html>

实例4：跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

行：rowspan

列：colspan

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h4>单元格跨两列:</h4>
<table border="1">
<tr><th>Name</th><th colspan="2">Telephone</th>
</tr>
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>
</tr>
</table><h4>单元格跨两行:</h4>
<table border="1">
<tr><th>First Name:</th><td>Bill Gates</td>
</tr>
<tr><th rowspan="2">Telephone:</th><td>555 77 854</td>
</tr>
<tr><td>555 77 855</td>
</tr>
</table></body>
</html>

实例5：单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h4>没有单元格边距:</h4>
<table border="1">
<tr><td>First</td><td>Row</td>
</tr>
<tr><td>Second</td><td>Row</td>
</tr>
</table><h4>有单元格边距:</h4>
<table border="1"
cellpadding="10">
<tr><td>First</td><td>Row</td>
</tr>
<tr><td>Second</td><td>Row</td>
</tr>
</table></body>
</html>

实例6：单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h4>没有单元格间距:</h4>
<table border="1">
<tr><td>First</td><td>Row</td>
</tr>
<tr><td>Second</td><td>Row</td>
</tr>
</table><h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr><td>First</td><td>Row</td>
</tr>
<tr><td>Second</td><td>Row</td>
</tr>
</table><h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr><td>First</td><td>Row</td>
</tr>
<tr><td>Second</td><td>Row</td>
</tr>
</table></body>
</html>

十六：列表

HTML 支持有序、无序和定义列表:

16.1 HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

16.2 HTML 有序列表

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

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

16.3 HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

16.4 HTML 列表标签

实例1：不同类型的有序列表

本例演示不同类型的有序列表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h4>编号列表：</h4>
<ol><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  <h4>大写字母列表：</h4>
<ol type="A"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  <h4>小写字母列表：</h4>
<ol type="a"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  <h4>罗马数字列表：</h4>
<ol type="I"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  <h4>小写罗马数字列表：</h4>
<ol type="i"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  </body>
</html>

实例2：不同类型的无序列表

本例演示不同类型的无序列表。

注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p><h4>圆点列表：</h4>
<ul style="list-style-type:disc"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ul>  <h4>圆圈列表：</h4>
<ul style="list-style-type:circle"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ul>  <h4>正方形列表：</h4>
<ul style="list-style-type:square"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ul></body>
</html>

实例3：自定义列表

本例演示一个定义列表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><h4>一个自定义列表：</h4>
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd>
</dl></body>
</html>

十七：HTML区块<div> 和<span>

HTML 可以通过 <div> 和 <span>将元素组合起来。

17.1 HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

17.2 HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

17.3 HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

17.4 HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

17.5 HTML 分组标签

十八：HTML 布局

18.1 网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

	虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

18.2 HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

18.3 HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

	即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

18.4 HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程。

Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

18.5 HTML 布局标签

十九：HTML 表单和输入

实例1：创建文本字段 (Text field)

本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form><p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p></body>
</html>

实例2:创建密码字段

本例演示如何创建 HTML 的密码域。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form><p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p></body>
</html>

19.1 HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>
.
input 元素
.
</form>

19.2 HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

19.2.1 文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

19.2.2 密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

19.2.3 单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

19.2.4 复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

19.2.5 提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的

HTML零基础入门学习大全-干货！相关推荐

圆方圆学院零基础入门学习Python（绝对干货，值得学习）
圆方圆学院零基础入门学习Python(绝对干货,值得学习) 链接: pan.baidu.com/s/1Shpd1G8L- 提取码: bup7
小甲鱼零基础入门学习Python（绝对干货，值得学习）
小甲鱼零基础入门学习Python(绝对干货,值得学习) 链接: https://pan.baidu.com/s/1jJmIrlk 密码: ktp2
零基础入门学习Python，我与python的第一次亲密接触后的感受！
前言:Python是适合初学者入门最好的语言 Python适合初学者入门最好的语言人工智能用Python?高考要加入Python?现在连微软官方Excel都要把Python作为官方语言!Python ...
零基础入门学习Python(33)-图形用户界面编程（GUI编程）EasyGui
用户界面编程,即平时说的GUI(Graphical User Interface)编程,那些带有按钮.文本.输入框的窗口的编程 EasyGui是一个非常简单的GUI模块,一旦导入EasyGui模块,P ...
python零基础入门教程视频下载-Python零基础入门学习视频教程全42集，资源教程下载...
课程名称 Python零基础入门学习视频教程全42集,资源教程下载课程目录 001我和Python的第一次亲密接触 002用Python设计第一个游戏 003小插曲之变量和字符串 004改进我们的小 ...
python基础教程视频教程百度云-Python零基础入门学习视频教程全42集百度云网盘下载...
课程简介 Python零基础入门学习视频教程全42集百度云网盘下载课程目录 042魔法方法:算术运算 041魔法方法:构造和析构 040类和对象:一些相关的BIF 039类和对象拾遗 038类和对象 ...
零基础入门学python 第二版-《零基础入门学习Python》第二版和第一版的区别在哪里呢？...
第一版时光荏苒,一晃间,距离<零基础入门学习 Python>出版(2016年11月)已经过去两年多了,在这段时间里, Python 逐步走入了大家的视野,这门语言因其简洁的语法风格,在云 ...
0基础学python难吗-零基础入门学习Python技术难不难？
原标题:零基础入门学习Python技术难不难? 近几年对python人才爆发式需求,导致很多人转行进入python开发行业,现如今Python这门语言的就业前景会非常好.相对于其他来说,它语法简单易读 ...
零基础python必背代码-零基础入门学习python 96集全
零基础入门学习python 96集全第000讲愉快的开始(视频+课件)xa0 第001讲我和Python第一次亲密接触(视频+课件)xa0 第002讲用Python设第一个游戏(视频+课件+源 ...

HTML零基础入门学习大全-干货！

知识点导航：

一：HTML 简介

实例解析

二：HTML 网页结构

三：<!DOCTYPE> 声明

四：中文编码

五：HTML 基础- 4个实例

5.1 HTML 标题

5.2 HTML 段落

5.3 HTML 链接

5.4 HTML 图像

六:HTML 元素

HTML 元素

6.1 <p> 元素:

6.2 <body> 元素:

6.3 <html> 元素：

七：HTML 属性

7.1 HTML 属性常用引用属性值

7.2 HTML 提示：使用小写属性

7.3 HTML 属性参考手册

八：HTML 标题

8.1：HTML 标题

8.2：HTML 水平线

8.3：HTML 注释

8.4：HTML 标签参考手册

九：段落

十：HTML 文本格式化

实例1：<b>加粗字体</b><i>斜体文本</i><code>电脑自动输出</code><sub>下标</sub><sup>上标</sup>

实例2：文本格式化<b>加粗</b><strong>加粗</strong> <big>放大</big><small>缩小</small> <em>斜体</em>斜体<i></i>

实例3：预格式文本<pre>预格式文本</pre>

实例4："计算机输出"标签<code>计算机输出</code> <kbd>键盘输出</kbd> <tt>打字机文本</tt> <samp>计算机代码样本</samp> <var>计算机变量</var>

实例5：<address>地址</address>

实例6：<abbr>缩写</abbr>和<acronym>首字母缩写</acronym>

实例7：<bdo>文字方向改变</bdo>

实例8：<q>块引用</q>

实例9：<del>删除字效果</del>和<ins>插入字效果</ins>

10.1 HTML 文本格式化标签

10.2 HTML "计算机输出" 标签

十一：HTML 链接

例题1：

10.1 HTML 链接语法

10.2 HTML 链接 - target 属性

实例2：访问菜鸟教程!

10.3：HTML 链接- id 属性

10.4 基本的注意事项 - 有用的提示

10.5 HTML 链接标签

实例3：图片链接

实例4：在当前页面链接到指定位置

实例5：跳出框架

实例6：创建电子邮件链接

实例7：创建电子邮件链接 2

十二：HTML <head>-<base> -<link> - <style> -<meta> -<title>元素

十三：HTML 样式- CSS

实例1：

实例2：HTML使用样式

实例3：本例演示如何使用样式属性做一个没有下划线的链接。

实例4：链接到一个外部样式表

13.1 如何使用CSS

13.2 内联样式

13.3 HTML样式实例 - 背景颜色

13.4 HTML 样式实例 - 字体, 字体颜色 ，字体大小

13.5 HTML 样式实例 - 文本对齐方式

13.6 内部样式表

13.7 外部样式表

13.8 HTML 样式标签

13.9 已弃用的标签和属性

13.10 CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式

十四：HTML 图像

实例1：

实例2：从不同的位置插入图片

10.1 HTML 图像- 图像标签（ <img>）和源属性（Src）

10.2 HTML 图像- Alt属性

10.3 HTML 图像- 设置图像的高度与宽度

10.4 基本的注意事项 - 有用的提示：

10.5 HTML 图像标签

实例3：排列图片

实例4：浮动图像

实例5：设置图像链接

实例6：创建图像映射

13.4 HTML 样式实例 - 字体, 字体颜色，字体大小