0
0

头歌Web实训答案（2023TYUT）

1.html5-结构元素

第1关：文档结构元素相关概念

ACBAB

第2关：header元素和article元素的应用

<!DOCTYPE html>
<html>

<head>
  <title>页面结构</title>
  <style type="text/css">
    header {
      border-bottom: 4px double #eee;
      text-align: center;
      font-size: 20px
    }
  </style>
</head>

<body>
  <!-- ********* Begin ******* -->

  <article>
    <header> <h3>茗茶推荐——祁门红茶</h3> </header>
    <p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p>
  </article>

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

</html>

第3关：figure元素和figcaption元素的应用

<!DOCTYPE html>
<html>

<head>
    <title>页面结构2</title>
    <style type="text/css">
        header {
            border-bottom: 4px double #eee;
            text-align: center;
            font-size: 20px
        }
    </style>
</head>

<body>
    <article>
        <header>
            <h3>茗茶推荐——祁门红茶</h3>
        </header>
        <p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p>
        <!-- ********* Begin ******* -->
        <figure>
            <img src="https://www.educoder.net/api/attachments/1223388">
            <figcaption>茶道欣赏</figcaption>
        </figure>

        <!-- ********* End ********* -->
    </article>
</body>

</html>

2.html5-交互元素

第1关：交互元素相关概念

ACBAB

第2关：progress元素

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>progerss元素的使用</title>
 </head>
 <body>
     下载进度：
   <!-- ********* Begin ******* -->
    <progress max="100" value="30"></progress>
   <!-- ********* End ********* -->
 </body> 
</html>

第3关：meter元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>meter元素的使用</title>
</head>

<body>
  显示度量值：<br/>
  <!-- ********* Begin ******* -->
  <meter max="100" value="60" min="0"></meter>
  <br>
  <meter max="100" value="30" min="0" high="90" low="50"></meter>

  <!-- ********* End ********* -->

</html>

第4关：details/summary元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>details/summary元素</title>
</head>

<body>
  <!-- ********* Begin ******* -->
  <details>
    <summary>第三章</summary>
    <p>3.1结构元素</p>
    <p>3.2页面结点</p>
    <p>3.3交互元素</p>
  </details>

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

</html>

3.html5-文本层次语义元素

第1关：文本层次语义元素相关概念

CADBB

第2关：文本层次语义元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ******* -->
    <p>
        <strong>重要通知：</strong>
        <br>
        定于<mark>明日上午9:00整</mark>在<def title="行勉楼C座">213</def>教室<em>开会</em>。
    </p>

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

第3关：cite元素和time元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <!-- ********* Begin ******* -->

  <section>
    <strong>今日分享：</strong>
    <time datetime="2020-10-25"></time>
    <img src="https://www.educoder.net/api/attachments/1256151" alt="插图">
    <p><b>盛年不再来，一日难再晨，及时当勉励，岁月不待人。</b></p>
    <cite>出处：魏晋·陶渊明《杂诗》</cite>
  </section>

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

</html>

4.html5-分组元素

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

BCDAD

第2关：无序列表

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>无序列表</title>
</head>

<body>
  <!-- ********* Begin ******* -->
  <ul>
    <li type=disk>圆饼</li>
    <li type=square>黑板</li>
    <li type=circle>圆圈</li>
  </ul>

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

</html>

第3关：有序列表

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>有序列表</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
      
        <ol start="2">
        <li>男装</li>
        <li type="A">上衣</li>
        <li type="i">T恤</li>
    </ol>
        
        
      
   <!-- ********* End ********* -->
  </body>
</html>

第4关：定义列表

<html>
 <head>
  <title>定义列表</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
  
        <dl>
        <dt><strong>Web前端开发</strong></dt>
        <dd>Web前端开发是从<mark>网页制作</mark>演变而来的，名称上有很明显的时代特征。</dd>
        <dd>前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</dd>
    </dl>
   
   
  
   <!-- ********* End ********* -->
 </body> 
</html>

5.播放视频

第1关：HTML5视频相关的概念

