web前端基础概述：基于一个简单的网页示例

一，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 &amp; Co.</title>
{#    ＜link＞元素用来载入css文件到页面中，href属性的值就是你所创建的脚本的路径  #}
    <link rel="stylesheet" href="../static/css/add-content.css" /> <!--这里没有使用DTL语法-->
  </head>
  <body>
    <h1>Constructive &amp; 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>');