[web程序设计基础R]实验报告(JavaScript事件、JavaScript内置函数与内置对象、HTML基础、CSS+DIV页面布局)

                                                   实验一JavaScript事件

一、实验目的

  1、掌握事件、事件驱动、事件处理程序的概念,理解三者之间的关系;

  2、掌握指定事件处理程序的方法;

  3、学会编写简单的事件处理程序。

二、实验环境

笔记本电脑、Windows系统

  • 程序分析说明及结果

说明题(1)(2)

 

四、程序设计说明、源码及运行结果

<!DOCTYPE html>

<html>

<head>

       <meta charset="UTF-8">

       <title>网址跳转</title>

       <script type="text/javascript">

              function surf(){

        document.getElementById("1").value=document.getElementById("URL").value;}

              function jump(){

        location=document.getElementById("1").value;}

       </script>

</head>

<body>

       <p>选择要去的网址</p>

       <select id="URL" οnchange="surf()">

              <option selected="selected" value="0">请选择</option>

              <option value="https://www.baidu.com/">百度</option>

              <option value="https://www.163.com/">网易</option>

              <option value="https://www.qq.com/">qq</option>

              <option value="https://www.sina.com.cn">新浪</option>

       </select>

       <input type="text" id="1">

       <button value="" id="button" οnclick="jump()">确认跳转</button>

</body>

</html>

四、实验总结

使用var时,不可以任意添加,location前不能添加var;以及赋值语句document.getElementById("1").value的用法,可以覆盖其原有的值;还有onchange的作用和意义,在改变后,会执行后面的函数。

                             实验二 JavaScript内置函数与内置对象

一、实验目的

1.分析JavaScript内置函数的使用方法;

2.掌握JavaScript常用内置对象的属性和方法。

二、实验环境

计算机、Windows操作系统

三、程序分析说明及结果

1.