DCBAA

第2关：播放视频

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8" />
   <title>HTML5-视频</title>
</head>

<body>
   <h1 align="center">我和我的祖国</h1>
   <br/>
   <div align="center">
      <!-- ********* Begin ********* -->

    <video controls="controls" autoplay="autoplay" width="450" height="260" src="https://www.educoder.net/api/attachments/1248122">
        <p>你的浏览器不支持该视频格式</p>
    </video>

      <!-- ********* End ********* -->
   </div>
</body>

</html>

6.播放音频

第1关：HTML5音频相关的概念

BACB AC(多选)

第2关：播放音频

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8" />
    <title>HTML5-音频</title>
 </head>
 <body>
   <h1 align="center">安妮的仙境</h1>
   <br/>
   <div align="center">
    <!-- ********* Begin ********* -->
            
           <audio controls="controls" autoplay="autoplay" loop="loop" src="https://www.educoder.net/api/attachments/2364090">
        你的浏览器不支持该音频格式
    </audio>
    
    <!-- ********* End ********* -->
    </div>
 </body>
</html>

7.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" alt="图片"  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>查看第7个音频</h2>
   <a href="#Q">查看第7个音频</a>
   <!-- ********* 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 ******* -->
      这是第7个音频
      <a href="Q">这是第7个音频</a>
    <!-- ********* End2 ********* -->
     </h2>
     <h2>这是第8个音频</h2>
 </body> 
</html>

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

第1关：web知识训练-html5-超链接的应用

            ABCDB

9.html5-表格高级样式的设置

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

CABAD

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

<html>
 <head>
  <meta charset="utf-8"/>
  <title>设置表格外边框属性</title>
 </head>
 
  <body>
   <!-- ********* Begin ******* -->
   <table frame="hsides" width="100" height="80" border="4">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
   
    <!-- ********* 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" frame="hsides" rules="rows" border="4">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>
   
    <!-- ********* 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 ********* -->
        
            <table border="1">
  <tr>
    <th rowspan="2">姓名</th>
    <th colspan="2">签到</th>
    <th rowspan="2">备注</th>
  </tr>
  <tr>
    <th>第1次</th>
    <th>第2次</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>大会主题报告</td>
    <td>分会专题报告</td>
    <td>总结报告</td>
  </tr>
  <tr>
    <td>专家报告</td>
    <td>分组讨论</td>
    <td></td>
    <td></td>
  </tr>
</table>
      
      <!-- ********* 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" valign="middle">
      <caption>家庭账单</caption>
      <tr>
         <th rowspan="2" colspan="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>

10.表单的结构

第1关：表单的基本概念

DACBC

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

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

11.创建输入控件

第1关：input控件相关概念

DBCAD

第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" value="Film1" name="Film"/>夺冠
     <input type="radio" value="Film2" name="Film"/>我和我的祖国
     <input type="radio" value="Film3" name="Film"/>姜子牙
        
    <!-- ********* 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" checked/>打排球
    <input type="checkbox"  name="Sports" value="sport3" checked/>踢足球
    <input type="checkbox"  name="Sports" value="sport4" checked/>其他

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

12.创建文本区域

第1关：textarea控件相关概念

CBDAB

第2关：创建文本域

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

     <br/>
     <input type="reset" value="重置">
     <input type="submit" value="提交">
  </body>
</html>

13.css样式规则

第1关：CSS基础知识

BDCAB

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

14.css3选择器-组合选择器

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

ACA

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

15.css3选择器-基础选择器

第1关：CSS基础选择器相关概念

DCB

第2关：通用选择器

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8"/>
   <!--------- Begin-------->
   <style type="test/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>

16.css3-文本外观样式

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

BDB

第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://www.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-size:14px;
        color:#333;
        font-family:微软雅黑;
  
      }   
    em{
        font-style:normal;
      }                                    
.header{                
    
    
    font-size:18px;
      color:#D52D2D;
      font-weight:normal;
      text-decoration:underline;
    
      }
.header 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>

17.css3-文本字体样式

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

