简答：

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″>&nbsp;</td>

<td bgcolor=black width=”1″ height=”100″></td>

<td bgcolor=white height=”100″ width=”100″>&nbsp;</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″>&nbsp;</td>

<td bgcolor=black width=”1″ height=”100″></td>

<td bgcolor=white height=”100″ width=”100″>&nbsp;</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″>&nbsp;</textarea>

</div>

<div>

<input value=”提交”>

</div>

</center>

</body>

</html>

效果：