2.HTML标签

<a> 链接标签

　　　　　1) <a href=“#”>这是个链接</a> 表示空链接

　　　　　2) 未访问过的链接显示蓝色字体并带下划线;访问过的链接显示紫色字体带下划线;点击时链接显示红色字体带下划线.

　　　　　3) 属性 target 属性定义链接在何处显示 _blank 在新窗口打开

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

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

<a id="tips">Useful Tips Section</a>

<a href="#tips">Visit the Useful Tips Section</a>

　　　　5) 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="//www.w3cschool.cn/html"，就会向服务器产生两次 HTTP 请求。

　　　　这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="//www.w3cschool.cn/html/"。

：HTML5 中的新属性。

属性	值	描述
charset	char_encoding	HTML5 不支持。规定目标 URL 的字符编码。
coords	coordinates	HTML5 不支持。规定链接的坐标。
downloadNew	filename	指定下载链接
href	URL	规定链接的目标 URL。
hreflang	language_code	规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNew	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
name	section_name	HTML5 不支持。规定锚的名称。
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
rev	text	HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape	default rect circle poly	HTML5 不支持。规定链接的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。仅在 href 属性存在时使用。
typeNew	MIME_type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注：MIME = Multipurpose Internet Mail Extensions。

<audio>: HTML5 提供的用来播放音频文件的。(<video> 是用来播放视频的）

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。

注释： IE 8 或更早版本的 IE 浏览器不支持 <audio> 标签。

<audio controls>
  <source src="/statics/demosource/horse.ogg" >
  <source src="/statics/demosource/horse.mp3" >
您的浏览器不支持 audio 元素。
</audio>

签定义及使用说明

<audio> 标签定义声音，比如音乐或其他音频流。

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

提示：这 3 种音频的 MIME-type 分别是：

音频格式	MINE-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

属性

New ：HTML5 中的新属性。

属性	值	描述
autoplayNew	autoplay	如果出现该属性，则音频在就绪后马上播放。
controlsNew	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loopNew	loop	如果出现该属性，则每当音频结束时重新开始播放。
mutedNew	muted	如果出现该属性，则音频输出为静音。
preloadNew	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
srcNew	URL	规定音频文件的 URL。

<!--Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 浏览器支持 controls 属性。
注意： Internet Explorer 8 及更早IE版本不支持 <audio> 标签。-->
<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
 您的浏览器不支持 audio 元素。
</audio>

<!--Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 浏览器支持 controls 属性。
注意： Internet Explorer 8 及更早IE版本不支持 <audio> 标签。-->
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<!--Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 浏览器支持 loop 属性。
注意： Internet Explorer 8 及更早IE浏览器不支持 <audio> 标签。-->
<audio controls loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
 您的浏览器不支持 audio 元素。
</audio>
 
<!--Internet Explorer 10、Firefox、Opera 以及 Chrome 支持 muted 属性。
注意： Internet Explorer 9 以及更早的版本不支持 muted 属性。-->
<audio controls muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<!--目前所有主流浏览器都支持 preload 属性，除了 Internet Explorer-->
<audio controls preload="none">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
 您的浏览器不支持 audio 元素。
</audio>

问题:

<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。

最好的 HTML 解决方法：下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式

使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：

雅虎播放器可以播放MP3以及其他各种格式。你只需添加一行代码到你的页面或博客中就可以轻松地将您的HTML页面制作成专业的播放列表：

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。

请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

使用超链接

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

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

<a href="horse.mp3">Play the sound</a>

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

<i>：斜体

<strong>:变粗定义加重语气

<small>:定义小号字体

<em>:定义着重文字斜体

<sub>:上标

<sup>:下标

<ins>:表示范围内的文本已经被添加到文档中(通常是文档更新和修正的部分)

<del>:定义删除字计算机输出标签:(不反对使用以下标签，如果只是为了达到视觉效果建议使用css)

<code>:定义计算机代码

<kbd>:定义键盘码，它表示文本是从键盘上键入的(已经弃用，不推荐使用，可以使用css实现丰富的效果)

<samp>:定义计算机代码样本

<var>:变量

<pre>:预定义格式化文本，会保留空格和换行

引文引用以及标签定义

<abbr>:缩写一般用title属性展示其全称

<address>: 地址

<bdo> 定义文字方向，有dir属性，有rtl 和ltr两个值

<blockquote> 引用长文本，内容会自动有缩进

<q> 定义短的引用语句，浏览器会自动加单引号

<cite> 定义引用引证，表示对某个参考文献的引用，斜体

<dfn> 定义一个项目，特殊术语或短句
<button>：标签用来设置 HTML 中的按钮。

提示：与 <input type="button"> 相比，<button> 标签提供了更为强大的功能和更丰富的内容。

注释：如果在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的按钮值。IE 浏览器将提交 <button> 标签之间的文本，而其他浏览器将提交 value 属性的内容。请使用 <input> 在 HTML 表单中创建按钮。
```
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
```
属性1）autofocus，disabled，form，formaction formenctype formmethod formnovalidate formtarget （type="submit" 配合使用), name

