简答：
1.HTML**的全称是什么？中文名是什么？工作原理是什么？优点和缺陷？**
Hyper Text Markup Language 超文本标记语言
工作原理：html通过标记要显示的网页中的各个部分，以通知web浏览器应该如何显示网页，即确定网页内容的格式。浏览器按照顺序阅读html文件，根据内容附近的html标记来解释和显示内容，展示图文并茂的效果。
优点：简易性，可扩展性，平台无关性。
2.CSS**的全称是什么？中文名是什么？在网页中有什么作用？**
Cascading Style Sheet 层叠样式表
在网页中的作用：它可以提供更多的网页样式，使网页的元素更丰富，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。实现了“内容与表现分离”，易于修改控制，容易维护。
3.**表单的功能是什么？工作原理？常用的表单控件有哪些？**
表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。
工作原理：1.访问者填写表单提交到WEB服务器2.服务器端运行脚本程序处理表单数据3.动态生成html网页回复访问者。
常用的控件：单行文本框text、口令框password、单选框radio、复选框checkbox、提交按钮submit、图形按钮image、重置按钮reset、上传文件file、隐藏内容hidden、
程序：
1.**用表格制作框线**
思路：将TABLE的bgcolor属性设置为要显示的线的颜色，将TABLE的cellspacing属性设置为细线的粗细（通常为1），将单元格或表格行的bgcolor属性设置为不同于表格bgcolor的值(通常设置为white)。
代码示例：
<html>
<body>
<table bgcolor=black cellspacing=”1” width=”500” height=”300”>
<tr bgcolor=white>
<td bgcolor=white></td>
</tr>
</table>
</body>
</html>
效果：
2.**用表格制作细线**
思路：将TABLE的cellspacing属性和cellpadding的属性都设置为0，将要作为细线的单元格的bgcolor属性设置为细线的颜色，将该单元格的width属性(竖线)或height属性(横线)设置为细线的粗细(通常为1)，注意该单元格中不能有任何内容(包括空格)。
代码示例：
<html>
<body>
<table cellspacing=”0” cellpadding=”0” width=”201” height=”201”>
<tr>
<td bgcolor=white height=”100” width=”100”> </td>
<td bgcolor=black width=”1” height=”100”></td>
<td bgcolor=white height=”100” width=”100”> </td>
</tr>
<tr bgcolor=black>
<td height=”1” width=”100”></td>
<td height=”1” width=”1”></td>
<td height=”1” width=”100”></td>
</tr>
<tr>
<td bgcolor=white height=”100” width=”100”> </td>
<td bgcolor=black width=”1” height=”100”></td>
<td bgcolor=white height=”100” width=”100”> </td>
</tr>
</table>
</body>
</html>
效果：
3.**做一个盒子，要求如下： **
边框样式为dotted，上，右 ，下，左的Padding分别为30,40,50,60
盒子的宽为500，长为600
上下边框的宽度为4，左右边框的宽度为10
上边距为3cm，右边距为2cm，下边距为1cm，左边距为4cm
背景颜色为黄色。background-color：yellow。
<html>
<head>
<style type=”text/css”>
p
{
border-style: dotted;
padding:30px 40px 50px 60px;
width:500;height:600;
border-width:4px 10px;
margin:3cm 2cm 1cm 4cm;
background-color:yellow;
}
</style>
</head>
<body>
<center>
<p>
</body>
</html>
效果：
4.**表单示例：**
<html>
<body>
<form>
单行文本框：
<input type=”text” />
<br />
口令框：
<input name=”password” />
<br />
复选框：
<input type=”checkbox” checked=”checked” value=”1”/>苹果
<input type=”checkbox” value=”1”/>香蕉
<input type=”checkbox” value=”1”/>梨
<br />
单选框：
<input type=”radio” checked=”checked” value=”male”>男
<input type=”radio” value=”female”>女
<br />
多行文本框：
<textarea rows=”10” cols=”30”>lalala</textarea>
<br />
提交按钮：
<input type=”submit” value=”Submit” />
<br />
重置按钮：
<input type=”reset” value=”重置” />
<br />
选项菜单：
<select name=”cars”>
<option value=”A”>A</option>
<option value=”B”>B</option>
<option value=”C” selected=”selected”>C</option>
<option value=”D”>D</option>
</select>
</form>
</body>
</html>
效果：
5.**图文混排：**
<html>
<head>
<style type=”text/css”>
body{
background-color:bb0102; / 页面背景颜色 /
margin:0px;
padding:0px;
}
img{
float:right; / 文字环绕图片 /
/margin-right:50px; / 右侧距离 */
/margin-bottom:25px; / 下端距离 */
}
p{
color:#FFFF00; / 文字颜色 /
margin:0px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
span{
float:left; / 首字放大 /
font-size:85px;
font-family:黑体;
margin:0px;
padding-right:5px;
}
</style>
</head>
<body>
<img src=”chunjie.jpg” border=”0”>
<p><span>春</span>节古时叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一个早晨。《尔雅》，对“年”的注解是：“夏曰岁，商曰祀，周曰年。”自殷商起，把月圆缺一次为一月，初一为朔，十五为望。每年的开始从正月朔日子夜算起，叫“元旦”或“元日”。到了汉武帝时，由于“观象授时”的经验越来越丰富，司马迁创造了《太初历》，确定了正月为岁首，正月初一为新年。此后，农历年的习俗就一直流传下来。</p>
<p>据《诗经》记载，每到农历新年，农民喝“春酒”，祝“改岁”，尽情欢乐，庆祝一年的丰收。到了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，使节日气氛更浓。到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中记载：“除夕之次，夜子初交，门外宝炬争辉，玉珂竞响。……闻爆竹声如击浪轰雷，遍于朝野，彻夜无停。”</p>
<p>在我国古代的不同历史时期，春节，有着不同的含义。在汉代，人们把二十四节气中的“立春”这一天定为春节。南北朝时，人们则将整个春季称为春节。1911年，辛亥革命推翻了清朝统治，为了“行夏历，所以顺农时，从西历，所以便统计”，各省都督府代表在南京召开会议，决定使用公历。这样就把农历正月初一定为春节。至今，人们仍沿用春节这一习惯称呼。</p>
</body>
</hml>
效果：
6.div+css**页面设计示例：**
<html>
<head>
<style type=”text/css”>
#body{
background-color:white;
margin:0px;
padding:0px;
width:500px;
height:400px;
}
#qingjia{
margin:0px;
padding:40px;
width:500px;
height:100px;
text-align:center;
}
#shuru{
boder-stytle:dotted;
margin:0px;
padding:20px;
width:500px;
height:200px;
text-align:left;
}
#tijiao{
margin:0px;
padding:20px;
width:500px;
height:100px;
text-align:left;
}
</style>
</head>
<body>
<center>
<div>
<div>请假单</div>
<div>
学号<input name=number><br><br>
姓名<input name=name><br><br>
请假事由<textarea rows=”3” cols=”30”> </textarea>
</div>
<div>
<input value=”提交”>
</div>
</center>
</body>
</html>
效果：