<!DOCTYPE html>

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <title>内置函数的理解</title>

  <style type="text/css">

   div{

    background:#CDEBE6;

        color:#330000;

        width:750px;

    font-size:20px;

        font-weight:bolder;

       }

    h4{text-align:center;}

     b{color:red;font-size:18px;}

  </style>

 </head>

 <body>

  <div>

   <h4>系统函数使用</h4>

   <b>1.eval("字符串")<br/></b>

   <script type="text/javascript">

     var rel=eval("1000+3/5");

     document.write("&nbsp;&nbsp;"+"1000+3/5="+rel);

     document.write("<br/>");

     document.write("&nbsp;&nbsp;"+"x=10,y=20,x*y=");

     eval("x=10;y=20;document.write(x*y)");

     document.write("<br/>&nbsp;&nbsp;2+2="+eval("2+2"));

     document.write("<br/>");

     var x=10;

     document.write("&nbsp;&nbsp;"+"x=10,x+17="+eval(x+17));

     document.write("<br/>");

   </script>

   <b>2.escape("字符串")<br/></b>

   <script type="text/javascript">

     document.write("&nbsp;&nbsp;"+"escape('&')="+escape("&"));

     document.write("<br/>");

     result=escape("&nbsp;&nbsp;"+"my name is 张华");

     document.write("&nbsp;&nbsp;"+"escape('my name is 张华')="+result);

   </script>

   <b>3.unescape(string)<br/></b>

   <script type="text/javascript">

     document.write("&nbsp;&nbsp;"+"unescape('%26')="+unescape("%26"));

     document.write("<br/>");

     result=unescape("&nbsp;&nbsp;"+"my%20name%20is%20%u5F20%u534E");

     document.write("&nbsp;&nbsp;"+"unescape('my%20name%20is%20%u5F20%u534E')="+result);

   </script>

   <b>4.parseFloat(string)<br/></b>

   <script type="text/javascript">

     document.write("&nbsp;&nbsp;"+"parseFloat('3.14')="+parseFloat("3.14"));

     document.write("<br/>");

     document.write("&nbsp;&nbsp;"+"parseFloat('314e-2')="+parseFloat("314e-2"));

     document.write("<br/>");

     document.write("&nbsp;&nbsp;"+"parseFloat('3.14ab')="+parseFloat("3.14ab"));

     document.write("<br/>");

     document.write("&nbsp;&nbsp;"+"parseFloat('FF2')="+parseFloat("FF2"));

     document.write("<br/>");

    </script>

    <b>5.parseInt("numberstring,radix)<br/></b>

    <script type="text/javascript">

     document.write("&nbsp;&nbsp;"+"32:"+parseInt("32"));

     document.write("<br/>");

     document.write("&nbsp;&nbsp;"+"032:"+parseInt("032"));

     document.write("<br/>");

     document.write("&nbsp;&nbsp;"+"0x32:"+parseInt("0x32"));

     document.write("<br/>");

     document.write("&nbsp;&nbsp;"+"parseInt('15*3',10)="+parseInt("15*3",10));

     document.write("<br/>");

    </script>

    <b>6.isNaN()<br/></b>

    <script type="text/javascript">

     document.write("&nbsp;&nbsp;"+"isNaN(\"5454g\")="+isNaN("5454g"));

     document.write("<br/>");

     document.write("&nbsp;&nbsp;"+"isNaN(\"789\")="+isNaN("789"));

     document.write("<br/>");

    </script>

   </div>

 </body>

</html>

对于第一段代码可知:

  1. eval()函数,参数是字符串类型,主要功能是将字符串作为脚本代码来执行
  2. escape()是对字符串进行编码。
  3. unescape()是对建一个函数的编码进行解码。
  4. parseFloat()解析一个字符串,并返回一个浮点数,反之返回NaN,在函数转化过程中,遇到第一个非数字即终止转化。
  5. parseInt()解析一个字符串,并返回一个整数,反之返回NaN,在函数转化过程中,遇到第一个非数字即终止转化。
  6. isNaN()主要功能是检查其参数是否为非数字值,如果参数是返回False,否则返回True

2.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>日期对象及其方法 </title>

    <script type="text/javascript">

    var mydate=new Date();

    var myyear=mydate.getFullYear(); <!--使用getFullYear()获得年份-->

    document.write("年份:"+myyear); <!--输出当前年份-->

    document.write("<br/>");

    var myMonth=mydate.getMonth(); <!--使用getMonth()获得月份-->

    document.write("月份:"+myMonth); <!--输出当前月份-->

    document.write("<br/>");

   

    var mydays=mydate.getDate();

    document.write("日期:"+mydays); <!--输出当前秒-->

    document.write("<br/>");

    var weekday=["日","一","二","三","四","五","六"];

    document.write("星期:" + weekday[mydate.getDay()] );

    document.write("<br/>");

    pageOpen=new Date();

    function stay(){

    pageClose=new Date();

    minutes=(pageClose.getMinutes()-pageOpen.getMinutes());

    seconds=(pageClose.getSeconds()-pageOpen.getSeconds());

    time=(seconds+(minutes*60));

    time=(time+"秒");

    alert("您在这里停留了"+time+"欢迎下次再来");

    }

    </script>

</head>

<body>

<input type="button" value="停留时间" onClick="stay()">

</body>

</html>

  对于第二段的代码:

getFullYear()以四位数字返回年份

getMonth()从data对象中返回月份

getData()从data对象中返回一个月的某一天

之后getMinutes() getSeconds()获取分秒与最后分秒进行差值几位最后的停留时间。

 

四、程序设计说明、源码及运行结果

1.程序设计说明:

利用data对象的各种方法进行对计时器的实现。


2.源码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>计时器</title>

    <script type="text/javascript">

        var timeResult=0

        var timer

        function timedCount() {

            document.txtForm.txt.value=timeResult;

            timeResult=timeResult+1

            timer=setTimeout("timedCount()",1000)

        }

        function stopCount() {

            clearTimeout(timer)

        }

        function clearCount() {

            document.txtForm.txt.value=0

        }

    </script>

</head>

<body>

    <form id="txtForm" name="txtForm" method="get">

    <input type="button" value="开始!" οnclick="timedCount()">

    <input type="text" name="txt" id="txt">

    <input type="button" value="停止!" οnclick="stopCount()">

    <input type="button" value="清零!" οnclick="clearCount()">

    </form>

</body>

<html>
 

  1. 运行结果:

  • 实验总结
  1. 对javascript的内置函数的了解:

第一类:常规函数
包括以下9个函数:
(1)alert函数显示一个警告对话框,包括一个OK按钮。
(2)confirm函数:显示一个确认对话框,包括OK、Cancel按钮。
(3)escape函数:将字符转换成Unicode码。
(4)eval函数:计算表达指租式的结果。
(5)isNaN函数:测试是(true)否(false)不是一个数字。
(6)parseFloat函数:将字符串转换成符点数字形式。
(7)parseInt函数:将符串转换成整数数字形式(可指定几进制)。
(8)prompt函数:显示一个输入对话框,提示等待用户输入。

第二类:数组函数
包括以下4个函数:
(1)join函数:转换并连接数组中的所有元素为一个字符串。
(2)langth函数:返回数组的长度。
(3)reverse函数:将数组元素顺序颠倒。
(4)sort函数:将数组元素重新排序。

第三类:日期函数
包括以下20个函数:
(1)getDate函数:返回日期的“日”部分,值为1~31
(2)getDay函数:返回星期几,值为0~6,其中0表示星期日,1表示星期一,...,6表示星期六
(3)getHours函数:返回日期的“小时”部分,值为0~23。
(4)getMinutes函数:返回日期的“分钟”部分,值为0~59。见上例。
(5)getMonth函数:返回日期的“月”部分,值为0~11。其中0表示1月,2表示3月,...,11表示12月。见前面的例子。
(6)getSeconds函数:返回日期的“秒”部分,值为0~59。见前面的例子。
(7)getTime函数:返回系统时间。
(8)getTimezoneOffset函数:返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差),单位为分钟。
(9)getYear函数:返回日期的“年”部分。返回值以1900年为基数,例如1999年为99。
(10)parse函数:返回从1970年1月1日零时整算起的毫秒数(当地时间)。
(11)setDate函数:设定日期的“日”部分,值为0~31。
(12)setHours函数:设定日期的“小时”部分,值为0~23。
(13)setMinutes函数:设定日期的“分钟”部分,值为0~59。
(14)setMonth函数:设定日期的“月”部分,值为0~11。其中0表示1月,...,11表示12月。
(15)setSeconds函数:设定日期的“秒”部分,值为0~59。
(16)setTime函数:设定时间。时间数值为1970年1月1日零时整算起的毫秒数。
(17)setYear函数:设定日期的“年”部分。
(18)toGMTString函数:转换日期成为字符串,为GMT格林或皮威治标准时间。
(19)setLocaleString函数:转换日期成为字符串,为当地时间。
(20)UTC函数:返回从1970年1月1日零时整算起的毫秒数,以GMT格林威治标准时间计算。

