头歌--Web应用开发实验题

目录

一、实验一HTML基础

HTML——表单类的标签

第1关：表单元素——文本框

第2关：表单元素——密码框

第3关：表单元素——单选框

第4关：表单元素——多选框

第5关：表单元素——checked属性

第6关：表单元素——disabled 属性

第7关：表单元素——label 标签

第8关：表单元素——下拉列表

第9关：表单元素——文本域

第10关：表单元素——提交按钮

第11关：表单元素的综合案例

HTML入门——基础

第1关：初识HTML：简单的Hello World网页制作

第2关：HTML结构：自我简介网页

HTML入门——文本

第1关：HTML链接：带超链接的网页

第2关：HTML标题与段落：网络文章网页

第3关：HTML表格：日常消费账单表格展示网页

HTML——基本标签

第1关：创建第一个 HTML 标签

第2关：创建

-

标签

第3关：创建 p 标签

第4关：创建 a 标签

第5关：创建 img 标签

第6关：创建 div 标签

第7关：添加注释

---

一、实验一HTML基础

HTML——表单类的标签

第1关：表单元素——文本框

    


    
    昵称： 

    

第2关：表单元素——密码框

第3关：表单元素——单选框

    


    1. HTML是什么语言？(单选题)

    
    

    A：高级文本语言 

	B：超文本标记语言 

	C：扩展标记语言 

	D：图形化标记语言
    

第4关：表单元素——多选框

    


    休闲方式:

    
    
逛街 

	看电影 

	宅
    

第5关：表单元素——checked属性

    


    婚姻状况:

    
    
未婚
    
已婚

    

第6关：表单元素——disabled 属性

    


    难度系数:

    
    
简单
    
中等
    
困难
        
    

第7关：表单元素——label 标签

    


    
    用户：
    

    密码：
    

        
    

第8关：表单元素——下拉列表

    


    选择版块：
    
    
        问答
        分享
		招聘
        客户端测试
        
        
	

第9关：表单元素——文本域

    
    
    



    用一句话描述自己的特点：
    
    

第10关：表单元素——提交按钮

    



    用户：

    密码：


    
    


    

第11关：表单元素的综合案例

	
	




	

		
		

			用户名：
			

			

				昵称：
				

				

					性别：
					
    男
    
					
    女
    
					
    保密
    


    教育程度：
    
        高中
        中专
        大专
        本科
        硕士
        博士
        其他
    


        婚姻状况：
        
            未婚
        
					
            已婚
        
					
            保密
        
				

				

					兴趣爱好：
					
            踢足球
        
					
            打篮球
        
					
            看电影
        
				

				

					描述自己的特点：
					
				
				

					
					
    

					
	

HTML入门——基础

第1关：初识HTML：简单的Hello World网页制作

  
    
    
    
    

  
    
    
Hello World
    
动手改变世界
  
    

第2关：HTML结构：自我简介网页

    

  
    
  	
    
    
  
  
    
自我简介

    
简介
    
在这里简单的描述一下你自己吧。

    
三个与你最有关的词
    
这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。
    

        
乐观
        
遇见困难不害怕
        
随性
        
自由自在，不太被其他事物所影响
        
勇敢
        
勇往向前
    

  

HTML入门——文本

第1关：HTML链接：带超链接的网页

    
    
    
    

  


    
HTML 入门
    
本页目录
    

        
简介
        
第1关
  
        
第2关
    

    
简介
   
    

        HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
        CSS(Cascading Style Sheets，级联样式表单)和
        JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。
    
自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。
    
    
第1关
    
初识HTML：简单的Hello World网页
    
第2关
    
HTML链接：带超链接的网页
    

    
若需帮助，请发送问题到E-Mail。
    
回到顶部

  

第2关：HTML标题与段落：网络文章网页

    
    

  


    
HTML
    
超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
        标记语言。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台[1]。
    
    
历史
    
开发过程
    
1980年，物理学家Tim Berners-Lee，
        CERN的一位项目负责人，提出并实现了ENQUIRE系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based
        <>超文本系统[2]。
    
    
HTML里程碑
    

        
1995年11月24日
        
HTML2.0发布，对应的IETF文档为RFC 1866。
        
