web

发布日期: 2021-12-26

作者: Peter Pan

文章字数: 10.1k

阅读时长: 40 分

阅读次数:

复习参考

实现提示：

使用原生的javascript(ECMA 5)，不得使用 jquery等第三方扩展库

基础知识

用户场景：用户通过浏览器访问某网站的用户注册页面。如：http://x.com/users/new.php?name=tom&email=123@1.com#info
- 当用户未填写用户名，提交后，浏览器立即弹出对话框，提示用户名为必填
- 当用户填写了一个常见的用户名如：tom，提交后，浏览器弹出对话框，提示该用户名已被占用
- 当用户终于按要求正确填写所有字段，提交后，页面跳转至网站首页
用户场景：用户使用Web浏览器访问某购物网站，在地址栏里输入：http://x.com/index.php?category=nba#top ，然后按回车键，看到了琳琅满目的商品首页
- 当用户点击购买下单按钮，浏览器跳转至登录页面，提示用户登录
- 当用户填写正确的用户名和密码，并勾选”记住我“的选项，提交。页面跳转到下单页面
- 几天后，小明再次浏览商品并下单，这次没有提示登录，而是直接看到了下单页面

请基于上述用户场景，说明在浏览器背后，经历了哪些技术阶段和发生了什么？，主要有：

什么是Web浏览器、Web服务器？具体的软件名称？所起的作用？
什么是URL？上述URL各个组成部分的名称和含义解释
具体描述上述场景中包括哪几次HTTP交互？一对http请求（请求地址、请求头）和响应（响应头、返回内容）即算一次交互
登录功能是采用何种技术实现的？存在哪些缺点或不足？
什么是客户端检验与服务端校验，各自的优劣？
什么是客户端渲染与服务端渲染，各自的优劣？

语义

什么是语义标记？请以三类人群为例(正常人群、搜索引擎、视障人群等)，说明这些用户访问Web网的方式、工具与解析过程，以及使用语义标记的好处？
说明HTML与SVG、MathML、VoiceML等的区别和共同点？
请举出一个实例(包括标记名称与主要属性)，说明下列各类(注意：是一类，不是一个)标记的语义和典型用法：

列表元素
表格元素
块元素 block Element
内联元素 inline Element
其它语义类型，如多媒体元素、链接、框架等

表单

请编写代码（HTML文件与Javascript文件分开编写），实现符合如下要求的表单

接收表单的服务器地址为:”posts/save.php”
表单数据将被写入到服务器端的数据库
表单有一个单行文本框，且预置的文本为：“欢迎光临”
表单有一个多行文本控件，且预置的文本为：“welcome！”
表单有三个单选按钮，预置第二个单选按钮被选中
表单有三个复选框，预置第一个和第二个复选框被选中
表单有一个列表框控件，预置第三个列表项被选中
表单有一个列表框控件，预置第一个和第三个列表项被选中
表单有一个隐藏的控件，其值为“1”
表单有一个文件上传的控件
表单有一个提交表单按纽
当表单被提交时，弹出一个对话框，展示以上各文本输入框、单选框、复选框、下拉列表框等控件的值

参考 http://www.openxy.com/books/web_front/04/code/form.html

布局

按如图所示布局(如三行两列，三行三列等，并支持嵌套)：

请基于CSS 浮动(float)属性，编写代码，实现如图所示的页面布局
除浮动之外，请列举至少三种定位方式，并一一说明其定位的特点？
1. 除浮动之外，请列举至少三种列式布局技术，并一一说明其各自的技术优势和不足(注意：如果实现原理相同，则视为同一类)

参考 http://www.openxy.com/books/web_front/07/code/layout/float-more.html

名词解释

解释下列名词，并举一代码实例，并给予注释或说明

DOM与BOM
CSS伪类与CSS伪元素
Jquery
SCSS
响应式设计
媒体查询
cookies
node.js
http协议与https协议
事件驱动
定时器
同步调用与异步调用
安全字体、网络字体、图标字体
Javascript与node.js
本地存储与服务端存储
窗口与文档
URL绝对地址与URL相对地址

