HTML 入手 | Malloy Yuan的博客

type

status

date

slug

summary

1. HTML 简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 HTML 是用来描述网页的一种语言：

HTML 指的是超文本标记语言: HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

HTML文档的后缀名

.html

.htm

神器安利

贴上几个特别实用的几个链接帮助快速入门使用HTML:

在线实例：包含了数百个在线实例，我们可以在线编辑并查看运行结果。

HTML 参考手册：完整的 HTML 参考手册，其中包括标签、属性、颜色、实体等等。

HTML/CSS/JS 在线工具：可以在线编辑 HTML、CSS、JS 代码，并实时查看效果，你也可以将优质代码保存分享我觉得菜鸟全网最有效率的快速入门一门语言的神器，不接受反驳，为菜鸟打扣！！！

HTML文件构成

最简单的HTML页面有这样的结构构成：

其中：

<!DOCTYPE html> --> 声明为 HTML5 文档

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

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

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

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

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

<p> --> 元素定义一个段落

Web 浏览器和HTML网页架构

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。一个可视化的HTML页面结构一般如下：

</head><body>

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

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

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

</body></html>

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

<!DOCTYPE> 声明

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

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

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

通用声明

HTML5

HTML 4.01

XHTML 1.0

查看更多完整网页声明类型参考菜鸟网 DOCTYPE 参考手册。

中文编码

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

2. HTML基础部分

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag):

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个带斜杠的标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

HTML 文档由嵌套的 HTML 元素构成。"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思: 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例: HTML 元素:

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

常用标签	描述
<html>	定义 HTML 文档
<body>	定义文档的主体
<h1> - <h6>	定义 HTML 标题
<hr>	定义水平线
<!--...-->	定义注释

HTML 元素语法

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

元素:

<body> 元素:

<html> 元素：

HTML 空元素

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

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。一般使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 属性

HTML 元素可以设置属性属性可以在元素中添加附加信息属性一般描述于开始标签属性总是以 名称/值 对的形式出现，比如：name="value"。

属性实例

HTML 链接由标签定义。链接的地址在 href 属性中指定： <a href="http://elec-creator.com">这是一个链接效果: 这是一个链接

HTML 属性常用引用属性值

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

双引号是最常用的，不过使用单引号也没有问题。

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

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册。下面列出了适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)
更多标准属性说明请参阅菜鸟网的 HTML标准属性参考手册.	ㅤ

HTML标题

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

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

<h6>这是一个标题</h6>

浏览器会自动地在标题的前后添加空行。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。 hr 元素可用于分隔内容。

HTML 注释

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

注释写法如下:

HTML 段落

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

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

HTML 折行

需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。如果您希望在不产生一个新段落的情况下进行换行（新行），请使用标签： <p>这个<br>段落<br>演示了分行的效果</p> 效果: <p>这个<br>段落<br>演示了分行的效果</p>

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

区分记录:

<br>, <br/> 以及 <br />（带有空格） <br> 是 HTML 写法。是 XHTML1.1 的写法, 也是 XML 写法。<br/> 是 XHTML 为兼容 HTML 的写法,也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。早期发布的 HTML 规范当中，<br> 与 <img> 等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，在逻辑上来讲等同于<br>....</br>（但是没有 </br> 这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨。

HTML 文本格式化

HTML 格式化标签

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

区分

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

HTML 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML "计算机输出" 标签

标签	描述
<code>	定义计算机代码
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

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

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目。

3. HTML 链接

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

<a href="https://elec-creator.com">这是一个链接</a> 在 href 属性中指定链接的地址。

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签<a> 中使用了href属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML 链接语法

链接的 HTML 代码很简单。它类似这样： <a href="url">链接文本</a> href 属性描述了链接的目标。 "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。 提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。在HTML文档中插入ID: <a id="tips">有用的提示部分</a> 在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"： <a href="#tips">访问有用的提示部分</a> 或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"： <a href="https://elec-creator.com#tips"> 访问有用的提示部分</a>

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

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

4. HTML 头部

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

区分head 标签和 header 标签的不同

head 标签用于定义文档头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

如：

header 标签用于定义文档的页眉（介绍信息）。如：

注意千万不要弄混。

HTML <title> 元素

<title> 标签定义了不同文档的标题。 <title> 在 HTML/XHTML 文档中是必须的。 <title> 元素: 定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题一个简单的 HTML 文档:

HTML <base> 元素

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

HTML <link> 元素

HTML <style> 元素

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="Malloy">

每30秒钟刷新当前页面: <meta http-equiv="refresh" content="30">

HTML <script> 元素

HTML head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