第四类:数学函数
函数有以下18个:
(1)abs函数:即Math.abs(以下同),返回一个数字的绝对值。
(2)acos函数:返回一个数字的反余弦值,结果为0~π弧度(radians)。
(3)asin函数:返回一个数字的反正弦值,结果为-π/2~π/2弧度。
(4)atan函数:返回一个数字的反正切值,结果为-π/2~π/2弧度。
(5)atan2函数:返回一个坐标的极坐标角度值。
(6)ceil函数:返回一个数字的最小整数值(大于或等于)。
(7)cos函数:返回一个数字的余弦值,结果为-1~1。
(8)exp函数:返回e(自然对数)的乘方值。
(9)floor函数:返回一个数字的最大整数值(小于或等于)。
(10)log函数:自然对数函数,返回一个数字的自然对数(e)值。
(11)max函数:返回两个数的最大值。
(12)min函数:返回两个数的最小值。
(13)pow函数:返回一个数字的乘方值。
(14)random函数:返回一个0~1的随机数值。
(15)round函数:返回一个数字的四舍五入值,类型是整数。
(16)sin函数:返回一个数字的正弦值,结果为-1~1。
(17)sqrt函数:返回一个数字的平方根值。
(18)tan函数:返回一个数字的正切值。

第五类:字符串函数
包括以下20个函数:
(1)anchor函数:产生一个链接点(anchor)以作超级链接用。anchor函数设定<A NAME...>的链接点的名称,另一个函数link设定<A HREF=...>的URL地址。
(2)big函数:将字体加到一号,与<BIG>...</BIG>标签结果相同。
(3)blink函数:使字符串闪烁,与<BLINK>...</BLINK>标签结果相同。
(4)bold函数:使字体加粗,与<B>...</B>标签结果相同。
(5)charAt函数:返回字符串中指定的某个字符。
(6)fixed函数:将字体设定为固定宽度字体,与<TT>...</TT>标签结果相同。
(7)fontcolor函数:设定字体颜色,与<FONT COLOR=color>标签结果相同。
(8)fontsize函数:设定字体大小,与<FONT SIZE=n>标签结果相同。
(9)indexOf函数:返回字符串中第一个查找到的下标index,从左边开始查找。
(10)italics函数:使字体成为斜体字,与<I>...</I>标签结果相同。
(11)lastIndexOf函数:返回字符串中第一个查找到的下标index,从右边开始查找。
(12)length函数:返回字符串的长度。(不用带括号)
(13)link函数:产生一个超级链接,相当于设定<A HREF=...>的URL地址。
(14)small函数:将字体减小一号,与<SMALL>...</SMALL>标签结果相同。
(15)strike函数:在文本的中间加一条横线,与<STRIKE>...</STRIKE>标签结果相同。
(16)sub函数:显示字符串为下标字(subscript)。
(17)substring函数:返回字符串中指定的几个字符。
(18)sup函数:显示字符串为上标字(superscript)。
(19)toLowerCase函数:将字符串转换为小写。
(20)toUpperCase函数:将字符串转换为大写。

                                                        实验三  HTML基础
 

