分组元素

是小鹿呀
135 阅读6分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

相关知识

div

div元素是没有语义的通用分组元素，早期设计中常用div标签进行网页布局。

blockquote

blockquote元素表示摘自另一个源的大段内容的语义化元素。在显示上有段落空隙，在左右两边缩进（增加外边距）。

pre

pre元素用来定义预格式化文本，在<pre>标签内容中的文本通常会保留空格和换行符，显示为等宽字体。

figure/figcaption

figure元素代表一个和文档相关的图，figcaption是这个图的标题。

ul/li

ul可创建无序列表，在这个标签中可以用li标签设置多个列表项。基本格式如下：

<ul>  
    <li>无序列表项1</li> 
    <li>无序列表项2</li> 
    <li>无序列表项3</li>
</ul>

无序列表<ul>有一个可选属性type，用来规定列表里项目符号的类型,其取值可以是disk(实心圆）、circle（圆）或square（实心正方形）。

ol/li

ol可创建有序列表，在这个标签中可以用li标签设置多个列表项，显示时每个列表项独占一行。基本格式如下：

<ol>  
    <li>有序列表项1</li>
    <li>有序列表项2</li>  
    <li>有序列表项3</li>
</ol>

在HTML5中，有序列表<ol>有三个可选属性，type用来规定列表里项目编号的类型，start属性用于指定列表的开始编号，reversed属性用于将列表反向进行编号。

dl/dt,dd

dl可创建定义列表，在这个标签中可以用dt标签设置需要定义的术语，每个术语后可用1~n个dd标签设置定义的解释体。基本格式如下：

<dl>
    <dt>术语</dt> 
    <dd>术语解释1</dd>
    <dd>术语解释2</dd>
</dl>

应用时注意，一个列表中不允许含有相同名字的术语，也不允许有重复的术语解释。

通关知识

1、在下列选项中，用于表示引自他处大段内容的分组元素是（B）。
A、div
B、blockquote
C、p
D、pre
​
2、在HTML中，元素pre的作用是（C）
A、表示标题
B、表示转行
C、表示预排版
D、表示文字效果
​
3、以下哪个标记用来建立一个有序列表（D）。
A、<ni>
B、<ul>
C、<dl> 
D、<ol>
​
4、在定义列表中，一对<dt></dt>标记可以对应多对<dd></dd>标记。（A）
A、正确
B、错误
​
5、关于定义无序列表的基本语法格式，以下描述错误的是（D）。
A、<ul></ul>标记用于定义无序列表 
B、<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项 
C、每对<ul></ul>中至少应包含一对<li></li> 
D、<li>不可以定义type属性，只能使用CSS样式属性代替

第2关：无序列表

相关知识

无序列表示例

HTML中的ul元素表示不排序的项目列表，属性type 可设置列表符号样式，取值为disk表示实心圆，取值为circle表示圆，取值为square表示实心正方形，默认项目符号类型为disk。例如以下代码：

<ul>  
      <li type=disk>第一项 实心圆</li> 
      <li type=circle>第二项 圆</li>   
      <li type=square>第三项 实心正方形</li>  
</ul>

显示效果为：

无序列表效果

编程要求

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

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

通关代码

<!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关：有序列表

相关知识

有序列表示例

HTML中的ol元素表示排序的项目列表，属性type 可设置列表符号样式，取值为1表示按数字排序，取值为A表示按大写英文字母排序，取值为a表示按小写英文字母排序，取值为I表示按大写罗马数字排序，取值为i表示按小写罗马数字排序，默认按数字排序。属性start 设置列表符号初值，取值可以是1、2、3 ...,例如以下代码：

<ol start=2>  
    <li type=A>男装</li>  
    <li type=i>上衣</li>  
    <li type=I>T恤</li> 
</ol>

显示效果为：

有序列表效果

编程要求

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

  1. 在<body></body>中创建一个1个有序列表，其中包含3个列表项。
  2. 整个项目（ol）的起始值为2（start)，符号类型默认;
  3. 第一项列表的符号类型默认，项目内容为“男装”。
  4. 第二项列表的符号类型为大写英文字母，项目内容为“上衣”。
  5. 第三项列表的符号类型为小写罗马字母，项目内容为“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关：定义列表

相关知识

定义列表

dl元素用于设置定义列表，它由两部分组成：定义名词和定义描述。dt元素设置定义名词，dd元素设置定义的描述。示例例如：

<dl> 
    <dt>平行四边形</dt>  
    <dd>平行四边形是在同一个二维平面内，由两组平行线段组成的闭合图形。</dd>  
    <dd>在欧几里德几何中，平行四边形是具有两对平行边的简单（非自相交）四边形。</dd>
</dl>

显示效果为：

定义表效果图

编程要求

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

  1. 定义一个列表，包含1个定义名词和1个定义描述。
  2. 定义名词为：“Web前端开发”，请将定义名词加粗显示并具有特别强调的语义(strong)
  3. 第1个定义描述内容为：“Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。”，编程要求将其中的文字“网页制作”使用黄色背景突出显示（mark)。
  4. 第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>

\

avatar
文章
阅读
粉丝