HTML and CSS teaching-Chapter 2 HTML webpage subject and content tag

Source: Internet
Author: User

Chapter 2 HTML webpage subject and content tagging
Key points of this Chapter
Use of title and paragraph tags
Use of text format tags
Use of <div> and <span> tags
Use of special characters in HTML

Directory:
4.1 Use of title and paragraph Marking
4.2 Use of text format tags
4.3 content (Multi-Purpose) mark
Special Character 4.4
4.5 comprehensive instances

4.1 Use of title and paragraph Marking
4.1.1 H1, H2, H3, H4, H5 and h6
Generally, articles have titles, subtitles, chapters, sections, and other structures. html also provides the corresponding title tag <HN>, where N is the title level, html provides a total of six levels of titles. The smaller N, the larger the title Font size.
Hn mark is generally in the following format:
<HN color = attribute value align = attribute value> title </HN> (n = 1 ,... 6)
Note: <HN> attributes include color and align. The title Color and position (left, right, and center) are marked respectively ).

4.1.2 P
<P> </P> is commonly used for marking between paragraphs to make the arrangement neat and clear. <P> it is a special section element in HTML format. In the HTML format, you do not need to care about the width of each line of the article. You do not have to worry about whether the text is too long to be truncated. It automatically redirects to the next line based on the width of the window. Therefore, <p> in the original file indicates that the text below has come to an end. If you do not encounter the <p> symbol, it will squeeze all the text into a paragraph and will not wrap the line without the window boundary. Text, list, and table can be added to the section mark. The beginning of a file section is marked by <p>, and the end of a paragraph is marked by </P>. </P> can be omitted, because the start of the next <p> indicates the end of the last <p>.
The tag format is as follows:
<P align = property value> text </P>
Note: <p> A tag has a common attribute align, which is used to indicate the alignment mode when a character is displayed. Its values include left, center, and right) three.

4.1.3 BLOCKQUOTE
<BLOCKQUOTE> A tag can define a block reference. All texts between <BLOCKQUOTE> and </BLOCKQUOTE> are separated from common texts, which are often indented on both sides of the left and right, and sometimes italic words are used. That is to say, block references have their own space.
The tag format is as follows:
<BLOCKQUOTE cite = URL> text </BLOCKQUOTE>

4.1.4 address
<Address> you can define an address (such as an email address ). Use it to define the address, signature, or document author identity.
Whether the created document is short, concise, and complete, make sure that an address is attached to each document. This not only provides readers with feedback channels, but also increases the credibility of the document.
The tag format is as follows:
<Address> text </address>

4.1.5 pre
<PRE> mark the pre-formatted text that can be defined. Text enclosed in the <PRE> Mark usually retains spaces and line breaks, and the text is also displayed as an equal-width font. A common application of <PRE> labeling is to represent the source code of a computer.
The tag format is as follows:
<PRE>
Text block
</PRE>

4.2 Use of text format tags
4.2.1 em
Mark <em> is used to indicate emphasis. The text style is italic by default.
<Em> the tag format is as follows:
<Em> text </em>

4.2.2 strong
Mark <strong> to define the text as content with stronger tone. The text style is bold by default.
<Strong> the tag format is as follows:
<Strong> text </strong>

4.2.3 cite
Mark <cite> to define a reference. You can use this tag to define references, such as titles of books or magazines.
<Cite> the tag format is as follows:
<Cite = property value> text </CITE>

4.2.4 I and B
Both <I> and <B> are font style elements. <I> show italic text effect, <B> show bold text effect.
<I> and <B> are marked in the following general format:
<I> text </I>
<B> text </B>

4.2.5 big and small
<Big> and <small> are also font style elements. <Big> the font size is displayed, and <small> the font size is displayed.
The general format of <big> and <small> tags is:
<Big> text </big>
<Small> text </small>

4.2.6 TT
<Tt> mark the text effect similar to a typewriter or an equal width.
The tag format is as follows:
<Tt> text </tt>

4.2.7 sup and sub
Both <sup> and <sub> are used in mathematical formulas, scientific symbols, and chemical formulas. <Sup> mark up-to-definition text and <sub> mark up-definition subscripts.
The tag format is as follows:
<Sup> text </sup>
<Sub> text </sub>
Note: The text content marked by <sup> and <sub> is displayed half of the character height in the current text stream, however, the font and font size of the text in the current text stream are the same. <Sup> the text in the tag appears above the current text stream, while the text in the <sub> tag appears below the current text stream.