5. HTML CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。实例:

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

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

内联样式- 在HTML元素中使用"style" 属性

内部样式表 -在HTML文档头部 <head> 区域使用 <style> 元素来包含CSS

外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件. 在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。你可以通过本站的 CSS 教程学习更多的 CSS 知识。

内联样式

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

<p style="color:blue;margin-left:20px;">这是一个段落。</p> 学习更多样式，请访问 CSS 教程.

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

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。实例： <a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>

HTML样式实例 - 背景颜色

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

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

旧版HTML来设置背景方式:

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

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

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

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

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

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

内部样式表

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

外部样式表

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

HTML 样式标签

标签	描述
<style>	定义文本样式
<link>	定义资源引用地址

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。不建议使用的标签有: <font>, <center>, <strike> 不建议使用的属性: color 和 bgcolor.

6. HTML 图像

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

http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/2/thumb.jpg

" width="1080" height="720" /> 效果:

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

在 HTML 中，图像由 <img> 标签定义。 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是： <img src="url" alt="some_text"> URL 指存储图像的位置。如果名为 "thumb.jpg" 的图像位于 ppe.oss-cn-shenzhen.aliyuncs.com 的 collections/182/2/ 目录中，那么其 URL 为 http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/2/thumb.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 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML 图像标签

标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域
示例:	ㅤ
示例"创建图像映射"中的代码：	ㅤ

1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2)) <area shape="rect" coords="x1,y1,x2,y2" href=url> 2、圆形：(圆心坐标为(X1,y1)，半径为r) <area shape="circle" coords="x1,y1,r" href=url> 3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......) <area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

7. HTML 表格

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

效果:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：实例:

HTML 表格表头

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

效果:

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

8. HTML 列表

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

HTML无序列表

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

HTML 有序列表

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

HTML 自定义列表

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

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

效果:

Coffee- black hot drinkMilk- white cold drink

注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML 列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

9. HTML 区块

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> | 定义了文档的区域，块级 (block-level) <span> | 用来组合文档中的行内元素，内联元素(inline)

10. HTML 布局

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建多列布局：实例:

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 lamp 即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：实例:

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问菜鸟的CSS 教程。 Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

HTML 布局标签

标签	描述
<div>	定义文档区块，块级(block-level)
<span>	定义 span，用来组合文档中的行内元素

11. HTML 表单

表单是一个包含表单元素的区域。Markdown好像不支持这个元素。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置:

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

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

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

密码字段

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

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

单选按钮（Radio Buttons）

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

复选框（Checkboxes）

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

提交按钮(Submit Button)

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

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

HTML 表单标签

HTML5新标签:

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

12. HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 iframe语法:

该URL指向不同的网页。

Iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。实例:

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框: 实例:

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面目标链接的属性必须使用iframe的属性，如下实例: 实例:

HTML <iframe> 标签

标签	说明
<iframe>	定义一个内联的iframe

13. HTML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。

颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

1600万种不同颜色

三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为0,随着红色的值变化，不同的值都显示了不同的颜色。

颜色查询参考

fontke字客网查询快速入口 菜鸟的颜色名查询 菜鸟的颜色值查询

14. HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

HTML <script> 标签

学习更多关于Javascript教程，查看菜鸟的JavaScript 教程!

HTML <noscript> 标签

JavaScript体验(来自本站javascript教程)

JavaScript实例代码: JavaScript可以直接在HTML输出:

JavaScript事件响应:

JavaScript处理 HTML 样式:

HTML 脚本标签

标签	描述
<script>	定义了客户端脚本
<noscript>	定义了不支持脚本浏览器输出的文本

15. HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

如需显示小于号，我们必须这样写：< 或 < 或 < 提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。变音符号可以与字母、数字字符的组合来使用。以下是一些实例:

音标符	字符	CONSTRUCT	输出结果
`	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

HTML字符实体

Note:实体名称对大小写敏感!

显示结果	描述	实体名称	实体编号
空格			ㅤ
<	小于号	<	<

| 大于号 | > | > & | 和号 | & | & " | 引号 | " | " ' | 撇号 | ' (IE不支持) | ' ￠ | 分 | ¢ | ¢ £ | 镑 | £ | £ ¥ | 人民币/日元 | ¥ | ¥ € | 欧元 | € | € § | 小节 | § | § © | 版权 | © | © ® | 注册商标 | ® | ® ™ | 商标 | ™ | ™ × | 乘号 | × | × ÷ | 除号 | ÷ | ÷

虽然 html 不区分大小写，但实体字符对大小写敏感。查看完整的HTML实体：参考菜鸟的 HTML 实体参考手册。

16. HTML URL

URL名为统一资源定位器(Uniform Resource Locators) URL 是一个网页地址。 URL可以由字母组成，如"elec-creator.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。一个网页地址实例: http://elec-creator.com/编程语言/HTML 语法规则: scheme://host.domain:port/path/filename 说明:

scheme - 定义因特网服务的类型。最常见的类型是 http

host - 定义域主机（http 的默认主机是 www）

domain - 定义因特网域名，比如 elec-creator.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 编码参考手册。	ㅤ

17. HTML 常用格式速查

HTML 基本文档

基本标签（Basic Tags）

文本格式化（Formatting）

链接（Links）

图片（Images）

样式/区块（Styles/Sections）

无序列表

定义列表

表格（Tables）

表单（Forms）

实体（Entities）

18. HTML 进化版-XHTML

XHTML 是以 XML 格式编写的 HTML。

什么是 XHTML?

XHTML 指的是可扩展超文本标记语言

XHTML 与 HTML 4.01 几乎是相同的

XHTML 是更严格更纯净的 HTML 版本

XHTML 是以 XML 应用的方式定义的 HTML

XHTML 是 2001 年 1 月发布的 W3C 推荐标准

XHTML 得到所有主流浏览器的支持

为什么使用 XHTML?

因特网上的很多页面包含了"糟糕"的 HTML。如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）：

XML 是一种必须正确标记且格式良好的标记语言。如果希望学习 XML，请阅读我们的 XML 教程。今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

与 HTML 相比最重要的区别：

文档结构

XHTML DOCTYPE 是强制性的

<html> 中的 XML namespace 属性是强制性的

<html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

XHTML 元素必须正确嵌套

XHTML 元素必须始终关闭

XHTML 元素必须小写

XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写

XHTML 属性值必须用引号包围

XHTML 属性最小化也是禁止的

<!DOCTYPE ....>是强制性的

XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）。您可以在菜鸟教程的标签参考手册中找到完整的 XHTML 文档类型。 <html>, <head>, <title>, 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。下面的例子展示了带有最少的必需标签的 XHTML 文档：

XHTML 元素必须合理嵌套

在 HTML 中，一些元素可以不互相嵌套，像这样：

在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：

XHTML 元素必须有关闭标签

错误示例：

正确示例：

空元素必须包含关闭标签

错误示例：

正确示例：

XHTML 元素必须是小写

错误示例:

正确示例：

属性名称必须是小写

错误示例：

正确示例:

属性值必须有引号

错误示例：

正确示例：

不允许属性简写

错误示例：

正确示例：

如何将 HTML 转换为 XHTML

添加一个 XHTML <!DOCTYPE> 到你的网页中

添加 xmlns 属性添加到每个页面的html元素中。

改变所有的元素为小写

关闭所有的空元素

修改所有的属性名称为小写

所有属性值添加引号

1. HTML 简介

HTML文档的后缀名

神器安利

HTML文件构成

Web 浏览器和HTML网页架构

<!DOCTYPE> 声明

通用声明

HTML5

HTML 4.01

XHTML 1.0

中文编码

2. HTML基础部分

HTML 标签

HTML 元素

HTML 元素语法

HTML 空元素

HTML 提示：使用小写标签

HTML 属性

HTML 属性

属性实例

HTML 属性常用引用属性值

HTML 提示：使用小写属性

HTML 属性参考手册

HTML标题

HTML 水平线

HTML 注释

HTML 段落

HTML 折行

区分记录:

HTML 文本格式化

HTML 格式化标签

区分

HTML 文本格式化标签

HTML "计算机输出" 标签

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

3. HTML 链接

HTML 超链接（链接）

HTML 链接语法

HTML 链接- id 属性

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

4. HTML 头部

HTML <head> 元素

区分head 标签和 header 标签的不同

HTML <title> 元素

HTML <base> 元素

HTML <link> 元素

HTML <style> 元素

HTML <meta> 元素

<meta> 标签- 使用实例

HTML <script> 元素

HTML head 元素

5. HTML CSS

如何使用CSS

内联样式

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

HTML样式实例 - 背景颜色

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

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

内部样式表

外部样式表

HTML 样式标签

已弃用的标签和属性

6. HTML 图像

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

HTML 图像- Alt属性

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

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

HTML 图像标签

7. HTML 表格

HTML 表格和边框属性

HTML 表格表头

HTML 表格标签

8. HTML 列表

HTML无序列表

HTML 有序列表

HTML 自定义列表

注意事项 - 有用提示

HTML 列表标签

9. HTML 区块

HTML <div> 和<span>

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