第一章HTML基础

来源：互联网发布：淘宝店拍照技巧编辑：程序博客网时间：2024/06/14 08:00

HTML 指的是超文本标记语言，HTML 不是一种编程语言，而是一种标记语言。注：HTML只是一种标记。HTML 标签是由尖括号包围的关键词，比如 <html>。HTML 标签通常是成对出现的，比如 <b> 和 </b>，也有单个标记出现的，通常会写成比如<img/>为了方便，我们会把/去掉，直接写成<img>。HTML 使用标记标签来描述网页。HTML 文档包含 HTML 标签和纯文本，所以HTML文档也会被人称为网页。

1.1HTML的发展历史

HTML是万维网文档发布和浏览的基本格式。它具有很多特点，如独立于平台的格式、结构化设计，特别是超文本链接，这些特点使它成为万维网较好的文档格式。

一. HTML的起源

HTML作为定义万维网的基本规则之一，最初由蒂姆·本尼斯李（Tim Berners-Lee）于1989年在CERN（Conseil Europeen pour la Recherche Nucleaire）研制出来。HTML的设计者是这样考虑的：HTML格式将允许科学家们透明地共享网络上的信息，即使这些科学家使用的计算机差别很大。因此，这种格式必须具备如下几个特点：

·独立于平台，即独立于计算机硬件和操作系统。这个特性对各种受从是至关重要的，因为在这个特性中，文档可以在具有不同性能（即字体、图形和颜色差异）的计算机上以相似的形式显示文档内容。

·超文本。允许文档中的任何文字或词组参照另一文档，这个特性将允许用户在不同计算机中的文档之间及文档内部漫游。

·精确的结构化文档。该特性将允许某些高级应用，如HTML文档和其他格式文档间互相转换以及搜索文本数据库。

本尼斯李选择使用标准通用标记语言（SGML，standard generalized markup language）作为HTML的开发模版。作为一种当时正在出现的国际标准，标准通用标记语言具有结构化和独立于平台的优点。SGML的标准化水平也确保了它长久的生命力，这意味着采用SGML格式的文档在相当长的时间里不需要重新构建。

SGML是独立于平台的，因为它对文档的语义结构或含义进行编码描述，而不是对文档的实际外观进行编码描述。因此，某书某章节的标题将标为Chater Title，而不是Helvetica 18pt Centered。如果在不具备Helvetica字型或不支持不同大小字母的计算机上显示文档，则后一种风格会失败，而前一种风格可以在任何系统上（智能化地）显示。每个读者都以一种对其计算机有利的方式定义章节标题的外表，相应地，并以这种风格来规范所有的文本。

这种结构的另一个特征是：按语义编码的文本可以由计算机更智能地自动处理。例如：如果每个章节标题都用Chapter Title标志，再把章节号码作为一种属性，读者就可以要求只看第18章，SGML软件相应地会查找第18章标题和第19章标题，并抽取它们之间的所有内容。如果不用标准格式的字体和代码来标志文本的话，这个工作对计算机来说是无法完成的。

SGML的一大优点是它的灵活性。SGML本身并不是一种格式，而是定义其他格式的一种规范，用户可以创建新格式来编码某类文件（如技术手册、电话号码薄和法律文书）的所有结构，只需先阅读定义，任何能使用SGML的软件都能读懂它。人们已经为普通文档和十分专业化的文档建立了许多的文档类型定义（document type definitions，DTD）。HTML只是一种DTD，或SGML的一种应用。

二. HTML的演变

自1989年以来，HTML及万维网的使用和发展有了巨大的变化。当NCSA（national center for supercomputing applications，国家超级计算机应用中心）在1993年初首次构建Mosaic浏览器时，NCSA的科学家们把自己需要的特性添加到HTML中，包括直接插入图形。当允许人们把位图、照片和图表放入到文档中以后，万维网的规模和使用出现了爆炸性的增长，第二年，HTML的发展很快。HTML的新标记不时地被一个又一个的浏览器引入，有一些新标记流行起来，而有一些又消失了。有些增加部分设计得很糟，很多甚至不遵从SGML规范。

