XHTML
- XHTML(可扩展超文本标记语言) 是以 XML 格式编写的 HTML
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
通过结合 XML 和 HTML 的长处,开发出了 XHTML
与HTML的区别有:
文档结构
1. XHTML DOCTYPE declaration 是强制性的
2. <html> 中的 XML namespace 属性是强制性的
3. <html> <head> <title> <body> 也是强制性的
元素语法
4. XHTML元素必须正确嵌套
5. 必须始终关闭
6. 必须小写
7. XHTML必须有一个根元素
属性语法
8. XHTML属性必须小写
9. 必须使用引号包围
10.属性最小化是禁止的
下面的例子展示了带有最少的必需标签的 XHTML 文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
......
</body>
</html>
在 XHTML 中,所有元素必须正确地彼此嵌套
<b><i>This text is bold and italic</i></b>
XHTML 元素必须始终关闭
<p>This is a paragraph</p>
<p>This is another paragraph</p>
空元素也必须关闭
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
禁止属性简写
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
这些属性在html中可以简写
XHTML quiz
- XHTML 指的是 EXtensible HyperText Markup Language
- XHTML 是一个 Web 标准
- XML 不会被 XHTML 取代
- HTML 会被 XHTML 取代
- DOCTYPE 没有关闭标签
- XHTML 中所有的元素都需要关闭
- id属性可替代下列元素的 name 属性: a、applet、frame、iframe、img 以及 map
- 在 XHTML 中不允许简写属性
- 在 XHTML 中有Strict,Transitional,Frameset三种不同的 DTD,其中Transitional最常用
- HTML 5 不是 XHTML 的升级版本
- lang 属性的正确用法
<div lang="en" xml:lang="en">Hello World!</div>
表单 forms
HTML 表单用于搜集不同类型的用户输入
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
<input> 元素是最重要的表单元素
<input> 元素有很多形态,根据不同的 type 属性
text - 定义常规文本输入
radio - 定义单选按钮输入
submit - 定义提交按钮
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
表单本身并不可见
同时要注意文本字段的默认宽度是 20 个字符
<input type="radio"> 定义单选按钮
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面
表单处理程序在表单的 action 属性中指定
<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>
action 属性定义在提交表单时执行的动作
向服务器提交表单的通常做法是使用提交按钮
通常,表单会被提交到 web 服务器上的网页
在上面的例子中,指定了某个服务器脚本来处理被提交表单
<form action="action_page.php">
如果省略 action 属性,则 action 会被设置为当前页面
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
<form action="action_page.php" method="GET">
使用 GET(默认方法)
表单提交是被动的(比如搜索引擎查询),并且没有敏感信息
使用 GET 时,表单数据在页面地址栏中是可见的
action_page.php?firstname=Mickey&lastname=Mouse
GET 最适合少量数据的提交
浏览器会设定容量限制
使用 POST
表单正在更新数据,或者包含敏感信息(例如密码)
POST 的安全性更好,因为在页面地址栏中被提交的数据是不可见的
注意:如果要正确地被提交,每个输入字段必须设置一个 name 属性
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <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><br>
<input type="submit" value="Submit"></fieldset>
</form>
HTML <form> 元素,已设置所有可能的属性
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>
Form 属性列表
属性 | 描述 |
---|---|
accept-charset | 规定被提交表单中使用的字符集(默认页面字符集) |
action | 规定向何处提交表单(URL) |
autocomplete | 规定浏览器应当自动完成表单(默认开启) |
enctype | 规定被提交数据的编码(默认: url-encoded) |
method | 规定提交表单时所用的HTTP方法(默认GET) |
name | 规定识别表单的名称(对于DOM使用:document.forms.name) |
novalidate | 规定浏览器不验证表单 |
target | 规定action属性中地址的目标(默认_self) |
表单属性 forms_attributes
action 属性定义提交表单时要执行的操作
通常当用户单击submit按钮时,表单数据将发送到服务器上的文件中
在下面的例子中de表单数据被发送到名为 "action_page.php" 的文件
该文件包含处理表单数据的服务器端脚本
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Bill"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Gates"><br><br>
<input type="submit" value="Submit">
</form>
target 属性规定提交表单后在何处显示响应
target 属性可设置以下值:
_blank - 响应显示在新的窗口或选项卡
_self - 响应显示在当前窗口(默认)
_parent - 响应显示在父框架
_top - 响应显示在窗口的整个body
framename - 响应显示在命名的iframe中
method 属性指定提交表单数据时要使用的 HTTP 方法
表单数据可以作为 URL 变量(使用 method="get")或作为 HTTP post 事务(使用 method="post")发送
GET
- 通过名/值对的形式追加表单数据到URL
- URL长度受限为2048个字符
- GET适用于非安全数据,如Google中的查询字符串
POST
- 将表单数据添加到HTTP请求的正文中
- POST没有大小限制
- 带有POST的表单无法添加书签
- 如果表单数据包含敏感信息或个人信息则务必使用POST
autocomplete 属性规定表单是否应打开自动完成功能
启用自动完成功能后,浏览器会根据用户之前输入的值自动填写值
<form action="/action_page.php" autocomplete="on">
novalidate 属性是一个布尔属性
如果已设置,它规定提交时不应验证表单数据
表单元素 form_elements
最重要的表单元素是 <input> 元素
<input> 元素根据不同的 type 属性,可以变化为多种形态
<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 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="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>