XHTML、表单、HTML5、图形、媒体、API

XHTML

一、简介

1.什么是XHTML?

(1)XHTML 是以 XML 格式编写的 HTML

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

(3)XHTML 与 HTML 4.01 几乎是相同的，XHTML 是更严格更纯净的 HTML 版本

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

2.为什么使用XHTML？

XML 是一种必须正确标记且格式良好的标记语言,XML与HTML结合为XHTML，使得HTML的代码格式更加规范

3.XHTML与HTML的区别

(1)文档结构：

XHTMLDOCTYPE 是强制性的

中的 XMLnamespace 属性是强制性的

、、

...

5.如何从HTML转换为XHTML

(1)向每张页面的第一行添加 XHTML

(2)向每张页面的 html 元素添加 xmlns 属性

(3)把所有元素名改为小写

(4)关闭所有空元素

(5)把所有属性名改为小写

(6)为所有属性值加引号

二、XHTML元素

1.XHTML元素语法规则

(1)XHTML 元素必须正确嵌套

(2)XHTML 元素必须始终关闭

(3)XHTML 元素必须小写

(4)XHTML 文档必须有一个根元素

2.XHTML 元素必须正确嵌套

在 HTML 中，某些元素可以不正确地彼此嵌套在一起，就像这样：

Thistext is bold and italic

在 XHTML 中，所有元素必须正确地彼此嵌套，就像这样：

Thistext is bold and italic

3.XHTML元素必须始终关闭

这是错误的：

This is aparagraph

This isanother paragraph

这是正确的：

This is aparagraph

This isanother paragraph

4.空元素也必须关闭

这是错误的：

A break:

A horizontal rule:

---

An image:

这是正确的：

A break:

A horizontal rule:

---

An image:

5.XHTML 元素必须小写

这是错误的：

This is aparagraph

这是正确的：

This is aparagraph

三、XHTML属性

1.XHTML属性语法规则

(1)XHTML 属性必须使用小写

(2)XHTML 属性值必须用引号包围

(3)XHTML 属性最小化也是禁止的

2.XHTML 属性必须使用小写

这是错误的：

这是正确的：
 
   
3. XHTML 属性值必须用引号包围
这是错误的：
 
   
 
  
这是正确的：
 
   
 
  
4.禁止属性简写
这是错误的：
 
   
 
   
 
   
 
   
 
  
这是正确的：
 
   
 
   
 
   
 
   
 
  
 
   
 
  
 
   
 
  
 
   
HTML 表单
 
   
一、HTML表单
 
   
1.什么是HTML表单？
 
   
HTML 表单用于搜集不同类型的用户输入
 
   
2. 
 元素及其属性
 
   
(1) 元素定义 HTML 表单
 
   
 
    
 
    
 .
 
    
form elements
 
    
 .
 
    
 
   
 
   
(2)
的属性：
 
   
 
    
 
    
ectype="application/x-www-form-urlencoded"autocomplete="off" novalidate>
 
    
.
 
    
form elements
 
    
 .
 
    
 
 
   
 
  
 
   
 
    
 
     
 
      
属性
 
      
描述
 
     
 
     
 
      
accept-charset
 
      
规定在被提交表单中使用的字符集（默认：页面字符集）。
 
     
 
     
 
      
action
 
      
规定向何处提交表单的地址（URL）（提交页面）。
 
     
 
     
 
      
autocomplete
 
      
规定浏览器应该自动完成表单（默认：开启）。
 
     
 
     
 
      
enctype
 
      
规定被提交数据的编码（默认：url-encoded）。
 
     
 
     
 
      
method
 
      
规定在提交表单时所用的 HTTP 方法（默认：GET）。
 
     
 
     
 
      
name
 
      
规定识别表单的名称（对于 DOM 使用：document.forms.name）。
 
     
 
     
 
      
novalidate
 
      
规定浏览器不验证表单。
 
     
 
     
 
      
target
 
      
规定 action 属性中地址的目标（默认：_self）。
 
     
 
    
 
   
 
  

3.HTML 表单包含表单元素

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

4. 元素

元素是最重要的表单元素。元素有很多形态，根据不同的 type 属性

这是本章中使用的类型：

类型	描述
text	定义常规文本输入
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

5. 文本输入

定义用于文本输入的单行输入字段：

Firstname:

Lastname:

请注意表单本身是不可见的。

同时请注意文本字段的默认宽度是 20 个字符。

6. 单选按钮输入

定义单选按钮：