项目实践

请结合你本学期的个人项目案例，举例说明：

什么是Web页面的内容、结构、样式、行为？在前端技术中，它们各自用何种技术进行描述或表达？这种分层的设计模式有什么好处？前端开发技术中还有哪些设计模式？请列举出至少一种并说明。
什么是Web前端技术、Web后端技术？结合你的项目，谈谈两者的优缺点是什么？
什么是DOM？以你的项目为例，给出关键代码，说明如何使用DOM API实现页面的增删改CUD操作（8分）
什么是响应式设计？以你的项目为例，说明如何使用具体的前端技术解决多端适配的问题（5分）
什么是前端模板和客户端渲染？以你的项目为例，说明如何实现的（5分）
如果对你的个人项目进行升级，你拟采用哪些新模式或新技术？请列出其名字，结合项目说明其功能及如何应用，分析其优与劣
- 譬如前后端分离、前端组件化、反应式编程、双向绑定、Fetch等

注意：要紧密结合自己的个人项目进行说明，否则有扣分

参考答案

基础知识

什么是Web浏览器、Web服务器？具体的软件名称？所起的作用？

网页浏览器（英语：Web Browser，常简称为浏览器）是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标志符标识。信息资源中的超链接可使用户方便地浏览相关信息。网页浏览器虽然主要用于使用万维网，但也可用于获取专用网络中网页服务器之信息或文件系统内之文件。主流网页浏览器有Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。
网页服务器（英语：Web server）一词有两个意思：
1. 一台负责提供网页的电脑，主要是各种编程语言构建而成，通过超文本传输协议（英语：HTTP）传给客户端（一般是指网页浏览器）。
2. 一个提供网页的服务器程序。
3. 虽然每个网页服务器程序有很多不同，但有一些共同的特点：每一个网页服务器程序都需要从网络接受HTTP请求，然后提供HTTP回复给请求者。HTTP回复一般包含一个HTML文件，有时也可以包含纯文本文件、图像或其他类型的文件。一般来说这些文件都存储在网页服务器的本地文件系统里，而URL和本地文件名都有一个阶级组织结构的，服务器会简单的把URL对照到本地文件系统中。当正确安装和设置好网页服务器软件，服务器管理员会从服务器软件放置文件的地方指定一个本地路径名为根目录。例如，在“example.funnycorp.com”服务器上设置了服务器软件，并把服务器软件的根目录设置为“/home/public/web/”，当一个浏览者输入URL “http://example.funnycorp.com/lips/raspberry.html”，“example.funnycorp.com”上的服务器软件就会读取“/home/public/web/lips/raspberry.html”这个文件。
4. 现在市面上普遍的超文本传输协议服务器有：
  - Apache Software Foundation 的 Apache HTTP Server
  - Microsoft Corporation 的 Internet Information Server (IIS)
  - Google LLC（Alphabet Inc. 子公司）的 Google Web Server
  - NGINX, Inc.（已被F5 Networks, Inc.收购）的NGINX
  - 淘宝网（隶属于阿里巴巴集团）改良自 NGINX 的 Tengine
  - lighttpd
  - Cherokee
  - Microsoft Corporation 的 FrontPage

什么是URL？上述URL各个组成部分的名称和含义解释

统一资源定位符（英语：Uniform Resource Locator，缩写：URL，或称统一资源定位器、定位地址、URL地址[1]）俗称网页地址，简称网址，是因特网上标准的资源的地址（Address），如同在网络上的门牌。
统一资源定位符的标准格式如下：

[协议类型]: //服务器地址:端口号/资源层级UNIX文件路径文件名?查询#片段ID

统一资源定位符的完整格式如下：

[协议类型]: //访问资源需要的凭证信息@服务器地址:端口号/资源层级UNIX文件路径文件名?查询#片段ID

其中[访问凭证信息]、[端口号]、[查询]、[片段ID]都属于选填项。

示例

以“https://zh.wikipedia.org:443/w/index.php?title=随机页面”为例，其中：