到了1994年年中，HTML几乎以失控的状态发展。在IETF（Internet engineering task force）主持下，1995年11月在瑞士日内瓦举行的第一次WWW会议上成立了一个HTML工作小组。它的主要任务是把HTML形式化成为一种SGML DTD，称之为HTML Level 2（HTML 2.0，由本尼斯李最初设计的HTML被定义为Level 1）。标准化之后，HTML就可以被安全地扩展到将来的各个级别的版本，从而利用了SGML的实质性能和它的格式化结构。

尽管有关的各方从来没有取得完全一致的共识，但万维网联盟HTML工作组（world wide web consortium's HTML working group）还是集中了1996年的万维网发展的成果，产生了HTML 3.2版本。

HTML 4.0及其以后版本继承了以往版本的所有特点，并在以下几个方面有所发展：

·更加明确了文档的结构和表现形式上的区别，以鼓励使用格式表（style sheet）来取代使用元素和属性进行表现的方式 。

·更加优良的表单（form）性能，加入了访问关键词（access key）、构建对称的表单控件能力、构建对称的下拉菜单控件的能力和动态标签（active label）。

·在文本描述的标记中包含对象。

·一种新客户端的文本包括在图像映射元素（map element），使得网页设计者可以集成文本和图像链接。

·可以将替代图像的文本包括在图像元素（IMG element）中，也可以将图像映射（image map）包含到区域元素中（area element）。

·在所有元素中支持title和language两个属性。

·更多的表格属性，包括Caption、Column groups和方便的非可视信息（non-visual reading）的表现机制。

注：历史这块面试会考的几率较大。

1.2.HTML标签基础

HTML的文档书写规范是

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

</body>

</html>

1.2.1标签练习，这块知识中需要注意的是单标记和双标记的区分，以及每个标记在网页中该起到的作用。

1.2.2HTML 文档是由 HTML 元素定义的。

HTML 元素语法

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

注：

不要忘记结束标签：

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML，但结束标签必须写上。

空的 HTML 元素：

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

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

使用小写标签：

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

1.3标签属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

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

属性总是在 HTML 元素的开始标签中规定。

例子：<h1 align="center"> 拥有关于对齐方式的附加信息。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

注：使用小写属性

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

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

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

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。

下面是对上面HTML标签及其属性的练习代码。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div bgcolor="yellow">

<p align="center">我是练习</p>

</div>

</body>

</html>

1.4HTML的标题

在 HTML 文档中，标题很重要。

HTML 标题

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

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

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

注：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 注释

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

注释是这样写的：<!-- This is a comment -->

注：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

合理地使用注释可以对未来的代码编辑工作产生帮助。

1.5HTML样式

style 属性用于改变 HTML 元素的样式

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

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

1.6HTML 链接

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

例子：

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<aname="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<ahref="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<ahref="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

经典示例：

在新的浏览器窗口打开链接

<html>

<body>

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

</body>

</html>

链接到同一个页面的不同位置

<html>

<body>

<p>

<a href="#C4">查看 Chapter 4。</a>

</p>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>

<p>This chapter explains ba bla bla</p>

</body>

</html>

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

命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

1.7HTML 图像

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

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

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

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

定义图像的语法是：

<img src="url" />

替换文本属性（Alt）

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

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

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

经典示例：

添加背景图片

<html>

<body background="/i/eg_background.jpg">

<h3>图像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面，图像会进行重复。</p>

</body>

</html>

图片浮动至段落的左边或右边

<html>

<body>

<p>

<img src ="/i/eg_cute.gif" align ="left">

带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

</p>

<p>

<img src ="/i/eg_cute.gif" align ="right">

带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

</p>

</body>

</html>

将图片调整到不同的尺寸

<html>

<body>

<img src="/i/eg_mouse.jpg" width="50" height="50">

<br />

<img src="/i/eg_mouse.jpg" width="100" height="100">

<br />

<img src="/i/eg_mouse.jpg" width="200" height="200">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

</body>

</html>

将图像作为一个链接使用

<html>

<body>

<p>

您也可以把图像作为链接来使用：

<a href="/example/html/lastpage.html">

<img border="0" src="/i/eg_buttonnext.gif" />

</a>

</p>

</body>

</html>

