HTML：一种标记语言而不是编程语言（12.0）

最新推荐文章于 2024-04-09 17:31:38 发布

原创最新推荐文章于 2024-04-09 17:31:38 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

HTML 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了 XHTML，它是以 XML 格式编写的更严格纯净的 HTML 版本，阐述了使用 XHTML 的原因、从 HTML 转换到 XHTML 的方法，还说明了 XHTML 元素和属性的语法规则。此外，详细讲解了 HTML 表单，包括 form 元素、input 元素及表单的各种属性。

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

XHTML 简介

XHTML 是以 XML 格式编写的 HTML。

什么是 XHTML？

XHTML 指的是可扩展超文本标记语言
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML

为什么使用 XHTML？

因特网上的很多页面包含了“糟糕”的 HTML。

如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）：

<html>
    <head>
        <title>This is bad HTML</title>
    <body>
        <h1>Bad HTML
            <p>This is a paragraph
    </body>

XML 是一种必须正确标记且格式良好的标记语言。

XHTML 是作为 XML 被重新设计的 HTML。

与 HTML 相比最重要的区别：

文档结构

XHTML DOCTYPE 是强制性的
html 中的 XML namespace 属性是强制性的
html、head、title以及 body也是强制性的

元素语法

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的

html、head、title 以及body 元素也必须存在，并且必须使用 html 中的 xmlns 属性为文档规定 xml 命名空间。

如何从 HTML 转换到 XHTML

向每张页面的第一行添加 XHTML <!DOCTYPE>
向每张页面的 html 元素添加 xmlns 属性
把所有元素名改为小写
关闭所有空元素
把所有属性名改为小写
为所有属性值加引号

XHTML - 元素

XHTML 元素是以 XML 格式编写的 HTML 元素。

XHTML 元素 - 语法规则

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

XHTML 元素必须正确嵌套

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

<b><i>This text is bold and italic</b></i>

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

<b><i>This text is bold and italic</i></b>

XHTML - 属性

XHTML 属性是以 XML 格式编写的 HTML 属性。

XHTML 属性 - 语法规则

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的

禁止属性简写

这是错误的：

<input checked>
<input readonly>
<input disabled>
<option selected>

这是正确的：

<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />

HTML 表单

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

form 元素

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

form 元素定义 HTML 表单：

<form>
    .
    form elements
    .
</form>

HTML 表单包含表单元素。

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

input 元素

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

这是本章中使用的类型：

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

文本输入

input type=“text” 定义用于文本输入的单行输入字段：

实例

<!DOCTYPE html>
<html>

<body>
<form>

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

</form>

<p>注意表单本身是不可见的</p>
<p>文本字段的默认宽度是20个字符</p>
</body>

</html>

输出如下：
在这里插入图片描述

单选按钮输入

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

单选按钮允许用户在有限数量的选项中选择其中之一：

实例

<!DOCTYPE html>
<html>

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

</html>

在这里插入图片描述

提交按钮

input type=“submit” 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

实例

<!DOCTYPE html>
<html>
<body>

<form action="/demon/demon_form.asp">
    First name:<br />
    <input type="text" name="firstname" value="Bilibili">
    <br />
    Last name:<br />
    <input type="text" name="lastname" value="XueWei">
    <br /><br />
    <input type="submit" value="Submit">
    </form>
</body>
</html>

输出如下：
在这里插入图片描述

Action 属性

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

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

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

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

Method 属性

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

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

或：

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

何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当使用 GET 时，表单数据在页面地址栏中是可见的。注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。否则不会提交。

用 fieldset 组合表单数据

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

legend元素为fieldset元素定义标题。

实例

<!DOCTYPE html>
<html>
    <body>
        <form action="http://www.bilibili.com">
            <fieldset>
                <legend>Personal information：</legend>
                First name:<br />
                <input type="text" name="firstname" value="Bilibili">
                <br />
                Last name:<br />
                <input type="text" name="lastname" value="XueWei">
                <br /><br />
                <input type="submit" value="Submit">
            </fieldset>
        </form>
    </body>
</html>

输出如下：
在这里插入图片描述

HTML Form 属性

HTML form 元素，已设置所有可能的属性，是这样的：

实例

<form action="action_php" method='GET' target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
    .
    form element
    .
</form>

下面是 form 属性的列表：

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