html5 免费模版答题考试 html答题页面

转载

IT剑客行 2023-12-25 19:31:47

文章标签 html5 免费模版答题考试 educoder html HTML 表单 文章分类 HTML5 移动开发

文章目录

HTML入门——基础

初识HTML：简单的Hello World网页制作
HTML结构：自我简介网页

HTML入门——基本标签

创建第一个 HTML 标签
创建 h2-h6标签
创建 p 标签
创建 a 标签
创建 img 标签
创建 div 标签
添加注释
HTML链接：带超链接的网页
HTML标题与段落：网络文章网页
HTML表格：日常消费账单表格展示网页

HTML——表单类的标签

表单元素——文本框
表单元素——密码框
表单元素——单选框
表单元素——多选框
表单元素——checked属性
表单元素——disabled 属性
表单元素——label 标签
表单元素——下拉列表
表单元素——文本域
表单元素——提交按钮
表单元素的综合案例

HTML入门——基础

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

编程要求
请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：

在<h1></h1>标签之间输入"Hello World"；
在<p></p>标签之间输入"动手改变世界"；
在<h1>和<p>元素的开始标签中输入align=“center”；
再在<body>开始标签中输入bgcolor=“F6F3D6”，将背景设置为浅黄色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
  </head>  
    <!--------- Begin-------->
 <body bgcolor="F6F3D6">
    <!--用HTML语言向世界打声招呼吧！-->
    <h1 align="center">Hello World</h1>
    <p align="center">动手改变世界</p>
  </body>
    <!--------- End-------->
</html>

HTML结构：自我简介网页

编程要求
请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：

在第5行中，添加title元素，内容为“自我简介”；
在第7行中，完善关键词标签；
修改第13行的自我简介信息和关于你自己的三个关键词。

<!DOCTYPE html>
<html>
    <!--------- Begin-------->

  <head>
    <meta charset="utf-8">
    <title>自我简介</title>
    <meta name="description" content="XXX的自我简介网站">
    <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
  </head>
  <body>
    <h1 align="center">自我简介</h1>

    <h2>简介</h2>
    <p>在这里简单的描述一下你自己吧。</p>

    <h2>三个与你最有关的词</h2>
    <p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p>
    <ul>
        <li>第一个词</li>
        <p>选择第一个词的原因</p>
        <li>第二个词</li>
        <p>选择第二个词的原因</p>
        <li>第三个词</li>
        <p>选择第三个词的原因</p>
    </ul>
</body>
  <!--------- End-------->
</html>

HTML入门——基本标签

创建第一个 HTML 标签

编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签<h1></h1>，文本内容为welcome to Educoder的创建。

<h1>Hello</h1>
<!-- ********* Begin ********* -->
<h1>welcome to Educoder</h1>    
<!-- ********* End ********* -->

创建 h2-h6标签

编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成依次创建<h2>-<h6>标签的任务。

<h1>创建不同字体大小的标题</h1>
<!-- ********* Begin ********* -->
<h2>创建不同字体大小的标题</h2>
<h3>创建不同字体大小的标题</h3>
<h4>创建不同字体大小的标题</h4>
<h5>创建不同字体大小的标题</h5>
<h6>创建不同字体大小的标题</h6>  
<!-- ********* End ********* -->

创建 p 标签

编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个p标签的创建。

<!-- ********* Begin ********* -->
<p>我是一个段落 </p>
<!-- ********* End ********* -->

创建 a 标签

编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个a标签，跳转的地址是https://www.educoder.net，文本内容是Educoder平台的创建任务。

<!-- ********* Begin ********* -->
<a href="https://www.educoder.net">Educoder平台</a>
<!-- ********* End ********* -->

创建 img 标签

编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签img标签，图片的地址是https://www.educoder.net/attachments/download/207801，提示文字是小狗走路的创建任务。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
 	<img src="https://www.educoder.net/attachments/download/207801" alt="小狗走路"/>
    <!-- ********* End ********* -->
</body>
</html>

创建 div 标签

编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签div标签，文本内容是我是div标签的创建任务。

