HTML:一种标记语言而不是编程语言(12.0)

本文介绍了 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

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

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 方法(GETPOST):

<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)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值