一，HTML、CSS和JavaScript是如何相互结合的
- Web开发人员通常会使用三种用来创建Web页面的语言： HTML、CSS和JavaScript。
- 只要有可能， 尽量将这三种语言放置到不同的文件中， 然后让HTML页面去链接CSS和JavaScript文件。
- 每一种语言都基于不同的原因而形成不同的层级。 按照从左至右的顺序,每个层级都构建于各自左侧的层级之上。
相互关系如下图：
-
.html文件：这是页面的内容所在。 HTML定义了页面的结构和语义。
-
.css文件：CSS强化HTML页面，方法就是使用规则来指定HTM L内容应该如何被呈现（比如HTML内容的背景、边框、框尺寸、颜色、字体等。
-
.js文件：这是我们可以用来更改页面行为、增强交互性的地方。我们应当尽可能将JavaScript代码放置到单独的文件中。
二，渐进式增强
三个层级的划分， 构成了一种创建Web页面的方法，这种方法叫作渐进式增强。关于“渐进增强”可以参考这里https://zhuanlan.zhihu.com/p/45710352。
随着越来越多可以访问Web网站的设备的涌现， 渐进式增强的概念也逐渐流行开来：
- 不仅仅屏幕尺寸会有变化， 每台不同设备的网络连接速度和处理能力也都会有所不同。
- 另外， 有些人浏览网站时会关闭JavaScript,所以需要确保页面也同样能被他们正常访问。
- … …
划分三个层次的效果：
- 从HTML层开始会让你关注网站中最重要的部分： 网站的内容。作为纯粹的HTML,这一层应该可以工作在所有设备上， 可以被所有用户访问，即使在慢速网络连接状况下也可以被快速载入。
- 在单独的文件中添加CSS规则可以让规则只关注页面的外观而非页面的内容。可以在所有网站上使用同样的样式表， 这样能使网站被快速载入并容易维护。 也可以对同样的内容使用不同的样式表， 为相同的数据创建不同的展现视图。
- JavaScript最后被添加进来， 用来强化页面的可用性或是提升与网站进行交互的体验。将JavaScript代码单独分开，意味着即使用户不载入或运行JavaScript,页面也仍然可以工作。 可以在不同的页面上重用代码（这使得网站可以被更快载入且更易于维护 ）。
三，创建一个基础的web页面
示例：为一个HTML页面添加一句问候语。 根据当前时间的不同， 问候语也会不同。
输入以下内容保存为add-content.html文件：
<!DOCTYPE html>
<html>
<head>
<title>Constructive & Co.</title>
{# ＜link＞元素用来载入css文件到页面中，href属性的值就是你所创建的脚本的路径 #}
<link rel="stylesheet" href="../static/css/add-content.css" /> <!--这里没有使用DTL语法-->
</head>
<body>
<h1>Constructive & Co.</h1>
{# ＜script＞元素用来载入JavaScript文件到页面中，src属性的值就是你所创建的脚本的路径#}
<script src="../static/js/add-content.js"></script> <!--使用HTML原生语法-->
<p>For all orders and inquiries please call <em>555-3344</em></p>
</body>
</html>
输入以下内容保存为add-content.css文件：
/* CSS for adding content example */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800italic);
body {
font-family: "Courier New", Courier, monospace;
/*添加自己图片的链接*/
background: url("../images/constructive-backdrop.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;}
h1, h3, p {
float: left;
clear: left;
width: 320px;
background-color: #fff;
color: #5a514c;
text-align: center;}
h1 {
margin: 50px 0 0 50px;
height: 175px;
/*添加自己图片的链接*/
background-image: url("../images/constructive-logo.gif");
background-repeat: no-repeat;
text-indent: -9999px;
border-top: 1px solid #bcbdc0;
border-left: 1px solid #bcbdc0;
border-right: 1px solid #bcbdc0;}
h3 {
margin: 0 0 0 50px;
padding: 25px 0 0 0;
font-family: 'Open Sans', arial, sans-serif;
font-size: 1.8em;
font-style: italic;
font-weight: 800;
line-height: 0.80em;
letter-spacing: -0.02em;
text-transform: uppercase;
border-left: 1px solid #bcbdc0;
border-right: 1px solid #bcbdc0;}
p {
margin: 0 0 0 50px;
padding: 30px 0 25px 0;
font-weight: bold;
text-align: center;
border-right: 1px solid #bcbdc0;
border-bottom: 1px solid #bcbdc0;
border-left: 1px solid #bcbdc0;}
/* Border under box when you move script in the last example */
p + script + h3 {
padding-bottom: 20px;
border-bottom: 1px solid #bcbdc0;}
/* Fix for full-screen background image: Chrome on Android */
html{
height:100%;
min-height:100%;}
body{
min-height:100%;}
输入以下内容保存为add-content.js文件：
var hourNow = today.getHours();
var greeting;
if (hourNow > 18) {
greeting = 'Good evening!';
} else if (hourNow > 12) {
greeting = 'Good afternoon!';
} else if (hourNow > 0) {
greeting = 'Good morning!';
} else {
greeting = 'Welcome!';
}
document.write('<h3>' + greeting + '</h3>');
效果：
5409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