<h2>我是h2标签</h2>
<p>我是p标签</p>
<!-- ********* Begin ********* -->
<div>我是div标签</div>
<!-- ********* End ********* -->

添加注释

编程要求
注释掉 div 标签，同时给p标签添加说明一带一路。
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成本关任务。

<h2>习……致贺信</h2>
<!-- ********* Begin ********* -->
 <!-- <div> 
    新华社北京8月28日电　……信。
 </div> -->
 
<!-- 一带一路 -->
<p>
	习……………………………………精神发扬光大。
</p>
<!-- ********* End ********* -->

HTML链接：带超链接的网页

编程要求
请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：

补全第17行href属性值和第27行id属性值，使得点击第1关和第2关之后，可以导航到相应内容位置；
为第22、23和24行的的三个<a>标签添加target属性，使得链接在新标签中打开；
完善第32行<a>标签，使得邮箱链接起作用；
完善第33行<a>标签，使得点击回到顶部之后，可以导航到页面顶部。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML链接</title>
    <meta name="description" content="HTML链接知识讲解">
    <meta name="keywords" content="HTML, Link">
</head>
  <!--------- Begin-------->

<body>
    <h1>HTML 入门</h1>
    <h2>本页目录</h2>
    <ul>
        <li><a href="#toc1">简介</a></li>
        <li><a href="#toc2">第1关</a></li>
        <li><a href="#toc3">第2关</a></li>
    </ul>

    <h2 id="toc1">简介</h2>
    <p>
        <a href="https://en.wikipedia.org/wiki/HTML" target='_blank'>HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
        <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和
        <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
    <p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p>
    
    <h2 id="toc2">第1关</h2>
    <p>初识HTML：简单的Hello World网页</p>
    <h2 id="toc3">第2关</h2>
    <p>HTML链接：带超链接的网页</p>
    <hr>
    <p>若需帮助，请发送问题到<a href="mailto:someone@email.com">E-Mail</a>。</p>
    <p><a href="#">回到顶部</a></p>
</body>
  <!--------- End-------->

</html>

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

编程要求
请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：

补全第17行strong标签，使“超文本系统”文本重点显示；
在第31和第32行中新添一项HTML 5.1历史定义，

<dt>内容为：“2016年11月1日”
 <dd>内容为：“HTML 5.1发布。”；

完善35和41行标签，使其中内容成为有序列表。

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML – 维基百科</title>
</head>
  <!--------- Begin-------->

<body>
    <h1>HTML</h1>
    <p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
        <a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。
    </p>
    <h2>历史</h2>
    <h3>开发过程</h3>
    <p>1980年，物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>，
        <a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based
        <strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。
    </p>
    <h3>HTML里程碑</h3>
    <dl>
        <dt>1995年11月24日</dt>
        <dd>HTML2.0发布，对应的IETF文档为<a class="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以
            <a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank">
                <abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
        <dt>1997年12月18日</dt>
        <dd>HTML 4.0发布<sup><a href="#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>
            <li id='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>
            <li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li>
            <li id="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>

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

编程要求
请在右侧的编辑器中直接编辑修改HTML页面，具体要求是：

设置表格总体宽度(width)为400；
在第33行设置表标题，内容为“日常消费账单”；
在表格头部，第37-39行中添加，scope属性，值设置为col；
补全表80-82数据行的标签内容；
添加<tfoot>元素，将总计一行作为表尾。

<!DOCTYPE html>
<html>
  <!--------- Begin-------->

<head>
    <meta charset="utf-8">
    <title>HTML表格</title>
    <meta name="description" content="HTML表格知识讲解">
    <meta name="keywords" content="HTML,表格, Table">
    <style type="text/css">
    table {
        border-collapse: collapse;
       
    }

    caption {
        font-weight: bold;
        margin-bottom: .5em;
    }

    th,
    td {
        padding: .5em .75em;
        border: 1px solid #000;
    }

    tfoot {
        font-weight: bold;
    }
    </style>
</head>

