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

简介:

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章,第1.2节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

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中,所有标签必须闭合,例如"screenshot'“screenshot”等。此外,空标签也需要闭合,例如< 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设计准则中的“化繁为简”原则,页面的文档类型被极大地简化了。

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的升级版。

相关文章
|
10天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
2天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
2天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
15 0
HTML5/CSS3粒子效果进度条代码
|
6天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
22 1
|
9天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
9天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
11天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
11天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
11天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
11天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。