Study Notes Chapter 4 Design webpage text, Study Notes Chapter 4

Study Notes Chapter 4 Design webpage text, Study Notes Chapter 4

Key points:

1. Familiar with HTML 4 formatted text labels;

2. Master the text labels added to HTML5;

3. correctly select tags to design webpage text information.

 

4.1 Use text label 4.1.1 Title text

<H1> ~ <H6> defines the title.

<H1> defines the largest title, indicating the most important information.

<H1> only once, and 4.1.2 paragraph text

<P> the label is used to define the paragraph text. A gap is created before and after the text.

4.1.3 reference text

<Q> when the tag definition is short, quotation marks are added around the referenced content. <blockquote> when the tag definition is block reference, the included text is separated from the regular text, indent on the left and right.

A piece of text cannot be directly placed in <blockquote> and should be contained in a block element.

<Q> and <blockquote> both contain a cite attribute and define the reference source. <Cite> tags also provide the ability to automatically extract bibliography from documents.

4.1.4 emphasized text

<Em> it is used to emphasize text. The text contained in the statement is displayed in italic. <strong> the emphasis is higher, and the text contained in the statement is displayed in bold.

4.1.5 format text

<B> defines bold text, which is similar to the default Effect of <strong>.

<I> defines italic text, which is similar to the default Effect of <em>.

<Big> defines the large font size, which can be nested for use until the upper limit is 7.

<Small> defines the small font.

<Sup> defines the upper-level text.

<Sub> define subscript text.

4.1.6 output text

<Code> indicates the font of the code, that is, the source code is displayed.

<Pre> indicates the source code in a predefined format, with spaces in the source code retained.

<Tt> Printer Font.

<Kbd> keyboard font.

<Dfn> defined term.

<Var> variable font.

<Samp> sample code.

4.1.7 abbreviations

<Abbr> short name or abbreviation.

<Acronym> defines the abbreviation. (Not supported by HTML5)

4.1.8 insert and delete text

<Ins> defines the text inserted into the document.

<Del> defines the deleted text in the document.

4.1.9 text direction

<Bdo> you can change the direction of a text stream, including the dir attribute. The optional values include ltr (from left to right) and rtl (from right to left ).

For example, <bdo dir = "rtl"> moonlight in front of the bed is suspected of being frost on the ground. <Bdo>

4.2 HTML5 new text tag 4.2.1 text tag

<Mark> defines text with a mark, indicating the information to be highlighted or highlighted on the page.

4.2.2 progress information

<Progress> identifies the task progress. It can be uncertain, indicating that the progress is in progress. It can also be expressed by a number ranging from 0 to a number (such as 100.

The progress element contains two attributes: max and value, indicating the current progress.

Example: <p> 100 progress: <progress id = "progress" max = ""> <span> 0 </span >%</progress> </p>

4.2.3 scale information

<Meter> defines the scalar and progress within a known range or number. Such as disk usage and query result relevance.

The meter element contains seven attributes:

• The actual value identified by the value in the element. The default value is 0.
• Min: specifies the minimum value that can be used when the specified range is set. The default value is 0.
• Max: the maximum value that can be used when the specified range is set. The default value is 1.
• The maximum value of the low setting range. If low is smaller than min, the min value is regarded as the low value.
• The upper limit of the high setting range. If the value is greater than max, the value of max is regarded as the value of high.
• Optimum is the best value.
• Form sets one or more forms to which the meter element belongs.

Example: <meter value = "3" min = "0" max = "10"> three in ten minutes </meter>

4.2.4 time information

<Time> defines the time (in 24-hour format) or date of the Gregorian calendar. The time and time zone offset are optional.

Example 1: <time datetime = "2017-11-17T20: 00 + 9: 00"> my birthday at AM in the United States </time>

The <time> element has two attributes:

Datetime defines the date and time;

Pubdate defines the date and time when the document is published in the time element.

4.2.5 contact text

<Address> defines the contact information of the author and owner of a document or article. The text is usually italic.

4.2.6 isolate text

<Bdi> you can set a text segment to remove it from the text direction of the parent element.

4.2.7 line break

<Wbr> defines where to add line breaks in the text.

Example: <p> the old address of this site is https: <wbr> // <wbr> www. old_site.com/. The new address is https: <wbr> // <wbr> www. new_site.com /. <P>

4.2.8 text comments

<Ruby> define Chinese phonetic symbols or characters. <Ruby> must be used together with <rt> or <rp>.

• <Rt> define the interpretation or pronunciation of characters;
• <Rp> defines that the browser does not support the display of ruby elements.

Example: <ruby>

Less <rt> shao </rt> strong <rt> zhuang </rt> NO <rt> bu </rt> nu </rt> force <rt> li </rt>

</Ruby>