当前位置：网站首页>Educator web exercises - grouping elements

Educator web exercises - grouping elements

2022-06-21 12:33:00 【It's a deer】

Grouping elements

List of articles

Grouping elements

The first 1 Turn off ： Concept questions related to grouped elements

Related knowledge

div

div Element is a general grouping element without semantics , Commonly used in early design div Tag for web page layout .

blockquote

blockquote Element represents a semantic element of a large piece of content from another source . There are paragraph gaps in the display , Indent left and right （ Increase the outer margin ）.

pre

pre Element is used to define pre formatted text , stay <pre> The text in the label content usually retains spaces and line breaks , Display as equal width font .

figure/figcaption

figure Element represents a diagram related to a document ,figcaption Is the title of this diagram .

ul/li

ul You can create an unordered list , In this label, you can use li Label sets multiple list items . The basic format is as follows ：

<ul>  
    <li> Unordered list items 1</li> 
    <li> Unordered list items 2</li> 
    <li> Unordered list items 3</li>
</ul>

Unordered list <ul> There is an optional attribute type, Used to specify the type of bullets in the list , It could be theta disk( Solid round ）、circle（ round ） or square（ A solid square ）.

ol/li

ol You can create an ordered list , In this label, you can use li Label sets multiple list items , When displayed, each list item has an exclusive row . The basic format is as follows ：

<ol>  
    <li> There are sequence items 1</li>
    <li> There are sequence items 2</li>  
    <li> There are sequence items 3</li>
</ol>

stay HTML5 in , Ordered list <ol> There are three optional properties ,type Used to specify the type of item number in the list ,start Property is used to specify the start number of the list ,reversed Property is used to number the list backwards .

dl/dt,dd

dl You can create a definition list , In this label, you can use dt The label sets the terms that need to be defined , Available after each term 1~n individual dd The label setting defines the interpreter . The basic format is as follows ：

<dl>
    <dt> The term </dt> 
    <dd> Explanation of terms 1</dd>
    <dd> Explanation of terms 2</dd>
</dl>

Pay attention to , Terms with the same name are not allowed in a list , There is also no repetition of terms .

Customs clearance knowledge

1、 In the following options , The grouping element used to represent a large piece of content from elsewhere is （B）.
A、div
B、blockquote
C、p
D、pre

2、 stay HTML in , Elements pre The role of is （C）
A、 Indicates title 
B、 Indicates line transfer 
C、 Means pre typesetting 
D、 Indicates a text effect 

3、 Which of the following tags is used to create a sequence table （D）.
A、<ni>
B、<ul>
C、<dl> 
D、<ol>

4、 In the definition list , a pair <dt></dt> Tags can correspond to multiple pairs <dd></dd> Mark .（A）
A、 correct 
B、 error 

5、 About defining the basic syntax format of unordered list , The following description is wrong （D）.
A、<ul></ul> Tags are used to define unordered lists  
B、<li></li> Tags are nested in <ul></ul> In the mark , Used to describe specific list items  
C、 Each pair <ul></ul> At least one pair of <li></li> 
D、<li> You can't define type attribute , Only use CSS Style attribute substitution

The first 2 Turn off ： Unordered list

Related knowledge

Unordered list example

HTML Medium ul Element represents an unordered list of items , attribute type The list symbol style can be set , The value is disk Represents a solid circle , The value is circle Represent circle , The value is square Represents a solid square , The default bullet type is disk. For example, the following code ：

<ul>  
      <li type=disk> The first one is   Solid round </li> 
      <li type=circle> The second item   round </li>   
      <li type=square> The third one   A solid square </li>  
</ul>

The display effect is ：

Unordered list effect

Programming requirements

According to the prompt , Add code to the editor on the right , In the editor on the right Begin - End Supplement code in the area , The specific requirement is ：

stay <body></body> Create a 1 An unordered list , It includes 3 List items .
The bullets in the first item list are in the default style , The content of the project is “ A round cake ”.
The bullet in the second item list is a solid square , The content of the project is “ blackboard ”.
The bullets in the third list are circled , The content of the project is “ circle ”.

Customs clearance code

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title> Unordered list </title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
      <ul>
        <li> A round cake </li>
        <li type=square> blackboard </li>
        <li type=circle> circle </li>
      </ul>
   <!-- ********* End ********* -->
  </body>
</html>

The first 3 Turn off ： Ordered list

Related knowledge

There is a sequence representation

HTML Medium ol Element represents a sorted list of items , attribute type The list symbol style can be set , The value is 1 In numerical order , The value is A Indicates sorting by capital letters , The value is a Indicates sorting by lowercase English letters , The value is I Indicates sorting by uppercase Roman numerals , The value is i Indicates sorting by lowercase Roman numerals , Sort by number by default . attribute start Set the initial value of the list symbol , The value can be 1、2、3 …, For example, the following code ：

<ol start=2>  
    <li type=A> men's wear </li>  
    <li type=i> jacket </li>  
    <li type=I>T T-shirt </li> 
</ol>

The display effect is ：

Ordered list effect

Programming requirements

According to the prompt , Add code to the editor on the right , In the editor on the right Begin - End Supplement code in the area , The specific requirement is ：

stay <body></body> Create a 1 There is a sequence table , It includes 3 List items .
Whole project （ol） Starting at 2（start), The symbol type defaults to ;
The symbol type of the first item list defaults to , The content of the project is “ men's wear ”.
The symbol type of the second item list is capital English letters , The content of the project is “ jacket ”.
The symbol type of the third item list is lowercase Roman letters , The content of the project is “T T-shirt ”.

