《Web前端开发精品课 HTML与CSS进阶教程》——1.2 HTML、XHTML和HTML5

1.2 HTML、XHTML和HTML5

很多新手往往分不清HTML、XHTML和HTML5,这一节给大家详细讲解一下这三者的关系和区别。

1.2.1 HTML和XHTML
HTML,全称HyperText Mark-up Language(超文本标记语言),是构成网页文档的主要语言。我们常说的HTML指的是HTML 4.01。

XHTML,全称EXtensible HyperText Mark-up Language(扩展的超文本标记语言),它是XML风格的HTML 4.01,我们可以称之为更严格、更纯净的HTML 4.01。

HTML语法书写比较松散,利于开发者编写。但是对于机器,如电脑、手机等来说,语法越松散,处理起来越困难。因此为了让机器更好地处理HTML,我们才在HTML基础上引入了XHTML。

XHTML相对于HTML来说,在语法上更加严格。XHTML和HTML主要区别如下。

1.XHTML标签必须闭合。
在XHTML中,所有标签必须闭合,例如"'“”等。此外,空标签也需要闭合,例如< br>要写成< br/>。

错误写法:< p >欢迎来到绿叶学习网

正确写法:< p >欢迎来到绿叶学习网</ p >

2.XHTML标签以及属性必须小写。
在XHTML中,所有标签以及标签属性必须小写,不能大小写混合,也不能全部都是大写。不过标签的属性值可以大写。

错误写法:< Body >< DIV ></ DIV ></ Body >

正确写法:< body >< div ></ div ></ body >

3.XHTML标签属性必须用引号。
在XHTML中,标签属性值必须用引号括起来,单引号、双引号都可以。

错误写法:< input id=txt type=text/>

正确写法:<input id="txt" type="text"/>

4.XHTML标签用id属性代替name属性。
在XHTML中,除了表单元素之外的所有元素,都应该用id而不是name。

错误写法:<div name="wrapper"></div>

正确写法:<div id="wrapper"></div>

下面是一个完整的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>web前端开发精品课系列</title>
</ head >
< body >
   < p >《web前端开发精品课·HTML和CSS基础教程》</ p >
   < p >《web前端开发精品课·HTML和CSS进阶教程》</ p >
</ body >
</ html >

1.2.2 HTML5
HTML指的是HTML 4.01,XHTML是HTML的过渡版本,XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升级版。

不过HTML 5已经不再是单纯意义上的标签了,它已经远远超越了标签的范畴。HTML 5除了新增部分标签之外,还增加了一组技术,包括canvas、SVG、WebSocket、本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说,HTML 5使得HTML从一门“标记语言”转变为一门“编程语言”。

对于HTML 5中的新技术,在此不做详细介绍。单纯从新增的标签上来看,HTML 5有以下几个特点。

1.文档类型说明
基于HTML 5设计准则中的“化繁为简”原则,页面的文档类型<!DOCTYPE>被极大地简化了。

XHTML文档声明如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5文档声明如下:

<!DOCTYPE html>

2.标签不再区分大小写

< div >异步社区</ DIV >

上面这种写法也是完全符合HTML5规范的。但是在实际开发中,建议所有标签以及属性都采用小写方式。

3.允许属性值不加引号

< div id=wrapper style=color:red>异步社区</ div>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中,建议标签所有属性值都加引号,单引号或双引号都可以。

4.允许部分属性的属性值省略
在HTML5中,部分具有特殊性属性的属性值是可以省略的。例如,下面代码是完全符合HTML 5规范的:

<input type="text" readonly/>
<input type="checkbox" checked/>

上面两句代码等价于:

<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>

在HTML 5中,可以省略属性值的属性如表1-1所示。

<div style="text-align: center">
 <img src="https://yqfile.alicdn.com/e024c47e10b30aad2991206b4188bcab12a1d1b3.png" >
</div>
<div style="text-align: center">
 <img src="https://yqfile.alicdn.com/2c075585296ca6cfd348f47e817f283c364c2bbc.png " >
</div>

一句话概括HTML、XHTML和HTML 5就是:HTML指的是HTML 4.01,XHTML是HTML的过渡版,HTML 5是HTML的升级版。

时间: 2024-09-17 19:17:46

《Web前端开发精品课 HTML与CSS进阶教程》——1.2 HTML、XHTML和HTML5的相关文章

《Web前端开发精品课 HTML与CSS进阶教程》——导读

前言 近年来,Web前端技术飞速发展,作用也日趋重要.在Web前端技术中,HTML和CSS是最基础的知识.当前市面上同类书籍很多,但大部分都是介绍基础性的HTML标签和CSS属性,缺乏一本真正体现前端开发水平的书籍. 本书是<Web前端开发精品课HTML和CSS基础教程>的姊妹篇,对于基础知识,不再进行详细介绍.HTML和CSS知识多而杂,因此入门容易精通难.本书对高级部分的内容进行深加工,使其更加完善.为了避免大家多走弯路,笔者把前端碎片化的知识系统化,提供给学习者一个流畅的学习思路. 本书

