TYUT头歌HTML实训题答案

1.Web 前端开发概述

第一关 (Web前端开发相关概念)：

 
x,v,v,B,A
 
复制

第二关（第一个html网页）：

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

2.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>  复制

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

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

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" align="center" color="blue" noshade="">
       <br/>
       <br/>
       <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>
       X<sup>3</sup>-<sub>2</sub>Y2=1
     <!-- ********* End ********* -->
 </body>
 </html>  复制

6.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> 复制

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

8.html5-表格基本结构

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

第2关：创建简单的表格

 <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建表格</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
  <table background="https://www.educoder.net/api/attachments/1208912" border="4px" width="200" >
  <caption>成绩表</caption>
    <tr>
    <th width="100">姓名</th>
    <th width="100">成绩</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>90</td>
  </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  valign=middle bgcolor=00ffff>
       <!-- ********* 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" align=left>张三</td>
            <td align="center">90</td>
            <!-- ********* End 2********* -->
        </tr>
    </table>   
</body>
</html>复制

9.html5-页面结点元素

第1关：页面结点元素相关概念

第2关：section元素的使用

 <!DOCTYPE html>
<html>
   <head>
       <title>页面结点元素</title>
       <style type="text/css">
          #Head{border-bottom:4px double #eee;
                text-align:center;
                font-size :20px
              }
       </style>
   </head>
   <body>
      <article>
        <header id=Head>
          <h3>茗茶推荐——祁门红茶</h3>
           </header>
      <!-- ********* Begin ******* -->
      <section >
           <header><h3>什么是红茶</h3></header>
           <p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
        </section>
      <!-- ********* End ********* -->
      </article>
  </body>
</html>复制

第3关：nav元素的使用

 <!DOCTYPE html>
<html>
   <head>
       <title>页面结点元素</title>
       <style type="text/css">
          #Head{border-bottom:4px double #eee;
                text-align:center;
                font-size :20px
              }
       </style>
   </head>
   <body>
       <article>
           <header id=Head>
               <h3>茗茶推荐——祁门红茶</h3>
             <!-- ********* Begin ******* -->
               <nav>
                 <a href="https://www.qmhtea.com/" title="主页">主页</a>
                 <a href="#" title="花茶及文化">花茶及文化</a>
               </nav>
                
                
                
              <!-- ********* End ********* -->
           </header>          
        <section >
           <header><h3>什么是红茶</h3></header>
           <p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
        </section >
      </article>
  </body>
</html>复制

第4关：footer元素和address元素的使用

 <!DOCTYPE html>
 <html>
  <head>
    <title>页面结点元素</title>
    <style type="text/css">
       #Head{border-bottom:4px double #eee;
             text-align:center;
             font-size :20px
           }
    </style>
  </head>
  <body>
    <article>
      <header id=Head>
       <h3>茗茶推荐——祁门红茶</h3>
       <nav>
         <a href="https://www.qmhtea.com/" title="主页">主页</a>
         <a href="#" title="花茶及文化">花茶及文化</a>
       </nav>
      </header>          
      <section >
       <header><h3>什么是红茶</h3></header>
       <p>红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。</p>
      </section >
      <hr/>
       <!-- ********* Begin ******* -->
         <footer>
           <h4>©2020 Tyut</h4>
           <address >Written by<a href="mailto:webmaster@example.com">茗茶联系站</a></address>
         </footer>
         
            
               
            
        
        <!-- ********* End ********* -->
    </article>
  </body>
</html>复制

今天就先更新到这里，其余请关注后续，谢谢各位小主。

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

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