HTML上部分--头歌（educoder）实训作业题目及答案

编程语言 2023-04-06 20:53:46 阅读次数: 0

HTML——基础

第1关：初识HTML

    <!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>

第2关：HTML结构

    <!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——基本标签

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

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Hello</h1>
        <!-- ********* Begin ********* -->
        <h1>welcome to Educoder</h1>
        <!-- ********* End ********* -->
    </body>
    </html>

第2关：创建 标签

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>创建不同字体大小的标题</h1>
        <!-- ********* Begin ********* -->
        <h2>创建不同字体大小的标题</h2>
        <h3>创建不同字体大小的标题</h3>
        <h4>创建不同字体大小的标题</h4>
        <h5>创建不同字体大小的标题</h5>
        <h6>创建不同字体大小的标题</h6>
        <!-- ********* End ********* -->
    </body>
    </html>

第3关：创建 p 标签

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <!-- ********* Begin ********* -->
        <p>我是一个段落</p>
        <!-- ********* End ********* -->
    </body>
    </html>

第4关：创建 a 标签

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <!-- ********* Begin ********* -->
        <a href="https://www.educoder.net">Educoder平台</a>
        <!-- ********* End ********* -->
    </body>
    </html>

第5关：创建 img 标签

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

第6关：创建 div 标签

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h2>我是h2标签</h2>
        <p>我是p标签</p>
        <!-- ********* Begin ********* -->
        <div>我是div标签</div>
        <!-- ********* End ********* -->
    </body>
    </html>

第7关：添加注释

自己思考一下

HTML——表单类的标签

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


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    昵称：<input type="text" name="nickName"/> 
    <!-- ********* End ********* -->
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    密码：<input type="password" name="check" value="123"/>
    <!-- ********* End ********* -->
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    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 ********* -->
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    休闲方式:<br>
    <!-- ********* Begin ********* -->
    <p><input type="checkbox" name="relax" />逛街</p>
    <p><input type="checkbox" name="relax"/>看电影</p>
    <p><input type="checkbox" name="relax"/>宅 </p>
    <!-- ********* End ********* -->
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    婚姻状况:<br>
    <!-- ********* Begin ********* -->
    <p><input type="radio" name="marry" checked="checked"/>未婚</p>
    <p><input type="radio" name="marry"/>已婚</p>
    <!-- ********* End ********* -->
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    难度系数:<br>
    <!-- ********* Begin ********* -->
    <p><input type="radio" name="degree"/>简单</p>
    <p><input type="radio" name="degree"/>中等</p>
    <p><input type="radio" name="degree" disabled="disabled"/>困难</p>
    <!-- ********* End ********* -->
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* 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 ********* -->
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    选择版块：
    <!-- ********* Begin ********* -->
    <select>
        <option>问答</option>
        <option>分享</option>
        <option>招聘</option>
        <option selected="selected">客户端测试</option>
    </select>
    <!-- ********* End ********* -->
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- ********* Begin ********* -->
    <style>
        textarea {
            width: 200px;
            height: 120px;
        }
    </style>
</head>
<body>

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <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 ********* -->
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>

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

<!-- ********* End ********* -->
</form>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_35353972/article/details/127225342
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022