https，是协议；
zh.wikipedia.org，是服务器；
443，是服务器上的网络端口号；
/w/index.php，是路径；
?title=Special:随机页面，是询问。

具体描述上述场景中包括哪几次HTTP交互？一对http请求（请求地址、请求头）和响应（响应头、返回内容）即算一次交互

1. 当用户填写了一个常见的用户名如：tom，提交后，浏览器弹出对话框，提示该用户名已被占用

// 请求头
POST  /s?ie=utf-8  HTTP/1.1 
Host: 127.0.0.1
 Cookie: 7facebcffbc7454ebf6b20de1fdbe038297c0cb914fa3557fdd81223b36ee751
 Content-type: application/x-www-form-urlencoded
 User-Agent: chrome 83
// 请求体
username=admin&password=admin

// 响应
行      HTTP/1.1  401  ERROR
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
// 响应体
{"code":401,"message":"密码错误"}

1. 当用户终于按要求正确填写所有字段，提交后，页面跳转至网站首页

// 请求头
POST  /s?ie=utf-8  HTTP/1.1 
Host: 127.0.0.1
 Cookie: 7facebcffbc7454ebf6b20de1fdbe038297c0cb914fa3557fdd81223b36ee751
 Content-type: application/x-www-form-urlencoded
 User-Agent: chrome 83
// 请求体
username=admin&password=admin

// 响应
行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
// 响应体
*.css *.js *.html

3.当用户点击购买下单按钮，浏览器跳转至登录页面，提示用户登录

// 请求头
POST  /s?ie=utf-8  HTTP/1.1 
Host: 127.0.0.1
 Cookie: 7facebcffbc7454ebf6b20de1fdbe038297c0cb914fa3557fdd81223b36ee751
 Content-type: application/x-www-form-urlencoded
 User-Agent: chrome 83
// 请求体
username=admin&password=admin

// 响应
行      HTTP/1.1  401  ERROR
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
// 响应体
{"code":401,"message":"未登录"}
<html>
  ......登录页面
</html>

4.当用户填写正确的用户名和密码，并勾选”记住我“的选项，提交。页面跳转到下单页面

// 请求头
POST  /s?ie=utf-8  HTTP/1.1 
Host: 127.0.0.1
 Cookie: 7facebcffbc7454ebf6b20de1fdbe038297c0cb914fa3557fdd81223b36ee751
 Content-type: application/x-www-form-urlencoded
 User-Agent: chrome 83
// 请求体
username=admin&password=admin

// 响应
行      HTTP/1.1  401  ERROR
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
// 响应体
{"code":200,"message":"登录成功", "token":******}
<html>
  ......下单页面
</html>

5.几天后，小明再次浏览商品并下单，这次没有提示登录，而是直接看到了下单页面

在进入登录页面的时候，首先会看看localStroage或cookie里面是否有相关信息，如果有相关信息，则直接发送请求跳转到相关页面

// 请求头
POST  /s?ie=utf-8  HTTP/1.1 
Host: 127.0.0.1
 Cookie: 7facebcffbc7454ebf6b20de1fdbe038297c0cb914fa3557fdd81223b36ee751
 Content-type: application/x-www-form-urlencoded
 User-Agent: chrome 83
// 请求体
username=admin&password=admin

// 响应
行      HTTP/1.1  401  ERROR
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
// 响应体
{"code":200,"message":"登录成功", "token":******}
<html>
  ......具体内容
</html>

登录功能是采用何种技术实现的？存在哪些缺点或不足？

登录操作一般都会放在一个表单控件上面。一般表单有登录名、密码，<form></form>、<input>，表单所有信息用<form></form>包裹。用<form>包裹所有<input>输入框，当点击提交后，将会把<form>所包裹得所有<input>输入框的信息提交给后台的一个地址上。在这之后可以向服务端发送POST或GET请求，并把账号密码做为参数传输给后端。

但是不管是使用cookie还是session，使用token登录安全性更强。

登录后根据security的安全算法生成一个唯一的token值（基于JWT），然后存储到redis中，并设定过期时间，之后把token值返回前台，前台保存到localStorage中，然后每次访问的时候都需要提交token作为验证，验证通过则可以访问接口。

