- 一个例子
<!DOCTYPE html> 声明为 HTML5 文档 doctype 声明是不区分大小写的
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
只有 <body> 区域 (白色部分) 才会在浏览器中显示
什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言。标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，
Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。
HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
实例
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>HTML 段落
HTML 段落是通过标签 <p> 来定义的。
实例
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>HTML 链接
HTML 链接是通过标签 <a> 来定义的。
实例
<a href="https://www.runoob.com">这是一个链接</a>提示:在 href 属性中指定链接的地址。
HTML 图像
HTML 图像是通过标签 <img> 来定义的.
实例
<img decoding="async" src="/images/logo.png" width="258" height="39" />注意： 图像的名称和尺寸是以属性的形式提供的。
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>这是一个段落
<p>这是一个段落以上实例在浏览器中也能正常显示，因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 提示：使用小写标签
HTML 属性
属性是 HTML 元素提供的附加信息。
HTML 属性
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
实例
<a href="http://www.runoob.com">这是一个链接</a>HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
注: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='John "ShotGun" Nelson'
HTML 属性参考手册
查看完整的HTML属性列表: HTML 标签参考手册。HTML 标签参考手册
下面列出了适用于大多数 HTML 元素的属性：
属性描述
class为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式（inline style）
title描述了元素的额外信息 (作为工具条使用)
更多标准属性说明： HTML 标准属性参考手册.
HTML 标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
注释: 浏览器会自动地在标题的前后添加空行。
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释写法如下:
实例
<!-- 这是一个注释 -->HTML 段落
段落是通过 <p> 标签定义的。<p> 是块级元素
实例
<p>这是一个段落 </p>
<p>这是另一个段落</p>注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
HTML 折行/换行
在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
实例
<p>这个<br>段落<br>演示了分行的效果</p><br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
HTML 文本格式化
HTML 格式化标签
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
HTML 文本格式化标签
标签 |
描述 |
定义粗体文本 |
|
定义着重文字 |
|
定义斜体字 |
|
定义小号字 |
|
定义加重语气 |
|
定义下标字 |
|
定义上标字 |
|
定义插入字 |
|
定义删除字 |
HTML "计算机输出" 标签
HTML 引文, 引用, 及标签定义
标签 |
描述 |
定义缩写 |
|
定义地址 |
|
定义文字方向 |
|
定义长的引用 |
|
定义短的引用语 |
|
定义引用、引证 |
|
定义一个定义项目。 |
HTML 链接
HTML 超链接（链接）
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
HTML 链接语法
<a href="https://www.runoob.com/">访问菜鸟教程</a>提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
HTML <head>
HTML <head> 元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
标签 |
描述 |
定义了文档的信息 |
|
定义了文档的标题 |
|
定义了页面链接标签的默认链接地址 |
|
定义了一个文档和外部资源之间的关系 |
|
定义了HTML文档中的元数据 |
|
定义了客户端的脚本文件 |
|
定义了HTML文档的样式文件 |
HTML <title> 元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必需的。
<title> 元素:
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
实例
<head>
<base href="http://www.runoob.com/images/" 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 <meta> 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
<meta> 标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">定义网页作者:
<meta name="author" content="Runoob">每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">HTML <script> 元素
<script>标签用于加载脚本文件，如： JavaScript。
<script> 元素在以后的章节中会详细描述。
HTML 样式- CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
如何使用CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">这是一个段落。</p>HTML样式实例 - 背景颜色
背景色属性（background-color）定义一个元素的背景颜色：
实例
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>HTML 样式实例 - 字体, 字体颜色 ，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
实例
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>HTML 样式实例 - 文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
实例
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>HTML 图像
HTML 图像- 图像标签（ <img>）和源属性（Src）
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" alt="some_text">URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
HTML 图像- Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
HTML 图像- 设置图像的高度与宽度
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
HTML 图像标签
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格标签
标签 |
描述 |
定义表格 |
|
定义表格的表头 |
|
定义表格的行 |
|
定义表格单元 |
|
定义表格标题 |
|
定义表格列的组 |
|
定义用于表格列的属性 |
|
定义表格的页眉 |
|
定义表格的主体 |
|
定义表格的页脚 |
实例
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
实例
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
实例
<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>在浏览器显示如下：
HTML 列表
HTML 支持有序、无序和定义列表:
HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>浏览器显示如下：
Coffee
Milk
HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>浏览器中显示如下：
Coffee
Milk
HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 结束。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>浏览器显示如下：
Coffee
- black hot drink
Milk
- white cold drink
注意事项 - 有用提示
提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
HTML <div> 和<span>
HTML 可以通过 <div> 和 <span>将元素组合起来。
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
HTML 布局
网站布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
HTML 布局 - 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
HTML 布局 - 使用表格
使用 HTML <table> 标签是创建布局的一种简单的方式。
大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
</body>
</html>
HTML 布局 - 有用的提示
Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
HTML 表单和输入
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
我们可以使用 <form> 标签来创建表单:
实例
<form>
.
input 元素
.
</form>HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签 <input>。
输入类型是由 type 属性定义。
接下来我们介绍几种常用的输入类型。
文本域（Text Fields）
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
实例
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>浏览器显示如下：
First name:
Last name:
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
密码字段
密码字段通过标签 <input type="password"> 来定义:
实例
<form>
Password: <input type="password" name="pwd">
</form>浏览器显示效果如下:
Password:
注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。
单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单的单选框选项:
实例
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>复选框（Checkboxes）
<input type="checkbox"> 定义了复选框。
复选框可以选取一个或多个选项：
实例
<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>提交按钮(Submit)
<input type="submit"> 定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
实例
<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 文件，该页面将显示出输入的结果。
以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
HTML 表单标签
New : HTML5新标签
标签 |
描述 |
定义供用户输入的表单 |
|
定义输入域 |
|
定义文本域 (一个多行的输入控件) |
|
定义了 <input> 元素的标签，一般为输入标题 |
|
定义了一组相关的表单元素，并使用外框包含起来 |
|
定义了 <fieldset> 元素的标题 |
|
定义了下拉选项列表 |
|
定义选项组 |
|
定义下拉列表中的选项 |
|
定义一个点击按钮 |
|
<datalist>New |
指定一个预先定义的输入控件选项列表 |
<keygen>New |
定义了表单的密钥对生成器字段 |
<output>New |
定义一个计算结果 |
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。<iframe>定义一个内联的iframe
iframe语法:
<iframe src="URL"></iframe>该URL指向不同的网页。
iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
实例
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
实例
<iframe src="demo_iframe.htm" frameborder="0"></iframe>使用 iframe 来显示目标链接页面
iframe 可以显示一个目标链接的页面
目标链接的属性必须使用 iframe 的属性，如下实例:
实例
<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>HTML 颜色
HTML 颜色由红色、绿色、蓝色混合而成。
颜色值
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
颜色值
颜色(Color) |
颜色十六进制(Color HEX) |
颜色RGB(Color RGB) |
#000000 |
rgb(0,0,0) |
|
#FF0000 |
rgb(255,0,0) |
|
#00FF00 |
rgb(0,255,0) |
|
#0000FF |
rgb(0,0,255) |
|
#FFFF00 |
rgb(255,255,0) |
|
#00FFFF |
rgb(0,255,255) |
|
#FF00FF |
rgb(255,0,255) |
|
#C0C0C0 |
rgb(192,192,192) |
|
#FFFFFF |
rgb(255,255,255) |
1600万种不同颜色
三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为0,随着红色的值变化，不同的值都显示了不同的颜色。
Web安全色?
数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。
000000 |
000033 |
000066 |
000099 |
0000CC |
0000FF |
003300 |
003333 |
003366 |
003399 |
0033CC |
0033FF |
006600 |
006633 |
006666 |
006699 |
0066CC |
0066FF |
009900 |
009933 |
009966 |
009999 |
0099CC |
0099FF |
00CC00 |
00CC33 |
00CC66 |
00CC99 |
00CCCC |
00CCFF |
00FF00 |
00FF33 |
00FF66 |
00FF99 |
00FFCC |
00FFFF |
330000 |
330033 |
330066 |
330099 |
3300CC |
3300FF |
333300 |
333333 |
333366 |
333399 |
3333CC |
3333FF |
336600 |
336633 |
336666 |
336699 |
3366CC |
3366FF |
339900 |
339933 |
339966 |
339999 |
3399CC |
3399FF |
33CC00 |
33CC33 |
33CC66 |
33CC99 |
33CCCC |
33CCFF |
33FF00 |
33FF33 |
33FF66 |
33FF99 |
33FFCC |
33FFFF |
660000 |
660033 |
660066 |
660099 |
6600CC |
6600FF |
663300 |
663333 |
663366 |
663399 |
6633CC |
6633FF |
666600 |
666633 |
666666 |
666699 |
6666CC |
6666FF |
669900 |
669933 |
669966 |
669999 |
6699CC |
6699FF |
66CC00 |
66CC33 |
66CC66 |
66CC99 |
66CCCC |
66CCFF |
66FF00 |
66FF33 |
66FF66 |
66FF99 |
66FFCC |
66FFFF |
990000 |
990033 |
990066 |
990099 |
9900CC |
9900FF |
993300 |
993333 |
993366 |
993399 |
9933CC |
9933FF |
996600 |
996633 |
996666 |
996699 |
9966CC |
9966FF |
999900 |
999933 |
999966 |
999999 |
9999CC |
9999FF |
99CC00 |
99CC33 |
99CC66 |
99CC99 |
99CCCC |
99CCFF |
99FF00 |
99FF33 |
99FF66 |
99FF99 |
99FFCC |
99FFFF |
CC0000 |
CC0033 |
CC0066 |
CC0099 |
CC00CC |
CC00FF |
CC3300 |
CC3333 |
CC3366 |
CC3399 |
CC33CC |
CC33FF |
CC6600 |
CC6633 |
CC6666 |
CC6699 |
CC66CC |
CC66FF |
CC9900 |
CC9933 |
CC9966 |
CC9999 |
CC99CC |
CC99FF |
CCCC00 |
CCCC33 |
CCCC66 |
CCCC99 |
CCCCCC |
CCCCFF |
CCFF00 |
CCFF33 |
CCFF66 |
CCFF99 |
CCFFCC |
CCFFFF |
FF0000 |
FF0033 |
FF0066 |
FF0099 |
FF00CC |
FF00FF |
FF3300 |
FF3333 |
FF3366 |
FF3399 |
FF33CC |
FF33FF |
FF6600 |
FF6633 |
FF6666 |
FF6699 |
FF66CC |
FF66FF |
FF9900 |
FF9933 |
FF9966 |
FF9999 |
FF99CC |
FF99FF |
FFCC00 |
FFCC33 |
FFCC66 |
FFCC99 |
FFCCCC |
FFCCFF |
FFFF00 |
FFFF33 |
FFFF66 |
FFFF99 |
FFFFCC |
FFFFFF |
RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。
div {
background:rgba(255,0,0,0.5);
}HTML 颜色名
目前所有浏览器都支持以下颜色名。
141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。
提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。
按颜色名排序
按十六进制的值排序
单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。
颜色名 |
HEX |
Color |
HTML 颜色值
颜色由红(R)、绿(G)、蓝(B)组成。
颜色值
颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
颜色 |
3位十六进制颜色值 |
6位十六进制颜色值 |
RGB |
黑 |
#000 |
#000000 |
rgb(0,0,0) |
红 |
#F00 |
#FF0000 |
rgb(255,0,0) |
绿 |
#0F0 |
#00FF00 |
rgb(0,255,0) |
蓝 |
#00F |
#0000FF |
rgb(0,0,255) |
黄 |
#FF0 |
#FFFF00 |
rgb(255,255,0) |
青 |
#0FF |
#00FFFF |
rgb(0,255,255) |
紫 |
#F0F |
#FF00FF |
rgb(255,0,255) |
灰 |
#888 |
#888888 |
rgb(136,136,136) |
白 |
#FFF |
#FFFFFF |
rgb(255,255,255) |
HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
HTML <script> 标签
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出"Hello World!"：
实例
<script>
document.write("Hello World!");
</script>HTML<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
实例
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>JavaScript体验
JavaScript实例代码:
JavaScript可以直接在HTML输出:
document.write("<p>这是一个段落。</p>");JavaScript事件响应:
<button type="button" onclick="myFunction()">点我！</button>JavaScript处理 HTML 样式:
document.getElementById("demo").style.color="#ff0000";HTML 脚本标签
标签 |
描述 |
定义了客户端脚本 |
|
定义了不支持脚本浏览器输出的文本 |
HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
HTML 实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
&entity_name;
或
&#entity_number;如需显示小于号，我们必须这样写：< 或 < 或 <
提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格(Non-breaking Space)
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
结合音标符
发音符号是加到字母上的一个"glyph(字形)"。
一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。
以下是一些实例:
音标符 |
字符 |
Construct |
输出结果 |
̀ |
a |
à |
à |
́ |
a |
á |
á |
̂ |
a |
â |
â |
̃ |
a |
ã |
ã |
̀ |
O |
Ò |
Ò |
́ |
O |
Ó |
Ó |
̂ |
O |
Ô |
Ô |
̃ |
O |
Õ |
Õ |
HTML字符实体
实体名称对大小写敏感！
显示结果 |
描述 |
实体名称 |
实体编号 |
空格 |
|
  |
