<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><!-- ********* Begin ********* -->
昵称:<inputtype="text"name="nickName"/><!-- ********* End ********* --></body></html>
第2关 表单元素——密码框
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><!-- ********* Begin ********* -->
密码:<inputtype="password"name="check"value="123"/><!-- ********* End ********* --></body></html>
第3关 表单元素——单选框
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body>
1. HTML是什么语言?(单选题)<br><!-- ********* Begin ********* --><p><inputtype="radio"name="question"/>A:高级文本语言<p><inputtype="radio"name="question"/>B:超文本标记语言<p><inputtype="radio"name="question"/>C:扩展标记语言<p><inputtype="radio"name="question"/>D:图形化标记语言
<!-- ********* End ********* --></body></html>
第4关 表单元素——多选框
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body>
休闲方式:<br><!-- ********* Begin ********* --><p><inputtype="checkbox"name="relax"/>逛街<p><inputtype="checkbox"name="relax"/>看电影<p><inputtype="checkbox"name="relax"/>宅
<!-- ********* End ********* --></body></html>
第5关 表单元素——checked属性
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body>
婚姻状况:<br><!-- ********* Begin ********* --><p><inputtype="radio"name="marry"checked="checked"/>未婚
<p><inputtype="radio"name="marry"/>已婚
<!-- ********* End ********* --></body></html>
第6关 表单元素——disabled 属性
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body>
难度系数:<br><!-- ********* Begin ********* --><p><inputtype="radio"name="degree"/>简单
<p><inputtype="radio"name="degree"/>中等
<p><inputtype="radio"name="degree"disabled="disabled"/>困难
<!-- ********* End ********* --></body></html>
第7关 表单元素——label 标签
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><!-- ********* Begin ********* --><labelfor="user">用户:</label><inputtype="text"id="user"name="user"/><br><labelfor="pwd">密码:</label><inputtype="password"id="pwd"name="password"/><br><!-- ********* End ********* --></body></html>
第8关 表单元素——下拉列表
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body>
选择版块:
<!-- ********* Begin ********* --><select><option>问答</option><option>分享</option><option>招聘</option><optionselected="selected">客户端测试</option><!-- ********* End ********* --></body></html>
第9关 表单元素——文本域
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><!-- ********* Begin ********* --><style>textarea{width:200px;height:120px;}</style></head><body>
用一句话描述自己的特点:<textareamaxlength="15"></textarea><!-- ********* End ********* --></body></html>
第10关 表单元素——提交按钮
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><labelfor="user">用户:</label><inputtype="text"id="user"name="user"/><br><labelfor="pwd">密码:</label><inputtype="password"id="pwd"name="password"style="margin-bottom: 10px;"/><br><!-- ********* Begin ********* --><inputtype="submit"value="submit"/><!-- ********* End ********* --></body></html>
第11关 表单元素的综合案例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><style>.container{width: 40%;margin: 20px auto;}.common{width:230px;height: 30px;}span{display:inline-block;width: 150px;text-align: right;}div{margin-bottom: 10px;}</style></head><body><formclass="container"><!-- ********* Begin ********* --><div><span>用户名:</span><inputtype="text"class="common"/></div><div><span>昵称:</span><inputtype="text"class="common"/></div><div><span>性别:</span><labelfor="male"><inputtype="radio"id="male"name="sex"/>男
</label><labelfor="female"><inputtype="radio"id="female"name="sex"/>女
</label><labelfor="other"><inputtype="radio"id="other"name="sex"disabled="disabled"/>保密
</lable></div><div><span>教育程度:</span><selectclass="common"><option>高中</option><option>中专</option><option>大专</option><optionselected="selected">本科</option><option>硕士</option><option>博士</option><option>其他</option></select></div><div><span>婚姻状况:</span><labelfor="single"name="state"><inputtype="radio"checked="checked"id="single"/>未婚
</label><labelfor="married"name="state"><inputtype="radio"id="married"/>已婚
</label><labelfor="secret"name="state"><inputtype="radio"id="secret"/>保密
</label></div><div><span>兴趣爱好:</span><labelfor="football"name="hobby"><inputtype="checkbox"id="football"/>踢足球
</label><labelfor="basketball"name="hobby"><inputtype="checkbox"id="basketball"/>打篮球
</label><labelfor="film"><inputtype="checkbox"id="film"checked="checked"name="hobby"/>看电影
</label></div><div><span>描述自己的特点:</span><textareamaxlength="20"class="common"></textarea></div><div><span></span><inputtype="submit"value="提交"class="common"/></div><!-- ********* End ********* --></form></body></html>
<!DOCTYPEhtml><head><metacharset="UTF-8"/><title>HTML – 维基百科</title></head><!--------- Begin--------><body><h1>HTML</h1><p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
<ahref="https://en.wikipedia.org/wiki/Markup_language"title="Markup language"target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台<sup><ahref="#ref1">[1]</a></sup>。
</p><h2>历史</h2><h3>开发过程</h3><p>1980年,物理学家<ahref="https://en.wikipedia.org/wiki/Tim_Berners-Lee"title="Tim Berners-Lee"target="_blank">Tim Berners-Lee</a>,
<ahref="https://en.wikipedia.org/wiki/CERN"title="CERN"target="_blank">CERN</a>的一位项目负责人,提出并实现了<ahref="https://en.wikipedia.org/wiki/ENQUIRE"title="ENQUIRE"target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年, Berners-Lee写了一个备忘录,提出了基于Internet-based
<strong>超文本系统</strong><sup><ahref="#ref2">[2]</a></sup>。
</p><h3>HTML里程碑</h3><dl><dt>1995年11月24日</dt><dd>HTML2.0发布,对应的IETF文档为<aclass="external mw-magiclink-rfc"rel="nofollow"href="https://tools.ietf.org/html/rfc1866"target="_blank">RFC 1866</a>。</dd><dt>1997年1月14日</dt><dd>HTML 3.2以
<ahref="https://en.wikipedia.org/wiki/W3C_Recommendation"class="mw-redirect"title="W3C Recommendation"target="_blank"><abbrtitle="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd><dt>1997年12月18日</dt><dd>HTML 4.0发布<sup><ahref="#ref3">[3]</a></sup>。</dd><dt>2014年10月28日</dt><dd>HTML5 发布。</dd><dt>2016年11月1日</dt><dd>HTML 5.1发布。</dd></dl><h2>参考文献</h2><ol><small><liid='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (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."</li><liid="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li><liid="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li></small></ol></body><!--------- End--------></html>
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><h1>Hello</h1><!-- ********* Begin ********* --><h1>welcome to Educoder</h1><!-- ********* End ********* --></body></html>
第2关 创建 h2-h6 标签
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><h1>创建不同字体大小的标题</h1><!-- ********* Begin ********* --><h1>创建不同字体大小的标题</h1><h2>创建不同字体大小的标题</h2><h3>创建不同字体大小的标题</h3><h4>创建不同字体大小的标题</h4><h5>创建不同字体大小的标题</h5><h6>创建不同字体大小的标题</h6><!-- ********* End ********* --></body></html>
第3关 创建 p 标签
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><!-- ********* Begin ********* --><p>我是一个段落</p><!-- ********* End ********* --></body></html>
第4关 创建 a 标签
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><!-- ********* Begin ********* --><ahref="https://www.educoder.net">Educoder平台</a><!-- ********* End ********* --></body></html>
第5关 创建 img 标签
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><!-- ********* Begin ********* --><imgsrc="https://www.educoder.net/attachments/download/207801"alt="小狗走路"/><!-- ********* End ********* --></body></html>
第6关 创建 div 标签
<!DOCTYPEhtml><html><head><metacharset="UTF-8"></head><body><h2>我是h2标签</h2><p>我是p标签</p><!-- ********* Begin ********* --><div>我是div标签</div><!-- ********* End ********* --></body></html>
functionmainJs(a,b,c){//请在此处编写代码/********** Begin **********/var JSONObject ={"key1":"a","key2":'b',"key3":'c'};delete JSONObject.key3;for(att in JSONObject){
console.log(JSONObject[att]);}return a+","+b;/********** End **********/}
第2关 JSON数组
var myJson ={"category":"computer","detail":"programming","language":["js","java","php","python","c"]}functionmainJs(a){
a =parseInt(a);//请在此处编写代码/********** Begin **********/var result ="";for(var i =0;i < a;i++){
result = result+myJson.language[i]+",";}return result.slice(0,-1);/********** End **********/}
第3关 JSON字符串
var JSONString ='{"key1":"value1","key2":"value2"}';functionmainJs(a){//请在此处编写代码/********** Begin **********/var JSONObject =JSON.parse(JSONString);
JSONObject.key1 = a;returnJSON.stringify(JSONObject);/********** End **********/}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>get element by id</title></head><body><a id="a1" src="https://www.google.com">Google</a><p id="p1">this is a text</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement = document.getElementById("a1");<!---------End--------->
myElement.href="https://www.educoder.net";</script></body></html>
第2关 通过类名获取文档元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>get element by name</title></head><body><img src=""class="myName"/><form class="myName" id="myForm"></form><div class="myName">This is quote</div><p class="myName">This is what you should get</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement = document.getElementsByTagName('p')[0];<!---------End--------->
myElement.innerText="I changed the text";</script></body></html>
第3关 通过标签名获取文档元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>get element by id</title></head><body><div class="diva"><a href="https://www.educoder.net">EduCoder</a><a href="https://www.facebook.com">FaceBook</a></div><div class="divb"><a href="https://www.twitter.com">Twitter</a><form name="myForm"></form><a href="https://www.nudt.edu.cn">NUDT</a></div><p id="pp">this is a text</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement = document.getElementsByTagName('div')[1].getElementsByTagName('a')[1];<!---------End--------->
myElement.innerText="nudt";</script></body></html>
//请在此处编写代码
/********** Begin **********/function mainJs(a,b){
return a.concat(b);}/********** End **********/
第2关 用函数语句定义函数
function mainJs(a){
a = parseInt(a);
//请在此处编写代码
/********** Begin **********/var myFunc=function sum(a){
return a%10+(a-a%10)/10%10+(a-a%100)/100;}/********** 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 **********/
var t;if(a==1){
t=getMax(b,c);}else if(a==2){
t= getMin(b,c);}else if(a==3){
t=myObject.myFunc(b,c);}
return t;/********** End **********/}
第4关 未定义的实参
function mainJs(a,b,c,d){
//请在此处编写代码
/********** Begin **********/if(!a) a="green";if(!b) b="green";if(!c) c="red";if(!d) d="yellow";
return a+"-"+b+"-"+c+"-"+d;/********** End **********/}
第5关 实参对象
//请在此处编写代码
/********** Begin **********//********** 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;}}function getMax(){
var alength=arguments.length;if(alength==0) return 0;else{
var max=0;for(var i=0;i<alength;i++){if(arguments[i]>max)
max=arguments[i];}
return max;}}
第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 a=new Array();for(var i=0;i<3;i++){
a[i]=Object.keys(object)[i]+":"+Object.values(object)[i]+",";}
return (a.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 **********/
return func(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);}}