1997年1月14日
        
HTML 3.2以
            
                W3C推荐标准的形式发布。 随后的HTML标准都由W3C组织发布。
        
1997年12月18日
        
HTML 4.0发布[3]。
        
2014年10月28日
        
HTML5 发布。


    
    
参考文献
        <>
        
            
Flanagan, David. JavaScript - The definitive guide (6 ed.). p. 1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."
            
Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). 
            
"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.
        
        

  

第3关：HTML表格：日常消费账单表格展示网页

  


    
    
    
    
    



    

        
日常消费账单
 
        

            
            

                
消费项目
                
一月
                
二月
            
        
        

            
            

                
食品烟酒
                
￥1241.00
                
￥1250.00
            
            

                
衣物
                
￥330.00
                
￥594.00
            
            

                
居住
                
￥2100
                
￥2100
            
            

                
生活用品及服务
                
￥700.00
                
￥650.00
            
            

                
医疗保健
                
￥150.00
                
￥50.00
            
            

                
教育、文化和娱乐
                
￥1030.00
                
￥1250.00
            
            

                
交通和通信
                
￥230.00
                
￥650.00
            
            

                
其他用品和服务
                
￥130.40
                
￥150.00
            
        
        

            
            

                
总计
                
￥5911
                
￥6694
            
        
    

  

HTML——基本标签

第1关：创建第一个 HTML 标签

    


    
Hello
    
    
welcome to Educoder
        
    

第2关：创建

-

标签

    


    
创建不同字体大小的标题
    
	
创建不同字体大小的标题
	
创建不同字体大小的标题
	
创建不同字体大小的标题
	
创建不同字体大小的标题
    
创建不同字体大小的标题
   

    

第3关：创建 p 标签

    


    
    
我是一个段落

    

第4关：创建 a 标签

    


    
    Educoder平台

    

第5关：创建 img 标签

第6关：创建 div 标签

    


    
我是h2标签
    
我是p标签
    
    
我是div标签


    

第7关：添加注释

    


    
文字
    

    
    
    

        文字
    
    

实验二CSS入门

使用 HTML/CSS 实现 Educoder 顶部导航栏

第1关：使用flex布局实现Educoder顶部导航栏容器布局

  
  
  
  
  





  

    
精选
    
时事
    
财政
    
思想
    
生活
  

  

    

      
精选
      
精选新闻1
      
精选新闻2
      
精选新闻3
    
    

      
时事
      
时事新闻1
      
时事新闻2
      
时事新闻3
    
    

      
财政
      
财政新闻1
      
财政新闻2
      
财政新闻3
    
    

      
思想
      
思想新闻1
      
思想新闻2
      
思想新闻3
    
    

      
生活
      
生活新闻1
      
生活新闻2
      
生活新闻3
    
  

  
Copyright (c) News Copyright Holder All Rights Reserved.

第2关：CSS 类选择器

  
  
  
  
  



  

    
精选
    
时事
    
财政
    
思想
    
生活
  
  
  

        
    

      
精选
      
精选新闻1
      
精选新闻2
      
精选新闻3
    
    

      
时事
      
时事新闻1
      
时事新闻2
      
时事新闻3
    
    

      
财政
      
财政新闻1
      
财政新闻2
      
财政新闻3
    
    

      
思想
      
思想新闻1
      
思想新闻2
      
思想新闻3
    
    

      
生活
      
生活新闻1
      
生活新闻2
      
生活新闻3
    
  
  
  
Copyright (c) News Copyright Holder All Rights Reserved.

第3关：CSS id选择器

  
  
  
  
  



  
  

  
    
精选
    
时事
    
财政
    
思想
    
生活
  

  

    

      
精选
      
精选新闻1
      
精选新闻2
      
精选新闻3
    
    

      
时事
      
时事新闻1
      
时事新闻2
      
时事新闻3
    
    

      
财政
      
财政新闻1
      
财政新闻2
      
财政新闻3
    
    

      
思想
      
思想新闻1
      
思想新闻2
      
思想新闻3
    
    

      
生活
      
生活新闻1
      
生活新闻2
      
生活新闻3
    
  
  
Copyright (c) News Copyright Holder All Rights Reserved.