|
< |
小于号 |
< |
< |
> |
大于号 |
> |
> |
& |
和号 |
& |
& |
" |
引号 |
" |
" |
' |
撇号 |
' (IE不支持) |
' |
￠ |
分 |
¢ |
¢ |
£ |
镑 |
£ |
£ |
¥ |
人民币/日元 |
¥ |
¥ |
€ |
欧元 |
€ |
€ |
§ |
小节 |
§ |
§ |
© |
版权 |
© |
© |
® |
注册商标 |
® |
® |
™ |
商标 |
™ |
™ |
× |
乘号 |
× |
× |
÷ |
除号 |
÷ |
÷ |
HTML 统一资源定位器(Uniform Resource Locators)
URL 是一个网页地址。
URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住。
URL - 统一资源定位器
Web浏览器通过URL从Web服务器请求页面。
当点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
一个网页地址实例: http://www.runoob.com/html/html-tutorial.html 语法规则:
scheme://host.domain:port/path/filename说明:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
常见的 URL Scheme
以下是一些URL scheme：
Scheme |
访问 |
用于... |
http |
超文本传输协议 |
以 http:// 开头的普通网页。不加密。 |
https |
安全超文本传输协议 |
安全网页，加密所有信息交换。 |
ftp |
文件传输协议 |
用于将文件下载或上传至网站。 |
file |
您计算机上的文件。 |
URL 字符编码
URL 只能使用 ASCII 字符集.
来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
URL 编码实例
字符 |
URL 编码 |
€ |
%80 |
£ |
%A3 |
© |
%A9 |
® |
%AE |
À |
%C0 |
Á |
%C1 |
 |