<body>
    <table border="1" style="margin:auto" width="400">
        <caption>日常消费账单</caption>
        <thead>
            <!-- 表格头部 -->
            <tr>
                <th align="left" scope="col">消费项目</th>
                <th align="right" scope="col">一月</th>
                <th align="right" scope="col">二月</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th align="left" scope="row">食品烟酒</th>
                <td align="right">￥1241.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">衣物</th>
                <td align="right">￥330.00</td>
                <td align="right">￥594.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">居住</th>
                <td align="right">￥2100</td>
                <td align="right">￥2100</td>
            </tr>
            <tr>
                <th align="left" scope="row">生活用品及服务</th>
                <td align="right">￥700.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">医疗保健</th>
                <td align="right">￥150.00</td>
                <td align="right">￥50.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">教育、文化和娱乐</th>
                <td align="right">￥1030.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">交通和通信</th>
                <td align="right">￥230.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">其他用品和服务</th>
                <td align="right">￥130.40</td>
                <td align="right">￥150.00</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th align="left" scope="row">总计</th>
                <td align="right">￥5911</td>
                <td align="right">￥6694</td>
            </tr>
        </tfoot>
    </table>
</body>
  <!--------- End-------->

</html>

HTML——表单类的标签

表单元素——文本框

编程要求
创建一个input标签， type类型为text，name属性值为nickName。
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个input标签的创建任务。

<!-- ********* Begin ********* -->
<input type="text" name="nickName"/>
<!-- ********* End ********* -->

表单元素——密码框

编程要求
创建一个input标签， type类型为password，name属性值为check，value值为123。
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成密码框的创建任务。

<!-- ********* Begin ********* -->
<input type="password" name="check" value="123"/>
<!-- ********* End ********* -->

表单元素——单选框

创建一组单选框，name属性值为question。

<meta charset="UTF-8">
1. HTML是什么语言？(单选题)<br>
<!-- ********* Begin ********* -->
<p><input type="radio" name="question"/>A：高级文本语言</p>
<p><input type="radio" name="question"/>B：超文本标记语言</p>
<p><input type="radio" name="question"/>C：扩展标记语言</p>  
<p><input type="radio" name="question"/>D：图形化标记语言</p>
<!-- ********* End ********* -->

表单元素——多选框

编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，创建一组多选框，name属性值为relax。具体效果如下：

休闲方式:<br>
<!-- ********* Begin ********* -->
<input type="checkbox" name="relax" />逛街<br>  
<input type="checkbox" name="relax"/>看电影 <br>  
<input type="checkbox" name="relax"/>宅
<!-- ********* End ********* -->

表单元素——checked属性

创建一组单选框，name属性值为marry，默认选中未婚。

婚姻状况:<br>
<!-- ********* Begin ********* -->
<input type="radio" name="marry"  checked="checked" />未婚 <br>  
<input type="radio" name="marry" />已婚 
<!-- ********* End ********* -->

表单元素——disabled 属性

创建一组单选框，type属性值为radio，name属性值为degree，禁用难度系数为困难的选项。

html5 免费模版答题考试 html答题页面_HTML

难度系数：<br>
<!-- ********* Begin ********* -->
<input type="radio" name="degree"/>简单 <br>  
<input type="radio" name="degree"/>中等 <br>  
<input type="radio" name="degree" disabled="disabled"/>困难
<!-- ********* End ********* -->

表单元素——label 标签

实现当点击元素内的文本时，焦点会自动定位到与标签绑定的表单元素上，要求如下：

<label>标签的for属性值为user，创建一个文本框，name属性的值为user；

<label>标签的for属性值为pwd，创建一个密码框，name属性的值为password。

input标签的id注意要和label标签的for属性值一致哦。

注：属性的先后顺序为：type – id – name 。

html5 免费模版答题考试 html答题页面_HTML_02

<!-- ********* Begin ********* -->
<label for="user">用户：</label>    
<input type="text" id="user" name="user"  /> <br>
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password"  />
<!-- ********* End ********* -->

表单元素——下拉列表

创建一个下拉列表，默认选中客户端测试，没有value值

html5 免费模版答题考试 html答题页面_html5 免费模版答题考试_03

选择版块：
<!-- ********* Begin ********* -->
<select>
    <option>问答</option>
    <option>分享</option>
    <option>招聘</option>
    <option selected="selected">客户端测试</option>