Male

Female

7. 提交按钮

Firstname:

Lastname:

如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。

8.form元素的action属性

action 属性定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。在上面的例子中，指定了某个服务器脚本来处理被提交表单：

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

9.form的method属性

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

或：

(1) 何时使用 GET？

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，当您使用 GET 时，表单数据在页面地址栏中是可见的

注释：GET 最适合少量数据的提交。浏览器会设定容量限制

(2) 何时使用 POST？

如果表单正在更新数据，或者包含敏感信息（例如密码），POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的

10.name属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。本例只会提交 "Last name" 输入字段：

Firstname:

Lastname:

name="lastname"value="Mouse">

11. 用

组合表单数据

元素组合表单中的相关数据，

元素为

元素定义标题：

Personalinformation:

Firstname:

Lastname:

二、HTML表单元素

1.元素

最重要的表单元素是 元素。 元素根据不同的 type 属性，可以变化为多种形态。后面着重讲解所有 HTML 输入类型

2. 元素（下拉列表）

元素定义下拉列表：

Volvo

Saab

Fiat

Audi

元素定义待选择的选项，列表通常会把首个选项显示为被选选项。您能够通过添加 selected 属性来定义预定义选项

您可以通过 selected 属性预选择某些选项。

Volvo

Saab

Fiat

Audi

3. 元素</span></p> <p><span style="color:#FF0000;"><textarea></span><span style="color:#FF0000;">元素定义多行输入字段（文本域）：</span></p> <p><span style="color:#FF0000;"><textareaname="message" rows="10" cols="30"></span></p> <p><span style="font-family:'等线';color:#000000;">The cat wasplaying in the garden.</span></p> <p><span style="color:#FF0000;">

4. 元素

元素定义可点击的按钮：

点击我！

5.HTML5表单元素

HTML5 增加了如下表单元素：

6. HTML5

元素为元素规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表，元素的 list 属性必须引用

list="browsers" name="browser">

 

 

 

 

 

三、HTML 输入类型

1.text类型

定义供文本输入的单行输入字段：

Firstname:

Lastname:

2.password类型

定义密码字段：

Username:

Userpassword:

3.submit类型

定义提交表单数据至表单处理程序的按钮，表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面，在表单的 action 属性中规定表单处理程序：

Firstname:

Lastname:

如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本：

Firstname:

Lastname:

4.radio类型

定义单选按钮：

Male

Female

5.checkbox类型

定义复选框，复选框允许用户在有限数量的选项中选择零个或多个选项：

Ihave a bike

Ihave a car

6.button类型

定义按钮：

ClickMe!

7.HTML5输入类型

HTML5增加了多个输入类型：

color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

8.number类型

用于应该包含数字值的输入字段。您能够对数字做出限制。根据浏览器支持，限制可应用到输入字段

根据浏览器支持：

数值约束会应用到输入字段中。

  数量（1 到 5 之间）：

 

 

注释：IE9 及早期版本不支持 type="number"。

9.输入限制

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

例：

  Quantity:

  

   min="0" max="100"step="10" value="30">

 

10.data类型

用于应该包含日期的输入字段。根据浏览器支持，日期选择器会出现输入字段中

根据浏览器支持：

当您填写输入字段时会弹出日期选择器。

  生日：

 

 

注释：Firefox 或者

Internet Explorer11 以及更早版本不支持type="date"。

您可以向输入添加限制：

请输入1980-01-01 之前的日期：

请输入 2000-01-01之后的日期：

11.color类型

用于应该包含颜色的输入字段。根据浏览器支持，颜色选择器会出现输入字段中

  Select your favorite color:

 

 

12.range类型

用于应该包含一定范围内的值的输入字段。根据浏览器支持，输入字段能够显示为滑块控件：

根据浏览器支持：

输入类型"range" 可显示为滑动控件。

  Points:

 

 

注释：IE9 及早期版本不支持 type="range"。

13.month类型

允许用户选择月份和年份。根据浏览器支持，日期选择器会出现输入字段中：

根据浏览器支持：

当您填写输入字段时会弹出日期选择器。

  生日（月和年）：

 

 

注释：Firefox 或者

Internet Explorer11 以及更早版本不支持type="month"。

14.week类型

允许用户选择周和年。根据浏览器支持，日期选择器会出现输入字段中

  Select a week:

 

 

 

15. datetime-local

允许用户选择日期和时间（无时区）。根据浏览器支持，日期选择器会出现输入字段中：

