html前世今生以及与css和js的关系

现在你使用的html是哪个版本，不管你使用的哪个，现在最流行的html版本是html5，简称“h5”,html发展到html5，已经不单单指的是纯碎的html了，所以我们平常所听到的h5，我已经听烂了，它是指的html+css+JavaScript，也即是说html+css+JavaScript三者一起组成了h5。那么h5又是如何发展而来的呢？我从网上找来了一张图，或许能简洁而清晰的让大家有个直观的认识：

解释一下：

按时间来看，到1997年的html4.0不需要多说，貌似我们开始使用html的时候见到的最多的格式就是下面的格式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
</body>
</html>

这是我一开始接触html时的格式,再后来又比较流行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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>

其区别之处就在于dtd文件的声明,所谓的dtd文件就是document type Definition,中文叫做“文档类型定义”，它是干嘛的，它的作用就是定义了有哪些标签可以使用,比如一个文档使用xhtml1-transitional.dtd,那么使用这个dtd的html文档相对于使用loose.dtd的文档就有了以下不同：

1.XHTML 元素必须被正确地嵌套。

2.XHTML 元素必须被关闭。如<br/>不能写成<br>

3.标签名必须用小写字母。

4.XHTML 文档必须拥有根元素

后来的h5简化了这些，结构变得异常简单：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>

还是继续来看上图，由html4.01这个版本开始，出现了二个分支，一个是仍然由w3c来维护的xhtml，一个是由whatwg来维护的html5，直到2008年，两个分支又再次合二为一，形成了今天的html5.whatwg(Web Hypertext Application Technology Working Group):是由各大浏览器厂商成立的，这些厂商的浏览器本来都遵循着w3c组织制定的html规范，直到xhtml4.01仍然遵守，但是w3c呢推出来了xhtml，要求比较严格，如果各大浏览器厂商新发出的浏览器版本仍然遵循新的xhtml1.0的规范的话，这将导致很多网页不能正常显示，提建议给w3c别人又不听，谁让人家一家独大呢，得了吧，您嘞，我们不陪你玩了，各大浏览器厂商造反了，自发的起草了自己的规范，就是上图中的html5草案。这些历史旧闻也就大致了解一下就行了，我能记得的也就上边写的这么多了，希望我表达清楚了自己的意思吧。

-----------------------------------------------------------------------------------------------

html与css以及javascript之间的关系是什么，当一个网页经历了曲折动人的故事最终呈现到我们面前的时候，哪些是html来控制的效果，哪些是css来把控的东西，哪些又是js来控制的效果呢？还是看个图吧，我喜欢用图来表达自己的意思，这样更直观，也可以减少文字的二义性：

html是源码级别的，在浏览器上呈现给用户的内容是看不到html标签的，想看一个网页的html源码需要借助浏览器提供的工具。

一个网页上某个地方的字体是红色，这是由css来控制的，css叫做样式表，就是用来控制网页的样式表现的

而javascript用来完成与用户的交互，比如弹出一个窗口，响应用户的点击行为。

上图中的w3c是一个组织，w3c(World Wide Web Consortium )，它的职能是用来定义网页相关标准的，比如html,css,http,xml,dom等的标准都是由w3c来制定的。

一个基本的h5页面的模板：

<!doctype html>
<html><head><meta charset="utf-8"><title>淘宝网</title></head><body><!--页面将来显示的内容在body里面--><p>一大推好看的<em>衣服</em></p></body>
</html>

html前世今生以及与css和js的关系相关推荐

HTML页面显示透视效果,《前端每日实战》第176号作品：用透视图表现 HTML、CSS 和 JS 的关系...
今年年初时我偶然看到了下面这张图片,顺手把它记在了微博里,近日抽时间把它们制作成了交互页面,本文记录了开发的过程. 效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接 ...
IE6、IE7、IE8的CSS、JS兼容
Internet Explorer 6中查看使用 Microsoft JScript 的网页,可能会遇到web浏览器速度较慢的性能问题.原因是如果js脚本同时创建大量变量,jscript引擎执行垃圾收 ...
CSS vs. JS Animation: 哪个更快
CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...
js和html以及css的区别,html、css、js中的区别与关系
html.css.js中的区别与关系 2020/04/26 作者: 互盟股份今天小盟给大家分享的是html.css.js中的区别与关系,相信很多人都不太了解,为了让大家更加了解html.css.js ...
php替换时 css中的图片不显示不出来,URL重写：CSS，JS和图像未加载
我遵循规则 .htaccess Options +FollowSymLinks RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAM ...
介绍html CSS和JS的定义或引用
现在的网页设计,一般采用内容与表现相分离,即网页的组成包含:内容(HTML)+ 样式(CSS) + 脚本(JS) . 浏览器解析原理服务器接收到HTML->解析HTML结构建DOM树-> ...
使用Minify合并css和js减少http请求
一个页面可能包含很多的css和js文件,如果能够合并这些文件,能够大大减少网站的http请求,减少日志的产生和用户体验的提高. Minify就是一个能够合并css或js为一个文件的工具,不但可以合并, ...
你可能不知道的5种 CSS 和 JS 的交互方式
翻译人员: 铁锚翻译日期: 2014年01月22日原文日期: 2014年01月20日原文链接: 5 Ways that CSS and JavaScript Interact That You ...
判断CSS与JS是否加载完毕的方法
简单而有效的思路:三步走一.显示默认提示:直接在页面上标识一个友好的提示:例如xxx,系统加载未完成,建议您刷新后再进行yy操作二.css加载完毕:对提示内容进行处理:例如红色提示变..黄色警告 ...

html前世今生以及与css和js的关系

html前世今生以及与css和js的关系相关推荐

最新文章

热门文章