实验三JavaScript基础

JavaScript学习手册十五：事件处理

第1关：注册事件处理程序

    
    


    按钮1
    按钮2
    按钮3
    

JavaScript学习手册八：JS函数

第1关：用函数语句定义函数

//请在此处编写代码
/********** Begin **********/

function mainJs(a , b) {
    return a + b ;
}

/********** End **********/

第2关：用表达式定义函数

function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    var myFunc = function (a) {
        return (a % 10) + Math.floor(a / 100) + (Math.floor(a / 10) % 10);
    };
    
	/********** End **********/
    return myFunc(a);
}

第3关：函数的调用

//求最大值的函数
function getMax(b,c) {
    return b>c?b:c;
}

//求最小值的函数
var getMin = function(b,c) {
    return b>c?c:b;
}

//对象中的求和函数
var myObject = {
    id:1,
    name:"function",
    myFunc:function(b,c) {
        return b+c;
    }
}

function mainJs(a,b,c) {
    a = parseInt(a);
    b = parseInt(b);
    c = parseInt(c);
	//请在此处编写代码
	/********** Begin **********/
    if (a == 1)
    {
        return getMax(b, c);
    }
    else if (a == 2)
    {
        return getMin(b, c);
    }
    else if (a == 3)
    {
        return myObject.myFunc(b, c);
    }

	/********** End **********/
}

 第4关：未定义的实参

function mainJs(a,b,c,d) {
	//请在此处编写代码
	/********** Begin **********/
    if (a == undefined)
    {
        a = "green";
    }
    if (b == undefined)
    {
        b = "green";
    }
    if (c == undefined)
    {
        c = "red";
    }
    if (d == undefined)
    {
        d = "yellow";
    }
    return a + "-" + b + "-" + c + "-" + d;
 	/********** End **********/
}

第5关：实参对象

//请在此处编写代码
/********** Begin **********/
function getMax() {
    var len = arguments.length;
    if (len == 0)
    {
        return 0;
    }
    else {
        var maxx = arguments[0];
        for (var i = 0; i < len; i++)
        {
            if (arguments[i] > maxx)
            {
                maxx = arguments[i];
            }
        }
        return maxx;
    }
}

/********** End **********/

function mainJs(a) {
    a = parseInt(a);
    switch(a) {
        case 1:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123);
        case 2:return getMax(23,21,56,34,89,34,32);
        case 3:return getMax(23,21,56,34);
        case 4:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123,8888);
        case 5:return getMax();
        default:break;
    }
}

第6关：对象作为参数

var park = {
    name:"Leaf Prak",
    location:"Fifth Avenue",
    todayTourists:4000
};

var computer = {
    name:"Levenon",
    price:"$800",
    memory:"8G"
};

var city = {
    name:"HangZhou",
    country:"Chine",
    population:9400000
}

function objectFunction(object) {
//请在此处编写代码
/********** Begin **********/
 var arr = new Array();
 for(var i=0;i<3;i++){
     arr[i] = (Object.keys(object)[i]+":"+Object.values(object)[i]+",");
 }
 return (arr.join(""));

/********** End **********/
}

function mainJs(a) {
    a = parseInt(a);
    switch(a) {
        case 1:return objectFunction(park);
        case 2:return objectFunction(computer);
        case 3:return objectFunction(city);
        default:break;
    }
}

 第7关：函数对象

//求数组中奇数元素的个数
function getOddNumber(a) {
    var result = 0;
    for(var i = 0;i < a.length;i++) {
        if(a[i]%2 != 0)
            result++;
    }
    return result;
}

//求数组中偶数元素的个数
function getEvenNumber(a) {
    var result = 0;
    for(var i = 0;i < a.length;i++) {
        if(a[i]%2 == 0)
            result++;
    }
    return result;
}

function getNumber(func,a) {
	//请在此处编写代码
	/********** Begin **********/
    if (func == getOddNumber)
    {
        return getOddNumber(a);
    }
    else {
        return getEvenNumber(a);
    }
	/********** End **********/
}

