简答:

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>

效果:

写于异年同日:

  1. 2010:  用HTML5无罪,挺CSS3有理(23)