一、实验目的

1.掌握常用的HTML语言标记;

2.利用文本编辑器建立HTML文档,制作简单表单页面。

二、实验环境

计算机、Windows操作系统

  • 程序分析说明及结果

实验例题:

源程序:

<html>

<head>

<title>Example</title>

</head>

<body bgcolor="#00DDFF">

<h1><B><I><FONT COLOR="#FF00FF">

<MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE>

</FONT></I></B></h1>

<hr>

<h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2>

<EM>Welcome to the world of HTML</EM>

<p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p>

<p>Following is three chapters

<ul>

<li>This is the chapter one</li>

<li><A  HREF="#item">This is the chapter two</A></li>

<li>This is the chapter three</li>

</ul></p>

<hr>

<p><A NAME="item">Following is items of the chapter two</A> </p>

<table border=2 bgcolor=gray width="40%">

<tr>

<th>item</th><th>content</th>

</tr>

<tr>

<td>item 1</td>

<td>font</td>

</tr>

<tr>

<td>item 2</td>

<td>table</td>

</tr>

<tr>

<td>item 3</td>

<td>form</td>

</tr>

</table>

<hr><p>

1<p>

2<p>

3<p>

4<p>

5<p>

6<p>

7<p>

<B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B>

</p>

</body>

</html>

实验结果:

对于表的填写:

源代码:

<html>

<head>

<title>Example</title>

</head>

 <h1 align=center><b><i><font  color="黑色">表1.1实验1程序分析记录表</h1>

<hr>

<table border=2  width="80%" align=center bgcolor=grey>

<tr>

<th>标签</th><th>标签功能</th>

<th>用到的说明</th><th>效果说明</th>

</tr>

<tr>

<td>marquee</td>

<td>html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制。使用marquee标记不仅可以移动文字,也可以移动图片,表格等.只需要在<marquee></marquee>内部输入要滚动的内容即可</td>

<td>

direction 表示滚动的方向,值可以是left,right,up,down,默认为left

behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)

loop 表示循环的次数,值是正整数,默认为无限循环

scrollamount 表示运动速度,值是正整数,默认为6

scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒

align 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle

bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色

height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度。

hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。

οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动</td>

<td>behavior               (控制滚动)

bgcolor                 (文字滚动范围的背景颜色)

direction              (文字滚动的方向)

width                    (决定滚动文字在页面中的矩形范围的宽度)

height                   (决定滚动文字在页面中的矩形范围的高度)

hspace                 (滚动矩形区域距周围的空白区域)

vspace                  (滚动矩形区域距周围的空白区域)

loop                      ( 滚动文字的滚动次数)

scrollamount       (文字滚动的速度)

scrolldelay           (文字滚动的速度)

align                     (滚动文字位于距形内边框的上下左右位置)</td>

</tr>

<tr>

<td>table</td>

<td> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素</td>

<td>

tr 表格行 , td 表格单元 ,th 表头

border=“1” or “” —(table)

align=“left” 、center、right —(tr,td)

valign=“top”、middle、bottom —(tr,td)

bgcolor=“#000” —(table,tr,td)

td 中的属性

width=“npx”

height=“npx”

colspan=“n” --(向右合并n列)

rowspan=“n” --(向下合并n行)

table中的其他属性

cellpadding=“10” 单元格与内容之间的空格

cellspacing=“10” 单元格之间的空格