//测试接口
function mainJs(b,a) {
    a = a.split(",");
    var aLength = a.length;
    for(var i = 0;i < aLength;i++) {
        a[i] = parseInt(a[i]);
    }
    if(b == "getEvenNumber") {
        return getNumber(getEvenNumber,a);
    } else {
        return getNumber(getOddNumber,a);
    }
}

JavaScript学习手册五：JS数组

第1关：数组的创建、读写和长度

var array1 = [1,2,3,"js",4,true,"hello"];
var array2 = [true,true,"java",2.1];
function mainJs(a) {
	//请在此处编写代码
    /*********begin*********/
    if (a == array1.length)
    {
        return array1[array1.length - 1];
    }
    else {
        return array2[array2.length - 1];
    }
    /*********end*********/
}

第2关：数组元素的增减

var testArray = [12,"java","js","c","c++",24,36,"python","c#","css"];
function mainJs(a,b) {
    a = parseInt(a);
    b = parseInt(b);
    //请在此处编写代码
    /*********begin*********/
    // 删
    // var temp = new Array(a);
    for (i = 0; i < a; i++)
    {
        var newlength = testArray.unshift(testArray[testArray.length-i-1]);
        // temp[i] = testArray[testArray.length - a + i];
    }
    testArray.length = testArray.length - a;
    // for (i = 0; i < a; i++)
    // {
    //     var newlength = testArray.unshift(temp[i]);
    // }
    return testArray[b];
    /*********end*********/
}

第3关：数组的遍历和多维数组

var arr = [1,2,3,4,5,6,7,8,9,0,10,11,12,13,14,15,16,17,18,19,20,21,23,22];
function mainJs(a,b) {
    a = parseInt(a);
    b = parseInt(b);
    //请在此处编写代码
    /*********begin*********/
    var matrix = new Array(a);
    for (var i = 0; i < a; i++)
    {
        matrix[i] = new Array(b);
    }
    for (i = 0; i < a; i++)
    {
        for (j = 0; j < b; j++)
        {
            matrix[i][j] = arr[i * b + j];
        }
    }
    return matrix;

    /*********end*********/
}

第4关：数组的常用方法

function mainJs(myArray) {
    myArray = myArray.split(",");
    //请在此处编写代码
    /*********begin*********/
    var posA = new Array();
    var posB = new Array();
    var a = "a";
    var b = "b";
    for (var i = 0; i < myArray.length; i++) {
        if (myArray[i] === a) {
            posA.push(i);
        }
        else if (myArray[i] === b) {
            posB.push(i);
        }
    }

    return posA.concat(posB);
    /*********end*********/
}

 第5关：数组的应用——内排序

function mainJs(a) {
  var arr = a.split(",");
  // var index = new Array(arr.length);
    for(var i = 0;i < arr.length;i++) {
      arr[i] = parseInt(arr[i]);
    }
    //请在此处编写代码
    /*********begin*********/
  var ans = new Array();
  for (var i = 0; i < arr.length - 1; i++)
  {
    var maxindex = 0;
    for (j = 1; j < arr.length - i; j++)
    {
      if (arr[j] > arr[maxindex])
      {
        maxindex = j;
      }
    }
    ans.push(maxindex);
    var temp = arr[arr.length - i - 1];
    arr[arr.length - i - 1] = arr[maxindex];
    arr[maxindex] = temp;

  }
  return ans;
}

    /*********end*********/

JavaScript 学习手册二：JS 数据类型

第1关：JavaScript 数据类型介绍

function objectTest() {
	var a = {name:"myName",id:2};
	var b = [1,true,2];
	var c = 1;
	var d = "1";
	var e = true;
	var f;
	var aType,bType,cType,dType,eType,fType;
	//请在此处编写代码
	/********** Begin **********/
    aType="object";
    bType="array";
    cType="number";
    dType="string";
    eType="bool";
    fType="undefined";
    
	/********** End **********/
	return aType+","+bType+","+cType+","+dType+","+eType+","+fType;
}

第2关：JavaScript 数据类型转换

function mainJs(args1,args2,args3) {
	//请在此处编写代码
	/********** Begin **********/
    a = parseInt(args1);
    b = parseInt(args2, 16);
    c = parseFloat(args3);
    
	/********** End **********/
    return a+b+c;
}

后面的下次再更新