HTML学习

最新推荐文章于 2025-05-24 14:59:09 发布

junjungentle

最新推荐文章于 2025-05-24 14:59:09 发布

阅读量709

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/qq_33302076/article/details/97411668

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML元素、属性、标题、常用标签、样式、超链接、图像、表格、列表、类和响应式设计等。通过学习，读者将能够全面了解HTML并创建结构化的网页。同时，文中还提到了HTML5的新特性，如多媒体支持，为网页添加音频和视频提供了更多可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

**
什么是HTML？
HTML不是一种编程语言，而是一种超文本标记语言，是一套标记标签，用来描述网页

HTML标签
HTML标签是由尖括号包围的关键词，成对出现。

HTML文档 = 网页
Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

保存HTML
可以使用.htm也可以使用**.html**扩展名

HTML元素

HTML元素指的是从开始标签到结束标签的所有代码。

HTML元素语法

某些HTML元素具有空内容，空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数HTML元素可拥有属性
大多数HTML元素可以嵌套（可以包含其他HTML元素）推荐使用小写标签

HTML属性

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

属性总是以名称／值对的形式出现，比如：name＝＂value＂
属性总是再HTML元素的开始标签中规定
推荐使用小写属性
属性指应该始终被包括在引号内。常用双引号。如果属性值本身就含有双引号，必须使用单引号。

适用于大多数HTML元素的属性

class：規定元素的类名
id ：规定元素的唯一id
style：规定元素的行内样式
title：规定元素的额外信息（可在工具提示中显示）

为了便于显示，开始标签里都加了一个空格

HTML标题

标题是通过**< h1 >–< h6 >**等标签定义默认情况下
HTML会自动的在块级元素前后添加一个额外的空行，比如段落，标题元素前后
确保将HTML heading标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为网页的结构和内容编制索引*

常用标签

为了便于显示，开始标签里都加了一个空格
< h1>–< h6>：标题
< hr />：创建水平线
< !–注释–>：注释,浏览器不会显示注释
< p>：段落
< br/>：单个换行，没有结束标签。所有连续的空格或空行都会被算作一个空格

HTML格式化

文本格式化
< b>bold粗体< /b>
< strong>加重语气< /strong>
< big>大号字< /big>
< em>emphasized加着重文字< /em>
< i>italic斜体< /i>
< small>小号字< /small>
< sub>subscript下标< /sub>
< sup>supperscript上标< /sup>

预格式文本
< pre>保留了空格和换行。适合显示计算机代码< /pre>
< pre>for i = 1 to 10 ……< /pre>

计算机输出标签：这些常用于显示计算机/编程代码，
通常，HTMLL使用可变的字母尺寸以及可变的字母间距，< kbd>,< samp>, < code>元素全都支持固定的字母尺寸和间距。
< code>computer code计算机代码，不保留多余的空格和折行< /code> < kbd> keyboard 键盘码< /kbd> < tt>TeleType打印机代码< /tt> < samp>Sample text计算机代码样本< /samp> < var>Computer var定义变量< /var>

地址
< address>

地址,通常以斜体显示。大多数浏览器会在次元素前后添加行

< /address>

缩写和首字母缩写：在某些浏览器中，当把鼠标移至缩略词语上时，title可用于表达完整版本
< abbr title=“缩写abbreviation”>abbr，对缩写标记能为搜索引擎提供有用信息< /abbr>
< acronym title=“首字母缩写acronym”>acr< /acronym>

文字方向：如果浏览器支持bi-directional override (bdo),下一行会从右向左输出(rtl)
< bdo dir=“rtl”>Here is some Hebrew text< /bdo>

块引用：
< blockquote>

长引用，缩进处理，浏览器会插入换行和外边距

< /blockquote>
< q> 短引用，浏览器通常对元素包围引号< /q>

删除字效果和插入字效果：
< del>~~删除文本~~< /del>
< ins>下划线文本< /ins>

定义著作的标题：
< cite>定义引用、印证，通常以斜体显示< /cite>