使用token登录的好处

支持跨域访问: Cookie是不允许垮域访问的，这一点对Token机制是不存在的，前提是传输的用户认证信息通过HTTP头传输.
无状态(也称：服务端可扩展行):Token机制在服务端不需要存储session信息，因为Token 自身包含了所有登录用户的信息，只需要在客户端的cookie或本地介质存储状态信息.
更适用CDN: 可以通过内容分发网络请求你服务端的所有资料（如：javascript，HTML,图片等），而你的服务端只要提供API即可.
去耦: 不需要绑定到一个特定的身份验证方案。Token可以在任何地方生成，只要在你的API被调用的时候，你可以进行Token生成调用即可.
适用接口跨平台: 当你的客户端是一个原生平台（iOS, Android，Windows 8等）时，Cookie是不被支持的（你需要通过Cookie容器进行处理），这时采用Token认证机制就会简单得多。
CSRF:因为不再依赖于Cookie，所以你就不需要考虑对CSRF（跨站请求伪造）的防范。
性能: 一次网络往返时间（通过数据库查询session信息）总比做一次HMACSHA256计算的Token验证和解析要费时得多.
不需要为登录页面做特殊处理: 如果你使用Protractor 做功能测试的时候，不再需要为登录页面做特殊处理.
基于标准化:你的API可以采用标准化的 JSON Web Token (JWT). 这个标准已经存在多个后端库（.NET, Ruby, Java,Python, PHP）和多家公司的支持（如：Firebase,Google, Microsoft）

什么是客户端检验与服务端校验，各自的优劣？

服务器端验证是程序的安全保障，客户端验证是不能信任的，客户端提交的数据是可以自己更改的，在客户端的验证是很容易绕过的，直接建一个HTML文件，把表单提交地址写到你的地址上，再把验证语句去掉，那客户端验证就是摆设了。后端验证是为了保证数据满足业务条件(business invariants)；

客户端验证是为了尽可能地降低服务器端的负荷，把一些验证操作前置到客户端，使用简单且不需要提交到服务器端就可以验证,减少服务器负担,而且多么复杂(联动,计算,隐藏,显示,自动增加行等等)都可以验证。前端验证是为了提供更好的用户体验；

最明显的区别是不可能把所有的用户信息都写在客户端。客户端的验证一般是语法，或字符方面的验证，对客户的身份等验证都是在服务器端验证的，因为服务器端可以访问数据库。而客户端不能直接访问数据库部分。

什么是客户端渲染与服务端渲染，各自的优劣？

服务端渲染（Server-Side Rendering），是指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。客户端渲染是在请求回数据后就已经开始渲染了，只是有些数据还没拿到，暂时没法渲染，不过大部分的页面内容我们都已经可以看到了，所以客户端渲染可以完成页面的局部刷新。例如JD的商品评论数据

优点

可以向用户快速展示页面的内容，增加用户体验
给别人爬虫爬取相应的内容增加一定的困难
无需占用客户端资源，解析模板的工作完全交给后端来做，客户端只需要解析HTML页面。客户端的资源占用少。
后端生成静态化文件。即生成缓存片段，减少数据库查询的浪费时间。高效。
有利于SEO。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息，更有利于seo。

缺点

可能需要向服务器请求多次数据，占用服务器资源。
不利于前后端分离，开发效率低。
一些常用的浏览器的 api 可能无法正常使用，比如 window，document，alert等，如果使用的话需要对运行环境加以判断。

客户端渲染 在浏览器中通过JS直接进行页面的渲染路由跳转等操作，与后端的交互主要为API微服务接口的数据调用。得到数据后在前端进行分析处理和界面生成展现。比较代表性的为React,Vue,Angular三大前端框架的SPA(Single Page Application)应用。

优点

1.前后端分离。前端专注UI，后端专注api开发。前端有更多选择性，不需要遵循后端特定的模板。

2.体验更好。

缺点