创建带有可供点击区域的图像映射区

<html>

<body>

<p>请点击图像上的星球，把它们放大。</p>

<img

src="/i/eg_planets.jpg"

border="0" usemap="#planetmap"

alt="Planets" />

<map name="planetmap" id="planetmap">

<area

shape="circle"

coords="180,139,14"

href ="/example/html/venus.html"

target ="_blank"

alt="Venus" />

<area

shape="circle"

coords="129,161,10"

href ="/example/html/mercur.html"

target ="_blank"

alt="Mercury" />

<area

shape="rect"

coords="0,0,110,260"

href ="/example/html/sun.html"

target ="_blank"

alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>

</html>

1.8HTML 表格

表格

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

<table border="1"><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>

在浏览器显示如下：

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

表格和边框属性

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

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

<tableborder="1px"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

表格的表头

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

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

<table border="1"><tr><th>Heading</th><th>Another Heading</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>

在浏览器显示如下：

HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1"><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>

浏览器可能会这样显示：

注：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

练习案例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>学生信息统计表 - 比较选择器优先级 with Hungking Hsi of Hemi Edu</title>

<style type="text/css">

#tbid{

font-family: "宋体,sans-serif";

font-size: 20px;

background-color: #66cccc;

border: 1px solid #eeeeee;

}

table{

font-family: "楷体,sans-serif";

font-size: 30px;

background-color: #bbbbbb;

border: 1px solid red;

}

.tbclass{

font-family: "黑体,sans-serif";

font-size: 10px;

background-color: blue;

border: 2px solid green;

}

</style>

</head>

<body>

<form name="fm" method="post" action="#">

<table width="400" align="center" border="1" cellspacing="0" id="tbid" class="tbclass">

<tr>

<th>ID</th>

<th>姓名</th>

<th>专业</th>

</tr>

<tr>

<td>2016001</td>

<td>李四</td>

<td>土木工程</td>

</tr>

<tr>

<td>2016001</td>

<td>王五</td>

<td>金融工程</td>

</tr>

<tr>

<td>2016001</td>

<td>赵六</td>

<td>国际经济与贸易</td>

</tr>

<tr>

<td>2016001</td>

<td>吴起</td>

<td>生物信息学</td>

</tr>

<tr>

<td>2016001</td>

<td>王八</td>

<td>机械电子工程</td>

</tr>

</table>

</form>

</body>

</html>

1.9HTML列表

无序列表

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

无序列表始于 <ul> 标签。每个列表项始于 <li>。

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

浏览器显示如下：

Coffee
Milk

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

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

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

浏览器显示如下：

Coffee
Milk

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

定义列表

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

自定义列表以 <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

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

1.10HTML <div> 和 <span>块级元素

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

HTML 块元素

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

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

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

例子：<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 <span> 元素是行内元素，能够用作文本的容器。

1.11HTML Iframe 内联框架

添加 iframe 的语法

<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。

实例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框：

实例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

实例

<iframe src="demo_iframe.htm"name="iframe_a"></iframe><p><a href="http://www.w3school.com.cn"target="iframe_a">W3School.com.cn</a></p>

1.12HTML 表单

HTML 表单用于搜集不同类型的用户输入。

<form> 元素

HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单：

实例

<form> .form elements .</form>

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

例子：

文本输入

<input type="text">

单选按钮输入

<input type="radio">

提交按钮

<input type="submit">

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">

或：

<form action="action_page.php" method="POST">

注：form有比较多的属性，可以上html手册中进行查找

1.121HTML 表单元素

<input> 元素

最重要的表单元素是 <input> 元素。

<input> 元素根据不同的 type 属性，可以变化为多种形态。

<select> 元素（下拉列表）

<select> 元素定义下拉列表：

实例

<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select>

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

实例

<option value="fiat" selected>Fiat</option>

<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）：

实例

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

<button> 元素

<button> 元素定义可点击的按钮：

实例

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 表单元素

HTML5 增加了如下表单元素：

<datalist>
<keygen>
<output>

注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。

HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

实例

通过 <datalist> 设置预定义值的 <input> 元素：

<form action="action_page.php"><input list="browsers"><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist> </form>

