Web程序设计基础头歌edu实训(2023TYUT)

球球不要摆了

已于 2023-12-28 15:44:15 修改

阅读量1.8k

点赞数 29

分类专栏： JavaWeb&&HTML&&edu 文章标签： html5

于 2023-12-21 22:06:47 首次发布

本文链接：https://blog.csdn.net/qq_74521328/article/details/135140364

版权

JavaWeb&&HTML&&edu 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Web前端开发概述

第1关：Web前端开发相关的概念

1、所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。
错
2、URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”。URL其实就是Web地址，俗称“网址”。
对

3、HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
对

4、下列选项中，（）不是Web浏览器
Linux

5、张同学正在家里通过拨号上网访问新浪主页，此时，他自己的计算机是（）。
浏览器

第2关：第一个html网页

<!DOCTYPE html>
<html>
<!-- ********* Begin ********* -->
 <head>
  <meta charset="utf-8"/>
  <title>我的第一个网页</title>
 </head>
 <body>
  <h1 align="left">初识HTML</h1>
 </body> 
<!-- ********* End ********* -->
</html>

web编程训练-html5-文档头部

第1关：页面标题及字符集的设置

<!DOCTYPE html>
<html>
 <head>
  <!-- ********* Begin ********* -->
  <title>设置标题</title>
  <meta charset="utf-8"/>
  
  
  
  <!-- ********* End ********* -->
 </head>
 <body>
  <h1 align="center">元信息的设置</h1>  
 </body> 
</html>

第2关：元信息的设置

<!DOCTYPE html>
<html>
 <head>
    <title>设置标题</title>
  <meta charset="utf-8"/>
  <!-- ********* Begin ********* -->
  <meta http-equiv="refresh"  content="10;url=https://www.baidu.com/"/> 
  <meta http-equiv ="expires"  content="Fri,31 Dec 2021 08:00:00 GMT"/> 
  <meta name="keywords" content="前端,元信息,网页跳转,失效期,搜索关键词"/> 
  <!-- ********* End ********* -->
 </head>
 <body>
  <h1 align="center">元信息的设置</h1>  
 </body> 
</html>

第3关：link标签

<!DOCTYPE html>
<html>
 <head>
    <title>设置标题</title>
  <meta charset="utf-8"/>
  <!-- ********* Begin ********* -->
  <link rel="stylesheet" type="text/css" href="https://www.educoder.net//api/attachments/2306844" />
  <!-- ********* End ********* -->
 </head>
 <body>
  <h1 align="center">元信息的设置</h1>  
 </body> 
</html>

web知识训练-html5文档头部标签及属性

第1关：web知识训练-html5文档头部标签及属性

1、在HTML中，网页标题文字应放置在（）
<title></title>标记之间

2、关于title标签的用法，下列说法正确的是（）。
title标签设置的标题可作为默认快捷方式或收藏夹的名称

3、下列link标签的属性中，（）可用于指定当前文档与引用的外部文档的关系。
rel

4、如果设置页面刷新、失效期等元信息，可对meta标签添加相应的name属性。
错误

5、包含在头部标签之间的内容不会在浏览器窗口中显示出来。
正确

web知识训练-html5-文本控制类标签

第1关：web知识训练-html5-文本控制类标签

1、在下列选项中，显示内容的大小和浏览器默认文本的大小基本相同的是（）。
h4

2、在下列选项中，用于产生一条水平线的标签是（）。
hr

3、关于标签的嵌套，下列选项中正确的是（ A ）。

4、标签作用的元素将以上标形式显示。
错误

5、标签作用的元素会以黄色背景效果显示。
正确

web编程训练-html5-文本控制类标签

第1关：html5-网页背景及标题段落标签

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>标题段落的设置</title>
 </head>
 <!-- ********* Begin ********* -->
 <body background="https://data.educoder.net/api/attachments/2308369">
   <h1 align = "center">第一章 HTML5基础</h1>
   <h2 align = "left">1.1 文本控制标签</h2>
   <p align = "justify">这是第1个段落。</p>          
 </body>
 <!-- ********* End ********* -->
</html>

第2关：html5-水平线和换行的设置

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>水平线的设置</title>
 </head>
 <body background="https://www.educoder.net/api/attachments/2308369">
    <h1 align="center">第一章 HTML5基础</h1>
    <!-- ********* Begin ********* -->
   <hr size = 3 width = 400 color = blue noshade align="center">
    <br/>   
    <!-- ********* End ********* -->
    <h2 align="left">1.1 文本控制标签</h2>
    <p align="justify">这是第1个段落。</p>             
 </body>
</html>

第3关：html5-文本修饰

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>水平线的设置</title>
 </head>
 <body background="https://www.educoder.net/api/attachments/2308369">
    <h1 align="center">
       <!-- ********* Begin ********* -->
       
      <font face = "黑体" color = red>第一章 HTML5基础</font>  
         
       <!-- ********* End ********* -->
    </h1>
       <hr size=3  width=400  Align=center color=blue noshade/>
       <br/>    
    <h2 align="left">1.1 文本控制标签</h2>
     <!-- ********* Begin ********* -->
       <b>这是加粗显示的文字</b>
       <i>这是斜体显示的文字</i>
       <u>这是带下划线的文字</u>
       <sup>3</sup>
       <sub>2</sub>    
     <!-- ********* End ********* -->
 </body>
 </html>

web编程训练-html5-图像的运用

第1关：新媒体新闻网页的设计

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>新媒体新闻网页的设计</title>
</head>
<!-- ********* Begin ********* -->
<body background="https://www.educoder.net/api/attachments/2308369"> 
	
    <h2 align = "center"><font face = "微软雅黑">新媒体的大势所趋</font></h2>
	<p align = "center"><font color = "#979797" size = 2>更新时间：2021年11月18日14时08分 来源：<font color = blue>开源社区</font></font></p>
    	
    <hr size = 2 color = "#CCCCCC">>
	<p>近年来，随着<font color = blue>移动互联网</font>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<font color = blue>“两微一抖”</font>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
    
</body>
<!-- ********* Begin ********* -->
</html>

第2关：带插图的新媒体新闻网页的设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新媒体新闻网页的设计</title>
</head>
<body background="https://www.educoder.net/api/attachments/2308369">
	
	<h2 align="center"><font face="微软雅黑">新媒体的大势所趋</font></h2>
	<p align="center"><font color="#979797" size="2">更新时间：2021年11月18日14时08分 来源：<font color="blue">开源社区</font></font></p>
	<hr size="2" color="#CCCCCC" />
	<p>
     <!-- ********* Begin ********* -->
     <img src="https://www.educoder.net/api/attachments/2334243" title="这是一张插图" width="150" height="100" align = "left" hspace = 30 alt="新媒体插图">   
     <!-- ********* End ********* -->
        近年来，随着<font color="blue">移动互联网</font>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<font color="blue">“两微一抖”</font>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>	         