BDA

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

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
</head>
<body>
<img src="https://www.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">18</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://www.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>

18.css3选择器-属性选择器

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

CBAD

第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 ******* */
         *{
           font-size:25px;
           text-align:center;
           vertical-align:middle;
         }

        /* ********* 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 ******* */ 
        .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>

19.css3背景样式

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

DACAD

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

20.移动端电商网页制作

第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://www.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://www.educoder.net/api/attachments/2072741" />
    </div>
</div>
</body>
</html>

21.网页布局页面的制作

第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://www.educoder.net/api/attachments/2141326)}       
#nav{height:60px; background:url(https://www.educoder.net/api/attachments/2141327)}
#banner{height:200px; background:url(https://www.educoder.net/api/attachments/2141342)}
#content{height:300px; }

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

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

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

#footer{
    height:90px; 
    background:url(https://www.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>

22.团购悬浮框页面的制作

第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://www.educoder.net/api/attachments/2046898) no-repeat left center;
               padding-left: 40px;
               margin: 0 auto 5px;
               color: #613e72;
          }

          .item {
               background: #613e72 url(https://www.educoder.net/api/attachments/2046946) no-repeat 5px center;
               color: #fff;
          }

          .back {
               background: url(https://www.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>

23.太极图的制作-css的应用

第1关：太极图的绘制

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        div{
            width: 96px;
            height: 48px;
            border: 2px solid #000;
            border-bottom:50px solid #000;
            position:absolute; left:0px;top:0px;right:0px;bottom:0px;
            margin:auto;
            border-radius:50%;
        }
        </style>
</head>

<body>
    <div>
    </div>
</body>
</html>

第2关：太极图的绘制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    
        div{
        width:96px;
        height:48px;
        border:2px solid #000;
        border-bottom:50px solid #000;
        position:absolute;
        left:0;top:0;right:0;bottom:0;
        margin:auto;
        border-radius:50%;
        }
        
        div:before{
        content:"";
        position:absolute;
        left:0;top:50%;
        width:8px;height:8px;
        background:#000;
        border:20px solid #fff;
        border-radius:50%;

        }
        div:after{
        content:""; 
        position:absolute;
        right:0;top:50%;
        width:8px;height:8px;
        background:#fff;
        border:20px solid #000;
        border-radius:50%;
        }
        
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

第3关：使太极图旋转：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    
        div{
        width:96px;
        height:48px;
        border:2px solid #000;
        border-bottom:50px solid #000;
        position:absolute;
        left:0;top:0;right:0;bottom:0;
        margin:auto;
        border-radius:50%;
        transition:all 2s linear;/*将全部元素以均匀速度在2S内完成旋转*/
        }
        
        div:before{
        content:"";
        position:absolute;
        left:0;top:50%;
        width:8px;height:8px;
        background:#000;
        border:20px solid #fff;
        border-radius:50%;
        }
        div:after{
        content:"";
        position:absolute;
        right:0;top:50%;
        width:8px;height:8px;
        background:#fff;
        border:20px solid #000;
        border-radius:50%;
        } 
div:hover{
            transform:rotate(-360deg);

    </style>
</head>
<body>
<div>

</div>
</body>
</html>
标签： 前端 html5 web
本文转载自: https://blog.csdn.net/qq_74637823/article/details/135104881
版权归原作者 小吴在摸渝 所有， 如有侵权，请联系我们删除。
登录后发布评论

“头歌Web实训答案（2023TYUT）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

电子电气架构 ---车载以太网络环境下的安全威胁

将(html/h5)静态网页部署到服务器/云服务器上（易懂，秒会）

【网络协议栈】网络层（中）IP地址的网段划分、CIDR划分以及网络层概念（内附手画分析图 简单易懂）

2025新版9块9付费进群源码/多套UI模板/小程序开源代码/自动定位变现/图文搭建教程

phpldapadmin-1.2.3：Web LDAP管理工具的详细安装与使用指南

不是吧，刚毕业几个月的前端，就写这么复杂的表格？？

Ai环境安装教程

文章导航