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

Source: Internet
Author: User

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.