frame=“box” 显示四个边的外侧边框

            “above” 显示上部的外侧边框

            “below” 显示下部的外侧边框

            “hsides” 显示上部和下部的外侧边框

            “lhs” 显示左部的外侧边框

            “rhs” 显示右部的外侧边框

            “vsides” 显示左部和右部的外侧边框

            “void” 无边框

rules=“rows” 位于行之间的线条

            “cols” 位于列之间的线条

            “all” 位于行和列之间的线条

            “none” 没有线条

summary=“text”

summary 属性在 Web 浏览器中没有效果,可以通过屏幕阅读器看出效果。

table的width 总宽度的权重大于td的width的权重</td>

<td>tr: 用于定义表格中的行,必须嵌套在 table 标签中,在表格中有几组 tr ,就表示有多少行。

td:用于定义表格中的单元格,必须嵌套在 tr 标签中,一组 tr 中包含几对 td,就表示该行有多少个单元格。

caption:用于定义表格标题,内容居中对齐。

上面说到的 td 标签准确来说叫表行单元格,在 HTML 中,还有一种单元格,那就是表头单元格 ,用 th 标签标示

在使用表格进行布局时,可以将表格划分为表头 thead、表身 tbody、表脚 tfoot,也分别叫表格的头部、主体和页脚。

align:设置表格在网页中的水平对齐方式,常用属性值有 left(居左显示),right(居右显示),center(居中显示)。

border:设置表格外边框的宽度,宽度以像素为单位,默认为0。

cellspacing 设置单元格与单元格的间距。

cellpadding 设置单元格内容与边框的间距。

width 设置表格的宽度,height 设置表格的高度。</td>

</tr>

</table>

</body>

</html>

实验结果(表的填写):

实验要求:

编写一个能输出如下图所示界面的HTML文件。要求:

 


(1)校验输入的E-mail的格式:用户名@域名。

(2)校验输入的电话格式:11位数字组成。

(3)性别“女”为默认选项

(4)年龄的列表选项有:20以下、20、21、22、23、24、25、25以上,其中“20以下”为默认选项。

  • 程序设计说明、源码及运行结果

