>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26313 个阅读者 刷新本主题
 * 贴子主题:  XHTML 简介 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2019-08-18 13:01:20     消息  查看  搜索  好友  邮件  复制  引用

  

HTML  - XHTML

              XHTML 是以 XML 格式编写的 HTML。            

什么是 XHTML?

  • XHTML 指的是可扩展超文本标记语言
  • XHTML 与 HTML 4.01 几乎是相同的
  • XHTML 是更严格更纯净的 HTML 版本
  • XHTML 是以 XML 应用的方式定义的 HTML
  • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
  • XHTML 得到所有主流浏览器的支持

为什么使用 XHTML?

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

     如果在浏览器中查看,下面的 HTML 代码运行起来非常正常(即使它并未遵守 HTML 规则):


< html >
< head >
< meta   charset = " utf-8 " >
< title > 这是一个不规范的 HTML </ title >
< body >
< h1 > 不规范的 HTML
< p > 这是一个段落
</ body >

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

         今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行,而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。

         所以 - 通过结合 XML 和 HTML 的长处,开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。            

与 HTML 相比最重要的区别:

文档结构

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

元素语法

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

属性语法

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

<!DOCTYPE ....>是强制性的

     XHTML 文档必须进行 XHTML 文档类型声明(XHTML DOCTYPE declaration)。

     您可以在的标签参考手册中找到完整的 XHTML 文档类型。

     <html>, <head>, <title>, 和 <body> 元素也必须存在,并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。

     下面的例子展示了带有最少的必需标签的 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 >
   < meta   charset = " utf-8 " >
   < title > 文档标题 </ title >
</ head >

< body >
文档内容
</ body >

</ html >

XHTML 元素必须合理嵌套

     在 HTML 中,一些元素可以不互相嵌套,像这样:

                                < b > < i > 粗体和斜体文本 </ b > </ i >

     在 XHTML 中,所有的元素都必须互相合理地嵌套,像这样:

                                < b > < i > 粗体和斜体文本 </ i > </ b >                            

XHTML 元素必须有关闭标签

    错误示例:

                        < p > 这是一个段落
                        < p > 这是另外一个段落

   正确示例:

                        < p > 这是一个段落 </ p >
                       < p > 这是另外一个段落 </ p >                            

空元素必须包含关闭标签

     错误示例:

分行: < br >
水平线:  < hr >
图片:  < img   src = " happy.gif "   alt = " Happy face " >

                             正确示例:

分行: < br   />
水平线:  < hr   />
图片:  < img   src = " happy.gif "   alt = " Happy face "   />                            

XHTML 元素必须是小写

             错误示例:

< BODY >
< P > 这是一个段落 </ P >
</ BODY >

                             正确示例:

< body >
< p > 这是一个段落 </ p >
</ body >                            

属性名称必须是小写

     错误示例:

                        < table   WIDTH = " 100% " >

    正确示例:

                        < table   width = " 100% " >                            

属性值必须有引号

     错误示例:

                        < table   width = 100 % >

     正确示例:

                        < table   width = " 100% " >                            

不允许属性简写

     错误示例:

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

     正确示例:

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

如何将 HTML 转换为 XHTML

  1. 添加一个 XHTML <!DOCTYPE> 到你的网页中
  2. 添加 xmlns 属性添加到每个页面的html元素中。
  3. 改变所有的元素为小写
  4. 关闭所有的空元素
  5. 修改所有的属性名称为小写
  6. 所有属性值添加引号

使用 W3C 验证器来测试你的 XHTML

<form method="get" action="http://validator.w3.org/check" target="_blank">

     请在下面的输入框中输入您的网址:

         <input name="uri" size="60" value="http://www.javathinker.net"/>

    <input type="submit" value="页面验证"></form>

                </form>






程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-14 11:08:05 重新编辑]
  Java面向对象编程-->图形用户界面(上)
  JavaWeb开发-->使用Session(Ⅱ)
  JSP与Hibernate开发-->Java对象持久化技术概述
  Java网络编程-->对象的序列化与反序列化
  精通Spring-->Vue组件开发基础
  Vue3开发-->Vue简介
  Promise对象的then()和catch()方法
  axios 发 post 请求,后端接收不到参数的解决方案
  Node.js操纵Mongodb数据据
  JavaScript的async函数
  加快 Vue 项目的开发速度
  JS对树形数据的遍历和过滤,
  一个AJAX入门范例
  jQuery 获取并设置 CSS 类
  jQuery 效果:隐藏和显示
  JavaScript的Screen 对象
  CSS3 多列布局
  JavaScript 函数定义
  JavaScript prototype(原型对象)
  JavaScript HTML DOM EventListener
  DTD - XML 构建模块
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。