2) type:规定按钮的类型:button ,submit,reset;

3)value:规定按钮的初始值。可由脚本进行修改

<base> 在<head>中间<title> 后，定义了页面上所有链接的默认url

在 HTML 中，<base> 标签没有结束标签；在 XHTML 中，<base> 标签必须被正确地关闭。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.w3cschool.cn/statics/images/w3c/logo.png"
<br><br>
<a href="http://www.w3cschool.cn">W3Cschool教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

<br>或<br/>　　换行标签

<c:import> 标签

<c:import>标签提供了所有<jsp:include>行为标签所具有的功能，同时也允许包含绝对URL。

举例来说，使用<c:import>标签可以包含一个FTP服务器中不同的网页内容。

<c:import
   url="<string>"
   var="<string>"
   scope="<string>"
   varRender="<string>"
   context="<string>"
   charEncoding="<string>"/>

属性

<c:import>标签有如下属性：

属性	描述	是否必要	默认值
url	需要检索和引入的页面的URL	是	无
context	/ 紧接着一个本地网络应用程序的名称	否	当前应用程序
charEncoding	所引入的数据的字符编码集	否	ISO-8859-1
var	用于存储所引入的文本的变量	否	Print to page
scope	var属性的作用域	否	Page
varReader	可选的用于提供java.io.Reader对象的变量	否	无

实例演示

%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>c:import 标签实例</title>
</head>
<body>
<c:import var="data" url="http://www.w3cschool.cn"/>
<c:out value="${data}"/>
</body>
</html>

<c:out> 标签

<c:out>标签用来显示一个表达式的结果，与<%= %>作用相似，它们的区别就是<c:out>标签可以直接通过"."操作符来访问属性。举例来说，如果想要访问customer.address.street，只需要这样写：<c:out value="customer.address.street">。

<c:out>标签会自动忽略XML标记字符，所以它们不会被当做标签来处理。

<c:out value="<string>" default="<string>" escapeXml="<true|false>"/>

属性

<c:out>标签有如下属性：

属性	描述	是否必要	默认值
value	要输出的内容	是	无
default	输出的默认值	否	主体中的内容
escapeXml	是否忽略XML特殊字符	否	true

程序示例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
<title>c:out 标签实例</title>
</head>
<body>
<html>
    <head>
        <title>&lt;c:out&gt;实例</title>
    </head>
    <body>
        <h1>&lt;c:out&gt; 实例</h1>
            <c:out value="&lt要显示的数据对象（未使用转义字符）&gt" escapeXml="true" default="默认值"></c:out><br/>
              <c:out value="&lt要显示的数据对象（使用转义字符）&gt" escapeXml="false" default="默认值"></c:out><br/>
        <c:out value="${null}" escapeXml="false">使用的表达式结果为null，则输出该默认值</c:out><br/>
    </body>
</body>
</html>

<datalist>(New) 　<datalist> 标签需要与 <input> 标签配合使用，用来表示可选的列表。

IE 10、Firefox、Opera 和 Chrome 支持 <datalist> 标签。

注释：IE 9 和更早版本的 IE 浏览器以及 Safari 不支持 <datalist> 标签。

form action="/statics/demosource/demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>

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

<div> 标签可以把文档分割为独立的、不同的部分。
<span> 元素是内联元素，可用作文本的容器

<embed>:<embed> 标签用来定义在页面中嵌入的内容，比如插件。（和<object>可以实现同样的效果）
```
<embed src="/statics/demosource/helloworld.swf" tppabs="http://W3Cschool.com/tags/helloworld.swf">
```
所有主流浏览器都支持 <embed> 标签。

<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。

属性1)height，width，type：详见<object>;

2)src:规定被嵌入内容的 URL

<fieldset>:对表单中的相关元素进行分组：

所有主流浏览器都支持 <fieldset> 标签。

提示：<legend> 标签为 <fieldset> 元素定义标题。

提示：<legend> 必须是 <fieldset> 元素的一个子元素

<form>
 <fieldset>
  <legend>个人信息:</legend>
  姓名: <input type="text"><br>
  邮箱: <input type="text"><br>
  生日: <input type="text">
 </fieldset>
</form>

属性：1.disabled（New)：除了 Internet Explorer 和 Safari，其他主流浏览器都支持 disabled 属性。

2）name(New)：除了 Internet Explorer，其他主流浏览器都支持 name 属性。