1.前端响应较慢。客户端渲染，前端还需要进行拼接字符串的过程，需要耗费额外的时间，不如服务器渲染的速度快。

2.体验更好。比如，我们将网站做成SPA或者部分内容做成SPA，这样，尤其是移动端，可以使体验更接近于原生app。

3.不利于SEO 搜索引擎优化，即百度、搜狗等搜索引擎搜索不到客户端渲染的数据。

语义

什么是语义标记？请以三类人群为例(正常人群、搜索引擎、视障人群等)，说明这些用户访问Web网的方式、工具与解析过程，以及使用语义标记的好处？

语义化的标签，旨在让标签有自己的含义。

正常人群

良好的语义HTML标记有助于提升网站对访客的易用性，例如：由于网页代码是结构化的，可以为用户提供网页搜索功能等交互功能。

开发者

代码结构清晰，方便阅读，代码更简洁，复用性更高，语义化的代码具有更好的亲和力，有利于团队合作开发。
逐渐使网页标准化，这个也许是以后工作时候应聘时遵循的标准。

搜索引擎

利于搜索引擎爬虫理解代码，有利于搜索引擎优化（SEO）。网站排名提升。

视障人群

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

2.说明HTML与SVG、MathML、VoiceML等的区别和共同点？

共同点

都是语义化标签
xml和html都是用于操作数据或数据结构，在结构上大致是相同的。

区别

MathML指“数学标记语言”，是XML语言的一个子集，用来在web网页，甚至部分软件中显示数学公式。简言之，就是使用特殊的类似HTML的标记在网页中显示数学公式。
VoiceXML是建立于XML 语言规范基础之上，是一种应用于语音浏览的标记语言。利用VoiceXML可以建立基于WEB的语音应用和服务。
可缩放矢量图形 (Scalable Vector Graphics，SVG)是 W3C 推出的基于 XML 的二维矢量图形标准。 SVG可以提供高质量的矢量图形渲染，同时由于支持 JavaScript 和文档对象模型，SVG图形通常具有强大的交互能力。
html是一种网页标记语言，用于文档的传输。
html使用固定的标记，XML没有固定的标记，XML可自定义标记。
Html标签是预定义的；XML标签是免费的、自定义的、可扩展的。
html是用来显示数据的；xml是用来描述数据、存放数据的，所以可以作为持久化的介质！Html将数据和显示结合在一起，在页面中把这数据显示出来；
xml不是HTML的替代品，xml和html是两种不同用途的语言。 XML 不是要替换 HTML；实际上XML 可以视作对 HTML 的补充。XML 和HTML 的目标不同HTML 的设计目标是显示数据并集中于数据外观，而XML的设计目标是描述数据并集中于数据的内容。

3.请举出一个实例(包括标记名称与主要属性)，说明下列各类(注意：是一类，不是一个)标记的语义和典型用法：

列表元素

有序列表

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

无序列表

<style>
    ul {
        list-style-type: none;
        text-align: center;
        color: black;
        background-color: #fff;
    }
    ul li {
        width: 280px;
        height: 30px;
        line-height: 30px;
        border: 1px solid red;
    }
</style>

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

表格元素

<style>
    table {
          border-collapse: collapse;
          border-spacing: 0;
    }

    .pure-table caption {
          color: #000;
          font: italic 85%/1 arial, sans-serif;
          padding: 1em 0;
          text-align: center;
    }
</style>

<table class="pure-table">
    <caption>
        This is a caption.
    </caption>
    <thead>
        <td>...</td>
        <td>...</td>
    </thead>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

块元素 block Element

<div
    style="float: left;height: 500px; width: 800px; text-align:center"
>
</div>

内联元素 inline Element

<span
    style="float: left;height: 500px; width: 800px; text-align:center"
>
</span>

其它语义类型，如多媒体元素、链接、框架等

<a href="#" style="background-color: yellow">地崩山摧壮士死，然后天梯石栈相钩连。</a>
<img src="img/2.png" alt="">
<video src="" autoplay="autoplay"></video>

