《HTML5和CSS3快速参考》——2.2 XHTML5

简介:

本节书摘来自异步社区《HTML5和CSS3快速参考》一书中的第2章,第2.2节,作者: 【美】Sergey Mavrody 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 XHTML5

支持多种语言的HTML文档
在多语言环境下,HTML文档既是一份有效的HTML文档,也是一份有效的XHTML文档。

  • 在多语言环境下,HTML文档同时遵守HTML和XHTML的语法规则,即它所采用的语法是HTML和XHTML语法的交集。
  • 一份多语言文档能同时提供HTML和XHTML两种服务,具体取决于浏览器的支持及其MIME类型。
  • 至于是否要在HTML中选择多语言环境,则取决于具体的项目需求、浏览器的支持以及其他可能的影响。
<!--HTML4, HTML5 syntax-->
<input disabled>
<input disabled=disabled>
<!--XHTML 1.0 syntax-->
<input disabled=“disabled” />
<!--HTML4, HTML5, XHTML 1.0
conforming Polyglot syntax-->
<input disabled=“disabled” />

XHTML5中的定义操作
一份多语言版的HTML5代码基本上等同于一份XHTML文档(只要提供相应的XML MIME类型[application/xhtml+xml]即可)。总而言之,在多语言环境的HTML5文档中:

应声明HTML5 DOCTYPE/namespace。尽管HTML5已经不再需要进行DTD(Document Type Definition)了(因为其格式已经不再基于SGML了),但对于DOCTYPE,我们依然得保留一定的向后兼容性。

应具有更良好的XHTML语法。

尽管多语言版的HTML文档同时提供了HTML和XHTML两种服务,但其实际运作仍需取决于浏览器的支持以及其自身的MIME类型。单纯就理论而言,一份支持多语言的HTML5代码基本就等同于一份XHTML5文档(只要它声明了XML MIME类型:application/xhtml+xml)。总体上,对于XHTML5文档而言:

  • 如果默认编码是UTF-8的话,其XML声明(<?xml version=”1.0” encoding=”UTF-8”?>)就不是必须的。
  • 其HTML DOCTYPE,即声明也是可选的。但它在多语言版的HTML或XHTML文档中均可使用。
  • 应具有更良好的XHTML语法。
  • 应声明其XML MIME类型:application/xhtml+xml。此MIME声明在源代码中是不可见的,但它在配置浏览器处理相关HTTP头Content-Type信息时有着非常重要的作用。尽管XML MIME类型还不为IE浏览器的当前版本所支持,但该浏览器依然是可以解析XHTML文档的。
  • XHTML的默认命名空间为 xmlns=”
http://www.w3.org/1999/xhtml”>。另外,文档还支持某些辅助命名空间,如SVG、MathML、Xlink等。对我来说,这些是测试所需的,但如果你的文档中不需要用到这些命名空间,那么使用XHTML就有些杀鸡用牛刀的感觉了。当然,无论你选择的是HTML还是XHTML,本质上还是其媒体类型所决定的。

最终,一份基本的HTML5文档看上去应该是这个样子:

在这里,XML声明<?xml verstion="1.0" encoding="UTF-8" ?>并不是必须的。只要我们的默认编码是UTF-8,XHTML验证器不会在意它被忽略。

但是,我们还是强烈建议你在服务器端用HTTP Context-Type头信息来配置文档的编码,否则字符编码可能就会由每个文档自身的某一部分来决定(meta标签:)。

而这种编码声明本身就需要在一份多语言版的文档中进行。因此,如果该文档要同时适用于HTML和XHTML两种服务,编码也就默认为UTF-8。

<!DOCTYPE html>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
  <title></title>
  <meta charset=“UTF-8” />
</head>
<body>
  <svg xmlns=“http://www.w3.org/2000/svg”>
  <rect stroke=“black” fill=”blue”
x=“45px” y=“45px” width=“200px”

另外,我们还可以通过Total Validator工具(包括Firefox插件版和桌面版)对当前用户选中的项目进行XHTML5规则验证。

height=“100px” stroke-width=“2”/>
  </svg>
</body>
</html>

XHTML5的主要作用是对HTML5进行扩展,使其能运用SVG、MathML这类基于XML的技术。尽管HTML5规则已经支持了SVG和MathML这些内联技术,但目前浏览器对它们的实际支持是相当有限的。事实上,这项技术的缺点也正是它在IE上缺少足够的支持,以及其在代码要求和错误处理方面也更为烦琐。因此除非我们真的需要这些扩展,否则HTML5就已经足够了。

归根结底,HTML5与XHTML5之间的选择实际上已经落在了MIME/content类型上面,我们对于文档类型的决定已经和XHTML1 vs. HTML4时代不一样了,XHTML5 vs. HTML5时代选择本质上将取决于MIME类型,而不是DOCTYPE。

相关文章
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
|
前端开发
Foundation CSS 参考手册3
此段内容介绍了几个常用的CSS类及其功能:.left 和 .right 分别使元素向左或向右浮动;.clearfix 用于清除浮动,需添加于浮动元素的父元素上;.hide 通过设置 CSS display 属性为 none 来隐藏元素;.list-inline 可将列表项水平排列;.lead 使文本更加突出;.subheader 用于设置浅色的标题元素。
|
3月前
|
前端开发
Foundation CSS 参考手册2
本文介绍了如何使用CSS类实现文本对齐,包括基本的左、右、居中和两端对齐,以及针对不同屏幕尺寸的特定对齐方式,如小屏、中屏、大屏等,每个类别都有相应的示例供测试。
|
3月前
|
前端开发
Foundation CSS 参考手册1
Foundation CSS参考手册:Foundation框架默认使用浏览器字体大小(通常16px),移动设备为12px,字体为&quot;Helvetica Neue&quot;,行高1.5。段落底部外边距1.25rem,行高1.6。对h1至h6标题、链接、副标题、引用、加粗、斜体、缩写、键盘输入、水平线、代码片段及列表等HTML元素设置了独立样式,优化了网页显示效果。
HTML - XHTML5
在HTML中,不应使用属性简写形式。
|
3月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
3月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
180 6
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。

热门文章

最新文章