用于定义项目：
< dfn>定义项目或缩写定义< /dfn>:
设置了title属性，或包含具有标题的< abbr>元素，则定义项目：

<p><dfn title="World Health Organization">WHO</dfn>成立于1948年</p>
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn>成立于1948年< /p>

否则，< dfn>文本内容即是项目，并且父元素包含定义

<p><dfn><dfn>WHO </dfn></dfn>World Health Organization 成立于1948年</p>

条件注释
< !–[if IE 8]>……< ![endif]–>

HTML样式

style属性：
< body style=“background-color:yellow”>

background-color：背景颜色
font-family：元素中文本的字体系列
color：元素中文本的颜色
font-size：元素中文本的字体尺寸
text-align：元素中文本的水平对齐方式

< style>标签

定义：用于为HTML文档定义样式；
注：style元素位于head部分
必需属性：type属性，定义style元素内容，唯一可能值是“text/css”；
可选属性：media属性，为样式表规定不同的媒介类型，【screen,tty.tv,projection,headheld,print,……】

< link>标签
定义：定义文档与外部资源的关系,常用于链接样式表
注：只能存在于head部分，但可出现任何次数
属性：href：规定被连接文档的位置；hreflang规定被连接文档中文本的语言；media：灰顶被连接文档将显示在什么设备上；rel：规定当前文档与被链接文档之间的关系；sizes：规定被连接资源的尺寸，仅适用于rel=“icon”，type：规定被链接文档的mime类型

外部样式表：可以通过更改一个文件来改变整个站点的外观

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

< div>标签
定义：定义文档中的分区或节，块级元素，浏览器通常在div元素前后换行
注：使用div组合块级元素，便于使用样式进行格式化
class或id属性：常只应用其中一种，class用于元素组，id用于标识单独的唯一元素

< span>标签
定义：被用来组合文档中的行内元素/内联元素，没有固定格式，应用样式时，才会产生视觉变化。
class或id属性：常只应用其中一种，class用于元素组，id用于标识单独的唯一元素