《Web前端开发精品课 HTML与CSS进阶教程》——第一部分 HTML进阶第01章 HTML基础知识1.1 HTML和CSS进阶简介

第一部分 HTML进阶 第01章 HTML基础知识 1.1 HTML和CSS进阶简介 1.1.1 你真的精通HTML和CSS吗 我们都知道,前端技术最核心的三大技术是HTML.CSS和JavaScript.HTML定义网页的结构,CSS定义网页的外观,而JavaScript定义页面的行为.其中HTML和CSS是前端技术中最基础的东西. HTML和CSS入门容易,精通却很难,特别是CSS."什么?精通很难?我很确定我已经精通CSS了啊!"这种话往往是出自学习三两个月.技术刚入门的人之口.

《Web前端开发精品课 HTML与CSS进阶教程》——2.4 表格语义化

2.4 表格语义化 不少初学者看了<Web前端开发精品课HTML和CSS基础教程>(本书的姊妹篇)跑来问:"不是说表格布局已经被抛弃了吗?为什么还要在书里讲解表格呢?这不是多此一举吗?"其实不然,在实际开发中,我们不建议使用表格布局,应该使用浮动布局或者定位布局.虽然表格拿来做布局的方式被抛弃了,但是这并没有说明表格就一无是处了. 问大家一个问题:如图2-5所示的这种表格数据的展示,应该怎么实现呢?不少得了"table恐惧症"的小伙伴可能会想到使用div

《Web前端开发精品课 HTML与CSS进阶教程》——第02章 语义化2.1 语义化简介

第02章 语义化 2.1 语义化简介 由于HTML简单,很多初学者对它存在一种偏见,觉得它没多少东西,因此在学习的过程中随便对待.其实,学习HTML的重点不在于掌握了多少标签,而是在于掌握标签的语义以及如何编写一个语义结构良好的页面. 在实际开发过程中,很多人由于对标签语义不熟悉,常常用某一个标签代替另外一个标签来实现某些效果. 举例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <

《Web前端开发精品课 HTML与CSS进阶教程》——2.2 标题语义化

2.2 标题语义化 h1-h6是标题标签,h表示"header".h1-h6在HTML语义化中占有极其重要的地位.h1-h6按照标题的重要性依次递减,其中h1重要性最高,h6重要性最低. 相对于其他语义化标签,h1-h6在搜索引擎优化(即SEO)中占有相当重要的地位.在一个页面中,h1-h6这6个标签,我们不需要全部都用上,都是根据需要才用的.对于h1-h6,一般情况下我们只会用到h1.h2.h3和h4,很少再会去用h5和h6,因为一个页面不可能用到那么多级的标题.并且从搜索引擎优化的

《Web前端开发精品课 HTML与CSS进阶教程》——1.4 id和class

1.4 id和class id和class是HTML元素中两个最基本的公共属性.一般情况下,id和class都用来选择元素,以便进行CSS操作或者JavaScript操作.但是很多新手对id和class这两个属性感到很迷茫,不知道什么时候用id,什么时候用class,甚至随便使用. 1.4.1 id属性id属性具有唯一性,也就是说在一个页面中相同的id只允许出现一次.W3C建议,对于页面关键的结构或者大结构,我们才使用id.所谓的关键结构,指的是诸如LOGO.导航.主体内容.底部信息栏等结构.对

《Web前端开发精品课 HTML与CSS进阶教程》——2.7 语义化验证

2.7 语义化验证 前面这几节,我们介绍了页面语义化需要注意的各个地方.那么平常有什么好的办法来判断一个页面是否语义良好呢?一个很简单的办法就是:去掉CSS样式,然后看页面是否还具有很好的可读性. 我们都知道,很多HTML标签都有一定的默认样式,例如p标签有上下边距.strong标签对字体加粗.ul标签有缩进效果,等等. 在前面我们接触过,我们可以使用一个标签来代替另外一个标签,并且使用CSS修饰来实现相同的效果.也就是说,不同的HTML标签可以通过不同的CSS来实现相同的效果.但是"一个语义良

《Web前端开发精品课 HTML与CSS进阶教程》——2.6 其他语义化

2.6 其他语义化 2.6.1 换行符< br /> 很多新手会使用< br />标签来换行,或者使用多个< br />标签来实现元素之间的上下间距. 举例1: <div> <span>标题</span><br/><br/> <span>第1部分内容</span><br/> <span>第2部分内容</span><br/> <span

《Web前端开发精品课 HTML与CSS进阶教程》——2.8 HTML5舍弃的标签

2.8 HTML5舍弃的标签 在HTML5中,除了新增标签之外,也有不少标签被舍弃了,如表2-2和表2-3所示.为了实现页面的语义化,我们在实际开发中不应该再去使用这些标签.因此了解哪些标签已经被舍弃是非常有必要的. 对于这些被舍弃的标签,总体可以分为两大类. (1)仅仅为了定义样式,没有任何语义,因此被舍弃. (2)很少使用或者已经被新标签代替,因此被舍弃. https://yqfile.alicdn.com/e25bc6962d058c01d05b4fa9e52e873fd4f1875e.p