</select>
<!-- ********* End ********* -->

表单元素——文本域

创建一个文本域，最多能输入的字符数为15。
在<style></style>标签里设置宽度为200px，高度为120px

<!-- ********* Begin ********* -->
<style>
textarea{
width:200px;
height:120px;
}
</style>

用一句话描述自己的特点：<textarea maxlength="15"></textarea>
<!-- ********* End ********* -->

表单元素——提交按钮

创建一个提交按钮，其value值为submit。

<label for="user">用户：</label><input type="text" id="user" name="user"/><br>

<label for="pwd">密码：</label><input type="password" id="pwd" name="password" style="margin-bottom: 10px;"/><br>

<!-- ********* Begin ********* -->
<input type="submit" value="submit"/>    
<!-- ********* End ********* -->

表单元素的综合案例

完成一个表单的创建任务。

这里标签要按照规定格式来写，因为有 <div> 标签，会自动换行，就不用<br>标签了。

属性的先后顺序为： type – id – class – name – value ，其他需要添加的属性最后写。

其他要求如下：

用户名：添加类.common；

昵称：添加类.common；

性别：name属性的值为sex，禁用保密；

男：<label>标签的for属性的值为male；

女：<label>标签的for属性的值为female；

保密：<label>标签的for属性的值为other；

教育程度：添加类.common，默认选中本科；

选项有：高中，中专，大专，本科，硕士，博士，其他；
婚姻状况：name属性的值为state，默认选中未婚；

未婚：<label>标签的for属性的值为single；

已婚：<label>标签的for属性的值为married；

保密：<label>标签的for属性的值为secret；

兴趣爱好：name属性的值为hobby，默认选中看电影；

踢足球：<label>标签的for属性的值为football；

打篮球：<label>标签的for属性的值为basketball；

看电影：<label>标签的for属性的值为film；

描述自己的特点：添加类.common，字符最大长度为20；

提交：添加空<span></span>，用来占位，添加类.common，value值为提交。

要求：像“用户名、昵称”这些采用<span>标签包裹文本，而‘男、女’这些单选框和多相框采用<label>标签包裹文本。

效果如下：

html5 免费模版答题考试 html答题页面_HTML_04

下拉框：

html5 免费模版答题考试 html答题页面_educoder_05

<meta charset="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>


<form class="container">
	<!-- ********* Begin ********* -->
	<div>
		<span>用户名：</span>
		<input type="text" class="common"/>
    </div>
	<div>
		<span>昵称：</span>
		<input type="text" class="common"/>
    </div>
    <div>
		<span>性别：</span>
        <label for="male"><input type="radio" id="male" name="sex"/>男</label>
		<label for="female"><input type="radio" id="female" name="sex"/>女</label>
		<label for="other"><input type="radio" id="other" name="sex" disabled="disabled" />保密</label>
	</div>
    <div>
		<span>教育程度：</span>
        <select class="common"/>
            <option class="common">高中</option>
            <option class="common">中专</option>
            <option class="common">大专</option>  
            <option class="common" selected="selected">本科</option>
            <option class="common">硕士</option>
            <option class="common">博士</option>
            <option class="common">其他</option>
        </select>
	</div>
    <div>
		<span>婚姻状况：</span>
		<label for="single"><input type="radio" id="single" name="state" checked="checked"/>未婚</label>
		<label for="married"><input type="radio" id="married" name="state"/>已婚</label>
		<label for="secret"><input type="radio" id="secret" name="state"  />保密</label>
	</div>
	<div>
		<span>兴趣爱好：</span>
		<label for="football"><input type="checkbox" id="football" name="hobby" />踢足球</label>
		<label for="basketball"><input type="checkbox" id="basketball" name="hobby"/>打篮球</label>
		<label for="film"><input type="checkbox" id="film" name="hobby" checked="checked" />看电影</label>
	</div>
	<div>
		<span>描述自己的特点：</span>
        <textarea class="common" maxlength="20"></textarea>
	</div>
	<div>
		<span></span>
		<input type="submit" class="common" value="提交"/>
    </div>
	<!-- ********* End ********* -->
</form>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。