程序设计说明:构建表单

  1. 构建表单结构。
  2. 对输出控件(创建文本框,创建密码表,创建单选按钮,创建复选框,创建文本区域,创建选择框,创建隐藏字段,创建按钮。
  3. 处理表单(对表单元素进行组织,对表单进行验证,为表单组件添加说明标签,对表单提交方式的选择。

程序的源代码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>INSPINIA | Basic Form</title><meta name="keywords" />

    <link href="http://www.inspinia.cn/html/inspiniaen/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://www.inspinia.cn/html/inspiniaen/font-awesome/css/font-awesome.css" rel="stylesheet">

    <link href="http://www.inspinia.cn/html/inspiniaen/css/plugins/iCheck/custom.css" rel="stylesheet">

    <link href="http://www.inspinia.cn/html/inspiniaen/css/animate.css" rel="stylesheet">

    <link href="http://www.inspinia.cn/html/inspiniaen/css/style.css" rel="stylesheet">

    <link href="http://www.inspinia.cn/html/inspiniaen/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">

</head>

<body>

            <div class="row">

                <div class="col-lg-12">

                    <div class="ibox float-e-margins">

                        <div class="ibox-title">

                            <p align="center" valign="middle"><h3 >您的基本信息</h3></p>

                            <div class="ibox-tools">

                                <a class="collapse-link">

                                    <i class="fa fa-chevron-up"></i>

                                </a>

                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">

                                    <i class="fa fa-wrench"></i>

                                </a>

                                <ul class="dropdown-menu dropdown-user">

                                    <li><a href="#">Config option 1</a>

                                    </li>

                                    <li><a href="#">Config option 2</a>

                                    </li>

                                </ul>

                                <a class="close-link">

                                    <i class="fa fa-times"></i>

                                </a>

                            </div>

                        </div>

                        <div class="ibox-content">

                            <form method="get" class="form-horizontal">

                                <div class="form-group"><label class="col-sm-2 control-label">姓名</label>

                                    <div class="col-sm-10"><input type="text" class="form-control" size="24"></div>

                                </div>

                                <div class="hr-line-dashed"></div>

                                <div class="form-group"><label class="col-sm-2 control-label">年龄</label>

                                    <div class="col-sm-10"><input type="text" class="form-control" maxlength="3"> <span class="help-block m-b-none"></span>

                                    </div>

                                </div>

                             

                                <div class="form-group"><label class="col-sm-2 control-label">电话</label>

                                    <div class="col-sm-10"><input type="telephone"  class="form-control" pattern=" ^(13[0-9]|15[0-9]|18[0-9])([0-9]{8})$" required/></div>

                                </div>

                                                       

                                <div class="hr-line-dashed"></div>

                                <div class="form-group"><label class="col-sm-2 control-label">兴趣爱好<br/><small class="text-navy">您的兴趣爱好</small></label>

                                    <div class="col-sm-10">

                                        <div class="i-checks"><label> <input type="checkbox" value=""> <i></i> 旅游</div>

                                        <div class="i-checks"><label> <input type="checkbox" value="" checked=""> <i></i> 运动/label></div>

                                        <div class="i-checks"><label> <input type="checkbox" value="" checked="" > <i></i> 阅读 </label></div>

                                        <div class="i-checks"><label> <input type="checkbox" value="" checked=""> <i></i> 听音乐 </label></div>

                                        

                                   </div>

                                </div>

                            

                                <div class="hr-line-dashed"></div>

                                <div class="form-group"><label class="col-sm-2 control-label">你的年龄</label>

                                    <div class="col-sm-10"><select class="form-control m-b" name="account">

                                          <option checked="checked">20以下</option>

                                        <option>20</option>

                                         <option>21</option>

                                        <option>22</option>

                                      <option>23</option>

                                        <option>24</option>

                                         <option>25</option>

                                        <option>25以上</option>

                                    </select>

                                  </div>

                                </div>

                               <div class="hr-line-dashed"></div>

                                <div class="form-group"><label class="col-sm-2 control-label">性别</label>

                                    <div class="col-sm-10"><select class="form-control m-b" name="account">

                                        <option selected="selected">女</option>

                                        <option>男</option>

                                    </select>

                                   </div>

                                </div>

                                <div class="hr-line-dashed"></div>

                                <div class="form-group has-error"><label class="col-sm-2 control-label">留言板</label>

                                    <div class="col-sm-10"><select><input type="textarea" class="form-control"  rows="2" cols="20"></div></select>

                                </div>

                               <div class="hr-line-dashed"></div>

                                <div class="form-group has-error"><label class="col-sm-2 control-label">电子邮箱</label>

                                <div class="col-sm-10"><input type="email" class="form-control" pattern="^{0-9}{3,}@{a-z}{5,}$" required/></div>

                                </div>

                            <div class="hr-line-dashed"></div>

                                <div class="form-group">

                                    <div class="col-sm-4 col-sm-offset-2">

                                        <button class="btn btn-primary" type="submit">提交</button>

                                        <button class="btn btn-primary" type="submit">全部重写</button>

                                    </div>

                                </div>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="footer">

           

        </div>

        </div>

</body>

</html>

运行结果截图:

、实验总结

所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间。
<form   method="传送方式"   action="服务器文件"></form>
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method : 数据传送的方式(get/post)。
下面来认识一下表单控件标签

文本输入框、密码输入框   
<form>
    <input type="text/password" name="名称" value="文本" />
</form>
1、type:

   当type="text"时,输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

2、name:为文本框命名,以备后台程序ASP 、PHP使用。

3、value:为文本输入框设置默认值。(一般起到提示作用)

文本域:
<textarea  rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
2、cols :多行输入域的列数。
3、rows :多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。

可选择的单选框、复选框
<input type="radio/checkbox"  value="值"  name="名称" checked="checked"/>
1、type:
   当 type="radio" 时,控件为单选框
   当 type="checkbox" 时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked" 时,该选项被默认选中

列表框
<selected>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</selected>


提交按钮:
<input type="submit" value="提交">
type:只有当type值设置为submit时,按钮才有提交作用
value:按钮上显示的文字

重置按钮,重置数据
<input type="reset" value="重置">
type:只有当type值设置为reset时,按钮才有重置作用
value:按钮上显示的值

                                     实验四  CSS+DIV页面布局

一、实验目的

1、理解网页内容和表现的分离;

2、熟悉CSS的基本语法和格式;

3、了解页面常用布局结构;

4、学会用CSS+DIV布局制作一个博客页面。

二、实验环境

计算机、Windows操作系统

三、程序分析说明及结果


网页中应用CSS有4种方法,分别是:内联CSS样式、嵌入CSS样式、链接外部CSS样式表和导入外部CSS样式表。

  1. 内联CSS样式


(2)嵌入式CSS样式

(3)外部样式表


(4)导入外部CSS样式

四、程序设计说明、源码及运行结果

1.程序设计说明

结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面。要求:

(1)header标签定义页面头部区;nav标签定义导航区;div标签定义中部的内容区块,其中左边用section标签嵌套两篇article文章区,每篇文章区应含有头部的标题 区、段落内容和页脚;右边用aside设计侧栏;底部用footer标签定义版权信息,如图2.1所示。

(2)编写外部CSS文件,为主文件中用到的各个标签属性进行样式设置,如背景色,字体,字号大小,对齐方式等。

(3)用无序表实现水平导航菜单,关键点:消除无序列表前的项目符号,将默认的垂直排列转换为水平排列。

(4)设置导航菜单的超链接样式,关键点:链接目标为#,设置鼠标悬停在导航栏中的热字上时背景色的变化。

2.源码

(1)html源码

<html>

       <head>

              <meta charset="UTF-8">

              <title>某某的博客</title>

              <link rel="stylesheet" type="text/css" href="mystyle1.css"/>

       </head>

       <body>

              <header>

                     <h1><b>某某的博客</b></h1>

              </header>

              <nav>

                     <ul class="nav">

                            <li class="li"><a href="#"title="首页">首页</a></li>

                            <li class="li"><a href="#"title="博文">博文</a></li>

                            <li class="li"><a href="#"title="相册">相册</a></li>

                            <li class="li"><a href="#"title="个人档案">个人档案</a></li>

                     </ul>

              </nav>

              <div>

                     <article>

                            <h1>HTML5</h1>

                            <hr style="border: 2px dashed #0099FF;">

                            <p class="font01">HTML是下一代HTML的标准,目前任然处于发展阶段。经过了Web2.0时代,基于互联网的应用已经越来越丰富,同时也对互联网应用提出了更高的要求。</p>

                            <hr border:2px color="#0099FF">

                            <p class="font02">编辑于2018.9</p>

                     </article>

                     <article>

                            <h1>CSS3</h1>

                            <hr style="border: 2px dashed #0099FF;">

                            <p class="font01">对于前端是设计师来说,虽然CSS3不全是新的技术,但它却重启了一扇奇思妙想的窗口。</p>

                            <hr border:2px color="#0099FF">

                            <p class="font02">编辑于2018.9</p>

                     </article>

              </div>

              <aside>

                     <h1>简介</h1>

                     <p class="font03">HTML5和CSS3正在掀起一场变革,它不是在替代Flash,而是正在发展成为开放的Web平台,不但在移动领域建功卓著,而且对传统的应用程序发起挑战。</p>

              </aside>

              <footer>

                     <hr color="blue">

                     版权所有2018

              </footer>

       </body>

</html>

  1. css源码

.font01{

       font-family: 微软雅黑;

       font-size: larger;

}

.font03{

       color: white;

       line-height: 45px;

       font-size: larger;

}

.font02{

       font-family: 微软雅黑;

       font-size: larger;

       color:gray;

}

.nav a:hover{

       background:red;

       margin:20px auto;

       }

.li{

       float:left;

       list-style:none;

       padding:0px 20px;

       font-size:20px;

}

header{

       height:50px;

       border:2px solid alpha;

       margin:20px auto;

       text-align:center;

       }

nav{

       height:50px;

       border:1px solid blue;

       margin-bottom:5px;

       background-color:#33CCFF;

       }

div{

       height:650px;

       width:80%;

       clear:both;

       float:left;

       }

article{

       height:250px;

       border:2px solid blue;

       margin:40px;

       }

aside{

       width:15%;

       height:450px;

       border:1px solid gray;

       background-color:gray;

       margin-top:40px;

       margin-right:50px;

       float:right;

       }

footer{

       clear:both;

       height:100px;

       text-align:center;

       line-height:100px;

       }


3.运行结果

五、实验总结

Css的样式属性包含了对文本、段落、背景、边框、位置、列表和光标效果等众多属性的设置,通过设置这些css样式,是我对基本知识有了更深的了解,对今后的学习和工作有了更大的帮助。

猜你喜欢

转载自blog.csdn.net/weixin_51538341/article/details/128505715
今日推荐