简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。

web标准的优点：

代码的效率：

在HTML文件中使用最精简的代码，而把样式和页面布局信息包含进CSS文件中。则放在服务器上的文件越小，下载文件需要的时间就越短。

可用性：

产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。

可维护性：

页面的样式和布局信息保存在单独的CSS文件中，如果你想改变站点的外观时，仅需要在单独的CSS文件中做出更改即可。整站统一css则可带来巨大的便利。

可访问性：

上网用户中那些视力受损的人，通过屏幕阅读器使用键盘命令将网页的内容读给他们听。以语义化的HTML（结构和表现相分离的HTML）编写的网页文件，就可以让此类用户更容易导航，且网页文件中的重要信息也更有可能被这些用户找到。

语义化标签利于网络爬虫/搜索引擎：搜索引擎使用“爬虫”，解析你的网页。语义化的HTML能更准确更快速的被解析，从而知道哪些才是重要的内容，那么你的网页在搜索结果中的排名就会大受影响。

兼容性：

纯HTML，无附加样式信息，可以针对具有不同特点（如屏幕尺寸等）的设备而被重新格式化，只需要引用一套另外的样式表即可。同时，CSS本身也可以让你为不同的呈现方式和媒体类型（如在屏幕上阅读网页，打印网页，在移动设备上阅读网页等）规定不同的样式表。

实现Javascript/css与HTML的分离的步骤是很相似的，当然也不同，接下来就是具体的实现。

第一步：首先都是创建文件

只是创建的文件不同。如下图

1）如果创建JavaScript代码与HTML的分离的文件创建：

a) 选择JavaScript页面类型

b) 显示创建的文件，把<script language="javascript"type="text/javascript"></script> 框架里面的代码放入到创建的文件中

（切记:不要把框架代码放入文件，把HTML中的此框架及内容全部清除）

c) 保存文件：给文件命名，文件的类型为：.js文件。

2）如果创建css代码与HTML的分离文件创建：

a)     选择css页面类型

b)     显示创建的文件，把<stysle type=”text/css”></style>框架里面的内容放入文件中（同上不包括框架代码，把HTML中的此框架及内容全部清除）

c)      保存文件：给文件命名，文件的类型为：.css文件。

第二步：在HTML中引入我们保存的文件

1）在HTML中引入.js文件：

找到引入的文件，其他都是默认选项；当然在HTML中需要把光标定位引入文件的地方。

2）在HTML中引入.css文件：

找到引入的文件，其他都是默认选项；当然在HTML中需要把光标定位引入文件的地方。

总结：

两大步就可以实现Javascript/css与HTML的分离，实现代码的可复用性。

我好像把：“不同的问题找相同点；相同的问题找不同点了。”用上了；通过这两个例子，此种类型的问题都可以用两部曲解决。

web标准---html、css、js分离相关推荐

WEB标准页面CSS命名参考
web标准页面及css的命名参考 HTML布局命名页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:m ...
Web前端--HTML+CSS+JS新型冠状病毒射击小游戏
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
Web前端--HTML+CSS+JS实现圣诞抓礼物小游戏
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
vim 下web开发html css js插件
Vim下的Web开发之html,CSS,javascript插件 HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vimf ...
Web前端---HTML+CSS+JS实现记忆纸牌游戏
游戏介绍: js实现扑克牌翻牌记忆小游戏代码.连续点击翻开两张扑克牌,相同去重,不同则合上重新翻,考验你的记忆力. 视频演示: 挑战记忆力-Web前端实现记忆纸牌游戏.mp4 主要源码展示: styl ...
Web前端--HTML+CSS+JS实现仿切水果小游戏
目录代码目录: 主要代码实现: 源码获取效果演示: 代码目录: 主要代码实现: CSS样式: * {margin: 0;padding: 0;list-style-type: none;touch ...
web前端html+css+js 简单模仿敲木鱼
由于上传不了视频只能压缩成gif 我们来直接看看效果这里点击是有声音的.同时设置了重置按钮. 我们看看html部分 <body><div class="box" ...
十天学会DIV+CSS(WEB标准)
学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听 ...
初学web标准的几个误区
初学web标准的几个误区作者:阿捷 2004-7-7 11:37:11 非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页.但从网友们的问题和制作中发现几个问题,在这里特别提醒一下: 1. ...
[转]web标准的几个误区
非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页.但从网友们的问题和制作中发现几个问题,在这里特别提醒一下: 1.不是为了通过校验才标准化. web标准的本意是实现内容(结构)和表现分离, ...

web标准---html、css、js分离

第一步：首先都是创建文件

第二步：在HTML中引入我们保存的文件

web标准---html、css、js分离相关推荐

最新文章

热门文章