Customs clearance code

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title> Ordered list </title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
      <ol start=2>
        <li> men's wear </li>
        <li type=A> jacket </li>
        <li type=i>T T-shirt </li>
      </ol>
   <!-- ********* End ********* -->
  </body>
</html>

The first 4 Turn off ： Definition list

Related knowledge

Definition list

dl Element is used to set the definition list , It consists of two parts ： Define nouns and describe .dt Element settings define nouns ,dd Description of the element setting definition . Example example ：

<dl> 
    <dt> parallelogram </dt>  
    <dd> Parallelogram is in the same two-dimensional plane , A closed figure consisting of two sets of parallel line segments .</dd>  
    <dd> In Euclidean geometry , A parallelogram is a simple rectangle with two pairs of parallel edges （ Non self intersecting ） quadrilateral .</dd>
</dl>

The display effect is ：

Define table renderings

Programming requirements

According to the prompt , Add code to the editor on the right , In the editor on the right Begin - End Supplement code in the area , The specific requirement is ：

Define a list , contain 1 Define nouns and 1 A definition describes .
Define the noun as ：“Web The front-end development ”, Please display the defined nouns in bold with special emphasis on semantics (strong)
The first 1 The first definition describes ：“Web Front end development evolved from web page production , The name has obvious characteristics of the times .”, Programming requires that the text “ Web page creation ” Highlight... With a yellow background （mark).
The first 2 The first definition describes ：“ Front end development is to create Web The page or app The process of presenting the front-end interface to the user , adopt HTML、CSS And JavaScript And all kinds of technology derived from it 、 frame 、 Solution , To realize the user interface interaction of Internet products .”

Customs clearance code

<html>
 <head>
  <title> Definition list </title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
  <dl>
    <dt><strong>Web The front-end development </strong></dt>
    <dd>Web Front end development is from <mark> Web page creation </mark> Evolved , The name has obvious characteristics of the times .</dd>
    <dd> Front end development is to create Web The page or app The process of presenting the front-end interface to the user , adopt HTML、CSS And JavaScript And all kinds of technology derived from it 、 frame 、 Solution , To realize the user interface interaction of Internet products .</dd>
  </dl>
   <!-- ********* End ********* -->
 </body> 
</html>