表单

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>html form 演示</title>
        <style type="text/css">
            fieldset {
                margin-bottom:10px;
            }
        </style>
    </head>

    <body>
    <form name="formTest" action="save.php" method="post"  onreset="alert('唉，又要重填')" onsubmit="alert('我被送到服务端去啦！')" enctype="multipart/form-data"  >
    <fieldset>
        <legend>text 文本框</legend>
            <input type="text" name="textTest"
            value="有七朵玫瑰花" maxlength="9"
            size="20"/>
            <input type="button" value="输入了什么？"
            onclick="iknow('text')">
    </fieldset>

    <fieldset>
        <legend>password 密码框</legend>
            <input type="password" name="passwordTest" value="好一朵玫瑰花呀"  maxlength="10" size="20"/>
            <input type="button" value="输入了什么？" onclick="iknow('password')">
    </fieldset>

    <fieldset>
        <legend>textarea 多行文本框</legend>
            <textarea name="textareaTest"
                cols="20"
                rows="10" >好一朵玫瑰花呀
            </textarea>
            <input type="button" value="输入了什么？" onclick="iknow('textarea')">
            <input type="button" value="执行我！" onclick="eval(document.forms[0].textareaTest.value)">
    </fieldset>

    <fieldset>
        <legend>Radio 单选按钮</legend>
            <input type="radio" name="radioTest" checked="checked"/>
            <input type="radio" name="radioTest" />
            <input type="radio" name="radioTest"   />
            <input type="radio" name="radioTest" />
            <input type="button" value="谁被选中了？" onclick="iknow('radio')">
    </fieldset>

    <fieldset>
        <legend>CheckBox 多选按钮</legend>
            <input type="checkbox" name="checkboxTest" checked="checked" />
            <input type="checkbox" name="checkboxTest" />
            <input type="checkbox" name="checkboxTest" />
            <input type="checkbox" name="checkboxTest" checked="checked"/>
            <input type="button" value="谁被选中了？" onclick="iknow('checkbox')">
    </fieldset>

    <fieldset>
        <legend>ComBox 下拉框</legend>
            <select name="comboxTest">
                <option>网络技术</option>
                <option>网络系统管理</option>
                <option selected="true">信息安全</option>
            </select>
            <input type="button" value="谁被选中了？" onclick="iknow('combox')">
    </fieldset>

    <fieldset>
        <legend>ListBox 列表框</legend>
            <select name="listboxTest" multiple="true">
                <option>网络技术</option>
                <option selected="true">网络系统管理</option>
                <option selected="true">信息安全</option>
            </select>
            <input type="button" value="谁被选中了？" onclick="iknow('listbox')">
    </fieldset>

    <fieldset>
        <legend>file 文件框</legend>
            <input type="file" name="fileTest" size="30" />
            <input type="button" value="输入的文件信息？" onclick="iknow('file')">
    </fieldset>

    <fieldset>
        <legend>hidden 隐藏框</legend>
            <input type="hidden" name="hiddenTest" value="我是谁你看不见！" size="30" />
            <input type="button" value="输入了什么？" onclick="iknow('hidden')">
    </fieldset>

    <input type="submit" value="提交到服务端"/>
    <input type="reset" value="重新填写"/>
    </form>
    <script type="text/javascript" >
        function　iknow(sType){
            var f=document.forms[0];
            //var f=document.formTest;
            switch(sType){
                case "text":
                    alert(f.textTest.value);
                    //f.textTest.value="这是第二个新的输入";
                    break;
                case "password":
                    alert(f.passwordTest.value);
                    break;
                case "textarea":
                    alert(f.textareaTest.value) ;
                    break;
                case "radio":
                    for (var i=0;i<f.radioTest.length;i++)
                        if (f.radioTest[i].checked == true)
                            alert("第"　+　(i+1)  +"项被选中了！")
                    break;
                case "checkbox":
                    var rets = [];
                    for(var i=0;i<f.checkboxTest.length;i++){
                        if (f.checkboxTest[i].checked == true)
                            rets.push(i+1);
                    }
                    alert("第"　+　rets.join(',')  +"项被选中了！")
                    break;
                case "combox":
                    var i=f.comboxTest.selectedIndex
                    alert("第"　+ (i+1) + "项被选中了:"
                    + f.comboxTest.options[i].text);
                    break;
                case "listbox":
                    var rets = [];
                    for(var i=0;i<f.listboxTest.length;i++)
                        if (f.listboxTest.options[i].selected == true)
                            rets.push(f.listboxTest.options[i].text);
                    alert("被选中的项目:"　+　rets.join(',')  )
                    break;
                case "file":
                    alert(f.fileTest.value)
                    break;
                case "hidden":
                    alert(f.hiddenTest.value)
                }
        }
    </script>
    </body></html>

