Educoder web exercises -- text level semantic elements

Text level semantic elements

The first 1 Turn off ： Concepts related to semantic elements at the text level

Related knowledge

Common text hierarchical semantic elements and their applications

• em and strong

em and strong All are HTML5 Elements with enhanced semantics defined in , The page appears bold .

1. em: Define text as the content of emphasis . Bold in italics when displayed .
2. strong: Define the text as the content with stronger emphasis .

• cite

cite Element to create a reference tag , Used to indicate the reference or reference source of something , A title, such as a book or magazine or a news report , standard 、 newspaper 、 Legal documents , Of online articles URL etc. . If the referenced documents are available online , You should also include references in a <a> In the label , To point a hyperlink to the online version .

• mark

mark Element defines marked text , You can highlight the text in the document to make it stand out .

• time

time Element defines the date or time , This element can encode the date and time in a machine-readable manner , For example, the user agent can add birthday reminders or scheduled events to the user's schedule , Search engines can also generate more intelligent search results .

• dfn

dfn Element is used to define the term , You can use the optional title Property to provide an accurate definition of the term . for example ： <dfn title= Document object model >DOM</dfn> By default , The browser will dfn The contents of the element are rendered in italics . also , When the mouse hovers over the term , The browser will title The content of the property is displayed in the prompt box .

• code

code Element is used to define computer code text . The text contained within this element will be in equal width 、 Typeface similar to teletypewriter style （Courier） Show it .

• samp

samp Element defines the sample text of a computer program .

• kbd

kbd Element defines the keyboard text . It means that the text is typed from the keyboard . It is often used in computer related documents or manuals . Browsers usually display the text contained in the label in a constant width font .

• var

var Element defines a variable . This label is often associated with <code> and <pre> Use labels together , Used to display specific elements of computer programming code examples and similar aspects . use <var> The text of the label tag is usually displayed in italics .

Customs clearance knowledge

1、 In the following elements ,（C） It can be used to define text as more emphasized content .
A、B
B、em
C、strong
D、bolder

2、 In the following options , The element used to define the text of computer code is （A）.
A、code
B、samp
C、cite
D、dfn

3、 In the following options , Elements that do not have semantics are （D）.
A、mark
B、time
C、kbd
D、span

4、 stay HTML In the semantic elements of the text hierarchy , What is used to define a reference to a reference is （B）.
A、strong
B、cite
C、var
D、mark

5、HTML Text level semantic elements <samp> Used to define keyboard text , It means that the text is typed from the keyboard .（B）
A、 correct 
B、 error 

The first 2 Turn off ： Text level semantic elements

Related knowledge

Description of relevant elements

em Elements 、strong Elements 、mark Elements 、def The elements are HTML5 Semantic elements defined in , Emphasize 、 Put more emphasis on 、 Eye catching display 、 And define the semantics of terms . These elements are inline elements , If you need to wrap lines during typesetting , You should use
label .

Programming requirements

According to the previous renderings , In the editor on the right Begin - End Supplement code in the area , Add a... To this page “ Important notice ”, The specific requirement is ：

1. written words “ Important notice ：” It needs special emphasis on （strong）
2. written words “ Tomorrow morning 9:00 whole ” Need to be prominently displayed （mark）
3. written words “213” Need to be defined as the term （def）, And you need to add the effect of mouse over display of description text to the text （title), The description text is “ Xingmianlou C seat ”.
4. written words “ The meeting ” Need italics to emphasize （em）.

The renderings are as follows ：

Customs clearance code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ******* -->
  <strong> Important notice ：</strong><br>
  <span> Is due to </span>
  <mark> Tomorrow morning 9:00 whole </mark>
  <span> stay </span>
  <def title=" Xingmianlou C seat ">213</def>
  <span> classroom </span>
  <em> The meeting </em>
<!-- ********* End ********* -->
</body>
</html>

matters needing attention

In the customs clearance example above , It is also possible to leave the text without a label , Just added <span> The part of the label can be completely without a label , But you can't write <p> label , because <p> A tag is a row level element , Will make the whole line of code different , You can give it a try , To impress .

The first 3 Turn off ：cite Elements and time Elements

Related knowledge

time Elements

time Element defines the date or time , The element can when no date or time is specified in the content of the element , Let the machine read , For example, the user agent can add birthday reminders or scheduled events to the user's schedule , Search engines can also generate more intelligent search results . time The common attributes of elements are datetime and pubdate.

datetime attribute

datetime Property is used to specify the date and time , The value format is YYYY-MM-DDThh:mm:ssTZ

• YYYY： year
• MM： month
• DD： God
• T： Separator for date and time , When setting the time, there must be .
• hh： when
• mm： branch
• ss： second
• Z： Use UTC Standard time

Examples are as follows ：

1. Specify only the date ： <time datetime="2019-12-20"></time>
2. Specify only the time ： <time datetime="17:30"></time>
3. Specifies the date and time ： <time datetime="2019-12-20T19:00"></time>
4. Add... After time “Z” Used to code a machine UTC Time standard ： <time datatime="2019-12-20T19:00Z"></time>
5. Add the time difference of different regions ： <time datetime="2019-12-20T16:00+05:00"> Chinese time zone 2019 year 12 month 20 On the afternoon of Sunday 5 spot <time>

pubdate attribute

stay Add... To the tag pubdate attribute , Indicates the release date of an article or a document page .

Examples are as follows ： <time datetime="2020-10-20" pubdate></time>

cite Elements

Element to create a reference tag , Used to indicate the reference or reference source of something , A title, such as a book or magazine or a news report , standard 、 newspaper 、 Legal documents , Of online articles URL etc. .cite The text referenced by the element is displayed in italics .

Examples are as follows ： --- To quote <cite>HTML5 Authoritative guide </cite>

Programming requirements

According to the previous renderings , In the editor on the right Begin - End Supplement code in the area , Add a... To this page “ Today's share ”, The specific requirement is ：

1. written words “ Today's share ：” It needs special emphasis on （strong）
2. stay “ Today's share ” Specify a date for the search engine after the text （time), Set the time to 2020-10-25.
3. stay “ Today's share ：” Insert the following image below the text , Graphic url by https://www.educoder.net/api/attachments/1256151
4. At the bottom of the illustration , Use B The label displays text in bold “ The golden age never returns , It's hard to wake up in the morning , Timely encouragement , Time and tide wait for no man .”. 5. Wrap to show reference text “ Source ： Wei Jin · Tao Yuanming 《 lines 》”（cite).

The renderings are as follows ：

Customs clearance code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ******* -->
  <strong> Today's share ：</strong><time datetime="2020-10-25"><br>
  <img src="https://www.educoder.net/api/attachments/1256151"></img><br>
  <b> The golden age never returns , It's hard to wake up in the morning , Timely encouragement , Time and tide wait for no man .</b><br>
  <cite> Source ： Wei Jin · Tao Yuanming 《 lines 》</cite>
<!-- ********* End ********* -->
</body>
</html>