1.122HTML 输入类型

输入类型：text

<input type="text"> 定义供文本输入的单行输入字段：

实例

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

输入类型：password

<input type="password"> 定义密码字段：

实例

<form> User name:<br><input type="text" name="username"><br> User password:<br><input type="password" name="psw"></form>

输入类型：submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。

在表单的 action 属性中规定表单处理程序（form-handler）：

实例

<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form>

Input Type: radio

<input type="radio"> 定义单选按钮。

Radio buttons let a user select ONLY ONE of a limited number of choices:

实例

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

注：设置同一name才能实现单选效果

Input Type: checkbox

<input type="checkbox"> 定义复选框。

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

实例

<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> 

Input Type: button

<input type="button> 定义按钮。

实例

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

输入类型：number

<input type="number"> 用于应该包含数字值的输入字段。

您能够对数字做出限制。

根据浏览器支持，限制可应用到输入字段。

实例

<form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"></form>

输入类型：date

<input type="date"> 用于应该包含日期的输入字段。

根据浏览器支持，日期选择器会出现输入字段中。

实例

<form> Birthday: <input type="date" name="bday"></form>

输入类型：color

<input type="color"> 用于应该包含颜色的输入字段。

根据浏览器支持，颜色选择器会出现输入字段中。

实例

<form> Select your favorite color: <input type="color" name="favcolor"></form>

输入类型：range

<input type="range"> 用于应该包含一定范围内的值的输入字段。

根据浏览器支持，输入字段能够显示为滑块控件。

实例

<form> <input type="range" name="points" min="0" max="10"></form>

输入类型：month

<input type="month"> 允许用户选择月份和年份。

根据浏览器支持，日期选择器会出现输入字段中。

实例

<form> Birthday (month and year): <input type="month" name="bdaymonth"></form>

输入类型：week

<input type="week"> 允许用户选择周和年。

根据浏览器支持，日期选择器会出现输入字段中。

实例

<form> Select a week: <input type="week" name="week_year"></form>

输入类型：time

<input type="time"> 允许用户选择时间（无时区）。

根据浏览器支持，时间选择器会出现输入字段中。

实例

<form> Select a time: <input type="time" name="usr_time"></form>

输入类型：datetime

<input type="datetime"> 允许用户选择日期和时间（有时区）。

根据浏览器支持，日期选择器会出现输入字段中。

实例

<form> Birthday (date and time): <input type="datetime" name="bdaytime"></form>

输入类型：email

<input type="email"> 用于应该包含电子邮件地址的输入字段。

根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。

实例

<form> E-mail: <input type="email" name="email"></form>

输入类型：search

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

实例

<form> Search Google: <input type="search" name="googlesearch"></form>

输入类型：tel

<input type="tel"> 用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。

实例

<form> Telephone: <input type="tel" name="usrtel"></form>

输入类型：url

<input type="url"> 用于应该包含 URL 地址的输入字段。

根据浏览器支持，在提交时能够自动验证 url 字段。

某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。

实例

<form> Add your homepage: <input type="url" name="homepage"></form>

注：已经是比较常用的几个表单的类型

1.223HTML Input 属性

value 属性

value 属性规定输入字段的初始值：

实例

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

size 属性

size 属性规定输入字段的尺寸（以字符计）：

实例

<form action=""> First name:<br><input type="text" name="firstname" value="John" size="40"><br> Last name:<br><input type="text" name="lastname"></form> 

maxlength 属性

maxlength 属性规定输入字段允许的最大长度：

实例

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

min 和 max 属性

min 和 max 属性规定 <input> 元素的最小值和最大值。

min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

Opera Safari Chrome Firefox Internet Explorer

实例

具有最小和最大值的 <input> 元素：

Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5">

placeholder 属性

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

Opera Safari Chrome Firefox Internet Explorer

实例

拥有占位符文本的输入字段：

<input type="text" name="fname" placeholder="First name">

required 属性

required 属性是布尔属性。

如果设置，则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

Opera Safari Chrome Firefox Internet Explorer

实例

必填的输入字段：

Username: <input type="text" name="usrname" required>

基础部分主要针对的是每个标签对应的在网页中的具体的用处。

0 0