计算机专业基础_Web前端

HTML中怎么显示输⼊框中的灰⾊提示⽂字？（1分）
HTML中使用占位符文本来显示提示文字
为不⽀持框架的浏览器需要添加什么标签？（1分）
noframes 标签可为那些不支持框架的浏览器显示文本，noframes 元素位于 frameset 元素内部
HTML5的应⽤程序缓存manifest⽂件包括哪⼏个部分？（1分）
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CSS的static定位的元素会受到top, bottom, left, right的影响吗？（1分）
CSS的static静态定位的元素不会受到top,bottom,left,right的影响
输⼊框的图标可以使⽤什么属性展现出来？（1分）
输入框的图标可以使用background属性展现出来
在Javascript的严格模式中，【var arguments = 3.14;】为什么会报错？（1分）
在Javascript的严格模式中变量名不能使用 "arguments" 字符串
Window.document和Document有什么区别？（1分）
window.document是一个指向document对象的引用
怎么设置display属性的值使容器成为弹性容器？（1分）
通过设置 display属性的值为 flex或 inline-fle来定义弹性容器。

⽤HTML5新标签MathML写出a^2 + b^2 = c^2（2分）

<math xmlns="http://www.w3.org/1998/Math/MathML">    
      <mrow>
         <msup><mi>a</mi><mn>2</mn></msup>
         <mo>+</mo>                   
         <msup><mi>b</mi><mn>2</mn></msup>
         <mo>=</mo>                     
         <msup><mi>c</mi><mn>2</mn></msup>
      </mrow>                       
   </math>

a^{2} + b^{2} = c^{2}

⽤SVG绘制⼀个圆形（2分）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="20"/>
</svg>

怎么显示⽂档对象中所有cookie的键值对？（2分）
var cookiestr = document.cookie 先获取文档对象所有cookie字段再进行拆分键值
undeﬁned == null的结果是true还是false?（2分）
undefined与null值相等 ==结果是true, undefined与null类型不同 ===结果为false
说明GET请求和POST请求的区别（2分）
GET请求发送数据时数据在url中可见，因此安全性较差，对数据长度和类型有限制，只能发送ASCII字符，并且可以被缓存
POST请求发送数据时数据不会显示在url中，因此比GET请求安全性好，对数据长度类型无限制，不能被缓存

使⽤openDatabase创建⼀个名为user的表，仅包含name和password字段？（3分）

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
tx.executeSql('CREATE TABLE IF NOT EXISTS USER (name unique, password)');
});

⽤div标签实现下⾯的布局（4分）

实现⼀个简单的倒计时功能（⽤普通的JavaScript或者⽤Web Worker实现，5分）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
window.onload=clock;
function clock(){
var today=new Date(),//当前时间
h=today.getHours(),
m=today.getMinutes(),
s=today.getSeconds();
var stopTime=new Date("Mar 28 2024 00:00:00"),//结束时间
stopH=stopTime.getHours(),
stopM=stopTime.getMinutes(),
stopS=stopTime.getSeconds();
var shenyu=stopTime.getTime()-today.getTime(),//倒计时毫秒数
shengyuD=parseInt(shenyu/(60*60*24*1000)),//转换为天
D=parseInt(shenyu)-parseInt(shengyuD*60*60*24*1000),//除去天的毫秒数
shengyuH=parseInt(D/(60*60*1000)),//除去天的毫秒数转换成小时
H=D-shengyuH*60*60*1000,//除去天、小时的毫秒数
shengyuM=parseInt(H/(60*1000)),//除去天的毫秒数转换成分钟
M=H-shengyuM*60*1000;//除去天、小时、分的毫秒数
S=parseInt((shenyu-shengyuD*60*60*24*1000-shengyuH*60*60*1000-shengyuM*60*1000)/1000)//除去天、小时、分的毫秒数转化为秒
document.getElementById("div").innerHTML=(shengyuD+"天"+shengyuH+"小时"+shengyuM+"分"+S+"秒"+"<br>");
// setTimeout("clock()",500);
setTimeout(clock,500);
}
</script>
</body>
</html>

定义⼀个弹性盒⼦，使四个div均匀分布在⼀⾏上（5分）

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 500px;
height: 250px;
background-color: lightgray;
}
.flex-item {
background-color: yellow;
width: 100px;
height: 100px;
margin: 10px;
text-align:center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div> 
<div class="flex-item">flex item 4</div>
</div>
</body>
</html>

flex item 1

flex item 2

flex item 3

flex item 4