1、请列举7种以上常用的HTML标签,说明其语义。
解:
1.div标签,是一个块元素,就像一个大盒子,可以放各式各样的东西,如:图片....
2.p标签,也是一个块元素,它通常是用来放一段话的....
3. h1,h2....h6标签,也是一个块元素,常用来放标题
4.span标签,是一个行内元素,常用来处理一段话中的某几个字符
5.img标签,用来加载图片的标签
6.table标签,用来创建表格的标签
7.br标签,用来换行的标签
8.hr标签,用来画线的标签
9.a一个点击跳转的超链接标签
10.ul一个用来做列表的标签
2、请说明下面各种情况的执行结果,并注明产生对应结果的理由。
function doSomething() {
alert(this);
}
① element.onclick = doSomething,点击element元素后。
② element.onclick = function() {doSomething()}, 点击element元素后。
③ 直接执行doSomething()。
答案:
解析:
①弹出element object,通过函数赋值方式,this直接指向element对象
②弹出window object,this是写在doSomething这个函数里面的,而这种方式的事件绑定写法并没有将element对象传递给this,而在默认情况下this指向window
③弹出window object,没有绑定对象的情况下this默认指向window
3、请用JavaScript语言实现 sort 排序函数,要求:sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100]。
如果你有多种解法,请阐述各种解法的思路及优缺点。(仅需用代码实现一种解法,其它解法用文字阐述思路即可)
答案:
function sort(arr){
arr.sort(function(item1,item2){
return item1-item2;
});
return arr;
}
另冒泡排序:时间复杂度O(n*n),效率太低
4、请根据下面的HTML和CSS代码,画出布局示意图
<div id="page">
<div class="main">
<div class="sub"></div>
</div>
<div class="nav"></div>
</div>
<style type="text/css">
#page { width: 520px; }
.nav { width: 200px; float: right; }
.main { width: 200px; float: left; padding-left: 110px; }
.sub { width: 100px; float: left; margin: 10px 0 10px -100px; }
.main { border: 1px solid #000; }
.nav, .sub { border: 1px dashed #000; height: 300px; }
.sub { height: 280px; }
</style>
答案:
注意:元素定义了float会脱离文档流。
5、阅读以下JavaScript代码:
if (window.addEventListener) {
var addListener = function(el, type, listener, useCapture) {
el.addEventListener(type, listener, useCapture);
};
} else if (document.all) {
addListener = function(el, type, listener) {
el.attachEvent("on" + type, function() {
listener.apply(el);
});
};
}
请阐述 a) 代码的功能; b) 代码的优点和缺点; c) listener.apply(el) 在此处的作用; d) 如果有可改进之处,请给出改进后的代码,并说明理由。
答案:
a) 功能:事件注册
b) 优点:跨浏览器,特性探测,性能优化。缺点:document.all、代码冗余
c) 作用:修改了listener的作用域,使得this指向el
d) 改进:document.all改成window.attachEvent; useCapture的默认
var addListener = function(el, type, listener, useCapture) {
if (window.addEventListener) {
el.addEventListener(type, listener, useCapture);
}else if(window.attachEvent){
el.attachEvent("on" + type, listener);
}else{
listener.apply(el);
}
}
6、请编写一个JavaScript 函数toRGB,它的作用是转换CSS中常用的颜色编码。 要求:
alert(toRGB("#0000FF")); // 输出 rgb(0, 0, 255)
alert(toRGB("invalid")); // 输出 invalid
alert(toRGB("#G00")); // 输出 #G00
答案:
function toRGB(str){
var match=str.match(/^#([a-zA-Z0-9]{2})([a-zA-Z0-9]{2})([a-zA-Z0-9]{2})$/);
if (match) {
return 'rgb('+parseInt(match[1],16)+','+parseInt(match[2],16)+','+parseInt(match[3],16)+')';
}else{
return str;
}
}
7、尝试实现注释部分的Javascript代码,可在其他任何地方添加更多代码(如不能实现,说明一下不能实现的原因):
var Obj = function(msg){
this.msg = msg;
this.shout = function(){
alert(this.msg);
}
this.waitAndShout = function(){
//隔五秒钟后执行上面的shout方法
}
}
答案:
var self=this;
setoutTime(self.shout,5000);
8、请编写一个JavaScript函数,它的作用是校验输入的字符串是否是一个有效的电子邮件地址。要求: a)使用正则表达式。 b)如果有效返回true ,反之为false。
答案:
function checkEmail(email){
return /^\w+(\.\w+)*\@(\w+\.)+\w+$/.test(email)?true:false;
}
9、请分别列出HTML、JavaScript、CSS、Java、php、python的注释代码形式。
答案:
HTML: <!-- HTML 注释 -->
JavaScript: // 或/* */
CSS: /* */
Java: // 或/* */
php: // 或/* */或#
python: # 或'''注释'''
10、根据下图,编写HTML结构。要求:遵循xHTML 1.0规范且符合Web语义。
答案:
<div class="item">
<div class="item-pic">
<a href="path/to/item">
<img src="path/to/img" alt="商品图片" />
</a>
</div>
<div class="item-desc">
<a href="path/to/item/">联想IdeaPad U130红色至尊 高性价比</a>
</div>
<div class="item-price">
<em>¥8888.00</em>
</div>
</div>
11、请编写一段JavaScript脚本生成下面这段DOM结构。要求:使用标准的DOM方法或属性。
<div id=”example”>
<p class=”slogan”>淘!你喜欢</p>
</div>
答案:
window.onload = function() {
var div = document.createElement('div');
div.id = "example";
var p = document.createElement('p');
p.className = "slogan";
p.innerHTML = '淘!你喜欢';
div.appendChild(p);
document.body.appendChild(div);
}
12、请用CSS定义p标签,要求实现以下效果: 字体颜色在IE6下为黑色(#000000);IE7下为红色(#ff0000);而其他浏览器下为绿色(#00ff00)。
答案:
p{
color:#0f0;
_color:#000; /*ie6*/
}
/*ie7*/
*+html p{
color:#f00;
}
13、请简化以下的CSS代码,并给出简单的说明。
div.container {
width: 500px;
background-image: url(/img/sprite.png);
background-repeat: no-repeat;
background-position: 0px -78px;
}
div.container ul#news-list, div.container ul#news-list li {
margin: 0px;
padding: 0px;
}
div.container ul#news-list li {
padding-left: 20px;
background-image: url(/img/sprite.png);
background-repeat: no-repeat;
background-position: -120px 0px;
}
a {
font-size: 14px;
font-weight:bold;
line-height: 150%;
color: #000000;
}
答案:
div.container {
width: 500px;
background: url(/img/sprite.png) no-repeat 0 -78px;
}
#news-list, #news-list li {
margin: 0
padding: 0;
}
#news-list li {
padding-left: 20px;
background: url(/img/sprite.png) no-repeat -120px 0;
}
a {
font: bold 14px/150%;
color: #000;
}
14、请编写一个通用的事件注册函数(请看下面的代码)。
function addEvent(element, type, handler)
{
// 在此输入你的代码,实现预定功能
}
答案:
function addEvent(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
}else if (element.attachEvent){
element.attachEvnet("on" + type, handler);
}else{
element["on" + type] = handler;
}}
15、下面是个输入框
当没有获取焦点时,显示灰色的提示信息:
当用户输入时,隐藏提示文字,且恢复为默认色:
当输入框失去焦点,如果输入为空,需还原提示信息:
要求: a) 写出HTML和CSS代码 b) 用JavaScript实现功能
答案:
HTML:
<input type="text" id="input" value="请输入内容" />
css:
#input{
color:gray;
}
JS:
var input = document.getElementById("input");
input.onfocus = function(){
if(this.value == "请输入内容"){
this.value = "";
this.style.color = "black";
}
}
input.onblur = function(){
if(this.value == ""){
this.style.color = "grey";
this.value = "请输入内容";
}
}
16、请给JavaScript的String 原生对象添加一个名为trim 的原型方法,用于截取空白字符。要求
alert(" taobao".trim()); // 输出 "taobao"
alert(" taobao ".trim()); // 输出 "taobao"
答案:
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
};
说明:记住\s表示空格
17、请编写一个JavaScript函数parseQueryString,它的用途是把URL参数解析为一个对象,如:
var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....”
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
答案:
function parseQueryString(url){
var temp=url.split('?')[1].split('&');
if(!temp){
return {};
}
var obj={};
for(var i=0;i<temp.length;i++){
var str=temp[i].split('=');
if(!obj[str[0]]){
obj[str[0]]=str[1];
}else{
obj[str[0]]=[obj[str[0]]];
obj[str[0]].push(str[1]);
}
}
return obj;
}
18、根据下图,编写HTML结构。要求:符合xHTML 1.0规范。
答案:
<table align="center" border="1" cellspacing="0" cellpadding="0" width="50%">
<tr>
<th>国家</th>
<th>网站名</th>
<th>URL</th>
<th>Alexa排名</th>
</tr>
<tr align="center">
<td>中国</td>
<td>淘宝网</td>
<td>www.taobao.com</td>
<td>38</td>
</tr>
<tr align="center">
<td rowspan="2">美国</td>
<td>Ebay</td>
<td>www.ebay.com</td>
<td>22</td>
</tr>
<tr align="center">
<td>Amazon</td>
<td>www.amazon.com</td>
<td>27</td>
</tr>
<tr align="right">
<td colspan="4">Alexa.com提供</td>
</tr>
</table>
19、请指出下面代码中不符合xHTML 1.0规范的地方,说明理由,并写出改善后的代码:
<h1><p>小明的表白</p></h1>
<dl>
<dt><p><div>小明说:</div></p></dt>
<dd>”淘宝网,<i>天天上</i>。”</dd>
<dd><b>”淘我喜欢!” </b></dd>
</dl>
答案:不合理的地方:
1、 h1元素内不能包含其他块级元素;
2、 dt元素内不能包含其他块级元素;
3、 p元素内不能包含其他块级元素;
4、 i表样式斜体,不符合语义化。
5、 b表样式粗体,不符合语义化。
代码:
<h1>小明的表白</h1>
<dl>
<dt>小明说:</dt>
<dd>”淘宝网,<em>天天上</em>。”</dd>
<dd><strong>”淘我喜欢!” </strong></dd>
</dl>
20、请把以下用于连接字符串的JavaScript代码修改为更有效率的方式
var htmlString ="<div class=”container”>" + "<ul id=”news-list”>";
for (var i = 0; i < NEWS.length; i++) {
htmlString += "<li><a href=”"
+ NEWS[i].LINK + ">"
+ NEWS[i].TITLE + "</a></li>";
}
htmlString += "</ul></div>";
答案:
JavaScript赋值效率问题:
var htmlString = "<div class=”container”>" + "<ul id=”news-list”>";
for (var i = 0; i < NEWS.length; i++) {
var newsItem = NEWS[i];
htmlString+="<li><a href=”"+newsItem.LINK+">"+newsItem.TITLE+"</a></li>";
}
htmlString+="</ul></div>";
21、请给Array本地对象增加一个原型方法,它用于删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重复条目的新数组。
答案:
Array.prototype.delRep=function(){
if(this.length<=1){
return [];
}
this.sort();
var res=[this.shift()];
for(var i=1;i<this.length;i++){
if(this[i]!==res[res.length-1]){
res.push(this.splice(i,1)[0]); //注意此处
i--;
}
}
return this;
}
22、请根据下面的描述,用JSON语法编写一个对象: “小明今年22岁,来自杭州。兴趣是看电影和旅游。他有两个姐姐,一个叫小芬,今年25岁,职业是护士。还有一个叫小芳,今年23岁,是一名小学老师。”
var person = ?
答案:
var person={
"name":"小明",
"from":"杭州",
"interest":["看电影","旅游"],
"sister":[{
"name":"小芬",
"age":"25",
"iob":"护士"
},{
"name":"小芳",
"age":"23",
"iob":"小学教师"
}]
};
23、请改善以下HTML代码,使其符合xHTML 1.0规范
<A id='go-home' href='http://www.taobao.com'
onClick='doSomething();'>
<IMG src="http://www.taobao.com/logo.png">
</A>
答案:
<a id='go-home' href='http://www.taobao.com' onClick='doSomething();'>
<img src="http://www.taobao.com/logo.png">
</a>
24、根据下图,编写HTML结构。要求:遵循xHTML 1.0规范且符合Web语义。
答案:
<form>
<fieldset>
<legend>您的基本信息</legend>
<label for="username">姓名:</label><input type="text" name="username"/><br>
<label for="sex">性别:</label>
<select name="sex">
<option checked="checked">男性</option><option>女性</option>
</select>
</fieldset>
<fieldset>
<legend>设置密码</legend>
<label for="password">密码:</label><input type="password" name="password" />
<br>
<label for="repassword">再输一遍:</label><input type="password" name="repassword" />
</fieldset>
<div>
<input type="button" value="确定"/><input type="button" value="取消" />
</div>
</form>
注意:
1、表单:form
2、表单元素:input(type=text;type=password)、select、button
3、分组信息和标题: fieldset、legend
4、label标签以及其for属性和表单元素关联