<form action="demo-form.php" method="get">
<fieldset name="personalia">
  姓名: <input type="text" name="username"><br>
  邮箱: <input type="text" name="usermail"><br>
</fieldset>
<button type="button" onclick="form.personalia.style.backgroundColor='yellow'">改变控件的背景颜色</button>
<input type="submit">
</form

3）form（New）:规定 fieldset 所属的一个或多个表单。目前，只有 Opera 支持 form 属性。

<form>　表单标签：表单是一个包含表单元素的区域。<form> 元素包含一个或多个如下的表单元素：

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

form的属性简介：

1) accept 属性 HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）

<form action="form_action.html" accept="image/gif,image/jpeg">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  Your image: <input type="file" name="pic" id="pic"><br>
  <input type="submit" value="提交">
</form>

2) accept-charset 规定服务器可处理的表单数据字符集。

<form action="demo_form.html" accept-charset="ISO-8859-1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

3)action 规定当提交表单时向何处发送表单数据

<form action="demo_form.html" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

4)autocomplete 规定是否启用表单的自动完成功能。autocomplete="on" autocomplete="off" 自动完成允许浏览器预测对字段的输入。
当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 autocomplete "on" 适用于表单，"off" 适用于特定的输入字段，反之亦然。
5）enctype 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）enctype="multipart/form-data" enctype="application/x-www-form-urlencoded"

6)method 规定用于发送表单数据的 HTTP 方法。 get post method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。表单数据可被作为 URL 变量的形式来发送（method="get"）或者作为 HTTP post 事务的形式来发送（method="post"）
关于 GET 的注释：(URL?name=value&name=value)。
a.将表单数据以名称/值对的形式附加到 URL 中
b.URL 的长度是有限的（大约 3000 字符）
c.绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
e.对于用户希望加入书签的表单提交很有用
f.GET 更适用于非安全数据，比如在 Google 中查询字符串
关于 POST 的注释
a.将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
b.没有长度限制c.
通过 POST 提交的表单不能加入书签
7）name 如果使用该属性，规定表单的名称。
8）novalidate 如果使用该属性，则提交表单时不验证。

<form action="demo_form.html" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

9）target 规定在何处打开 action URL：
_blank:在新窗口/选项卡中打开
_self:在同一框架中打开。（默认）
_parent:在父框架中打开。
_top:在整个窗口中打开
framename:在指定的 iframe 中打开。

<h1>　　标题标签 (h1到h6,超过6无效果)
<hr/> 水平线
<head> 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<iframe> 标签规定一个内联框架，通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

一些旧的浏览器不支持,如果浏览器不支持 iframes 则不会显示

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

<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>

1）Iframe - 设置高度与宽度:width和height

2）Iframe - 移除边框：frameborder="0"

3）使用iframe来显示目录链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，如下实例:

<iframe src="/statics/demosource/demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

