《JavaScript构建Web和ArcGIS Server应用实战》——1.4 分离HTML、CSS和JavaScript

简介:

本节书摘来自异步社区《JavaScript构建Web和ArcGIS Server应用实战》一书中的第1章,第1.4节,作者: 【美】Eric Pimpler(派普勒) 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 分离HTML、CSS和JavaScript

你可能在想所有这些代码都放在什么位置,将所有的HTML、CSS和JavaScript代码放在同一个文件中或者将它们分割成单独的文件?对于非常简单的应用程序和示例来说,将所有代码放到一个后缀名为.html或.htm的文件中也很常见。在这种情况下,CSS和JavaScript代码放置在HTML页面的

部分。然而,首选方式是使用代码栈创建应用程序来分离内容和行为的表现形式。应用程序的用户界面应该驻留在一个只包含用于定义应用程序部分的内容以及任何CSS(呈现)或JavaScript(行为)的HTML页面中。最终的结果是一个HTML页面和一个或多个CSS和JavaScript文件。这将形成一个图1-9所示的文件夹结构,里面包括一个名为index.html的文件和几个包括CSS、JavaScript和其他资源(比如图像)的文件夹。css和js文件夹将包含一个或多个文件。

5926f743fc7016c448f4073709c5f1d4ca93bb3c

CSS文件通过使用标签链接到HTML页面中。如下列代码所示,你将看到如何通过使用标签来引入CSS文件。链接CSS文件应该放在HTML页面的

标签内。
<!DOCTYPE html>

<html>
  <head>
    <title>GeoRanch Client Portal</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  </head>
  <body>
  </body>
</html>

如下列代码所示,JavaScript文件通过

相关文章
|
13天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
14 0
|
13天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
16 0
|
13天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5基础
H5+CSS3+JS逆向前置——HTML1、H5基础
21 0
|
14天前
|
JavaScript 前端开发 开发者
像素鸟html与js源码(4节课勉强做完)
像素鸟html与js源码(4节课勉强做完)
18 0
|
15天前
|
前端开发 JavaScript UED
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
动态伸缩搜索框:HTML, CSS, JavaScript的完美结合
23 1
|
18天前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
34 0
|
18天前
|
应用服务中间件 nginx
【报错】Failed to start A high performance web server and a reverse proxy server.
【报错】Failed to start A high performance web server and a reverse proxy server.
|
21天前
|
IDE Linux 开发工具
如何在Linux运行RStudio Server并实现Web浏览器远程访问
如何在Linux运行RStudio Server并实现Web浏览器远程访问
36 0
|
22天前
|
前端开发 JavaScript 定位技术
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
26 0
|
22天前
|
前端开发 JavaScript 容器
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
21 1
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList

相关产品

  • 云迁移中心