根据浏览器支持：

当您填写输入字段时会弹出日期选择器。

  生日（日期和时间）：

 

 

注释：Firefox 或者

Internet Explorer 不支持 type="datetime-local"。

16.email类型

用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入

17.search类型

用于搜索字段（搜索字段的表现类似常规文本字段）

  搜索谷歌：

 

 

18.tel类型

用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型

  Telephone:

 

 

19.url类型

用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入

  请添加您的首页：

 

 

四、HTML 输入属性

1.value属性

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

First name:

value="John">

Lastname:

2. readonly 属性

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

Firstname:

readonly>

Lastname:

readonly属性不需要值。它等同于readonly="readonly"

3.disabled属性

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

Firstname:

disabled>

Lastname:

disabled属性不需要值。它等同于disabled="disabled"

4. size属性

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

Firstname:

size="40">

Lastname:

5. maxlength 属性

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

Firstname:

maxlength="10">

Lastname:

如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码

6. HTML5 属性

HTML5 为 增加了如下属性：

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、width、list、min、max、multiple、pattern (regexp)、placeholder、required、step

并为

增加如需属性：

autocomplete

novalidate

7. autocomplete 属性（）

autocomplete属性规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值，autocomplete 属性适用于 以及如下 类型：text、search、url、tel、email、password、datepickers、range 以及color

提示：您可以把表单的autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。

autocomplete="on">

Firstname:

Last name:

E-mail: autocomplete="off"/>

填写并提交表单，然后重新加载该页面，看看自动完成功能是如何工作的。

注意，表单的自动完成功能是打开的，但是 e-mail 字段的自动完成功能是关闭的。

8. novalidate 属性（

）

novalidate 属性属于 属性。如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证

novalidate="novalidate">

E-mail:

若不设置，则：

9. autofocus 属性

autofocus属性是布尔属性。如果设置，则规定当页面加载时 元素应该自动获得焦点

  First name: autofocus>

  Last name:

 

10. form 属性

form 属性规定 > 元素所属的一个或多个表单

提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表

First name:

下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。

Last name:

 

11. formaction 属性

formaction属性规定当提交表单时处理该输入控件的文件的 URL。formaction属性覆盖

元素的 action 属性。formaction 属性适用于 type="submit" 以及 type="image"

First name:

Last name:

formaction="/example/html5/demo_admin.asp"value="以管理员身份提交"/>

12. formenctype 属性

formenctype属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。formenctype 属性覆盖

元素的 enctype 属性。formenctype 属性适用于 type="submit" 以及 type="image"

  First name:

formenctype="multipart/form-data"value="以Multipart/form-data 编码提交" />

13. formmethod 属性

formmethod属性定义用以向 actionURL 发送表单数据（form-data）的 HTTP 方法。formmethod 属性覆盖

元素的 method 属性。formmethod 属性适用于 type="submit" 以及 type="image"

  First name:

  Last name:

formmethod="post" formaction="/example/html5/demo_post.asp"value="使用 POST 提交" />

14. formnovalidate 属性

novalidate属性是布尔属性。如果设置，则规定在提交表单时不对 > 元素进行验证。formnovalidate 属性覆盖

元素的 novalidate 属性。

formnovalidate 属性可用于 type="submit"

E-mail:

formnovalidate="formnovalidate"value="进行没有验证的提交"/>

15. formtarget 属性

formtarget属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。

formtarget 属性会覆盖

元素的 target 属性。formtarget 属性可与 type="submit" 和 type="image"使用

  First name:

  Last name:

formtarget="_blank"value="提交到新窗口/选项卡" />

16. height 和 width 属性

height 和 width 属性规定 元素的高度和宽度。height 和 width 属性仅用于ge">。请始终规定图像的尺寸，如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁

  First name:

  Last name:

  width="128" height="128"/>

17. list 属性

list 属性引用的 元素中包含了 元素的预定义选项

     

     

     

18. min 和 max 属性

min 和 max 属性规定 元素的最小值和最大值。min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week

Points: min="0"max="10" />

19. multiple 属性

multiple属性是布尔属性。如果设置，则规定允许用户在 元素中输入一个以上的值。multiple 属性适用于以下输入类型：email 和 file

选择图片：multiple="multiple" />

20. placeholder 属性

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

placeholder="SearchW3School" />

21. required 属性

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

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

Name: required="required"/>

22. step 属性

step 属性规定 > 元素的合法数字间隔。示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。

提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。

step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week

step="3" />