HTML-网页大楼的框架

HTML、XML、XHTML 有什么区别

首先从字面可以看出,他们都是ML,也就是说都是标记语言(Markup Language),所以不同就是前面的部分了。

HTML

超文本标记语言HyperText Markup Language,简称:HTML

HTML发展历史

  • 超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(* 并非标准*):
  • HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
  • HTML 3.2——1997年1月14日,W3C推荐标准
  • HTML 4.0——1997年12月18日,W3C推荐标准
  • HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
  • HTML 5——2014年10月28日,W3C推荐标准 (详见本处参考资料

XML

可扩展标记语言Extensible Markup Language ,简称:XML

1998年2月,W3C正式批准了可扩展标记语言的标准定义,可扩展标记语言可以对文档和数据进行结构化处理,从而能够在部门、客户和供应商之间进行交换,实现动态内容生成,企业集成和应用开发。可扩展标记语言可以使我们能够更准确的搜索,更方便的传送软件组件,更好的描述一些事物。例如电子商务交易等。

  • 它被设计用来传输和存储数据
  • 超文本标记语言被设计用来显示数据。
  • 它们都是标准通用标记语言的子集。

什么是可扩展标记语言?

  • 可扩展标记语言是一种很像超文本标记语言的标记语言。
  • 它的设计宗旨是传输数据,而不是显示数据。
  • 它的标签没有被预定义。您需要自行定义标签。
  • 它被设计为具有自我描述性。
  • 它是W3C的推荐标准。

可扩展标记语言和超文本标记语言之间的差异

超文本标记语言旨在显示信息,而它旨在传输信息。对它最好的描述是:它是独立于软件和硬件的信息传输工具。

它不是超文本标记语言的替代。
它是对超文本标记语言的补充。
它和超文本标记语言为不同的目的而设计:

  • 它被设计用来传输和存储数据,其焦点是数据的内容。
  • 超文本标记语言被设计用来显示数据,其焦点是数据的外观。

可扩展标记语言是W3C的推荐标准

XML 于 1998 年 2 月 10 日成为 W3C 的推荐标准。

可扩展标记语言无所不在

XML 是各种应用程序之间进行数据传输的最常用的工具。

XHTML

可扩展标记语言Extensible HyperText Markup Language,简称:XHTML
可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。
HTML是一种基本的WEB网页设计语言,XHTML是一个基于可扩展标记语言的标记语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的可扩展标记语言(XML),所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。

2000年底,国际W3C组织(万维网联盟)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,XHTML 是更严谨更纯净的 HTML 版本。它的可扩展性和灵活性将适应未来网络应用更多的需求。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的基于HTML语言设计的网站,直接采用XML还为时过早。因此,在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。所以,建立XHTML的目的就是实现HTML向XML的过渡。国际上在网站设计中推崇的WEB标准就是基于XHTML的应用(即通常所说的CSS+DIV)。

XHTML与HTML的区别

XHTML是当前HTML版的继承者。HTML语法要求比较松散,这样对网页编写者来说,比较方便,但对于机器来说,语言的语法越松散,处理起来就越困难,对于传统的计算机来说,还有能力兼容松散语法,但对于许多其他设备,比如手机,难度就比较大。因此产生了语法要求更加严格的XHTML。

大部分常见的浏览器都可以正确地解析XHTML,即使老一点的浏览器,XHTML作为HTML的一个子集,许多也可以解析。也就是说,几乎所有的网页浏览器在正确解析HTML的同时,可兼容XHTML。当然,从HTML完全转移到XHTML,还需要一个过程。

跟层叠式样式表(外语缩写:CSS)结合后,XHTML能发挥真正的威力;这使实现样式跟内容的分离的同时,又能有机地组合网页代码,在另外的单独文件中,还可以混合各种XML应用,比如MathML、SVG。

从HTML到XHTML过渡的变化比较小,主要是为了适应XML。最大的变化在于文档必须是良构的,所有标签必须闭合,也就是说开始标签要有相应的结束标签。另外,XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统,很多人都是将标签大写,这点两者的差异显著。在XHTML中,所有的参数值,包括数字,必须用双引号括起来(而在SGML和HTML中,引号不是必须的,当内容只是数字、字母及其它允许的特殊字符时,可以不用引号)。所有元素,包括空元素,比如img、br等,也都必须闭合,实现的方式是在开始标签末尾加入斜扛,省略参数,比如

总结

  • XHTML 指扩展超文本标签语言(EXtensible HyperText Markup Language)。
  • XHTML 的目标是取代 HTML。
  • XHTML 与 HTML 4.01 几乎是相同的。
  • XHTML 是更严格更纯净的 HTML 版本。
  • XHTML 是作为一种 XML 应用被重新定义的 HTML。

表现(内容)、样式、行为分离原则

  • 写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能体现页面结构或者内容。之后再去写样式。
  • 写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化
  • HTML内不允许出现属性样式,尽量不要出现行内样式。

HTML语义化

语义化HTML是一种编写HTML的方式

1. 运用合适的标签
2. 使用合理的代码结构
3. 便于开发者阅读
4. 使浏览器和爬虫可以很好地解析

常见的meta标签

1.

告诉浏览器,我这个页面的代码是用的xxx编码方式。用xxx来解码

2.

浏览器读到这些代码时,可以得到一些页面信息,更好的显示网页内容。

  • meta http-equiv='expires' content='时间' :【expires期限】,告诉浏览器到了某个时间就重新传输一次页面。
  • meta http-equic='refresh' content='数字;url=一个网址' :【refresh刷新】,告诉浏览器在【数字】秒后跳转到【一个网址】
  • meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' :强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染,如果是双核浏览器就用chrome内核。

3.

主要用于描述网页,更便于搜索机器人读取代码。

  • meta name='viewport' content='width=xxx等等' :让移动端能够以更合理的比例显示网页
  • meta name='keywords' content='xxxx' :告诉搜索引擎,当前页面的关键字
  • meta name='dscription' content='xxx' :告诉搜索引擎,当前页面的主要内容是xxx

HTML之前的准备工作

1. 文档声明

告知浏览器的解析器, 用什么 文档类型规范 来解析这个文档。

2. DOCYTYPE html


  • 在HTML文件开头第一行,出现的的意思是,告诉加载网页的浏览器,我要用html5的方式解码,也就是标准模式。
  • 如果没有文档声明,浏览器就会使用混杂模式,可能会出现乱码的情况。

2. 标准模式和混杂模式

  • 在标准模式中,浏览器以其支持的最高标准呈现页面
  • 在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

浏览器乱码?

因为代码的编码保存方式和浏览器的解码方式不同,从而导致加载出的网页一堆乱码,所以只要保证编辑器写代码的时候首行的声明好编码方式

并且保存的时候仍选择同样的编码方式,就不会出现乱码的情况了

常见的浏览器及其对应内核

1. 使用Trident的是internet explorer,国产的绝大部分浏览器。Trident是就是ie内核
2. 使用Gecko的是Mozilla Firefox,使用 Gecko 内核的浏览器也有不少,如 Netscape MozillaSuite/SeaMonkey 等
3. 使用Presto的是opera,这是目前公认网页浏览速度最快的浏览器内核
4. 使用WebKit的有苹果的safari,谷歌的chrome,还有国产的大部分双核浏览器其中一核就是WebKit

HTML常见标签及使用时机

常用标签 使用时机 代码样式
h1~h6 标题

This is a heading

p 段落

This is my first paragraph.

a 链接 This is a link
img 展示一张图片 ![](boat.gif)
div 给页面划分区块
ul li 无序列表 如下

常用标签 使用时机 代码样式
ol li 有序列表 如下

把大象关到冰箱的步骤

  1. 把大象变小
  2. 打开冰箱
  3. 把大象塞进去
常用标签 使用时机 代码样式
dl dt dd 展示一系列 “标题:内容... ” 如下
商品名称:
青花瓷
特征:
白色
圆口
商品介绍
这是一个年代久远的瓷器,很贵,易碎
常用标签 使用时机 代码样式
button 按钮
em 需要强调一下

小谷 2 岁了

strong 很重要、强调性更强

优惠 100

iframe 嵌入一个页面 如下

W3Cschool.cc

常用标签 使用时机 代码样式
table 表格 如下
姓名 年纪
姓名 年纪
小明 18
小花 20
姓名 年纪
小明 18
小花 20

本博客版权归流光号船长和饥人谷所有,转载需说明来源

你可能感兴趣的:(HTML-网页大楼的框架)