<p class="tip"><span>提示：</span>…………</p>
css:
p.tip span{
	font-weight:bold;
	color:#ff9955;}

HTML超链接

定义：使用超链接与网络上的另一个文档相连，字，词，图像都可以作为超链接，点解这些内容和跳转到新文档
< a>标签：
1.使用href属性，创建指向另一文档的链接
2.使用name属性，创建文档内的书签
语法：

href规定链接的目标，开始标签和结束标签之间的文字被作为超级链接来显示
target定义被连接的文档在何处显示，以下代码是在新窗口显示

<a href = "url"  target=_blank“”>Link text,也可以是图片或其他元素</a>

name规定锚的名称，用来创建HTML页面中的书签
注：书签不会以任何特殊方式显示，他对读者是不可见的，当使用命名锚时，可以直接创建跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了

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

可以使用id属性来替代name属性，命名锚同样有效
实例

1.创建一个书签，对锚命名
<a name = "tips">要链接到的title</a>
2.在同一个文档中创建指向该锚的链接
<a href="#tips">有用的提示</a>
3.在其他页面中创建指向该锚的链接
<a href="http://www.w3school.com.cn/htm/html_links.asp#tips">有用的提示</a>

将#符号和锚名称添加到URL的末端，就可以链接到tips这个命名锚

HTML图像

< img>标签：是空标签，只包含属性，并且没有闭合标签
src属性：指存储图像的位置
alt属性：定义一串预备的可替换文本，当浏览器无法载入图像时，替换文本属性告诉读者他们没有正常显示。

<img src="url" />

< map>标签：定义图像地图
< area>标签：定义图像地图中的可点击区域
实例：创建图像映射

<img src="url" border="0" usermap="#planetmap" alt="Planets" />

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

<area
shape="circle">
coords="180,139,14"
href="url"
taget="_blank"
alt="替换文本"
/>
</map>

HTML表格

定义：表格由< table>标签定义，表格有若干行，由< tr>标签定义，每行被分成若干单元格，由< td>标签定义。td（table data），数据单元格的的内容，可以包含文本，图片，列表,表格等等，表格表头由< th>标签定义
实例：
frame：框架属性，规定外侧边框的哪个部分是可见的，值有box/above/below/hsides/vsides
border:表格框线宽度
cellpadding:单元格边距
cellspacing:单元格之间距
bgcolor:背景颜色
background：背景图像
align:单元中排列内容,值有left/right/center

<table frame="box" border="1" cellpadding="10" cellsapcing="10" bgcolor="red">
<caption> 表格的标题</caption>
<tr>
	<th>表头</th>
	<th colspan="2">横跨两列的单元格< /th>
</tr>
<tr>
	<td backgound="....gif">table data</td>
	<td>&nbsp;空格，用以表示空单元
	<td>这个单元包含一个列表
		<ul>
			<li>第一点</li>
			<li>第二点</li>
		</ul>
	</td>
<tr>
	<th rowspan=2“”>横跨两行的单元格</th>
	<td align="left">第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
</table>

< thead>< tbody>< tfoot>标签
定义：< thead>定义表头，< tbody>定义表格主体，< tfoot>定义表格页脚。
注：在table内使用这些标签，且必须使用全部的元素，他们出现的次序是：thead，tfoot，tbody；< thead>内部必须拥有< tr>标签；
用法：thead，tbody,tfoot元素对表格的行进行分组。使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。

< col>/< colgroup>标签：
定义：为表格中一个或多个列定义属性值
注：只能在table或colgroup元素中使用；为< col>标签添加class属性，就可以使用css负责样式了

<table width="50%"  boder="1">
	<colgroup span="2"> align="left"></colgroup>
	<colgroup align="right"></colgroup>
	或
	<col  align="left" />
	<col align="left" />
	<col align="right" />
	<tr>
		<th>第一列表头</th>
		<th>第二列表头</th>
		<th>第三列表头</th>
	</tr>
	<tr>
		<td>数据</td>
		<td>数据</td>
		<td>数据</td>
	</tr>
</table>

HTML列表

无序列表
定义：项目列表，使用粗体原点进行标记
属性：type:列表符号，disc/circle/square

<ul type="disc">
<li>Coffee</li>
<li>Milk</li>
</ul>

< li>里可再嵌套列表

有序列表
定义：列表项目使用数字进行标记
属性：type:列表符号，1/A/a/I/i

<ol type="A"> 
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表：项目及其注释的组合
自定义列表以< dl>（definition list）标签开始，每个自定义列表项以< dt>开始，每个自定义列表项的定义以< dd>开始

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

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

HTML类

定义：对HTML进行分类（设置类），使我们能够为元素的类定义CSS样式。

< div>：块级元素，能够用作其他HTML元素的容器

<html>
<head>
<style>
.cities{
	background-color:black;
	……
}
</style>
</head>

<body>
<div class="cities">
<h2>Lodon</h2>
<p>discription</p>
</div>
<div class="cities">
……
</div>
</body>
</html>

< span>元素：能够用作文本的容器

<html>
<head>
<style>
	span.red{color:red;}
</style>
</head>

<body>
<h1>My<span class="red">Important</span>Heading</h1>
</body>
</html>

HTML布局

< div>:常用作布局工具，因为能够轻松地通过CSS对其进行定位

<html>
<head>
<style>
#header{……}
#nav{……}
#section{……}
#footer{……}
</style>
</head>

<body>
<div id="header"></div>
<div id="nav"></div>
……
</body>
</html>

使用HTML5的网站布局：
< header>：定义文档或节的页眉
< nav>：定义导航链接的容器
< section>：定义文档中的节
< article>：定义独立的包含文章
< side>：定义内容之外的内容（如侧栏）
< footer> :定义文档户节的页脚
< details>：定义额外的细节
< summary>:定义details元素的标题

<html>
<head>
<style>
header{……}
nav{……}
section{……}
footer{……}
</style>
</head>

<body>
<header>……</header>
<nav>……</nav>
<section>……</section>
<footer>……</footer>
</body>
</html>

使用表格的HTML布局:
< table>元素不是作为布局工具而设计的，但可以通过CSS设置表格元素样式来取得布局效果

<html>
<head>
<style>
table.lamp{……}
table.lamp th,td{……}
table.lamp th{……}
</style>
</head>

<body>
<table class="lamp">
<tr>
	<th>……</th>
	<td>……</td>
</tr>
</table>
</body>
</html>

HTML响应式web设计

RWD指的是响应式web设计(Responsive Web Design)
RWD能够以可变尺寸传递网页
RWD对于平板和移动设备是必须的

使用Bootstrap，是最流行的的开发响应式web的HTML,CSS,和JS框架

HTML框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档成为一个框架，并且每个框架都独立于其他的框架。

<frameset rows="50%,50%"   noresize="noresize">
	<frames src="/exmple/html/frame_a.html">
<frameset cols="25%,75%">
	<frame src="frame_a.htm"  noresizes="noresize">
	<frame src="fram_b.htm">
</frameset>

注：noresize使用户不能拖动边框来改变它的大小；
不能将< body>< /body>标签与< frameset>< /frameset>标签同时使用

内联框架
定义：iframe用于在网页内显示网页
属性：frameborder：规定是否显示iframe周围的边框

<iframe src="URL" width="" height="" frameborder="0"></iframe>

使用iframe作为链接的目标，链接的target属性必须引用iframe的name属性：

<iframe src="demo_iframe.htm" name="iframe_a"></frame>
<p><a href="URL" target="iframe_a">链接</a></p>

HTML脚本

< script>
定义：用于定义客户端脚本，比如JavaScript。
注：既可包含脚本语句，也可通过src属性指向外部脚本文件
必需的type属性规定脚本的MIME属性

<script type="text/javascript">
document.write("Hello World")
</script>
<noscript>浏览器不支持Jsp</noscript>

< noscript>
定义：只有在浏览器不支持脚本或脚本禁用是，才会显示noscript元素的内容

应对老式浏览器：将脚本隐藏在注释标签中

JavaScript

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

HTML文件路径

<img src="picture.jpg"> 位于与当前网页相同的文件夹
<img src="imges/picture..jpg">位于当前文件夹的images文件夹中
<img src="../imges/picture.jpg">位于当前文件夹的上一级文件夹中images文件夹中
<img src="/images/picture.jpg"> 当前站点根目录的images文件夹中
<img src="../picture.jpg"> 位于当前文件夹的上一级文件夹中

HTML 头部元素

< head>
定义：所有头部元素的容器。< head>内元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等等。

以下标签都可以添加到head部分：< title>< base>< link>< meta>< script>< style>

< title>
定义：定义文档的标题，title元素在所有HTML和XHTML文档中都是必需的
注：title提供页面被添加到收藏夹时显示的标题；显示在搜索引擎结果中的页面标题

<head>
<title>标题</title>
</head>

< base>
定义：为页面上所有的链接规定默认地址或默认目标

<head>
<base href="URL" />
<base target="_blank" />
</head>

< link>
定义：定义文档与外部资源之间的关系

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

< style>
定义：用于为HTML文档定义样式信息

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

< meta>
定义：metadata元数据是关于数据的信息；元数据不会显示在页面上，但对于机器是可读的
注：元数据可用于浏览器，搜索引擎或其他web服务
属性：
必需属性：content：定义与http-equiv或name属性相关的元信息,始终要和name或http-equiv一起使用
可选属性：
http-equiv：把content属性关联到http头部；值：content-type/expires/refresh/set-cookie
name:把content属性关联到一个名称；值：author/description/keywords/generator/revised/others
scheme:定义用于翻译content属性值的方案，此方案应该在由< head>标签的< profile>属性指定的概况文件中进行了定义

meta元素定义页面的描述
<meta name="description content="HTML学习记录" />
meta元素定义页面关键词
<meta name="keywords" content="HTML,学习" />

http-equiv属性
定义：为名称/值对提供了名称，并指示服务器在发送实际的文档之前先在要传送的给浏览器的MIME文档头部包含名称/值对。至少要发送一个：content-type：text/html

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

示例：5s后重定向

<meta http-equiv="Refresh" content="5;url="URL" />

< script>
定义：用于定义客户端脚本，比如JavaScript

HTML 字符实体

HTML中的预留字符必须被替换为字符实体

不间断空格（non-breaking space）：&nbsp;
<小于号（less than）：&lt;
>大于号（greater than）：&gt;
&和号（ampersand）：&amp
"引号（quotation）：&quot;
'撇号（apostrophe）：&apos;
……

HTML 统一资源定位器

URL（Uniform Resource Locator）用于定位万维网上的文档（或其他数据），遵守以下的语法规则：

scheme://host.domain:port/path/filename
解释：
scheme-定义因特网服务的类型，最常见的类型是http
host-定义域主机（http的默认主机是www）
domain-定义因特网域名，比如w3.com.cn
:port-定义主机上的端口号（http的默认端口号是80）
path-定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
file-name-定义文档/资源的名称

URL Schemes
http:超文本传输协议，以http://开头的普通网页。不加密
https：安全超文本传输协议，安全网页。加密所有信息交换
ftp：文件传输协议，用于将文件下载或上传网站
file：您计算机上的文件

URL字符编码

URL只能使用ASCII字符集来通过因特网进行传送
非ASCII字符使用"%"其后跟随两位的十六进制数来替换
URL不能包含空格，URL编码通常使用+来替换空格

HTML <!DOCTYPE>

定义：声明HTML是用什么版本编写的，帮助浏览器正确的显示网页

HTML5：<!DOCTYPE html>
HTML4.01<!DOCTYPE HTML PUBLIC "-//W3C//CTC HTML 4.01 Transitional//EN"
				"http://www.w3.org/TR/hml4/loose.dtd">

HTML 表单

定义：< form>用于搜集不同类型的用户输入
属性：

accept-charset:规定在被提交表单中使用的字符集（默认页面字符集）
action：规定向何处提交表单的地址（URL）（提交页面）
autocomplete：规定浏览器应该自动完成表单（默认：开启）
enctype：规定被提交数据的编码（默认url-encoded）
method：规定在提交表单时所用的HTTP方法（默认：GET）
name：规定识别表单的名称（对于DOM使用：document.form.name）
novalidate：规定浏览器不验证表单
target：规定action属性中地址的目标（默认：_self）

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

指定某服务器脚本来处理被提交的表单
<form action="action_page.php">
如果省略action属性，则action会被设置为当前页面

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

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

GET:
何时使用：如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息
注：
使用GET时，表单数据在页面地址栏是可见的;
GET最适合少量数据的提交，浏览器会设定容量限制

action_page.php?firstname="Mickey&lastname=Mouse"

POST
何时使用：如果表单正在更新数据，或者包含敏感信息（例如密码）
注：
POST在页面地址栏中被提交的数据是不可见的

name属性
定义：如果要正确的被提交，每个输入字段必须设置一个name属性

< input>元素
type属性：

text：定义常规文本输入
radio：定义单选按钮输入
submit：定义提交按钮
password:定义密码字段
checkbox：定义复选框
button:定义按钮

<form>
文本输入的单行输入字段,文本字段的默认宽度是20个字符<br>
<input type="text" name="firstname">
<br>

单选按钮<br>
<input type="radio" name="sex" value="male" checked>Male
<br>

用户密码，password字段中的字符会被做掩码处理（显示为星号或实心圆）<br>
<input type="password" name="psw">

复选框，允许用户在有限数量的选项中选择零个或多个选项<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>

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

提交按钮，用于向表单处理程序提交表单的按钮，表单处理程序在表单的action属性中指定<br>
<input type="text" name=“firstname” value="Mckey">
<br>
<input type="submit" value="Submit">
</form>

HTML5新增type属性：：
color，date，datetime，datetime-local，email，month，number，range，search，tel，time，url，week
注：老式浏览器不支持的输入类型，会被视为输入类型text

number ：用于应该包含数字值得输入字段，可以对数字做出限制
date：用于应该包含日期的输入字段
color：用于应该包含颜色的输入字段
range：用于应该包含一定范围内的值得输入字段
month：允许用户选择月份和年份
week：允许用户选择周和年
time：允许用户选择时间（无时区）
datetime：允许用户选择日期和时间（有时区）
datetime-local：允许用户选择日期和时间（无时区）
email：用于应该包含电子邮件地址的输入字段
search：用于搜索字段（搜索字段的表现类似常规文本字段）
tel：用于应该包含电话号码的输入字段
url：用于应该包含URL地址的输入字段

数字值<br>
<input type="number" name="quantity" min="1" max="5" value="2">

注：日期选择器会出现在输入字段中
日期<br>
<input type="date" name="bday" min="2000-01-01" max="2019-08-07">

注：颜色选择器会出现在输入字段中
选择你喜欢的颜色<br>
<input type="color" name="favcolor" value=‘#ff0000’>

注：输入字段能够显示为滑块控件
一定范围的值<br>
<input type="range" name="points" min="0" max="10">

注：日期选择器会出现在输入字段中
月份和年份<br>
<input type="month" name="bdaymonth">

注：日期选择器会出现在输入字段中
周和年<br>
<input type="week" name="week_year">

注：时间选择器会出现在输入字段中
时间（无时区）<br>
<input type="time" name="usr_time">

日期和时间（有时区）<br>
<input type="datetime" name="bdaytime">

时期和时间（无时区）<br>
<input type="datatime-local" name="bdaytime">

注：在被提交时自动对电子邮件地址进行验证
<input type="email" name="email">

搜索字段<br>
<input type="search" name="googlesearch">

注：目前只有Safari8支持Tel类型
电话号码<br>
<input type="tel" name="usrtel">

注：提交时能够自动验证URL字段
URL地址<br>
<input type="url" name="homepage">

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

<input type="text" name="firstname" value="John">

readonly属性
定义：规定输入字段为只读（不能修改）

注：readonly属性不需要值，他等同于readonly="readonly"
<input type="text" name="firstname" value="John" readonly>

disabled属性
定义：规定输入的字段是禁用的
注：被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交

注：disabled属性不需要值，他等同于disabled=“disabled”
<input type="text" name="firstname" value="John" disabled>

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

<input type="text" name="firstname" value="John" size=“40”>

maxlength属性
定义：规定输入字段允许的最大长度
注：该属性不会提供任何反馈，如果需要提醒用户，则必须编写Js代码

<input type="text" name="firstname" maxlength="10">

HTML5为< input>新增属性：
autocomplete,autofocus,form,formaction,formenctype,formmethod,formnovalidate,formtarget,height和width,list,min和max，multiple,pattern,placeholder,required,step

并为< form>增加如需属性：autocomplete，novalidate

autocomplete属性
定义：规定表单或输入的字段是否应该自动完成，当自动完成开启，会基于用户之前的输入值自动填写值

<form action="action_page.php" autocomplete="on">
	First name:<input type="text" name="fname"><br>
	E-mail:<input type="email" name="email" autocomplete="off"><br>
	<input type="submit">
</form>

novalidate属性
定义：属于< form>属性，规定在提交表单时不对表单数据进行验证

<form action="action_page.php" novalidate>
	E-mail:<input type="email" name="email" autocomplete="off"><br>
	<input type="submit">
</form>

autofocus属性
定义：布尔属性，规定当页面加载时< input>元素应该自动获得焦点

使“First name”输入字段在页面加载时自动获得焦点
First name：<input type="text" name="fname" autofocus>

form属性
定义：规定< input>元素所属的一个或多个表单
注：如需引用一个以上的表单，请使用空格分割的表单id列表

输入字段 位于HTML表单之外（但仍属表单）
<form action="action_page.php" id="form1">
	First name:<input type="text" name="fname"><br>
	<input type="submit" value="Submit">
</form>

Last name:<input type="text" name="lname" form="form1">

formaction属性
定义：规定当提交表单时处理该输入控件的文件的URL，覆盖< form>元素的action属性。formaction属性适用于type="submit"以及type=“image”

拥有两个提交按钮并对于不同动作的HTML表单：
<form action="action_page.php">
	First name:<input type="text" name="fname"><br>
	Last name:<input type="text">  name="lname"><br>
	<input type="submit" value="Submit"><br>
	<input type="submit" formaction="demo_admin.asp">
	value="Submit as admin">
</form>

formenctype属性
定义：规定把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对method="POST"的表单）,formenctype属性覆盖< form>元素的enctype属性。formenctype属性适用于type="submit"以及type=“image”

<form action="demo_post_enctype.asp" method="post">
	First name:<input type="text" name="fname"><br>
	<input type="submit" value="submit">
	<input type="submit" formenctype="multipart/form-data">
	value="Submit as Multipart/form-data">
</form>

formmethod属性
定义：用以向action URL发送表单数据（form-data）的HTTP方法，formmethod属性覆盖< form>元素的method属性。formmethod属性适用于type="submit"以及type=“image”

<form action="demo_post_enctype.asp" method="get">
	First name:<input type="text" name="fname"><br>
	<input type="submit" value="submit">
	<input type="submit" formmethod="post" formaction="demo_post.asp">
	value="Submit using POST">
</form>

formnovalidate属性
定义：formnovalidate属性覆盖< form>元素的novalidate属性,提交表单时不对表单数据验证。formnovalidate属性可用于type=“submit”

拥有 两个提交按钮的表单（验证和不验证）
<form action="demo_post_enctype.asp" >
	Email：<input type="emali" name="userid"><br>
	<inout type="submit" value="Submit"><br>
	<input type="submit" formnovalidate value="Submit without validation">
</form>

formtarget属性
定义：规定的名字或关键词指示表单后在何处显示接收到的响应，formtarget属性 会覆盖< form>元素的target属性，可与type="submit"和type="image"使用

这个表单有两个提交按钮，对应不同的目标窗口
<form action="action_page.asp" >
	First name:<input type="text" name="fname"><br>
	<input type="submit" value="Submit as normal">
	<input type="submit" formtarget="_blank" value="Submit to a new window">
</form>

height和width属性
定义：规定< input>元素的高度和宽度。仅用于< input type=“image”>
注：请始终规定图像的尺寸，如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁

把图像定义为提交按钮，并设置为height和width属性
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

list属性
定义：引用< datalist>元素中包含了< input>元素的预定义选项
注：input元素的list属性必须引用**< datalist>元素的id属性**

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

min和max属性
定义：规定< input>元素的最小值和最大值
注：使用于：number，range，date，datetime，datetime-local，month，time，week

<input type="date" name="bday max="1979-12-31”>

multiple属性
定义：布尔属性，规定允许用户在< input>元素中输入一个以上的值，使用与email和file

接受多个值的文件上传字段
Select images:<input type="file" name="img" mutiple>

pattern属性
定义：规定用于检查< input>元素值的正则表达式，适用于text，search，url，tel，email，password

只能包含三个字母的输入字段（无数字或特殊字符）
使用全局的title属性对模式进行描述以帮助用户
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter contry>

placeholder属性
定义：规定用以描述输入字段预期值的提示（样本值或相关格式的简短描述），该提示会在用户输入值之前显示在输入字段中，适用于text，search，url，tel，email，password

拥有占位符文本的输入字段
<input type="text" name="fname" placeholder="First name">

required属性
定义：布尔属性，规定在提交表单之前必须填写输入字段，适用于text，search，url，tel，email，password，date pickers，number，checkbox，radio，file

必填的输入字段
Username:<input type="text" name="usrname" required>

step属性
定义：规定< input>元素的合法数字间隔，可与max和min属性一同使用，来创建合法值的范围，适用于number，renge，date，datetime，datetime-local，month，time，week
示例：如果step=“3”，则合法的数字应该是-3,0，3，6等

拥有具体的合法数字间隔的输入字段
< input type="number" name="points" step="3">

< fieldset>元素
定义：组合表单中的相关数据
< lengend>元素为< fieldset>元素定义标题

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

< select>元素
定义：下拉列表
< option>元素定义待选择的备选选项
注：列表通常会把首个选项显示为被选选项，能够通过添加到selected属性来定义预定义选项。

<select name="cars">
<option value="volvo" >volvo</option>
<option value="saab" selected>saab</option>
</select>

< textarea>元素
定义：多行元素输入字段

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

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

<button type="button" onclick="alert('Hello World!')">click me!</button>

HTML5表单元素：
新增表单元素:< datalist>< keygen>< output>

< datalist>元素
定义：为< input>元素规定预定义选项列表，用户会在输入数据时看到预定义选项的下拉列表
注：input元素的list属性必须引用**< datalist>元素的id属性**

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

HTML 多媒体

多媒体格式
视频格式：.avi，.wmv，.mpg，.mpeg，.mov，.rm，.ram，.swf，.flv，.mp4
声音格式：.mid，.midi，.ram，.rm，.wav（无压缩声音格式），.wma，.mp3（压缩录制音乐格式），.mpga

HTML Object元素
< object>的作用是支持HTML助手（插件）

在HTML中播放音频

使用插件：
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。可使用< object>或< embed>标签来将插件添加到HTML页面。

使用< embed>元素
注：embed标签是一个HTML５标签，在HTML４中是无效的。

解决HTML５验证问题
<!DOCTYPE html>
<embed height="200" width="400" src="song.mp3" />

使用< object>元素

<object height="200" width="400"  data="song.mp3"></object>

使用HTML5< audio>元素

注:MP3文件在IE,Chrome,Safari中有效.
为了使音频在Firefox和Opera中同样有效,添加一个ogg类型文件.
如果失败,会显示错误消息.
<!DOCTYPE html>
<audio controls="controls">
	<source src="song.mp3" type="audio/mp3" />
	<sourde src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

最好的解决办法

注:HTML5会尝试以mp3或ogg来播放音频,如果失败,代码将回退尝试<embed>元素
<audio controls="controls" height="100" width="100">
	<source src="song.mp3" type="audio/mp3" />
	<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

雅虎媒体播放器
使用雅虎媒体播放器使免费的,如使用他,需要把这段JavaScript插入网页底部

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

然后只需简单地把MP3文件链接到HTML中,JavaScript会自动地为每首歌创建播放按钮

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>

雅虎媒体播放器提供地是一个小型的播放按钮,而不是完整的播放器.当点击该按钮,会弹出完整的播放器.

使用超链接
如果网页包含指向媒体文件的超链接,大多数浏览器会使用"辅助应用程序"来播放文件.

用户点击该链接,浏览器会启动"辅助应用程序"来播放该文件
<a href="song.mp3">Play the sound</a>

在HTML中播放视频

使用< embed>标签

<embed src="movie.swf" height="200" width="200"/>

使用< object>标签

<object data="movie.swf" height="200" width="200"/>

使用< video>标签

<video width="320" height="240" controls="controls">
	<source src="movie.mp4" type="video/mp4" />
	<source src="movie.ogg" type="video/ogg"/>
	<source src="movie.webm" type="video/webm" />
Yours browers does not support the video tag.
</video>

最好的解决办法
HTML＋< object>+ < embed>

<video width="320" height="240" controls="controls"/>
	<source src="movie.mp4" type="video/mp4" />
	<source src="movie.ogg" type="video/ogg" />
	<source src="movie.webm" type="video/webm" />
	<object data="movie.mp4" width="320" height="240">
		<embed src="movie.swf" width="320" height="240">
	</object>
</video>

优酷解决方案

将视频上传到优酷等视频网站,然后在网页中插入HTML代码即可播放视频

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>

使用超链接

<a href="movie.swf">Play a video file</a>