</body>
</html>

web知识训练-html5-图像的运用

第1关：web知识训练-html5-图像的运用

1、下列选项中，不适合作网页图像的文件格式是（）。
bmp

2、如果想为网页添加背景图，可在body标签中添加（）属性。
background

3、下列选项中，哪个不是相对路径的表示方式（ )。
c：/pic/images/ch_cook1.gif

4、title属性用于设置网页标题。
错误

5、下列选项中，哪个不是img标签的属性（）。
href

web编程训练-html5-超链接的应用

第1关：创建热字超链接

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建超链接</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
  <h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2>
   <!-- ********* End ********* -->
 </body> 
</html>

第2关：创建热图超链接

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建超链接</title>
 </head>
 <body>
 <h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2>
   <!-- ********* Begin ******* -->
 <a href="https://www.kuwo.cn/"   target="_blank" title="单击进入">
<img src="https://www.educoder.net/api/attachments/2357951" align = "bottom"/>
</a> 
    
   <!-- ********* End ********* -->
   好音质用酷我
 </body> 
</html>

第3关：下载歌曲超链接

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建超链接</title>
 </head>
 <body>
 <h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2>
  <a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951  align=bottom /></a>
  好音质用酷我<br/>
   <!-- ********* Begin ******* -->
  推荐下载：  
  <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a>
   <!-- ********* End ********* -->
  <p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio>
  </p>
 </body> 
</html>

第4关：创建页内超链接

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建超链接</title>
 </head>
 <body>
 <h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2>
  <a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951  align=bottom /></a>
  好音质用酷我<br/>
   <!-- ********* Begin1 ******* -->
   <h2><a href="#Q">查看第7个音频</a></h2>
   <!-- ********* End1 ********* -->
  推荐下载：  
  <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a>
  <p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio>
  </p>
	 <h2>这是第1个音频</h2>
     <h2>这是第2个音频</h2>
     <h2>这是第3个音频</h2>
     <h2>这是第4个音频</h2>
     <h2>这是第5个音频</h2>
     <h2>这是第6个音频</h2>
     <h2>
    <!-- ********* Begin2 ******* -->
       <a href="Q">这是第7个音频</a>
    <!-- ********* End2 ********* -->
     </h2>
     <h2>这是第8个音频</h2>
 </body> 
</html>

web知识训练-html5-超链接的应用

1、在HTML中，下面是超链接标签的是（ A ）。

2、下列选项中，用于设置超链接链宿路径的属性是（）。
href

3、在HTML中，若点击超链接时，弹出一个新的网页窗口，下列选项符合要求的是（ C ）。

4、<a href=“#”>所表示的意义是（）。
表示空链接，不做任何跳转

5、如果要在超链接中设置电子邮件链接，则href属性值可设置为（）
mailto:zhangsan@qq.com

html5-表格基本结构

第1关：网页表格的基本概念

1、定义表格的项目表头的HTML标签是（ D ）。

2、下列选项中，用于设置表格背景颜色的属性是（ B ）。

3、要使表格的行高为18px，以下方法中，正确的是（ C ）

4、下列选项中，用于设置表格标题的标签是（ D ）

5、下列设置单元格中文本对齐方式的选项中，正确的是（ B ）

第2关：创建简单的表格

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建表格</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
  <table border="4px" width = 200 background = "https://www.educoder.net/api/attachments/1208912">
    <caption>成绩表</caption>
    <tr width = 100>
      <th width = 100>姓名</th>
      <th width = 100>成绩</th>
    </tr>
    <tr width = 100>
      <td width = 100>张三</th>
      <td width = 100>90</th>
    </tr>
  </table>
  
   <!-- ********* End ********* -->
 </body> 
</html>

第3关：表格行样式的设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表格行样式的设置</title>
</head>
<body>
    <table border="4px" background="https://www.educoder.net/api/attachments/1208912" width="200">
       <caption>成绩表</caption>
       <!-- ********* Begin ********* -->
        <tr height = 40 align = "center" bgcolor = "00ffff" valign = "middle">
       <!-- ********* End ********* -->
            <th width="100">姓名</td>
            <th width="100">成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
        </tr>
    </table>
    
</body>
</html>

第4关：表格中单元格样式的设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表格单元格样式的设置</title>
</head>
<body>
    <!-- ********* Begin1 ********* -->
    <table border = "4px" cellspacing = "0" width = 200 cellpadding = "8">
    <!-- ********* End1 ********* -->
       <caption>成绩表</caption>
        <tr height=40 align=center  valign=middle bgcolor=00ffff>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr bgcolor=00ff00>
            <!-- ********* Begin2 ********* -->
            <td width = 120>张三</td>
            <td align = "center">90</td>
            <!-- ********* End 2********* -->
        </tr>
    </table>   
</body>
</html>

html5—表格高级样式的设置

第1关：表格高级样式设置相关概念

1、下列选项中，用于设置表格内部边框线显示的属性是（）。
rules

2、如果希望表格的外部边框只显示上下两条边框线，属性frame的取值应选（）。
hsides

3、如果希望表格的内部边框只显示行线，则属性rules的取值应选（）。rows

4、HTML中，若合并两个水平方向单元格，应使用的属性是（）。
colspan

5、<table rules=cols>，表示（）
只显示列与列之间的分隔线

第2关：设置表格的外边框样式

<html>
 <head>
  <meta charset="utf-8"/>
  <title>设置表格外边框属性</title>
 </head>
  <body>
   <!-- ********* Begin ******* -->
   <table width = 100 height = 80 border = 4 frame = "hsides">
   
    <!-- ********* End ********* -->
    <caption>简易信息表</caption> 
    <tr align=center  valign=middle>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr  align=center  valign=middle>
      <td>张三</td>
      <td>20</td>
    </tr>
   </table>
  </body> 
</html>

第3关：设置表格的内边框样式

<html>
 <head>
  <meta charset="utf-8"/>
  <title>设置表格内边框属性</title>
 </head>
  <body>
   <!-- ********* Begin ******* -->
   <table width = 100 height = 80 border = "4" frame = "hsides" rules = "rows">
   
    <!-- ********* End ********* -->
    <caption>简易信息表</caption> 
    <tr align=center  valign=middle>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr  align=center  valign=middle>
      <td>张三</td>
      <td>20</td>
    </tr>
   </table>
  </body> 
</html>