%C2 |
à |
%C3 |
Ä |
%C4 |
Å |
%C5 |
如需完整的 URL 编码参考，请访问我们的 URL 编码参考手册。
HTML 速查列表
HTML 速查列表. 你可以打印它，以备日常使用。
HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img decoding="async" src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:[email protected]">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>图片（Images）
<img decoding="async" loading="lazy" src="URL" alt="替换文本" height="42" width="42">样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>表格（Tables）
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>框架（Iframe）
<iframe src="demo_iframe.htm"></iframe>表单（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>实体（Entities）
< 等同于 <
> 等同于 >
© 等同于 ©HTML 标签简写及全称
标签 |
英文全称 |
中文说明 |
a |
Anchor |
锚 |
abbr |
Abbreviation |
缩写词 |
acronym |
Acronym |
取首字母的缩写词 |
address |
Address |
地址 |
alt |
alter |
替用(一般是图片显示不出的提示) |
b |
Bold |
粗体（文本） |
bdo |
Direction of Text Display |
文本显示方向 |
big |
Big |
变大（文本） |
blockquote |
Block Quotation |
区块引用语 |
br |
Break |
换行 |
cell |
cell |
巢 |
cellpadding |
cellpadding |
巢补白 |
cellspacing |
cellspacing |
巢空间 |
center |
Centered |
居中（文本） |
cite |
Citation |
引用 |
code |
Code |
源代码（文本） |
dd |
Definition Description |
定义描述 |
del |
Deleted |
删除（的文本） |
dfn |
Defines a Definition Term |
定义定义条目 |
div |
Division |
分隔 |
dl |
Definition List |
定义列表 |
dt |
Definition Term |
定义术语 |
em |
Emphasized |
加重（文本） |
font |
Font |
字体 |
h1~h6 |
Header 1 to Header 6 |
标题1到标题6 |
hr |
Horizontal Rule |
水平尺 |
href |
hypertext reference |
超文本引用 |
i |
Italic |
斜体（文本） |
iframe |
Inline frame |
定义内联框架 |
ins |
Inserted |
插入（的文本） |
kbd |
Keyboard |
键盘（文本） |
li |
List Item |
列表项目 |
nl |
navigation lists |
导航列表 |
ol |
Ordered List |
排序列表 |
optgroup |
Option group |
定义选项组 |
p |
Paragraph |
段落 |
pre |
Preformatted |
预定义格式（文本 ） |
q |
Quotation |
引用语 |
rel |
Reload |
加载 |
s/ strike |
Strikethrough |
删除线 |
samp |
Sample |
示例（文本 |
small |
Small |
变小（文本） |
span |
Span |
范围 |
src |
Source |
源文件链接 |
strong |
Strong |
加重（文本） |
sub |
Subscripted |
下标（文本） |
sup |
Superscripted |
上标（文本） |
td |
table data cell |
表格中的一个单元格 |
th |
table header cell |
表格中的表头 |
tr |
table row |
表格中的一行 |
tt |
Teletype |
打印机（文本） |
u |
Underlined |
下划线（文本） |
ul |
Unordered List |
不排序列表 |
var |
Variable |
变量（文本） |