布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">

    .greybox{background:#e1e1e1;  border:solid 1px yellow;}
    .bluebox{background:blue; border:solid 1px white;}
    .redbox{background:red; border:solid 1px black;}
    div {border:inherit;background:transparent;margin:5px;}

    body{text-align:center;margin:0 auto;}
    #top {}
    #middle{}
    #bottom{}

    #mid_row1_col1{float:left;}
    #mid_row1_col2{float:left;}
    #mid_row1_col3{float:right;}

    #mid_row1_col2_col1{float:left;}
    #mid_row1_col2_col2{float:right;}

    .clear{clear:both;border:none;height:1px;margin:0;padding:0}

  </style>


</head>

<body class="greybox" style="width:900px">
  <div id="top" class="redbox" style="height:60px;" >
    顶部
  </div>

  <div id="middle" class="redbox">
    <div id="mid_row1" style="height:350px;" >
      <div id="mid_row1_col1" class="greybox" style="height:90%;width:20%">
        左侧栏
      </div>

      <div id="mid_row1_col2" class="greybox" style="height:90%;width:55%">
        <h2>主内容区域</h2>
        <div id="mid_row1_col2_col1" style="width:45%;height:40%;">
          主内容区第一列
        </div>
        <div id="mid_row1_col2_col2" style="width:45%;height:40%;">
          主内容区第二列
        </div>
        <div class="clear"></div>
      </div>

      <div id="mid_row1_col3" class="bluebox" style="height:90%;width:20%">
        右侧栏
      </div>
      <div class="clear"></div>
    </div><!-- end of mid_row1 -->

    <div id="mid_row2" style="height:100px;" class="bluebox">第二行</div>
    <div id="mid_row3" style="height:100px;" class="bluebox">第三行</div>
  </div>

  <div id="bottom" style="height:60px;" class="redbox">底部</div>
</body>
</html>

名词解释

解释下列名词，并举一代码实例，并给予注释或说明

DOM与BOM

DOM称为文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
DOM是HTML文档的内存中对象表示，它提供了使用JavaScript与网页交互的方式。DOM是节点的层次结构（或树），其中document节点作为根。
实际上DOM是以面向对象的方式来描述的文档模型。DOM定义了表示和修改文档所需的对象和这些对象的行为和属性以及这些对象之间的关系。
通过JavaScript，我们可以重构整个HTML文档。比如添加、移除、改变或重排页面上的项目。
要改变页面上的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
BOM：Browser Object Model，即浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

Browser对象：指BOM提供的多个对象，包括：Window、Navigator、Screen、History、Location等。

其中Window对象为顶层对象，其他对象都为Window对象的子对象。

2.CSS伪类与CSS伪元素

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释。
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

3.Jquery
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 [1]

4.SCSS
SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。

SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

5.响应式设计
响应式设计（RWD，Responsive Web Design）是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。同时在数据发生改变的时候，浏览器响应数据改变展示数据。

6.媒体查询

使用 @media查询，可以针对不同的媒体类型定义不同的样式
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

// 如果浏览器窗口小于 500px, 背景将变为浅蓝色：
@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

7.cookies

某些网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。Cookie另一个典型的应用是当登录一个网站时，网站往往会请求用户输入用户名和密码，并且用户可以勾选“下次自动登录”。如果勾选了，那么下次访问同一网站时，用户会发现没输入用户名和密码就已经登录了。这正是因为前一次登录时，服务器发送了包含登录凭据（用户名加密码的某种加密形式）的Cookie到用户的硬盘上。第二次登录时，如果该Cookie尚未到期，浏览器会发送该Cookie，服务器验证凭据，于是不必输入用户名和密码就让用户登录了。

8.node.js
Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台执行环境。Node.js 采用 Google 开发的 V8 执行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。
Node.js 大部分基本模块都用 JavaScript 语言编写。在 Node.js 出现之前，JavaScript 通常作为客户端程序设计语言使用，以JavaScript 写出的程序常在用户的浏览器上执行。Node.js 的出现使 JavaScript 也能用于服务端编程。Node.js 含有一系列内置模块，使得程序可以脱离 Apache HTTP Server 或 IIS，作为独立服务器执行。

9.http协议与https协议
HTTP协议是超文本传输协议的缩写，英文是Hyper Text Transfer Protocol。它是从WEB服务器传输超文本标记语言(HTML)到本地浏览器的传送协议。
HTTPS 协议（HyperText Transfer Protocol over Secure Socket Layer）：一般理解为HTTP+SSL/TLS，通过 SSL证书来验证服务器的身份，并为浏览器和服务器之间的通信进行加密。

10.事件驱动
事件驱动程序设计（英语：Event-driven programming）是一种电脑程序设计模型。这种模型的程序执行流程是由用户的动作（如鼠标的按键，键盘的按键动作）或者是由其他程序的消息来决定的。相对于批处理程序设计（batch programming）而言，程序执行的流程是由程序员来决定。批处理（batch）的程序设计在初级程序设计教学课程上是一种方式。然而，事件驱动程序设计这种设计模型是在交互程序（Interactive program）的情况下孕育而生的。

11.定时器
JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。

12.同步调用与异步调用
同步就是整个处理过程顺序执行，当各个过程都执行完毕，并返回结果。
异步调用则是只是发送了调用的指令，调用者无需等待被调用的方法完全执行完毕；而是继续执行下面的流程。

13.安全字体、网络字体、图标字体
由于运行的操作系统有所不同，浏览器会尽力提供一个看上去合适的字体。但是有些字体操作系统不能够提供，因此Web开发者要保证不论发生什么情况都能够提供一套字体进行展示。

14.Javascript与node.js
JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

15.本地存储与服务端存储
浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage,localStorage和cookie都是由浏览器存储在本地的数据
服务器端也可以保存所有用户的数据，但需要的时候浏览器要向服务器请求数据。服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。
浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。服务器存储数据安全一些，浏览器只适合存储一般数据。

16.窗口与文档

DOM称为文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
DOM是HTML文档的内存中对象表示，它提供了使用JavaScript与网页交互的方式。DOM是节点的层次结构（或树），其中document节点作为根。
实际上DOM是以面向对象的方式来描述的文档模型。DOM定义了表示和修改文档所需的对象和这些对象的行为和属性以及这些对象之间的关系。
通过JavaScript，我们可以重构整个HTML文档。比如添加、移除、改变或重排页面上的项目。
要改变页面上的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
BOM：Browser Object Model，即浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

Browser对象：指BOM提供的多个对象，包括：Window、Navigator、Screen、History、Location等。

其中Window对象为顶层对象，其他对象都为Window对象的子对象。

17.URL绝对地址与URL相对地址

绝对URL（absolute URL 比如说一个完整的通信地址，包含国家，省，市，小区门牌号，姓名。）包括指向目录或文件的完整信息，包括模式、主机名和路径。绝对url本身与被引用的文件实际位置无关，无论在哪个主机上的网页中，某一文件的绝对URL都是完全一样的。当引用别人服务器上的文件时，应该总是使用绝对URL。

相对URL，指出的位置是以信息提供者的位置为参照的。（假设A的位置标记为在B的向左十米，那么这个位置就是相对地址，相对于B的位置而言的）相对URL以包含URL本身的文件位置为参照点，描述目标文件的位置。因此，相对URL可以表达像“指向本页面同一目录的那个文件”的意思。