第4关：表格中单元格的合并

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>签到表</title>
    <style type="text/css">
       th{background-color:#00ff33;}
       td{background-color:#00ffff;}
    </style>
 </head>
 <body> 
    <table border="2" width="400" bordercolor="#00ff00" cellpadding="6">
        <caption>签到表</caption>
      <!-- ********* Begin ********* -->
      <tr>
         <th rowspan="2">姓名</th>
         <th colspan="2">签到</th>
         <th rowspan="2">备注</th>
      </tr>
      <tr>
         <th>第1次</th>
         <th>第二次</th>
      </tr> 
      <tr>
         <td>张三</td>
         <td></td>
         <td></td>
         <td></td>
      </tr> 
      <!-- ********* End ********* -->
    </table>   
 </body>
</html>

第5关：表格的综合案例

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>表格综合</title>
    <style type="text/css">
       th{background-color:#00ff33;}
       td{background-color:#00ffff;text-align:center}
       caption{font-family:黑体;font-size:30px;color:blue}
    </style>
 </head >
<!-- ********* Begin ********* -->
<body background="https://www.educoder.net/api/attachments/1217848">
   <table border = "2" width = 600 bordercolor = "#00ff00" cellpadding = 6 align = "center">
      <caption>家庭账单</caption>
      <tr>
         <th colspan="2" rowspan="2">本周项目</th>
         <th colspan="2">费用明细</th>
         <th rowspan="2">备注</th>
      </tr>
      <tr>
         <th>收入</th>
         <th>支出</th>
      </tr>
      <tr>
         <th rowspan="3">收入</th>
         <th>工资</th>
         <td>10000</td>
         <td>0</td>
         <td></td>
      </tr>
      <tr>
         <th>兼职</th>
         <td>2000</td>
         <td>0</td>
         <td></td>
      </tr>
      <tr>
         <th>收入合计</th>
         <td>12000</td>
         <td>0</td>
         <td></td>
      </tr>
      <tr>
         <th rowspan="3">支出</th>
         <th>生活用品</th>
         <td>0</td>
         <td>4000</td>
         <td></td>
      </tr>
      <tr>
         <th>学杂费</th>
         <td>0</td>
         <td>3000</td>
         <td></td>
      </tr>
      <tr>
         <th>支出合计</th>
         <td>0</td>
         <td>7000</td>
         <td></td>
      </tr>
   </table>
</body>      
<!-- ********* End ********* -->
</html>

表单的结构

第1关：表单的基本概念

1、下列选项中，不属于表单标记的常用属性的是（）。
size

2、在HTML中，，method属性表示（）。
提交方式

3、在HTML中，（）标签用于在网页中创建表单。
<form>

4、在表单提交方式中，get方式的保密性好，并且无数据量的限制。
错误

5、在HTML中，要创建一个名为“myform”的表单，以get方式向服务器发送，表单提交后，执行程序的地址为passwodl.jsp，下面创建表单的代码中，正确的是（）。
<form name=“myform” method=“get” action=“passwodl.jsp”>…</form>

第2关：学会设置action和method属性

<!DOCTYPE html>
<html>
<body>
    <!-- ********* Begin ********* -->
<form name="selectForm" method="post" action="myselect.jsp">
    <!-- ********* End ********* -->
  <select size="1">
   <option value="JZ">橘子</option>
   <option value="PG">苹果</option>
   <option value="XJ">香蕉</option>
   </select>
  </form>
</body>
</html>

创建输入控件

1、在表单中插入单选按钮的HTML代码是（）。
<input type=“radio”>

2、HTML代码表示（　）。
创建一个单行文本输入区域

3、对于标签，如果希望实现密码框效果，* 值是（）。
password

4、下列选项中，用于设置input控件在首次加载时为禁用的属性是（）。
disabled

5、设置表单中密码框的最大长度为15正确的属性设置是（）
maxlength=15

第2关：创建文本框

<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form>
      姓名：
   <!-- ********* Begin ******* -->
       <input type="text" name ="yourname" size = "15" maxlength="5">
   <!-- ********* End ********* -->   
   </form>
  </body>
</html>

第3关：创建密码框

<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置密码框</title>
  </head>
  <body>
   <form>
      姓名：
      <input type="text" name="yourname" size="15" maxlength="5"/>
      <br>
      密码：
    <!-- ********* Begin ******* -->
      <input type="password" name="yourpassword" size="15" value="12345"> 
    <!-- ********* End ********* -->
   </form>
  </body>
</html>

第4关：创建单选按钮

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form action=""method="post">
     姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/>
     密码：<input type="password" name="password" size="15" value="12345"/><br/>
     国庆期间你最喜欢看的电影？<br/>
    <!-- ********* Begin ********* -->
     <input type="radio" name = "Film" value="Film1">夺冠
     <input type="radio" name = "Film" value="Film2">我和我的祖国
     <input type="radio" name = "Film" value="Film3">姜子牙
     
        
    <!-- ********* End ********* -->
   </form>
  </body>
</html>

第5关：创建复选框

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form action=""method="post">
     姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/>
     密码：<input type="password" name="password" size="15" value="12345"/><br/>
     国庆期间你最喜欢看的电影？<br/>
     <input name="Film" type="radio" value="Film1"/>夺冠
     <input name="Film" type="radio" value="Film2"/>我和我的祖国
     <input name="Film" type="radio" value="Film3"/>姜子牙<br/>
    你喜欢的运动是？<br/>
    <!-- ********* Begin ********* -->
     <input type="checkbox" name="Sports" value="sport1" checked>打篮球
     <input type="checkbox" name="Sports" value="sport2" >打排球
     <input type="checkbox" name="Sports" value="sport3" >踢足球
     <input type="checkbox" name="Sports" value="sport4" >其他
    <!-- ********* End ********* -->
   </form>
  </body>
</html>

第6关：重置与提交按钮

<!DOCTYPE html>
<html>
<body>
 <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form action="" method="post">
     姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/>
     密码：<input type="password" name="password" size="15" value="12345"/><br/>
     国庆期间你最喜欢看的电影？<br/>
     <input name="Film" type="radio" value="Film1"/>夺冠
     <input name="Film" type="radio" value="Film2"/>我和我的祖国
     <input name="Film" type="radio" value="Film3"/>姜子牙<br/>
    你喜欢的运动是？<br/>
    <input name="Sports" type="checkbox" value="sport1" checked="checked"/>打篮球
     <input name="Sports" type="checkbox" value="sport2"/>打排球
     <input name="Sports" type="checkbox" value="sport3"/>踢足球
     <input name="Sports" type="checkbox" value="sport4"/>其他 <br/> 
    <!--********* Begin ********* -->
     <input type="reset" value="重置"/>
<input type="submit" value="提交"/>
     
    <!-- ********* End ********* -->
   </form>
  </body>
</html>

创建下拉列表

第1关：下拉列表控件相关概念

1、标签用于创建（）
下拉列表选框

2、用于在表单中插入一个下拉列表框，它需要与哪个标签配合使用（）

3、设置下拉列表框中某项被默认选中的属性是( )。
selected

4、若设置下拉列表为多选，可在select标签中添加（）属性。
multiple

5、下拉列表设置表明（）
可以看到3个下拉列表选项

第2关：创建下拉列表

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建下拉列表</title>
 </head>
 <body>
  <form action="" method="get">
   <!-- ********* Begin ******* -->
  <select size="2">
   <option value="SH">玩游戏</option>
   <option value="BJ">看电影</option>
   <option value="HB">听音乐</option>
   </select>
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

第3关：设置多选和默认选项

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建多选和默认选项</title>
 </head>
 <body>
  <form action="" method="get">
   <!-- ********* Begin ******* -->
 <select multiple="multiple">
  <option value ="peach" selected>猫</option>
  <option value ="banana" >狗</option>
  <option value="apple">鸟</option>
  <option value="orange">鸭子</option>
  </select>
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

对表单元素分组

第1关：分组元素相关的概念

1、fieldset标签用于定义（ )
表单的一个子容器

2、表单的分组标题可以用（）设置。
legend标签

3、下列选项中，（）不属于fieldset标签的属性。
size

4、下列关于表单分组的设置代码，正确的是（ B ）
<fieldset>
<legend>请选择个人爱好</legend>
<input type=“radio” name=“user”/>打篮球
<input type=“radio” name=“user”/>打排球
</fieldset>

第2关：对表单元素分组

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表单分组</title>
 </head>
<body>
    <form>
        <!-- ********* Begin ********* -->
      <fieldset>
   <legend>请选择个人爱好</legend>
   <input type="checkbox"  name="hobby">音乐      
   <input type="checkbox" name="hobby">体育
   <input type="checkbox" name="hobby">其他
 </fieldset>     
        <!-- ********* End ********* -->
    </form>
</body>
</html>

给表单组件添加说明

第1关：label标签相关概念

1、

为了给单行文本框绑定文本标注，以便于用户单击该关联文本时可以使文本框获得焦点，可采用（ B ）标签定义文本。
label

2、标签中的for属性取值为（ C ）
要绑定的表单控件的id属性值

3、标签中的form属性取值为（ A ）
所属表单的id值

第2关：给表单组件添加说明__单选框

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为表单的单选控件添加说明</title>
 </head>
 <body>  
  <form>
   国庆期间你最喜欢看的电影？<br/>
   <!-- ********* Begin ******* -->
   <input type="radio" name="Film" value="Film1">夺冠
   <input type="radio" name="Film" value="Film2" id="Film2"><label for="Film2">我和我的祖国</label> 
   <label ><input type="radio" name="Film" value="Film3">姜子牙</label>    
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

第3关：给表单组件添加说明——多选框

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为表单的复选控件添加说明</title>
 </head>
 <body>  
  <form>
   你喜欢的运动是？<br/>
   <!-- ********* Begin ******* -->
    <input type="checkbox" name="Sports" value="sport1" checked id="Sport1">打篮球
    <input type="checkbox" name="Sports" value="sport2" id="sport2"><label for="sport2">打排球</label>
    <label><input type="checkbox" name="Sports" value="sport3"id="sport3">踢足球</label>
    <input type="checkbox" name="Sports" value="sport4">其他
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

第4关：给表单组件添加说明-文本框和文本域

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为文本域控件添加说明</title>
 </head>
 <body>  
  <form>
   推荐人：
   <!-- ********* Begin ******* -->
    <input type="text" autofocus="autofocus"><br>
    <label for="reason">推荐理由：</label>
    <textarea id="reason" required rows="6" cols="60" wrap="hard"></textarea>
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

对表单进行验证

第1关：表单验证相关的概念

1、下列选项中，对表单控件的值进行非空验证的属性为（ A ）
required

2、在input控件的类型中，下列选项中对输入有校验功能的是（ C ）
email

3、关于输入字符数的限定，下列代码中，设置正确的是（ D ）。
<input type=“text” maxlength=“6”/>

4、匹配1个或多个在它前面的元字符是（ B ）。
+

5、若限定用户输入6位数字，下列的代码正确的是（ C ）。
<input type=“text” pattern=“^([0-9]{6})$”>

第2关：非空校验

 <html>
  <head>
   <meta charset="utf-8"/>
   <title>设置非空校验</title>
  </head>
  <body>
   <form>
      密码：
   <!-- ********* Begin ******* -->
      <input type="password" required="required" maxlength="6" title="请输入不超过6位的密码！">
   <!-- ********* End ********* -->
       <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

第3关：邮箱校验

 <html>
  <head>
   <meta charset="utf-8"/>
   <title>设置邮箱校验</title>
  </head>
  <body>
   <form>
      密码：
     <input type="password"  required="required" title="请输入6位密码！" maxLength="6"/><br/>
     邮箱：
   <!-- ********* Begin ******* -->
     <input type="email" required="required" placeholder="输入格式：xxx@xxx">
   <!-- ********* End ********* -->
     <br/> <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

第4关：pattern验证

<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置年龄校验</title>
  </head>
  <body>
   <form>
      密码：
     <input type="password"  required="required" title="请输入6位密码！" maxLength="6"/><br/>
     邮箱：
      <input type="email"  required="required" placeholder="输入格式：xxx@xxx"/><br/>
     年龄：
   <!-- ********* Begin ******* -->
     <input type="text" required="required" pattern="^[1-9]?[0-9]$">
   <!-- ********* End ********* -->
     <br/> <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

创建文本区域

第1关：textarea控件相关概念

1、若将文本区域设置为显示10行，每行显示50个字符，正确选项是（ C ）

2、若将文本区域设置为只读的，可在textarea标签中添加（ B ）属性。
readonly

3、在表单提交时使textarea 中的文本换行，正确的选项是（ D ）
<textarea name=“mm” rows=“5” cols=“50” wrap=“hard”>

4、textarea标签的属性不包括（ A ）
width

5、textarea文本区域的宽度可用size属性来设置。( B )
错误

第2关：创建文本域

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置文本域</title>
  </head>
  <body>
   <form action="" method="post">
     请输入你选择本专业的理由：<br/>
    <!-- ********* Begin ********* -->
     <textarea name="reason" rows="6" cols="50" required="required" wrap="hard">

     </textarea>
    <!-- ********* End ********* -->
     <br/>
     <input type="reset" value="重置">
     <input type="submit" value="提交">
  </body>
</html>

CSS样式规则

第1关：CSS基础知识

1、CSS 指的是（ B )
Cascading Style Sheets

2、下列选项中，（ D ）是火狐浏览器前缀。
-moz-

3、下列选项中，（ C ）属性可用来定义内联样式。
style

4、下列选项中，（ A ）的CSS语法是正确的。
body{color:black;}

5、在以下的 HTML 中，哪个是正确引用外部样式表的方法？( B )
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>

第2关：初识CSS

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>初识CSS样式</title>
  </head>
  <body>
   <div style="background-image:url(https://www.educoder.net/api/attachments/1426624);width:360px;height:260px;">
    <!-- ********* Begin ********* -->
  <h1 style="font-family:楷体;text-align:center;line-height:2;">静夜思</h1>      
  <h2 style="font-family:楷体;text-align:center;">床前明月光</h2>      
  <h2 style="font-family:楷体;text-align:center;">疑是地上霜</h2>
  <h2 style="font-family:楷体;text-align:center;">举头望明月</h2>      
  <h2 style="font-family:楷体;text-align:center;">低头思故乡</h2>
    <!-- ********* End ********* -->
    </div>
  </body>
</html>

第3关：用内嵌式引入CSS样式

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>内嵌CSS样式</title>
  <style type="text/css">
    /* ********** BEGIN ********** */   
    body{background-image:url(https://www.educoder.net/api/attachments/1427381);background-size:cover;}
    /* ********** END ********** */   
    div {
        position:fixed;
           left:400px;
            top:100px;
           color:#ffffff;
       font-family:黑体;
        text-align:center;
    }   
  </style>
 </head>
 <body>
  <div>
   <h1>静夜思</h1>
   <h2>床前明月光</h2>
   <h2>疑是地上霜</h2>
   <h2>举头望明月</h2>
   <h2>低头思故乡</h2>
  </div>
 </body>
</html>

第4关：用外链式引入CSS样式

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>外链CSS样式</title>
     <!-- ********** BEGIN ********** -->
    <link href="https://www.educoder.net/api/attachments/1433016" type="text/css" rel="stylesheet">     
     <!-- ********** END ********** -->
 </head>
 <body>
  <div>
   <h1>静夜思</h1>
   <h2>床前明月光</h2>
   <h2>疑是地上霜</h2>
   <h2>举头望明月</h2>
   <h2>低头思故乡</h2>
  </div>
 </body>
</html>

CSS3选择器-组合选择器

第1关：组合选择器相关的概念

1、当几个元素样式属性一样时，可以共同调用一个样式声明，元素之间用逗号隔开
正确

2、阅读下面的HTML代码
<div>
<em>大家好</em>
<p>今天天气很好</p>
<p>适合去郊游</p></div>

若对<em>标签和<p>标签中的文字设置同样的字号大小，下面的选项正确的是（ C ）
em , p{font-size:14px}

3、阅读下面的HTML代码

<div>
<em>大家好</em>
<p>今天天气很好</p>
<p>适合去郊游</p>
</div>
若对<div>标签中<p>标签的文字设置同样的颜色，下面的选项正确的是（ A ）
div p{color:red;}

第2关：群组选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>群组选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
    h1,h2,h3{
        color:green;
    }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
   <h1>一级标题</h1>
   <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>
</html>

第3关：后代选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>后代选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
  div p {
      color:blue;
      font-size:16px;
  }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <p>我的颜色是蓝色，我的字体大小是16px</p>
</div>
</body>
</html>

第4关：子元素选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>子元素选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
div > p {
    color:green;
    font-size:20px;
}
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <p>我的颜色是绿色，我的字体大小是20px</p>
</div>
</body>
</html>

第5关：相邻兄弟选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>相邻兄弟选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
    h1 + p {
         background-color:red;
     } 
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <h1>我是兄长</h1>
    <p>我是弟弟</p>
    <p>我是小弟</p>
</div>
</body>
</html>

第6关：普通兄弟选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>普通兄弟选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
     h1 ~ p {
         color:blue;
         font-size:36px;
     }  
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <h1>我是兄长</h1>
    <p>我是弟弟</p>
    <p>我是小弟</p>
</div>
</body>
</html>

CSS3选择器-基础选择器

1、id选择器使用（ D ）进行标识，后面紧跟id名
#

2、类选择器使用（ C ）进行标识，后面紧跟class名。
.

3、CSS选择器的优先级从高到低分别为，通用选择器、标签选择器、类选择器、ID选择器。( B )
错

第2关：通用选择器

 <!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8"/>
   <!--------- Begin-------->
   <style type="text/css">
   * {
     font-size:100px;
     color:#D33E2A;
   }

   
   </style>
   <!--------- End-------->
</head>
<body>
<strong>G</strong>
<strong>o</strong>
<strong>o</strong>
<strong>g</strong>
<strong>l</strong>
<strong>e</strong>
</body>
</html>

第3关：标签选择器

<!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8"/>  
   <!--------- Begin-------->
   <style>
     strong {
       font-size:100px;
       color:#D33E2A;
     }
   </style>
   <!--------- End-------->
   
</head>
<body>
<strong>G</strong>
<strong>o</strong>
<strong>o</strong>
<strong>g</strong>
<strong>l</strong>
<strong>e</strong>
</body>
</html>

第4关：文字Google结构设计

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>
</head>
<body>
<!--------- Begin-------->
 <strong class="blue">G</strong>
 <strong class="red">o</strong>
 <strong id="orange">o</strong>
 <strong class="blue">g</strong>
 <strong id="green">l</strong>
 <strong class="red">e</strong>
 
 
 
 <!--------- End-------->
</body>
</html>

第5关：文字Google样式设计

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>

<style type="text/css">
<!--------- Begin-------->
strong{ font-size:100px;}
.blue {
    color:#2B75F5;
}
.red {
    color:#D33E2A;
}
#orange {
    color:#FFC609;
}
#green {
    color:#00A45D;
}
<!--------- End-------->
</style>
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>

CSS3-文本外观样式

第1关：文本外观样式相关的概念

1、下列选项中，用于设置文本行高的属性是（ B ）
line-height

2、下列选项中，可以设置文本上划线的属性是（ D ）
text-decoration

3、下列选项中，可使文本字母全部改为大写的属性设置是（ B）
text-transform:uppercase

第2关：CSS-文本空间的设置

 <!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
<!-- ********* Begin ********* -->
<style type="text/css">
p{ 
	font-size:16px;
	font-family:微软雅黑;
	text-indent:2em;
    line-height:28px;
     
     
     
	}
.blue{color:#33F;
     text-decoration:underline;
     
     }
.red{color:#F00;}
.money{font-size:16px;}

</style>
<!-- ********* End ********* -->
</head>
<body>
<img src="https://data.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" />

<p>
	<em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em>
</p>
<p>
	<em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元
</p>

</body>
</html>

第3关：搜索页面的结构设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>搜索页面</title>
</head>
<body>
<!-- ********* Begin ********* -->
<h2 class="header">
	什么是CSS?<em>—CSS教程</em>
</h2>
<p>
    猴子提示: 可以通过简单的更改<em class="red">CSS</em>文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是<em class="red">CSS</em>了,现在就开始学习<em class="red">CSS</em>吧 ...
</p>
<p>
	<em class="green">www.dreamdu.com/css/wh...</em><em class="gray">百度快照</em><em class="gray">85%好评</em>
</p>
<!-- ********* End ********* -->
</body>
</html>

第4关：搜索页面的样式设计-文本外观样式的应用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>搜索页面</title>
<!-- ********* Begin ********* -->
<style type="text/css">
  body{
  font-family:微软雅黑;
  font-size:14px;
  color:#333;
      }   
    em{
      font-style:normal;
      text-decroation:underline;
      }                                    
.header{                
	font-size:18px;
      color:#D52D2D;
      font-weight:normal;
      text-decoration:underline;
      }
.header em{          
	font-style:normal;
      }
h2 > em {
      color:#2525D3;
      text-decoration:underline;
}
  .red{
      color:#D52D2D;
      }
.green{
      color:#167A16;
      }
 .gray{
	color:#595959;
	text-decoration:underline;
      }
                                    
</style>
<!-- ********* End ********* -->
</head>
<body>
<h2 class="header">
	什么是CSS?<em>—CSS教程</em>
</h2>
<p>
    猴子提示: 可以通过简单的更改<em class="red">CSS</em>文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是<em class="red">CSS</em>了,现在就开始学习<em class="red">CSS</em>吧 ...
</p>
<p>
	<em class="green">www.dreamdu.com/css/wh...</em>-<em class="gray">百度快照</em>-<em class="gray">85%好评</em>
</p>
</body>
</html>

CSS3-文本字体样式

第1关：字体样式属性相关的概念

1、下列选项中，用于设置文本字体的属性名是（ B ）
font-family

2、下列选项中，用于定义服务器字体的是（ D ）
@font-face

3、对段落p中的文本字体、字号及字体风格样式进行综合设置，其样式代码可写为:p{font:隶书 20px italic;} ( A )
错误

第2关：美食专栏网页的结构设置

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
</head>
<body>
<img src="https://data.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" />
<!-- ********* Begin ********* -->
<p>
	<em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em>
</p>
<p>
	<em class="blue">火宫殿臭豆腐</em>：价格<strong class="money"></strong>元
</p>
<!-- ********* End ********* -->
</body>
</html>

第3关：美食专栏网页的样式设置

 <!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
<!-- ********* Begin ********* -->
<style type="text/css">
p {
    font-size:16px;
    font-family:微软雅黑;
}
.blue {
    color:#33F;
}
.red {
    color:#F00;
}
.money {
    font-size:16px;
}
</style>
<!-- ********* End ********* -->
</head>
<body>
<img src="https://data.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" />
<p>
	<em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em>
</p>
<p>
	<em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元
</p>
</body>
</html>

CSS3选择器-属性选择器

第1关：CSS3-属性选择器相关概念

1、以下选项中，属于属性选择器的是（ C ）
span[id]{color:red;}

2、样式规则如下：
p[class $= en]{font-weight:bold;}
该样式规则将对选项（ B ）产生效果。
<p class=“ten”>…</p>

3、样式规则如下：
div[name ~= ten]{border:1px solid blue;}
该样式规则将对选项（ A ）产生效果。
<div name=“ten a1”>…</div>

4、样式规则如下：
p[class |= en]{font-size:20px;}
该样式规则将对选项（ D ）产生效果。
<p class = “en-able”>…</p>

第2关：CSS3-属性选择器

<!DOCTYPE html>
<html>
  <head>
    <title>属性选择器</title>
    <style type="text/css">
        div{
            width:70px;
            height:40px;
            border:1px solid teal;
            float:left;
            }
         li{list-style:none;}
         /* ********* Begin ******* */
          div[title] {
            font-size:25px;
text-align:center;
          }
        /* ********* End ******* */                           
	</style>
  </head>
  <body>
        <div name="a a1" class="a"></div>
        <div name="b-1"   class="b"  title="nice"><li>nice</li></div>
        <div name="b-2" class="b" title="to"><li>to</li></div>
        <div name="b-3" class="b" title="meet"><li>meet</li></div>
        <div name="b-4" class="b" title="you"><li>you</li></div>
        <div name="a a2" class="a"></div>
  </body>
</html>

第3关：CSS3-包含及连字符选择器

<!DOCTYPE html>
<html>
  <head>
    <title>属性选择器</title>
    <style type="text/css">
        div{
            width:70px;
            height:40px;
            border:1px solid teal;
            float:left;
            }
        li{list-style:none;} 
        div[title]{ 
            font-size:25px; 
            text-align:center;
            }  
        /* ********* Begin ******* */ 
        div[class="b"] {
          font-weight:bold;
        }
        div[name~="a"]{
          background-color:pink;
        }
        div[name|="b"]{
          background-color:orange;
        }
        
        /* ********* End ******* */                           
	</style>
  </head>
  <body>
        <div name="a a1" class="a"></div>
        <div name="b-1"   class="b"  title="nice"><li>nice</li></div>
        <div name="b-2" class="b" title="to"><li>to</li></div>
        <div name="b-3" class="b" title="meet"><li>meet</li></div>
        <div name="b-4" class="b" title="you"><li>you</li></div>
        <div name="a a2" class="a"></div>
  </body>
</html>

第4关：CSS3-前缀后缀选择器

<!DOCTYPE html>
<html>
  <head>
    <title>属性选择器</title>
    <style type="text/css">
        div{
            width:70px;
            height:40px;
            border:1px solid teal;
            float:left;
            }
        li{list-style:none;} 
        div[title]{ 
            font-size:25px; 
            text-align:center;
            }  
        div[class="b"]{ font-weight:bold; }
	      div[name~="a"]{ background-color:pink; }
        div[name|="b"]{ background-color:orange; }
        /* ********* Begin ******* */ 
        div[title^="n"] {
          color:blue;
        }
	      div[title*="o"]{
          color:red;
        }
	      div[title$="t"]{
          color:green;
        }
        /* ********* End ******* */                           
	</style>
  </head>
  <body>
        <div name="a a1" class="a"></div>
        <div name="b-1"   class="b"  title="nice"><li>nice</li></div>
        <div name="b-2" class="b" title="to"><li>to</li></div>
        <div name="b-3" class="b" title="meet"><li>meet</li></div>
        <div name="b-4" class="b" title="you"><li>you</li></div>
        <div name="a a2" class="a"></div>
  </body>
</html>

CSS3背景样式

第1关：CSS背景相关的概念

1、下列选项中，可用于设置背景颜色的属性是（ D ）
background-color

2、将背景的绘制区设置到内容区，应使用background-clip属性中的（ A ）值。
content-box

3、在CSS3背景图属性中，可以设置背景图的平铺是（ C ）。
background-repeat

4、在CSS3新增的background-size属性中，（ A ）是参考父元素宽高来设置图像宽度和高度的。
50% 50%

5、CSS样式background-position:-5px 10px代表的意义是（ D ）。
背景图片向左偏移5px,向下偏移10px

第2关：CSS-背景色的设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS-背景色的设置</title>
    <style type="text/css">
        h2{font:微软雅黑;
               text-align:center;
             }	
        #p1{font-size:13px;
                color:#979797;
                text-align:center;
             }
        hr{border:1px solid #CCCCCC;} 
        #p2{text-indent:2em;}
        span{color:blue;}
        .background{
        /* ********* Begin ********* */	
         background-color:#add;
        
        /* ********* End ********* */
            }
    </style>
</head>
<body class="background">
    <div class="backgroundImage">
      <h2>新媒体的大势所趋</h2>
	  <p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
	  <hr size="2" color="#CCCCCC" />
	  <p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
    </div>
</body>
</html>

第3关：CSS-背景图的设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS-背景色的设置</title>
    <style type="text/css">
        h2{font:微软雅黑;
           text-align:center;
          }	
        #p1{font-size:13px;
            color:#979797;
            text-align:center;
          }
        hr{border:1px solid #CCCCCC;} 
        #p2{text-indent:2em;}
        span{color:blue;}
        .background{background-color:#add;}
        .backgroundImage{
	        width:360px;
	        height:240px;
            overflow:scroll;
	        padding:30px;
	        border:3px solid #30F;
          /* ********* Begin ********* */
            background-image:url(https://www.educoder.net/api/attachments/2478800);
            background-attachment:scroll;
            background-size:cover;
            background-position:-260px,0px;     
          /* ********* End ********* */          
	     }
 
    </style>
</head>
<body class="background">
    <div class="backgroundImage">
      <h2>新媒体的大势所趋</h2>
	  <p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
	  <hr size="2" color="#CCCCCC" />
	  <p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
    </div>
</body>
</html>

移动端电商页面制作

第1关：移动端电商页面制作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>移动电商页面</title>
<style type="text/css">
/* ********* Begin ********* */
body{ font-size:12px;}   
body,img{padding:0; margin:0; border:0;}  
.all{
	width:346px;
	height:578px;
	background:url(https://data.educoder.net/api/attachments/2073417) no-repeat;
	
	margin:20px auto;
	padding:90px 0 0 34px;
}
.content{
    width:277px;
    height:414px;
  overflow:scroll;                 
/* ********* End ********* */
}
</style>
</head>
<body>
<div class="all">
    <div class="content">
        <img src="https://data.educoder.net/api/attachments/2072741" />
    </div>
</div>
</body>
</html>

网页布局页面的制作

第1关：网页布局的结构设计

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页布局</title>
</head>
<body>
<!-- ********* Begin ********* -->
<div id="top"></div>  
<div id="nav"></div>  
<div id="banner"></div>  
<div id="content">
   <div class="content_left"></div> 
   <div class="content_middle"></div> 
   <div class="content_right"></div>      
</div> 
<div id="footer"></div>  
<!-- ********* End ********* -->
</body>
</html>

第2关：网页布局的样式设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页布局</title>
<!-- ********* Begin ********* -->
<style type="text/css">
body{margin:0; padding:0;}

div{
	width:980px;                                               /*设置所有模块的宽度为980px、居中显示*/
	margin:0 auto;
}

#top{height:40px; background:url(https://data.educoder.net/api/attachments/2141326)}       
#nav{height:60px; background:url(https://data.educoder.net/api/attachments/2141327)}
#banner{height:200px; background:url(https://data.educoder.net/api/attachments/2141342)}
#content{height:300px; }

.content_left{                             /*左侧部分左浮动*/
	width:200px;
	height:300px;
	background-color:#CCC;
    float:left;
	margin:0;
	background:url(https://data.educoder.net/api/attachments/2141349);
}

.content_middle{                           /*中间部分左浮动*/
	width:570px;
	height:300px;
	background-color:#CCC;
	float:left;
	margin: 0 0 0 5px;
	background:url(https://data.educoder.net/api/attachments/2141352);
}


.content_right{                           /*右侧部分右浮动*/
	width:200px;
	background-color:#CCC;
	float:right;
	height:300px;
	margin:0;
	background:url(https://data.educoder.net/api/attachments/2141351)
}

#footer{
	height:90px; 
	background:url(https://data.educoder.net/api/attachments/2141353)
}
</style>
<!-- ********* End ********* -->
</head>
<body>
  <div id="top"></div>
  <div id="nav"></div>
  <div id="banner"></div>
  <div id="content">
    <div class="content_left"></div>
    <div class="content_middle"></div>
    <div class="content_right"></div>
  </div>
  <div id="footer"></div>
</body>
</html>

团购悬浮框页面制作

第1关：团购悬浮框页面的结构设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商团购悬浮框</title>
</head>
<body>
  <!-- ********* Begin ********* -->
	<ul>
    <li>7月30日0:00开团</li>
    <li class="item">新品团</li>
    <li class="item">尝鲜团</li>
    <li class="item">秒杀团</li>
    <li class="item">清仓团</li>
    <li class="item">返回顶部</li>
  </ul>
  <!-- ********* End ********* -->
</body>
</html>

第2关：团购悬浮框页面的样式设计

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商团购悬浮框</title>
<!-- ********* Begin ********* -->
<style>
  body,ul,li{ 
           padding:0;
           margin:0;
        list-style:none;
            }
        body{ 
         font-size: 18px;
       font-family:微软雅黑;
            }
          ul{
             width:200px; 
            height:270px;
            margin:20px; 
            border:3px solid #613e72;
           padding:10px;
            }
          li{
	         width:142px;
	        height:40px;
	   line-height:40px;
	    background: url(https://data.educoder.net/api/attachments/2046898)             no-repeat left center;
	  padding-left:40px;
	        margin:0 auto 5px;
	         color:#613e72;
            }
       .item{
	    background:#613e72 url(https://data.educoder.net/api/attachments/2046946)   no-repeat 5px center                 ;
	         color:#fff;
            }
       .back{background:url(https://data.educoder.net/api/attachments/2046953)      no-repeat left center                 ;
            }
</style>
<!-- ********* End ********* -->
</head>
<body>
	<ul>
        <li>7月30日0:00开团</li>
        <li class="item">新品团</li>
        <li class="item">尝鲜团</li>
        <li class="item">秒杀团</li>
        <li class="item">清仓团</li>
        <li class="back">返回顶部</li>
    </ul>
</body>
</html>

JavaSript知识训练-入门基础

第1关：JavaScript入门基础

JavaScript语言基础：JS循环语句

第1关：while类型

function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    var sum = 0;
    var i = 2;
    while (i <= a) {
        var j = 2;
        while (j < i) {
            if (i % j == 0) {
                break;
            }
            j++;
        }
        if (j == i) {
            sum += i;
        }
        i++;
    }
    return sum;
	/********** End **********/
}

第2关：do while类型

function mainJs(a,b) {
    a = parseInt(a);
    b = parseInt(b);
	//请在此处编写代码
	/********** Begin **********/
    var sum = 0;
    do {
        a++;
        sum += a;
    } while (a < b)
    sum -= b;
    return sum;
	/********** End **********/
}

第3关：for类型

function mainJs(a,b) {
    a = parseInt(a);
    b = parseInt(b);
	//请在此处编写代码
	/********** Begin **********/
    if (a == b || b - a == 1) {
        return 1;
    }
    var sum = 1;
    for (var i = a + 1; i < b; i++){
        sum *= i;
    }
    return sum;
	/********** End **********/
}

JavaScript语言基础：JS条件语句

第1关：if-else类型

function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    if (a < 60) {
        return "unpass";
    }
    return "pass";
	/********** End **********/
}

第2关：switch类型

function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    switch (a) {
        case 82414:
            return "Superior";
            break;
        case 59600:
            return "Huron";
            break;
        case 58016:
            return "Michigan";
            break;
        case 25744:
            return "Erie";
            break;
        case 19554:
            return "Ontario";
            break;
        default:
            return "error";

    }
    
	/********** End **********/
}

JavaScript知识训练：JS分支与循环

第1关：JS分支分支与循环知识

JavaScript知识训练：JS函数

第1关：JavaScript知识训练：JS函数

JavaScript编程训练：Math、日期

第1关：Math类

function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    return Math.max(Math.sin(a),Math.sqrt(a),Math.round(a),Math.floor(a),Math.ceil(a)) + Math.min(Math.sin(a),Math.sqrt(a),Math.round(a),Math.floor(a),Math.ceil(a))
    
	/********** End **********/
}

第2关：Date类

function mainJs(a) {
    a = parseInt(a);
    var date = new Date(a);
    /*********Begin*********/
    var year = date.getFullYear();
    var month = date.getMonth();
    var day = date.getDate();
    var weekrnd = date.getDay();
    var Str = year + "," + month + "," + day + "," + weekrnd;
    return Str;
    /*********End*********/
}

JavaScript编程训练：字符串

第1关：查找字符串的位置

function mainJs(a,b) {
	//请在此处编写代码
	/********** Begin **********/
    var index = a.lastIndexOf(b);
    var sum = 0;
    while (index != -1) {
        sum += index;
        a = a.substring(0,index);
        index = a.lastIndexOf(b);
    }
    return sum;
	/********** End **********/

}

第2关：求指定位置的字符

function mainJs(a) {
	//请在此处编写代码
	/********** Begin **********/
    var str = a.substring(0, 6);
    return str;
    
	/********** End **********/
}

第3关：字符串的截取

function mainJs(a,b) {
	//请在此处编写代码
	/********** Begin **********/
    var len = b.length;
    var index = a.indexOf(b);
    if (index != -1) {
        a = a.slice(0, index) + a.slice(index + len);
    }
    return a;
	/********** End **********/
}

第4关：字符串的分割

function mainJs(a) {
	//请在此处编写代码
	/********** Begin **********/
    var arr = a.split(",");
    var len = arr.length;
    var i,sum=0;
    for (i = 0; i < len; i++){
        var index = arr[i].indexOf(" ");
        if (index != -1) {
            var arr1 = arr[i].split(" ");
            sum += arr1.length;
        } else {
            sum += 1;
        }
    }
    return sum;
    
	/********** End **********/
}

JavaScript编程训练：数组

第1关：数组的创建、读写和长度

var array1 = [1,2,3,"js",4,true,"hello"];
var array2 = [true,true,"java",2.1];
function mainJs(a) {
	//请在此处编写代码
    a = parseInt(a);
    /*********begin*********/

    return a == array1.length ? array1[array1.length - 1] : array2[array2.length - 1];

    /*********end*********/
}

第2关：数组元素的增减

var testArray = [12,"java","js","c","c++",24,36,"python","c#","css"];
function mainJs(a,b) {
    a = parseInt(a);
    b = parseInt(b);
    //请在此处编写代码
    /*********begin*********/
    while (a > 0) {
        var end = testArray.pop();
        a--;
        testArray.unshift(end);
    }
    return testArray[b];
    /*********end*********/
}

第3关：数组的常用方法

function mainJs(myArray) {
    myArray = myArray.split(",");
    //请在此处编写代码
    /*********begin*********/
    var arr1 = new Array();
    var arr2 = new Array();
    var i = 0;
    for (i = 0; i < myArray.length; i++){
        if (myArray[i] == "a") {
            arr1.push(i);
        }
        if (myArray[i] == "b") {
            arr2.push(i);
        }
    }
    var arr3 = arr1.concat(arr2);
    return arr3;
    /*********end*********/
}

JavaScript知识训练——字符串对象

第1关：JavaScript知识训练-字符串对象

JavaScript知识训练：数学对象

第1关：JavaScript知识训练：数学对象

JavaScript知识训练：日期对象

第1关：JavaScript知识训练：日期对象

JavaScript知识训练：数组对象

第1关：JavaScript知识训练：数组对象

JavaScript知识训练：对象与事件

第1关：JavaScript知识训练：对象与事件

a,b,c,d
d
d
a
c

球球不要摆了

关注

29
点赞
踩
36

收藏

觉得还不错? 一键收藏
打赏
2
评论
Web程序设计基础头歌edu实训(2023TYUT)

Web前端开发概述第1关：Web前端开发相关的概念1、所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。错2、URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”。URL其实就是Web地址，俗称“网址”。对3、HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。对4、下列选项中，（）不是Web浏览器Linux5、张同学正在家里通过拨号上网访问新浪主页，此时，他自己的计算机是（）。浏览器
复制链接

扫一扫