HTML考点解析

1,选择题30分,15小题:

2,代码填空(20分) 4小题:

3、问答题20分

1).后代选择器,子选择器,相邻选择器,同辈选择器的基本语法

2).JS文件按照其引入到网页的方式

3).标签选择器、类选择器、ID选择器、并集选择器和全局选择器的基本语

4).BOM里常用的至少5个对象, 列举window对象的常用的5个方法

4.程序题(30分)

HTML5实现表单页面

JS实现时钟功能

CSS3实现属性选择器实现样式页面

1.无

2.无

3.

1.      后代选择器  body p{  background: red;  }
        子选择器  body>p{  background: pink;  }
        相邻选择器 active+p {  background: green;  }
        同辈选择器 active~p{  background: yellow;  }

2.    
    内嵌式
        (1)创建一对script标签,在标签中书写js代码
        (2)在HTML页面中任何位置引入该标签
            <script>
                js代码
            </script>
    外链式
        (1)在外部创建.js文件,并在js文件中书写js代码
        (2)在页面通过script标签中src属性引入.js文件
            <script src="js文件路径"></script>
    事件属性引入
        <div onclick="alert('时间属性')">xxx</div>
    注意:
    script标签引入位置通常在head头部或者结束body之前(因为代码执行      顺序的问题,所以最好写在结束body之前)

3.
    标签选择器 p { font-size:16px;}
    类选择器   class { font-size:16px;}
    ID选择器   #id { font-size:16px;}

    遵循ID选择器 > class类选择器 > 标签选择器的优先级

    并集选择器  p, span{color: skyblue;}
    全局选择器     *{color: red;}

4.      
    对象:window、document、location、screen、history、navigator

    方法:alert()、confirm()、prompt()、open()、close()

4.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
(1)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form><!--定义一个表单,表单开始-->
账号:<input type="text"/><!--单行文本框-->
<br /><!--换行-->
密码:<input type="password"/><!--密码文本框-->
<br /><!--换行-->
<!--下面是单选按钮,有两个选项,二选一-->
性别:<input type="radio" name="sex" value="male"/>
<input type="radio" name="sex" value="female"/>
<br /><!--换行-->
<!--下面是复选框,可多选-->
爱好:<input type="checkbox" name="interest" value="ah1" />游泳
<input type="checkbox" name="interest" value="ah2" />篮球
<input type="checkbox" name="interest" value="ah3" />跑步
<br /><!--换行-->
简历:<input type="file" /><!--上传文件-->
<br /><!--换行-->
<input type="submit" /><!--提交按钮-->
</form><!--表单结束-->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
(2)
<p><span id="clock"> </span></p>
<script>
var timer;
var last=new Date().getTime();
function settime(){
document.getElementById("clock").innerHTML=new Date().toLocaleString();
if((new Date().getTime()-last)>10*1000)
{
clearInterval(timer);
}
}
timer=setInterval("settime()",1000);
</script>
1
2
3
4
5
6
7
8
(3)
CSS3属性选择器
下面是CSS3的属性选择器的语法,及使用。

元素名字[元素类型=“类型名字”]:选择器名字{
属性:值;
属性:值;
}