【Educoder】HTML答案 （HTML入门——基础、HTML入门——基本标签、HTML——表单类的标签）
文章目录
- 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页面，具体要求是：
-
在
标签之间输入"Hello World"； -
在
标签之间输入"动手改变世界"； -
在
和元素的开始标签中输入align=“center”； -
再在
开始标签中输入bgcolor=“F6F3D6”，将背景设置为浅黄色。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello worldtitle>
head>
<body bgcolor="F6F3D6">
<h1 align="center">Hello Worldh1>
<p align="center">动手改变世界p>
body>
html>
HTML结构：自我简介网页
- 编程要求
请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：
-
在第5行中，添加title元素，内容为“自我简介”；
-
在第7行中，完善关键词标签；
-
修改第13行的自我简介信息和关于你自己的三个关键词。
DOCTYPE html>
<html>
<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>
html>
HTML入门——基本标签
创建第一个 HTML 标签
- 编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签，文本内容为welcome to Educoder的创建。
<h1>Helloh1>
<h1>welcome to Educoderh1>
创建 h3-h6标签
- 编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成依次创建-
<h1>创建不同字体大小的标题h1>
<h2>创建不同字体大小的标题h2>
<h3>创建不同字体大小的标题h3>
<h4>创建不同字体大小的标题h4>
<h5>创建不同字体大小的标题h5>
<h6>创建不同字体大小的标题h6>
创建 p 标签
- 编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个p标签的创建。
<p>我是一个段落 p>
创建 a 标签
- 编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个a标签， 跳转的地址是https://www.educoder.net，文本内容是Educoder平台的创建任务。
<a href="https://www.educoder.net">Educoder平台a>
创建 img 标签
- 编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签img标签， 图片的地址是https://www.educoder.net/attachments/download/207801，提示文字是小狗走路的创建任务。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<img src="https://www.educoder.net/attachments/download/207801" alt="小狗走路"/>
body>
html>
创建 div 标签
- 编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签div标签， 文本内容是我是div标签的创建任务。
<h2>我是h2标签h2>
<p>我是p标签p>
<div>我是div标签div>
添加注释
- 编程要求
注释掉 div 标签，同时给p标签添加说明一带一路。
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成本关任务。
<h2>习……致贺信h2>
<p>
习……………………………………精神发扬光大。
p>
HTML链接：带超链接的网页
- 编程要求
请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：
-
补全第17行href属性值和第27行id属性值，使得点击第1关和第2关之后，可以导航到相应内容位置；
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML链接title>
<meta name="description" content="HTML链接知识讲解">
<meta name="keywords" content="HTML, Link">
head>
<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'>HTMLa>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
<a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSSa>(Cascading Style Sheets，级联样式表单)和
<a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScripta>的帮助下，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:[email protected]">E-Maila>。p>
<p><a href="#">回到顶部a>p>
body>
html>
HTML标题与段落：网络文章网页
- 编程要求
请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：
-
补全第17行strong标签，使“超文本系统”文本重点显示；
-
在第31和第32行中新添一项HTML 5.1历史定义，
- 内容为：“2016年11月1日”
- 内容为：“HTML 5.1发布。”；
-
完善35和41行标签，使其中内容成为有序列表。
DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>HTML – 维基百科title>
head>
<body>
<h1>HTMLh1>
<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-Leea>，
<a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERNa>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIREa>系统。该系统的目的是为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 1866a>。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">W3Cabbr>推荐标准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 guidei> (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>
html>
HTML表格：日常消费账单表格展示网页
- 编程要求
请在右侧的编辑器中直接编辑修改HTML页面，具体要求是：
-
设置表格总体宽度(width)为400；
-
在第33行设置表标题，内容为“日常消费账单”；
-
在表格头部，第37-39行中添加，scope属性，值设置为col；
-
补全表80-82数据行的标签内容；
-
添加
元素，将总计一行作为表尾。DOCTYPE html> <html> <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.00td> <td align="right">￥1250.00td> tr> <tr> <th align="left" scope="row">衣物th> <td align="right">￥330.00td> <td align="right">￥594.00td> tr> <tr> <th align="left" scope="row">居住th> <td align="right">￥2100td> <td align="right">￥2100td> tr> <tr> <th align="left" scope="row">生活用品及服务th> <td align="right">￥700.00td> <td align="right">￥650.00td> tr> <tr> <th align="left" scope="row">医疗保健th> <td align="right">￥150.00td> <td align="right">￥50.00td> tr> <tr> <th align="left" scope="row">教育、文化和娱乐th> <td align="right">￥1030.00td> <td align="right">￥1250.00td> tr> <tr> <th align="left" scope="row">交通和通信th> <td align="right">￥230.00td> <td align="right">￥650.00td> tr> <tr> <th align="left" scope="row">其他用品和服务th> <td align="right">￥130.40td> <td align="right">￥150.00td> tr> tbody> <tfoot> <tr> <th align="left" scope="row">总计th> <td align="right">￥5911td> <td align="right">￥6694td> tr> tfoot> table> body> html>HTML——表单类的标签
表单元素——文本框
- 编程要求
创建一个input标签， type类型为text，name属性值为nickName。
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个input标签的创建任务。
<input type="text" name="nickName"/>表单元素——密码框
- 编程要求
创建一个input标签， type类型为password，name属性值为check，value值为123。
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成密码框的创建任务。
<input type="password" name="check" value="123"/>表单元素——单选框
创建一组单选框，name属性值为question。
<meta charset="UTF-8"> 1. HTML是什么语言？(单选题)<br> <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>表单元素——多选框
-
编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，创建一组多选框，name属性值为relax。具体效果如下：
休闲方式:<br> <input type="checkbox" name="relax" />逛街<br> <input type="checkbox" name="relax"/>看电影 <br> <input type="checkbox" name="relax"/>宅表单元素——checked属性
创建一组单选框，name属性值为marry，默认选中未婚。
婚姻状况:<br> <input type="radio" name="marry" checked="checked" />未婚 <br> <input type="radio" name="marry" />已婚表单元素——disabled 属性
创建一组单选框，type属性值为radio，name属性值为degree，禁用难度系数为困难的选项。
难度系数：<br> <input type="radio" name="degree"/>简单 <br> <input type="radio" name="degree"/>中等 <br> <input type="radio" name="degree" disabled="disabled"/>困难表单元素——label 标签
实现当点击元素内的文本时，焦点会自动定位到与标签绑定的表单元素上，要求如下：
标签的for属性值为user，创建一个文本框，name属性的值为user；标签的for属性值为pwd，创建一个密码框，name属性的值为password。input标签的id注意要和label标签的for属性值一致哦。
注： 属性的先后顺序为：type – id – name 。
<label for="user">用户：label> <input type="text" id="user" name="user" /> <br> <label for="pwd">密码：label> <input type="password" id="pwd" name="password" />表单元素——下拉列表
创建一个下拉列表，默认选中客户端测试，没有value值
选择版块： <select> <option>问答option> <option>分享option> <option>招聘option> <option selected="selected">客户端测试option> select>表单元素——文本域
创建一个文本域，最多能输入的字符数为15。
在标签里设置宽度为200px，高度为120px<style> textarea{ width:200px; height:120px; } style> 用一句话描述自己的特点：<textarea maxlength="15">textarea>表单元素——提交按钮
创建一个提交按钮，其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> <input type="submit" value="submit"/>表单元素的综合案例
完成一个表单的创建任务。
这里标签要按照规定格式来写，因为有
标签，会自动换行，就不用属性的先后顺序为： type – id – class – name – value ，其他需要添加的属性最后写。
其他要求如下：
用户名：添加类.common；
昵称：添加类.common；
性别：name属性的值为sex，禁用保密；
男：
标签的for属性的值为male；女：
标签的for属性的值为female；保密：
标签的for属性的值为other；教育程度：添加类.common，默认选中本科；
选项有：高中，中专，大专，本科，硕士，博士，其他；
婚姻状况：name属性的值为state，默认选中未婚；未婚：
标签的for属性的值为single；已婚：
标签的for属性的值为married；保密：
标签的for属性的值为secret；兴趣爱好：name属性的值为hobby，默认选中看电影；
踢足球：
标签的for属性的值为football；打篮球：
标签的for属性的值为basketball；看电影：
标签的for属性的值为film；描述自己的特点：添加类.common，字符最大长度为20；
提交：添加空
，用来占位，添加类.common，value值为提交。要求：像“用户名、昵称”这些采用
标签包裹文本，而‘男、女’这些单选框和多相框采用标签包裹文本。效果如下：
下拉框：
<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"> <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> form>你可能感兴趣的:(Educoder,educoder,html)
- 编程要求