<input> 标签用于创建交互式控件，这类控件是基于 web 表单的，它可以接收用户的数据、信息。
属性简介：(带有红色（New）标志的Internet Explorer 9及更早IE版本可能不支持）

1）accept：规定通过文件上传来提交的文件的类型。(只针对type="file")

<!--规定在文件上传中服务器只接受图像文件-->
<form action="demo-form.php"> 
 <input type="file" name="pic" accept="image/*"> 
 <input type="submit"> 
</form>

注意：accept 属性仅适用于 <input type="file">。

提示：请不要将该属性作为您的验证工具。应该在服务器上对文件上传进行验证。

audio/*    接受所有的声音文件。
video/*    接受所有的视频文件。
image/*    接受所有的图像文件。
MIME_type  一个有效的 MIME 类型，不带参数。请参阅 IANA MIME 类型，获得标准 MIME 类型的完整列表。

2)align : left right top middle bottom (HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image"))

3)alt : 定义输入图像输入的替代文本。 (只针对type="image"）

4）autocomplete(New)： autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能

所有主流浏览器都支持 autocomplete 属性。

提示：在某些浏览器中，您可能需要手动启用自动完成功能（在浏览器菜单的"参数设置"中进行设置）。

<!--启用自动完成功能的 HTML 表单（其中一个输入字段禁用了自动完成）-->
<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

6)autofocus(New):属性规定当页面加载时 <input> 元素应该自动获得焦点

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 autofocus 属性。

注意：Internet Explorer 9 及之前的版本不支持 <input> 标签的 autofocus 属性。

<!-- 设置 "First name" 输入字段在页面加载时自动获得焦点：-->
<form action="demo-form.php">
 First name: <input type="text" name="fname" autofocus><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit">
</form>

7)checked: checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")

<formaction="demo-form.php" method="get">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked>I have a car<br>
<input type="submit" value="提交">
</form>

8)disabled: disabled 属性规定应该禁用的 <input> 元素

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname" disabled><br>
  <input type="submit" value="提交">
</form>

9)form(New): form 属性规定 <input> 元素所属的一个或多个表单

除了 Internet Explorer，几乎所有的主流浏览器都支持 form 属性。 IE不支持form属性

<form action="/statics/demosource/demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
<p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p>

Last name: <input type="text" name="lname" form="form1">
<p><b>注意:</b> IE不支持form属性</p>

10)formaction(New): 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 都支持 formaction 属性。

注意：Internet Explorer 9 及之前的版本不支持 <input> 标签的 formaction 属性。

<!--带有两个提交按钮的 HTML 表单（不同的 action 值）： -->
<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo_admin.php" value="以管理员提交">
</form>

11)formenctype(New):属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 formenctype 属性。

注意：Internet Explorer 9 及之前的版本不支持 <input> 标签的 formenctype 属性。

<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="/statics/demosource/demo-admin.php" value="以管理员提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持 input 标签的 formaction 属性。</p>

12)formmethod(New): 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 formmethod 属性。

注意：Internet Explorer 9 及之前的版本不支持 <input> 标签的 formmethod 属性。

<!--带有两个提交按钮的 HTML 表单（不同的 action 值）-->
<form action="demo-form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

13)formnovalidate(New) :formnovalidate 属性覆盖 <form> 元素的 novalidate 属性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 formnovalidate 属性。

注意：Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 formnovalidate 属性。

<!--带有两个提交按钮的表单（一个进行验证，另一个不进行验证）-->
<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>

14)formtarget(New) :规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 formtarget 属性。

注意：Internet Explorer 9 及之前的版本不支持 <input> 标签的 formtarget 属性。

_blank _self _parent_ top framename

15)height 和 width :规定 <input>元素的高度和宽度。(只针对type="image")

16）list(New)：属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 list 属性。

注意：Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 list 属性

<!--带有 <datalist> 中的预定义值的 <input> 元素-->
<input list="browsers">

<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Google Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

注意: Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。

17max(New) min(New) :属性规定 <input>元素的最大，最小值

Internet Explorer 10、Opera、Chrome 和 Safari 支持 max 属性。

注意：Firefox 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 max 属性。

注意：由于 Internet Explorer 10 不支持这些 input 类型，max 属性将不适用于 IE 10 中的 date 和 time。

<form action="demo-form.php">

  输入 1980-01-01 之前的日期:
  <input type="date" name="bday" max="1979-12-31">

  输入 2000-01-01 之后的日期:
  <input type="date" name="bday" min="2000-01-02">

  数量（在1和5之间）:
  <input type="number" name="quantity" min="1" max="5">

  <input type="submit">

</form>

18）maxlength：属性规定 <input> 元素中允许的最大字符数。

19）multiple(New)：属性规定允许用户输入到 <input> 元素的多个值

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 multiple 属性。

注意：Internet Explorer 9 及之前的版本不支持 <input> 标签的 multiple 属性

<!--可接受多个值的文件上传字段-->
<form action="demo-form.php">
 选择图片: <input type="file" name="img" multiple>
 <input type="submit">
</form>

20)name: name 属性规定 <input> 元素的名称

21pattern(New): pattern 属性规定用于验证 <input> 元素的值的正则表达式

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。

注意：Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 pattern 属性

<!--只能包含三个字母的输入字段（不允许数字或特殊字符)-->
<form action="demo-form.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}"title="Three letter country code">
<input type="submit">
</form>

22)placeholder(New):placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。

注意：Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 pattern 属性

<form action="/statics/demosource/demo-form.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="提交">
</form>

23)readonly:readonly 属性规定输入字段是只读的

<form action="demo-form.php">
  Country: <input type="text" name="country" value="Norway" readonly><br>
  <input type="submit" value="提交">
</form>

24)required(New): 属性规定必需在提交表单之前填写输入字段

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 required 属性。

注意：Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 属性的 required 属性。

<form action="demo-form.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>

25)size :size 属性规定以字符数计的 <input> 元素的可见宽度

26)src:src 属性规定显示为提交按钮的图像的 URL。 (只针对type="image")

<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  <input type="image" src="/statics/images/submit.gif" alt="Submit" width="48" height="48">
</form>

<p>点击图片，输入内容将被发送到服务器的“demo_form.php”页面。</p>
<p><b>注意:</b>如果 type 属性设置为 image，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。</p>

27)setpstep(New) 属性规定 <input> 元素的合法数字间隔:

Internet Explorer 10、Opera、Chrome 和 Safari 支持 step 属性。

注意：Firefox 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 step 属性

28)type:type 属性规定要显示的 <input> 元素的类型(默认类型是：text。) 以下 input 类型是 HTML5 中的新类型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

属性值(注意: 某些浏览器可能不支持带New的 Type，详见：https://www.w3cschool.cn/htmltags/att-input-type.html）

值	描述
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
color New	定义拾色器。
date New	定义 date 控件（包括年、月、日，不包括时间）。
datetime New	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local New	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email New	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
month New	定义 month 和 year 控件（不带时区）。
number New	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
range New	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
search New	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
tel New	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
time New	定义用于输入时间的控件（不带时区）。
url New	定义用于输入 URL 的字段。
week New	定义 week 和 year 控件（不带时区）。

<!--button-->
<form>
<input type="button" value="点我" onclick="msg()">
</form>

<!--checkbox-->
form action="/statics/demosource/demo-form.php">
  <input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
  <input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
  <input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>
  <input type="submit" value="提交">
</form>

<!--color-->
<form action="/statics/demosource/demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

<!--date-->
<form action="/statics/demosource/demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

<!--datetime-->
<form action="/statics/demosource/demo-form.php">
  生日 (日期和时间): <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

<!--datetime-local-->
<form action="/statics/demosource/demo-form.php">
  生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

<!--email-->
<form action="/statics/demosource/demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>

<!--file-->
<form action="/statics/demosource/demo-form.php">
  选择一个文件: <input type="file" name="img">
  <input type="submit">
</form>

<!--hidden-->
<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  <input type="hidden" name="country" value="Norway">
  <input type="submit" value="提交">
</form>

<p>注意隐藏字段用户是看不到的。</p>

<!--image-->
<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="/statics/images/submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>注意:</b> 点击激活图片按钮 input type="image" 会发送  X 和 Y 坐标到服务端。</p>

<!--month-->
<form action="/statics/demosource/demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

<!--number-->
<form action="/statics/demosource/demo-form.php">
  数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。

<!--password-->
<form action="/statics/demosource/demo-form.php">
  Email: <input type="text" name="email"><br>
  Password: <input type="password" name="pwd" maxlength="8"><br>
  <input type="submit">
</form>

<!--radio 允许用户在一定数量的选择中选取一个选项：-->

<form action="/statics/demosource/demo-form.php">
  <input type="radio" name="gender" value="女"> 女<br>
  <input type="submit" value="提交">
</form>

<!--range-->
<form action="/statics/demosource/demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>


<!--reset  定义重置按钮（重置所有表单值为默认值）-->
<form action="/statics/demosource/demo-form.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="重置">
  <input type="submit" value="提交">
</form>

<p>点击重置按钮重新设置表单。</p>

<!--search-->
<form action="/statics/demosource/demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>

<!--submit-->

form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<!--tel-->
<form action="/statics/demosource/demo-form.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>
<!--text-->
<form action="/statics/demosource/demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<!--time-->
<form action="/statics/demosource/demo-form.php">
  选择时间: <input type="time" name="usr_time">
  <input type="submit">
</form>

<!--url-->
<form action="/statics/demosource/demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

<!--week-->

<form action="/statics/demosource/demo-form.php">
  选择周: <input type="week" name="year_week">
  <input type="submit">
</form>

29)value:指定 <input> 元素 value 的值。

<img> 　图片标签 <img src =“” width =“104” height=“142” alt =“test” title =“show”>
img元素是自关闭元素，不需要结束标签；alt 如果图片加载失败会显示；title 鼠标放上去会显示。

<keygen>（New）:定义了表单的密钥对生成器字段（<keygen> 标签已经从 Web 标准中删除）

Firefox、Opera、Chrome 和 Safari 6 都支持 <keygen> 标签。
注意: Internet Explorer 不支持 keygen 标签。

<form action="/statics/demosource/demo-form.php" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

其他详见：https://www.w3cschool.cn/htmltags/tag-keygen.html

<label>：标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验
```
<form action="/statics/demosource/demo-form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>
```
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。

如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

for 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
属性1）for：规定 label 与哪个表单元素绑定

2)form:规定 label 字段所属的一个或多个表单:详见<input>:标签的form属性
<legend>：定义了 <fieldset> 元素的标题，详见<fieldset>标签

<link> 标签定义了文档与外部资源之间的关系。

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

<map> <map> 标签可以和 <area> 元素一起使用，

<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.gif">
<area shape="circle" coords="90,58,3" alt="Mercury" href="merglobe.gif">
<area shape="circle" coords="124,58,8" alt="Venus" href="venglobe.gif">
</map>

x1,y1,x2,y2           如果 shape 属性设置为 "rect"，则该值规定矩形左上角和右下角的坐标。
x,y,radius            如果 shape 属性设置为 "circ"，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,..,xn,yn  如果 shape 属性设置为 "poly"，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

map 中的 name属性对应img中的 usemap属性（需要加上#），area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

default 规定全部区域。
rect    定义矩形区域。
circ    定义圆形。
poly    定义多边形区域。

<meat> 描述HTML 的描述，关键词，作者，字符集等的标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
<meta name="description" content="免费web教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="W3Cschool">

<meta http-equiv="refresh" content="30"><!--每30秒钟刷新当前页面-->
<meta charset="UTF-8">
</head>
<body>

<p>所有 meta 标签显示在 head 部分...</p>

</body>
</html>

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
```
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
```
<object>：<object> 标签可以表示一个外部资源，可以将其视为一个映像、一个嵌套的浏览上下文，或者一个由插件处理的资源。
```
<object width="400" height="400" data="/statics/demosource/helloworld.swf" >
</object>
```
HTML 助手（插件）
```
辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。
辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。
使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。
插件可以通过 <object> 标签或者 <embed> 标签添加在页面中。object 和 embed 元素都通过添加对浏览器不直接支持的插件的支持来扩展浏览器的功能。 
```
我们可以使用 <video> 和 <audio> 标签来显示视频和音频

<object> 元素

<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。

浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。

而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。

所有主流浏览器都支持 <object> 标签。

<object> 元素定义了在 HTML 文档中嵌入的对象。

<object> 元素具有局部属性:data，type，height，width，usemap，name，form。

该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

<object> 元素同样可用于包含HTML文件：
```
<object width="100%" height="500px" data="/statics/demosource/snippet.html"></object>
```
或者插入一张图片:
```
<object data="/statics/images/w3c/logo.png"></object>
```
<embed> 元素

所有主流浏览器都支持 <embed> 元素。<embed> 元素实现与 <object> 元素相同的结果。
```
<embed width="400" height="50" src="/statics/demosource/bookmark.swf">
```
详见：<embed>标签。注意 <embed> 元素没有关闭标签。不能使用替代文本。<embed> 元素同样可用于包含 HTML 文件或者一张图片

属性：1）data：规定对象使用的资源的 URL。

2）form（New）：规定对象所属的一个或多个表单(几乎所有的主流浏览器都不支持这一属性）

3）height，width，name；

4）type：规定 data 属性中规定的数据的 MIME 类型。
```
<object width="400" height="400" data="/statics/demosource/helloworld.swf" type="application/x-shockwave-flash">
</object>
```
请参阅IANA MIME 类型，获得标准 MIME 类型的完整列表： https://www.iana.org/assignments/media-types/media-types.xhtml

5）usemap：规定与对象一同使用的客户端图像映射的名称
```
<object data="/statics/images/course/planets.gif" width="145" height="126" usemap="#planetmap"></object>

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>

<p><b>注意:</b>除了 Chrome 和 Safari，其他主流浏览器都支持 usemap 属性。</p>
 
```

<option>：<option> 标签用于定义包含在<select>、<optgroup> 或 <datalist> 元素中的项。

属性：1）disabled：规定此选项应在首次加载时被禁用；

2）除了 Firefox，其他主流浏览器都支持 label 属性。

注意：Internet Explorer 7 及之前的版本不支持 <option> 标签的 label 属性

<select>
<option label="Volvo">Volvo (Latin for "I roll")</option>
<option label="Saab">Saab (Swedish Aeroplane AB)</option>
<option label="Mercedes">Mercedes (Mercedes-Benz)</option>
<option label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
</select>

3）selected：规定选项（在首次显示在列表中时）表现为选中状态

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

4）value：定义送往服务器的选项值

<optgroup>：用于对 <select> 元素所提供的选项进行分组。当您使用一个较长的选项列表时，对相关的选项进行组合会使处理更加容易。

<select> 
  <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
  </optgroup> 
  <optgroup label="German Cars"> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
  </optgroup> 
</select>

属性1）disabled：规定禁用该选项组

2）label：为选项组规定描述

<output>（New）：定义一个计算结果

Firefox、Opera、Chrome 和 Safari 浏览器都支持 <output> 标签。

注意:Internet Explorer 浏览器不支持 <output> 标签。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

属性：1）for：描述计算中使用的元素与计算结果之间的关系

2）form：定义输入字段所属的一个或多个表单
3）name：定义对象的唯一名称（表单提交时使用）

<p>　　段落标签
<script> 可用在head或者body中
<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件（注释：如果使用 "src" 属性，则 <script> 元素必须是空的）

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：
```
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body>

<script>
document.write("Hello World!")
</script> 

</body>
</html>
```
<noscript>

标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
```
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
```
```
<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">
JavaScript can react to events. Like the click of a button.
</p>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>
```
<span> 可用作文本的容器

<select> 用来创建下拉列表。

<select>
  <option value="volvo" style="display:none">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

可以通过 <optgroup> 标签把相关的选项组合在一起：

<select> 
  <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
  </optgroup> 
  <optgroup label="German Cars"> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
  </optgroup> 
</select>

属性 1）autofocus，disabled，form，multiple，name，required，用法同<input>的属性
2）size：规定下拉列表中可见选项的数目。

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<style> 样式标签定义了HTML文档的样式文件引用地址，在<style> 元素中你需要指定样式文件来渲染HTML文档:

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

1)style="text-decoration:none;" 链接去除下划线

2)style="background-color:green;” 背景色

3)style="font-family:arial;color:red;font-size:20px;" 字体

4)style="text-align:center;" 对齐方式

<table> 表格标签

  <table>…</table>：定义表格
  <th>…</th>：定义表格的标题栏（文字加粗）
  <tr>…</tr>：定义表格的行
  <td>…</td>：定义表格的列

<table border="1">
<caption>Monthly</caption>
<colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>

<tr>
<th>姓名</th>
<th>编号</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>

1.如果不定义边框border属性，表格将不显示边框。
2.表格的表头使用 <th> 标签进行定义,表格的表头属性主要是一些公共属性，如：align、dir、width、height。
3.<caption>Monthly</caption>: 标签表示 HTML 表格的标题
4.<colgroup> 标签用于表示 HTML 的表格列组，定义了表中的一组列表。只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。
5.<col> 标签 span number 规定列组应该横跨的列数。详见：https://www.w3cschool.cn/htmltags/tag-colgroup.html

6. <thead> 定义表格的页眉

<tbody> 定义表格的主体

<tfoot>定义表格的页脚

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

<p>提示: thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。</p>

</body>
</html>

<textarea> 标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

属性：1）autofocus，disabled，form，name，placeholder，readonly，required：详见<Input>标签的属性

2）cols，rows：规定文本区域内可见的列数和行数

3）maxlength （New）：规定文本区域允许的最大字符数

Internet Explorer 10、Firefox、Chrome 和 Safari 支持 maxlength 属性。

注意：Opera 或者 Internet Explorer 9 及之前的版本不支持 <textarea> 标签的 maxlength 属性。

除了 Internet Explorer 和 Opera，其他主流浏览器都支持 maxlength 属性。

4）wrap（New）：规定当提交表单时，文本区域中的文本应该怎样换行（hard，soft）所有主流浏览器都支持 wrap 属性

<form action="demo-form.php">
<textarea rows="2" cols="20" name="usrtxt" wrap="hard">
w3cschoolW3Cschool教程提供了最全的web技术教程。
</textarea>
<input type="submit">
</form>

值	描述
soft	在表单提交时，textarea 中的文本不换行。默认。
hard	在表单提交时，textarea 中的文本换行（包含换行符）。当使用 "hard" 时，必须指定 cols 属性。

<ul> 无序列表，style可以定义不同类型 style="list-style-type:disc":实心圆；style="list-style-type:circle"：空心圆；style="list-style-type:square"方块

<ul style="list-style-type:circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

扩展: 有序标签： start 定义序列的开始号；type 定义类型：A,a,I.i,1(默认为数字型) ；reversed：倒序

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<ol start="50" reversed>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

扩展:自定义标签：

<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

<video> 将视频内容嵌入到HTML文档中

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <video> 标签。

<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4"  type="video/mp4">
  <source src="/statics/demosource/movie.ogg"  type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

<video> 标签定义视频，比如电影片段或其他视频流。

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从 Opera 25 版本开始	YES	YES

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

音频格式的 MIME 类型

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

：HTML5 中的新属性。

属性	值	描述
autoplay New	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls New	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height New	pixels	设置视频播放器的高度。
loop New	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
mutedN ew	muted	如果出现该属性，视频的音频输出为静音。
poster New	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload New	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。（预览图像）
src New	URL	要播放的视频的 URL。
width New	pixels	设置视频播放器的宽度。

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在 HTML 中播放视频的方法有很多种。

可以使用 <embed> 标签、<object> 标签以及 <video> 标签（HTML 5中启用）。

在 HTML 中播放视频并不容易！

您需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

A.使用 <embed> 标签

下面的 HTML 代码显示嵌入网页的 Flash 视频：

<embed src="intro.swf" height="200" width="200">

问题

HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
B.使用 <object> 标签

<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 片段显示嵌入网页的一段 Flash 视频
```
<object data="intro.swf" height="200" width="200"></object>
```
问题:
- 如果浏览器不支持 Flash，将无法播放视频。
- iPad 和 iPhone 不能显示 Flash 视频。
- 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
  C.使用 HTML5 <video> 元素
  
  HTML5 <video> 标签定义了一个视频或者影片.
  
  <video> 元素在所有现代浏览器中都支持。
  
  以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：
```
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
```
  Tip:
  
  ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
  mp4：带有 H.264 视频编码和 AAC 音频编码的 mp4 文件
  webm：带有 VP8 视频编码和 Vorbis 音频编码的 webm 文件
  
  问题:
  - 您必须把视频转换为很多不同的格式。
  - <video> 元素在老式浏览器中无效
    D.最好的 HTML 解决方法
    
    以下实例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。
```

<video width="320" height="240" 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>
```
    问题:
    - 您必须把视频转换为很多不同的格式
      E.优酷解决方案
      
      在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。
      
      如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：
      <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400"
      
      type="application/x-shockwave-flash"> </embed>
      F.使用超链接
      
      如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
      
      以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"，比如 Windows Media Player 来播放这个 AVI 文件：
      <a href="intro.swf">Play a video file</a>

posted @ 2018-06-19 18:10 Rooker 阅读(415) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

豆豆DE思念

不走寻常路(分类整理中。。。。。。）

2.HTML标签

<a> 链接标签

<audio>: HTML5 提供的用来播放音频文件的。(<video> 是用来播放视频的）

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。

签定义及使用说明

可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

属性

问题:

最好的 HTML 解决方法：下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式

使用超链接

<b> 加粗标签

<button>： 标签用来设置 HTML 中的按钮。

属性1）autofocus，disabled，form，formaction formenctype formmethod formnovalidate formtarget （type="submit" 配合使用), name

3)value:规定按钮的初始值。可由脚本进行修改

<base> 在<head>中间<title> 后，定义了页面上所有链接的默认url

<br>或<br/> 换行标签

<c:import> 标签

<c:import> 标签

属性

实例演示

<c:out> 标签

<c:out> 标签

属性

程序示例

<datalist>(New) <datalist> 标签需要与 <input> 标签配合使用，用来表示可选的列表。

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

所有主流浏览器都支持 <embed> 标签。

<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。

属性1)height，width，type：详见<object>;

2)src:规定被嵌入内容的 URL

<fieldset>:对表单中的相关元素进行分组：

所有主流浏览器都支持 <fieldset> 标签。

1) accept 属性 HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的）

<h1> 标题标签 (h1到h6,超过6无效果)

<hr/> 水平线

4）autocomplete(New)： autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能

除了 Internet Explorer，几乎所有的主流浏览器都支持 form 属性。 IE不支持form属性

22)placeholder(New):placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。

属性值(注意: 某些浏览器可能不支持带New的 Type，详见：https://www.w3cschool.cn/htmltags/att-input-type.html）

<img> 图片标签 <img src =“” width =“104” height=“142” alt =“test” title =“show”> img元素是自关闭元素，不需要结束标签 ；alt 如果图片加载失败会显示；title 鼠标放上去会显示。

<label>：标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验

<legend>：定义了 <fieldset> 元素的标题，详见<fieldset>标签

<link> 标签定义了文档与外部资源之间的关系。

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<object>：<object> 标签可以表示一个外部资源，可以将其视为一个映像、一个嵌套的浏览上下文，或者一个由插件处理的资源。

HTML 助手（插件）

<object> 元素

2）form（New）：规定对象所属的一个或多个表单(几乎所有的主流浏览器都不支持这一属性）

4）type：规定 data 属性中规定的数据的 MIME 类型。

5）usemap：规定与对象一同使用的客户端图像映射的名称

<option>：<option> 标签用于定义包含在<select>、<optgroup> 或 <datalist> 元素中的项。

<optgroup>：用于对 <select> 元素所提供的选项进行分组。当您使用一个较长的选项列表时，对相关的选项进行组合会使处理更加容易。

<noscript>

<style> 样式标签 定义了HTML文档的样式文件引用地址，在<style> 元素中你需要指定样式文件来渲染HTML文档:

<textarea> 标签定义一个多行的文本输入控件。

3）maxlength （New）：规定文本区域允许的最大字符数

<video> 将视频内容嵌入到HTML文档中

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <video> 标签。

音频格式的 MIME 类型

可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

A.使用 <embed> 标签

B.使用 <object> 标签

C.使用 HTML5 <video> 元素

D.最好的 HTML 解决方法

E.优酷解决方案

F.使用超链接

公告

<b>　　加粗标签

<button>：标签用来设置 HTML 中的按钮。

<br>或<br/>　　换行标签

<datalist>(New) 　<datalist> 标签需要与 <input> 标签配合使用，用来表示可选的列表。

<h1>　　标题标签 (h1到h6,超过6无效果)

<img> 　图片标签 <img src =“” width =“104” height=“142” alt =“test” title =“show”>
img元素是自关闭元素，不需要结束标签；alt 如果图片加载失败会显示；title 鼠标放上去会显示。

<style> 样式标签定义了HTML文档的样式文件引用地址，在<style> 元素中你需要指定样式文件来渲染HTML文档: