edu--Web程序设计基础2021秋--【结构元素】【交互元素】【页面结点元素】【文本层次语义元素】【分组元素】

最新推荐文章于 2022-11-24 11:26:32 发布

牛小小小婷～

最新推荐文章于 2022-11-24 11:26:32 发布

阅读量1.5k

点赞数 4

分类专栏： # web 文章标签： html5 html

本文链接：https://blog.csdn.net/hannah2233/article/details/121613479

版权

web 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

Educoder – Web程序设计基础2021秋 --实训作业全总结
 web程序设计基础R实验报告 2021年 —太原理工大学

一、结构元素

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

1、<article>元素主要用于定义页面的什么内容？

A、文章

2、以下选项，哪个不属于语义化的元素？
C、<span>

3、在HTML5中，（）元素用于定义文章的页眉信息。
B、<header>

4、aside元素用于定义当前页面或当前文章的附属信息。

A、正确

5、figcaption元素用于表示独立的流内容，例如图像、图表、照片、代码等。
B、错误

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

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

运用HTML5中的语义化元素设计一个文章区(<article>)。
文章区中的头部为文章的标题，标题文字为“茗茶推荐——祁门红茶”，要求为该标题文字设置三级标题（<h3>）。
文章区的内容使用段落标签（<p>)设置,文章内容为：“ 祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。”

代码展示

<!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元素的应用

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

运用HTML5中的语义化元素设计一个图类显示区(
)。
该区中插入的图像如下图所示：
茶
该图的URL为https://www.educoder.net/api/attachments/1223388
插图的下方用语义化元素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 " alt="">
                <figcaption>茶道欣赏</figcaption>
            </figure>
      <!-- ********* End ********* -->
      </article>
</body>
</html>

二、交互元素

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

1、下列选项中，用于显示进度效果的元素是（）。

A、progress

2、下列选项中，（）不是meter元素的属性。

C、open

3、关于meter元素的属性，下列说法正确的是（）。
B、max用于设置meter元素的最大值。
4、< details >元素是HTML5新增的元素，用于说明文档的详细信息。
A、正确
5、在一个容器中，< command >元素用于创建上下文、工具栏和弹出菜单。
B、错误

第2关：progress元素

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

运用HTML5中的交互元素设计一个进度条()。
progress标签之间说明文字为“进度显示”。
任务总量设置为100，当前的任务量为30。

代码展示

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

第3关：meter元素

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

运用HTML5中的交互元素设计两个度量条()。
第一个度量条的当前值为60，最大值为100，最小值为0
第二个度量条的当前值为30，最大值为100，最小值为0，高阈值为90，低阈值为50
第一个度量条和第二个度量条要分两行显示。

代码展示 ’

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>meter元素的使用</title>
 </head>
 <body>
 	显示度量值：<br/>
   <!-- ********* Begin ******* -->
    <meter value="60" max="100" min="0"></meter>
    <br>
    <meter value="30" high="90" low="50" max="100" min="0"></meter>
  <!-- ********* End ********* -->
</html>

第4关：details/summary元素

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

运用HTML5中的交互元素设计一个具有折叠和展开内容的页面效果。(<details>)。
details元素折叠时，显示的标题内容为“第三章”(<summary>)
details元素展开时，详细内容由三个段落组成，第一个段落内容为“3.1结构元素”；第二个段落内容为“3.2页面结点”；第三个段落内容为“3.3交互元素”。(<p>)

代码展示

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

三、页面结点元素

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

1、<section>元素主要用于定义页面的什么内容？
B、
文章的节

2、<nav>元素主要用于定义页面的什么内容？
C、导航
3、下列选项中，用于表示该网页作者联系信息的是（）元素。
D、address

4、HTML5的目标就是通过一些新标签、新功能为开发更加简单、独立、标准的通用Web应用提供标准。
A、正确
5、address元素用于代表页面的一个部分，是一个可以作为页面导航的链接组。
B、错误

第2关：section元素的使用

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

运用HTML5中的语义化元素设计一个文章的节(<section>)。
文章节的头部要设置节标题，标题文字为“什么是红茶”，要求为该标题文字设置三级标题（<h3>）。
节的内容使用段落标签（<p>)设置,节内容为：“ 红茶是全发酵茶,因其冲泡后的茶汤、茶叶以红色为主调,故得此名。”

代码展示

<!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元素的使用

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

运用HTML5中的语义化元素设计一个导航区(<nav>)。
导航区中嵌入两个超链接，第一个超链接的链源文字为“主页”，链宿路径为“https://www.qmhtea.com/”，设置鼠标悬停在链源上时显示提示文字，内容为“主页”。
导航区嵌入的第二个超链接的链源文字为“花茶及文化”，链宿路径为空连接“#”，设置鼠标悬停在链源上时显示提示文字，内容为“花茶及文化”。

代码展示

花茶及文化<!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元素的使用

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

运用HTML5中的语义化元素设计一个文章的页脚(
)。
使用<h4>标题标签为页脚区添加版权信息，内容为“©2020 Tyut”。
使用<address>元素为页脚区添加联系人信息，内容为“Written by茗茶联系站”，其中“茗茶联系站”为超链接的热字，链宿为“mailto:webmaster@example.com”

代码展示

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

四、文本层次语义元素

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

1、下列元素中，（）可用于把文本定义为语气更强的强调的内容。
C、
strong

2、下列选项中，用于定义计算机代码文本的元素是（）。

A、code

3、下列选项中，不具有语义的元素是（）。
D、span

4、在HTML文本层次语义元素中，用于对参考文献的引用进行定义的是（）。
B、cite
5、HTML文本层次语义元素<samp>用于定义键盘文本，它表示文本是从键盘上键入的。
B、错误

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

编程要求

根据前面的效果图，在右侧编辑器中的Begin - End区域内补充代码，为该网页添加一个“重要通知”，具体要求是：

文字“重要通知：”需要特别强调（strong）
文字“明日上午9:00整”需要醒目显示（mark）
文字“213”需要定义为术语（def），并且需要为该文本添加鼠标悬停显示说明文字的效果（title)，说明文字内容为“行勉楼C座”。
文字“开会”需要斜体强调（em）。

代码展示

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

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

第3关：cite元素和time元素

编程要求

编程要求
根据前面的效果图，在右侧编辑器中的Begin - End区域内补充代码，为该网页添加一个“今日分享”，具体要求是：

文字“今日分享：”需要特别强调（strong）
在“今日分享”文字后为搜索引擎指定日期（time),设置时间为2020-10-25.
在“今日分享：”文字下方插入下面的图像，图像的url为https://www.educoder.net/api/attachments/1256151

代码展示

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

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

五、分组元素

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

1、在下列选项中，用于表示引自他处大段内容的分组元素是（）。
B、blockquote
2、在HTML中，元素pre的作用是（）
C、
表示预排版
3、以下哪个标记用来建立一个有序列表（）。
D、<ol>

4、在定义列表中，一对

标记可以对应多对

标记。

A、正确
5、关于定义无序列表的基本语法格式，以下描述错误的是（）。
D、<li>不可以定义type属性，只能使用CSS样式属性代替

第2关：无序列表

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

在中创建一个1个无序列表，其中包含3个列表项。
第一项列表的项目符号采用默认样式，项目内容为“圆饼”。
第二项列表的项目符号采用实心正方形，项目内容为“黑板”。
第三项列表的项目符号采用圆圈，项目内容为“圆圈”。

代码展示

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>无序列表</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
     <ul>
      <li>圆饼</li>
      <li type="square">黑板</li>
      <li type="circle">圆圈</li>
    </ul>  
   <!-- ********* End ********* -->
  </body>
</html>

第3关：有序列表

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

在中创建一个1个有序列表，其中包含3个列表项。
整个项目（ol）的起始值为2（start)，符号类型默认;
第一项列表的符号类型默认，项目内容为“男装”。
第二项列表的符号类型为大写英文字母，项目内容为“上衣”。
第三项列表的符号类型为小写罗马字母，项目内容为“T恤”。

代码展示

<!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关：定义列表

编程要求

编程要求
根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

定义一个列表，包含1个定义名词和1个定义描述。
定义名词为：“Web前端开发”，请将定义名词加粗显示并具有特别强调的语义(strong)
第1个定义描述内容为：“Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。”，编程要求将其中的文字“网页制作”使用黄色背景突出显示（mark)。
第2个定义描述内容为：“前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。”

代码展示

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

牛小小小婷～

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
edu--Web程序设计基础2021秋--【结构元素】【交互元素】【页面结点元素】【文本层次语义元素】【分组元素】

edu–Web程序设计基础2021秋–【Web前端开发概述】【HTML5基础】【web编程训练-html5-超链接的应用】【web知识训练-html5-超链接的应用】Web程序设计基础2021秋–【表格标签-表格基本结构】【html5—表格高级样式的设置】文章目录一、结构元素第1关：文档结构元素相关概念第2关：header元素和article元素的应用编程要求代码展示第3关：figure元素和figcaption元素的应用编程要求代码展示二、交互元素第1关：交互元素相关概念第2关：progre.
复制链接

扫一扫