4.2.8 Q
<Q> A tag can define a short block reference. The tag format is as follows:
<Q> text </q>
Note: The difference between <q> and <BLOCKQUOTE> is that <q> mark is essentially the same as <BLOCKQUOTE>. The difference lies in their display and application. <Q> flag is used for short in-row references. Use the <BLOCKQUOTE> flag to separate long parts from the surrounding content (normally displayed as indensed blocks.

4.2.9 dfn
<Dfn> tag defines a project. Can Mark definitions of special terms or phrases. Popular browsers usually use italics to display text in <dfn>.
<Dfn> the tag format is as follows:
<Dfn> text </dfn>

4.2.10 abbr and acronym
<Abbr> A tag represents an abbreviation of a Web page. <Abbr> the tag was originally introduced in html4.0, indicating that the text it contains is a simplified form of a longer word or phrase. The browser may change the display mode of the text based on the information, or use other text instead.
<Abbr> the tag format is as follows:
<Abbr Title = "text"> short text </abbr>

4.2.11 del and INS
<Del> mark the deleted text in the definition document.
<Del> the tag format is as follows:
<Del> text </del>
<Ins> mark the text that has been inserted into the document.
<Ins> the tag format is as follows:
<Ins> text </INS>
Note: The <del> and <ins> labels are used together to describe updates and corrections in the document.

4.2.12 BDO
<BDO> mark to redefine the text display direction.
<BDO> the tag format is as follows:
<BDO dir = property value> text </BDO>

4.2.13 code, KBD, SAMP, and VaR
<Code>, <KBD>, <SAMP>, and <var> are used to display computer/programming code. These tags are not only documents that make it easier for users to understand and browse, but will also be available to some automatic systems in the future, extract information from the document and the useful parameters mentioned in the document. The more semantic information the browser provides, the better the browser can display the information to the user.

4.2.14 HR
<HR> mark to create a horizontal line on the HTML page. You can visually separate documents into different parts.
<HR> the tag format is as follows:
<HR property = "property value">

4.2.15 marquee
The use of rolling Subtitles makes the entire webpage more dynamic and angry. Using HTML <marquee> to scroll the subtitle tag requires the least code, so it can get better results with less download time. <Marquee> the tag format is as follows:
<Marquee attribute = "attribute value"> rolling Subtitles </marquee>

4.3 content (Multi-Purpose) mark
4.3.1 Div
DIV is short for Division. Division indicates segmentation and area. <Div> A tag represents a block in HTML. <div> A tag divides a document into separate and different parts. Therefore, this tag is called a segmentation tag. It can be used as a Web page organization tool to set the placement of text, graphics, images, tables, and other pages on the page. You can use CSS styles to assign different performances to them.
The DIV tag is generally in the following format:
<Div property = "property value"> document </div>

4.3.2 Span
<Span> tags indicate the row elements in a combination document in HTML. <span> tags can divide a part of a document in a row into independent regions to achieve a specific effect, therefore, this tag is called an intra-row segmentation tag.
<Span> the tag format is as follows:
<Span property = "property value"> document </span>

Special Character 4.4
Special characters refer to characters with special meanings in HTML. For example, a character smaller than sign <indicates the beginning of the HTML Tag. This character smaller than sign is not displayed on the final webpage. What should I do if I want to display a minor sign on the webpage? In this case, some special code combinations are required.
Special characters in HTML cannot be used directly. To use special characters, use their escape sequences. In hypertext markup language, a special character can be expressed in two ways: character escape sequence or digital escape sequence.
The character escape sequence uses meaningful names to represent special characters. It is usually composed of the prefix "&", the name corresponding to the character, and the suffix. The expression is as follows:
& Name;
Name is a name used to indicate characters. It is case sensitive. For example:
& Lt; font & LGT;
It is displayed as <font>. If it is directly written as "<font>", it is considered as a annotation.
The so-called number escape sequence refers to the use of numbers to represent special characters in the document. It is usually composed of the prefix "& #", the value, and the suffix.
The expression is as follows:
& # D;
D is a decimal value.

Summary
Text is an important part of HTML webpages. When compiling HTML documents, you can place the text between tags to set the text format. Set the text format in the document to segment and line feed, set the paragraph alignment, set the font, font size and text color, and set the character style. This chapter describes the title and paragraph markup of the HTML language, common markup in text format, and the composition structure and usage of <div> and <span> markup, and special characters in the HTML language. Using these tags tells the web browser how to format and display the text, and how to split and tag the web elements to form the text layout, text format, and beautiful and concise layout.

Related Article

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.