一.理解题：
1.简述什么是HTML的语义化，以及如何使用HTML的语义化。
基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析.
2.在前端开发中，使用什么技术实现了内容与样式的分离？并阐述内容与样式分离的原因。
CSS样式
为了使整个页面更加清晰易懂。
3.HTML是一个标签语言，那么标签语言的语法结构是什么样的，以及使用标签语言为什么能表现一个复杂丰富的网页？
<标签名 标签属性名=“属性值”></标签名>通用性，可扩展性，简易性。
4.请阐述一个HTML元素被加载样式的步骤以及原理
style属性 > page的style属性 > css > 浏览器
解析HTML结构，加载外部脚本和样式表文件，解析并执行脚本代码，构造HTML，DOM模型，加载图片等外部文件，页面加载完毕。
5.为什么使用DIV+CSS技术就能完成对页面的布局？
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。
1.表现和内容相分离；2、提高搜索引擎对网页的索引效率；3、提高网页浏览速度；4、易于维护和改版；5、网站代码精简；6、表格的嵌套问题；
二.基础题：
1.如何实现DIV的水平居中？
margin: 0 auto;
2.IMG标签在定义的时候，要注意定义哪4个属性，其中alt属性的作用是什么？
1：src属性：规定显示图像的URL。
2：alt属性：规定图像的替代文本。
3：height:定义图像的高度。
4：width: 设置图像的宽度。
3.CSS的选择器有哪些？并写出语法
1. 标签名选择器 div { color：Red;} 即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} 即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} 即页面中的标签的id
4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} 即多个选择器以逗号的格式分隔 命名找到准确的标签
5.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
4.CSS有几种定位，分别代码什么意思？
1.Static
这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。不能使用top，bottom，left，right和z-index。
2.Relative
相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。
3.Absolute
绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。可以使用top，bottom，left，right进行位置移动，亦可使用z-index在z轴上面进行移动。当元素为此定位时，如果该元素为内联元素，则会变为块级元素，即可以直接设置其宽和高的值；如果该元素为块级元素，则其宽度会由初始的100%变为auto。
注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。（可能我没有描述的很清楚，建议自己写个示例看看效果）
4.Fixed
绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。
5.CSS的浮动是什么意思，如何清除浮动？
css浮动
css的浮动是float属性，该属性没有继承性，默认值为none，该属性有四个值，以下一一解释:
1.right：向右浮动
2.left：向左浮动
3.none：没有浮动
4.inherit：规定继承父元素的浮动
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8"/>
<style type="text/css">
.div1{width:1000px;height:100px;background:red;}
.div2{width:200px;height:100px;background:yellow;}
.div3{width:800px;height:100px;background:green;}
.div4{width:700px;height:100px;background:blue;}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</body>
</html>
6.JS中的数据类型有哪些？定义一个对象类型的创建代码（比如学生）。
- 数值型
- 字符型
- 数组型
- 对象型
- 函数型
- 布尔型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var student = {
studentCode:"008",
name:"JHL",
age:26,
sex:"男"
}
alert(student.studentCode)
alert(student.name)
alert(student.age)
alert(student.sex)
</script>
</body>
</html>7.JS中，函数有什么作用？定义一个完整的数学加法运算函数，要求输入参数为两个加数，返回值为两个数的和。
名称：功能；参数：形参；返回值
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></tiele>
</head>
<body>
<script>
function plus(a,b){
return Number(a)+Number(b);
}
</script>
第一个数：<input id=n1 type=text value=""/>
第二个数：<input id=n2 type=text value=""/>
相加结果：<span id=s></span>
<input type=button value="相加" onclick="s.innerHTML=plus(n1.value,n2.value);"/>
</body>
</html>8.书写JS如何修改HTML元素属性值的代码以及如何修改元素样式的代码？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></tiele>
</head>
<body>
<p id="pid">Hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo(){
var nv = document.getElementById("pid");
nv.innerHTML="World";
}
</script>
</body>
</html><!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></tiele>
</head>
<body>
<a href="http://www.baidu.com/" id="aid" >呵呵</a>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("aid").href="http://www.jikexueyuan.com";
}
</script>
</body>
</html>三.编程题：
1.使用HTML+CSS完成如下页面的代码实现（黑板图示）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<!--总表格-->
<div id="form">
<!--头部-->
<div id="head">
</div>
<!--中间第一格-->
<div id="one">
</div>
<!--中间第二格-->
<div id="two">
</div>
<!--中间第三格-->
<div id="three">
</div>
<!--底部-->
<div id="foot">
</div>
</div>
</body>
</html>
CSS：
#form {
width: 1280px;
height: 800px;
margin: 0 auto;
margin-top: 60px;
}
#head {
background-color: greenyellow;
width: 1280px;
height: 150px;
}
#one {
background-color: blue;
width: 280px;
height: 550px;
float: left;
}
#two {
background-color: darkgrey;
width: 800px;
height: 550px;
float: left;
}
#three {
background-color: pink;
width: 200px;
height: 550px;
float: left;
}
#foot {
background-color: aqua;
width: 1280px;
height: 100px;
float: left;
}2.使用JavaScript实现一个倒计时功能（黑板图示），需求如下：
a) 定义一个选择框，内容项为倒计时的时间，例如10秒、20秒、30秒….
b) 定义一个开始按钮和一个数值显示区域，一旦点击开始，就开始按照选择框中的数字进行倒计时，一旦到0秒，页面显示“时间到”字样。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#border {
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: black;
font-size: 50px;
color: white;
font-weight: 800px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div id="border">
</div>
<select id="p1">
<option value="10">10秒</option>
<option value="20">20秒</option>
<option value="30">30秒</option>
</select>
<br><br>
<input type="button" value="点击" onclick="myFunction()">
</body>
<script type="text/javascript">
var x = 0;
function myFunction() {
x = document.getElementById("p1").value;
settime();
}
function settime() {
x = x * 1;
setTimeout(function() {
document.getElementById("border").innerHTML = x;
if(x >= 0) {
settime();
} else {
document.getElementById("border").innerHTML = "时间到";
}
x--;
},1000)
}
</script>
</html>