《Web应用开发》(头歌)

Posted 2023-03-29 流水穿风

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《Web应用开发》(头歌)相关的知识，希望对你有一定的参考价值。

这里写目录标题

实验一 HTML基础
实验二 css入门
实验三 JavaScript基础

实验一 html基础

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>
    <input type="radio" name="question"/>B：超文本标记语言<p>
    <input type="radio" name="question"/>C：扩展标记语言<p>
    <input type="radio" name="question"/>D：图形化标记语言
    <!-- ********* End ********* -->
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    难度系数:<br>
    <!-- ********* Begin ********* -->
    <p><input type="radio" name="degree"/>简单
    <p><input type="radio" name="degree"/>中等
    <p><input type="radio" name="degree" disabled="disabled"/>困难
        
    <!-- ********* 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"/><br>
    <!-- ********* 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>
        
	<!-- ********* 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>
    <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"/>保密
    </lable>
</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>
        <label for="single" name="state">
            <input type="radio" checked="checked" id="single"/>未婚
        </label>
        <label for="married" name="state">
            <input type="radio" id="married"/>已婚
        </label>
        <label for="secret" name=educoder头歌Web实训 太原理工web课——综合应用案例：拼图页面的制作全网更新最快


        
                
                     educoder头歌Web实训 太原理工web课——综合应用案例：商城下拉菜单的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客 
 第1关：拼图页面的制作 
任务描述 
本关任务：实现圆角效果。 
相关知识 
为了完成本关任务，你需要掌握： 
1.盒模型 
2.border-radius标签属性的选取 
border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4； 
 
需要注意的是，当应用值复制原则设置圆角边框时，如果“垂直半径参数”省略，则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。 
 
  
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>拼图效果</title>
<!-- ********* Begin ********* -->
<style type="text/css">
*margin:0; padding:0;
.box
	width:604px;
	height:454px;
	margin:0 auto;
	border:5px solid #aaa;
	/* ********* Begin ********* */
	border-radius: 30px           ;
	/* ********* End ********* */

.one
	width:604px;
	height:227px;
	/* ********* Begin ********* */
	border-radius:  30px          ;
	/* ********* End ********* */

.two
	width:604px;
	height:227px;
	/* ********* Begin ********* */
	border-radius:   30px         ;
	/* ********* End ********* */

</style>
<!-- ********* End ********* -->
</head>
<body>
<div class="box">
	<div class="one"></div>
	<div class="two"></div>
</div>
</body>
</html> 
 
第2关：拼图页面的制作-多背景图片设置 
  
任务描述 
本关任务： 
实现多背景图像。 
相关知识 
为了完成本关任务，你需要掌握： 
 
 
  
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>拼图效果</title>
<style type="text/css">
*margin:0; padding:0;
.box
	width:604px;
	height:454px;
	margin:0 auto;
	border:5px solid #aaa;
	border-radius:30px;

.one
	width:604px;
	height:227px;
	background-image:url(https://www.educoder.net/api/attachments/2072664),url(https://www.educoder.net/api/attachments/2072665),url(https://www.educoder.net/api/attachments/2072666);
	/* ********* Begin ********* */
	background-repeat: no-repeat                 ;
	background-position: left，center，right               ;
	/* ********* End ********* */
	border-radius:30px 30px 0 0;

.two
	width:604px;
	height:227px;
	background-image:url(https://www.educoder.net/api/attachments/2072667),url(https://www.educoder.net/api/attachments/2072668),url(https://www.educoder.net/api/attachments/2072669);
	/* ********* Begin ********* */
	background-repeat:   no-repeat                 ;
	background-position:   left，center，right               ;
	/* ********* End ********* */
	border-radius:0 0 30px 30px;

</style>
</head>
<body>
<div class="box">
	<div class="one"></div>
	<div class="two"></div>
</div>
</body>
</html> 
  

                
        
        
以上是关于《Web应用开发》(头歌)的主要内容，如果未能解决你的问题，请参考以下文章 
 WEB前段（HTML+JS），后端(MYSQL+PHP)开发基础
 pythonWeb后端开发好呢？还是从事网络爬虫比较好呢？
 pythonWeb后端开发好呢？还是从事网络爬虫比较好呢？
 Web后端语言模拟http请求(带用户名和密码)实例代码大全
 前端开发和后端开发的区别？
 educoder头歌Web实训 太原理工web课——综合应用案例：拼图页面的制作全网更新最快

《Web应用开发》(头歌)

这里写目录标题

实验一 html基础

HTML——表单类的标签

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

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

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

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

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

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

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

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

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

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

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

educoder头歌Web实训 太原理工web课——综合应用案例：拼图页面的制作全网更新最快

第1关：拼图页面的制作

任务描述

相关知识

第2关：拼图页面的制作-多背景图片设置

任务描述

相关知识

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

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

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

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

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

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

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

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

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

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

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

educoder头歌Web实训太原理工web课——综合应用案例：拼图页面的制作全网更新最快