HTML defines <H1> </H1> to <H6> </H6> six <H> tags, which are used for the title (heading) of different size fonts, respectively. The font is from large to small, <H1> the largest, and <H6> the smallest.
Heading labels need to note: a. Browser will automatically add an empty line before and after the title. Because the Heading label is a block -level element, by default, HTML will automatically add an additional empty line (<br/>) before and after block -level elements. b. The title is very important for the entire page. The HTML Heading tag should be used only for the title, instead of using the title just to generate a thick or large text. Because the Heading tag is very friendly to SEO, search engines use the title and content compilation index using the title of your website, and users can quickly browse your web pages through the title, so it is important to present the document structure with the title. <H1> should be used as the main title (most important), followed by <H2> (secondary), and then <H3>, and so on.
<!-<H> Tags are settings. Putting important information in <H1>, search engines will give priority to searching-> <H1> China I </H1> <H2> China II </H2> <h3> China Three </H3> <H4> China Four </H4> <H5> China Five </H5> <H6> China 6 </h6>
The effect is as shown below, the font size is from large to small:
2. Change <br/>, do not change <nobr> </nobr> and segments <p> </p>Regarding the difference between changing labels in HTML <br/> and segmented labels <p> </p> is that the trading label <br/> is just Enter, <p> </p> is segment. Because the <p> label is a block -level element, it will have a relatively large blank before and after (automatic adding <br/>), and the label is a row element. It is just a simple change, without gaps before and after. There is a label <br/> label <nobr> </nobr>, which means that it is not changed and is usually used to prevent the browser from automatically changed the line where the program code does not need to be changed.
<!-Change and segments:-> <p> This is the first <br /> <! --- change-> use the change label <br /> Please see the effect <br /> It is easy to understand </p> <p> This is the second paragraph </p> <!-divide -Stidal change-> int i = 0, j = 10; </nobr> </p>3. Horizontal tag <hR/>
<hr /> Create a horizontal line on the html page. It is a way to use the horizontal line (<HR> tag) to separate the sections in the article. The <hr/> tags can set width width and high height, and these two attributes have pixels and percentage exponents, respectively. In addition, the <hr/> tags include the attributes of SIZE (thickness), color (color), and noShade (shadowless).
<! Doctype HTML PUBLIC- // W3C // DTD XHTML 1.0 Transitional // EN Http://www.w3.org/tr/xhtml1/dtdddddml1-transitationAl.dtd> <html = http: // www. W3.org/1999/xhtml> <head> <Title> </Title> </Head> <body> <hr size = 5 color =#ff0000/> <! The red HR label-> <hr width = 60 /> <!-Width attribute is 60px-> <hr width = 60% /> <!-width is 60 %-> <hr size = 10 /<!-size is 10px-> <hr size = 10% /> <!-size is 10 %-> <!-Align attributes, with the values of Left, Right, and Center ---, respectively > <hr width = 20% align = left /> <hr width = 20% align = right /> <hr width = 20% align = center /> <hr color =#ff0000 /> <!-noShade attribute, settings No shadow effect-> <hr noShade = noShade/> </body> </html>4. Text formatting tag
<!-Common text format labels-> <Center> Blog Park </center> Display <b> Hello, World! </b> thick body, recommended <strong> tags. <i> Clamp </i> Candid body. <u> I am a downward line label </u> with the line. <em> Emphasize that the oblique body </em> <sub> 2 </sub> is settled, such as: h <sub> 2 </sub> o <sp> 2 </sub> 2 </sub> <!-Set the size of the font can be divided into absolute font size and relative font size. It is absolutely set through the SIZE attribute of the <font> tag, while the relative font size is the relative value of the default font-> < !-The value of the absolute font is the value of the size of 1-7-> <!-Color (set the color) size (1-7). -> <!-FACE attributes are used to set fonts-> <font> </font> font label, <font color = red size = 7 face = Lishu> Red </font>5. Pre -format label <pre>
<pre> pre -formatted label, keep the content of the webpage display. It can be used for some special content display, or it can also be used to display the source code of computer programming (such as the source code of the blog garden is displayed by the <PRE> tag).
<p> Pre label display some special hopes of original display: < / p> <pre> I am a good boy, I like it ah ah ah ah, this is a pre -format tag ____ (. / / | / / / / | ___ (/-/) __/ (..) ._. '--.O.' Hello, I am a kitten! ⊙_) What do you say?6. <Marquee> </Marquee> label
<Marquee> </Marquee> Tags to tell the browser to show the text and images of them.
<div> <!-Marquee label some browsers support: IE, FF-> <!-Direction attributes: the movement direction of the specified content, the value of the value is left, right, up, and down-> <!- -Behavior attribute: Specify the behavior of the label, the value of the value is scroll, alternate, and slide-> <marquee direction = left scrollay = behavior = alternate> Hello everyone, please come to my homepage! ...... </marquee> </div>7. Other format labels.
<! Doctype HTML PUBLIC- // W3C // DTD XHTML 1.0 Transitional // EN Http://www.w3.org/tr/xhtml1/dtdddddml1-transitationAl.dtd> <html = http: // www. w3.org/1999/xhtml> <head> <Title> </Title> </Head> <body> <!-<AbBr> Display abbreviation !-<cronym> Show the abbreviation of a phrase:-> <ceronym <!-<blockquote> Define the references of long text:-> <blockQuote> <p> Beyond Two or Three Days, The World's Best ForeCasts Are Speculaatic, and Beyond Six or Seven They Are Worthless. </P> <! </blockquote> <!-<address> address, signature, document author information, etc. The order of the text display by the label through the DIR attribute:-> <bdo Dir = LTR> Power Node < /bdo> <!-- LTR: LEFT to Right, from left to right-> <bdo Dirr = RTL> Power Nodes </BDO> <br/> <!-RTL: Right to Left, from right to left-> </body> </html>2. HTML list
<! Doctype HTML PUBLIC- // W3C // DTD XHTML 1.0 Transitional // EN Http://www.w3.org/tr/xhtml1/dtdddddml1-transitationAl.dtd> <html = http: // www. w.org/xhtml> <head> <Title> </Title> </Head> <body> <b> HTML List: </b> <br/> <hr size = 5 color =#ff0000;/> <br /> <!-First, the sequence list (Ul: Unordered List)-> <font size =+ color =#ff face = Chinese Kaita> i. > <br/>. Default: <br/> <ul> <li> Banana </li> <li> Apple </li> <li> Orange </li> </ul>. /<!-Ul Type attribute value: DISC: solid circle, circle: hollow, Square: solid square /1> -> <ul Type = Circle> <li> Banana </li> <li> Apple </li> <li> Orange </li> </ul> <ul type = square> <li> Banana </li> <li> Apple </li> <li> Orange </li> </ul> 3. Mixed use of attribute values, emphasizing the role: <br/> <ul type = circle> <li> Banana </li> <li Type = DISC> Apple </li> <li> Orange </li> </ul> <!-Second, an orderly list (OL, OrderEd List)-> <font size = +1 color =#00FF00 FACE = Chinese Kaita> II. Ordering list: < /font> <br />. By default: <br /> <li> Basketball < /li> <li> Volleyball </li> <li> Football </li> </ol> 2. Use Type attributes: <la/> <ol type = i> <li> Basketball </li> <li> Volleyball </li> < li> Football </li> </ol> <ol type = a> <li> Basketball </li> <li> Volleyball </li> <li> Football </li> </ol> 3. The front number of the list item: <br /> <blockquote> a. <Font color =#ffff> start < /font> Loan use: <br /> <ol start = 3> <li> basketball < /li> << /li> < li> Volleyball </li> <li> Football </li> </ol> B. <font color =#ffff> vlaue </font> Practice separately: <br/> <om> <li> basketball </</ li> <li value = 5> Volleyball </li> <li> Football </li> </ol> C. <font color =#ffff> start, value </font> joint use: <br/> <ol Start = 8> <li> Basketball </li> <li value = 15> volleyball </li> <li> Football </li> </ol> </blockquote> <font size =+1 color =# 00FF00 FACE = patterns'> III. Nested lists: < /font> <br /> 1. In the sequence list, nationless list: <br /> <ul> <li> Drinks < /li < /li < /li < /li > <li> Fruit <ul> <li> Banana </li> <li> Apple </li> <li> Orange </li> </li> <li> Vegetable </li> <li > Tea </li> </ul> 2. Embedded serial list in the non -serial list: <br/> <ul> <li> Drinks </li> <li> Fruit <ol> <li> Banana </ li> <li> Apple </li> <li> Orange </li> </ol> </li> <li> Vegetable </li> <li> Tea </li> </ul> 3. Order In the list, the sequence list is set: <br/> <ol> <li> Beverage </li> <li> Fruit <OL> <li> Banana </li> <li> Apple </li> <li> Orange </li> </ol> </li> <li> Vegetable </li> <li> Tea </li> </ol> 4.. ol> <li> Drinks </li> <li> Fruit <ul> <li> Banana </li> <li> Apple </li> <li> Orange </li> </ul> </li> < li> Vegetables </li> <li> Tea </li> </ol> 5. Multi -level nests of the list: <la/> <li> Beverage </li> <li> Fruit <ul> <li> Banana </li> <li> Apple <ul> <li> It is produced in Brazil </li> <li> It is produced in China </li> </ul> </li> <li> Orange </li </li > </ul> </li> <li> Vegetable </li> <li> Tea </li> </ol> <!-Third, define list (DL, DEFINITIN LIST)-> <font SIZE =+1 color =#00FF00> IV. Definition list: < /font> <br /> 1. Definition list: <br /> <!- <dl> <d> the first title item < /dt> < /dt> < /dt> < /dt> < /dt> DD> Interpretation of the first title item </dd> <DT> The second title item </dt> <DD> Interpretation of the second title item </dd> </dl> Among them : <Dl> to identify the beginning of the list; <DT> to identify the list items of the definition list; <dd> to identify the interpretation text of the table item in the list item. -> <dl> <!-DT: DEFINITION TERM (Definition Term) Define the title of Beijing-> <DT> Beijing </DT> <!-DD: DEFINITINITION Explanation of Beijing's title-> <DD> Political Center in China </dd> <dt> Shanghai </dt> <d> China Economic Center </dd> <dt> Shenzhen </dt> <DD > The forefront of China's reform and opening up </dd> </dl> </body> </html>
Many labels can be used to change the appearance of the text and associate their hidden meaning for the text. In general, these tags can be divided into two categories: content-based style and Physical style.
1. Content-based style
Content -based style tags tell the browser that the text it contains has a specific meaning, context or usage. Then the browser will apply the format of the meaning, context or usage to text. Note that the content of the content -based label gives the meaning, not formatting. Therefore, they are very important for automatic processing; computers do not care about the appearance of the document.
Because the font style is specified by semantic clues, the browser can choose a suitable display style for users. Because of the various styles of different locations, using content -based styles can help you ensure that your documentation is meaningful to readers in a wide range. This is particularly important on the browser used by those blind and disabled, because their display options may be fundamentally different from our traditional text, or they have very large limitations in some aspects.
The current HTML and XHTML standards do not define a format for each content -based label; they only stipulate that they must display the content -based style in different ways from ordinary texts in the document. The standards do not even require these content -based styles to be displayed in different ways. In practical applications, you may find that many such labels have a very obvious relationship with traditional printing. They have similar meanings and display styles, and they are displayed in the same style and fonts in most browsers.
When using HTML/XHTML -based style tags, you must follow some rules, because simply thinking about how text should be displayed, and it is very easy to know what the meaning of these texts is. Once you start using content -based styles, the document will be more consistent and can better help execute automatic search and content editing. These tags are:
<ABBR> <Cronym> <CITE> <Code> <DFN> <em> <kbd> <SAMP> <STRONG> <VAR>
2. Physical style
When discussing content -based style labels, we often use the word intent. This is because the meaning conveyed by the label is more important than the browser displaying text. However, in some cases, it may be considered for reasons for legitimacy or copyright. You hope the text is displayed in some special way (such as oblique or bold). In this case, you can use physical styles for text.
Although the trend of other text processing systems is to accurately control styles and appearance, when using HTML or XHTML, physical labels should be avoided unless there are very few cases. We should provide context information to the browser as much as possible and use content -based styles. Although the browser is now displaying these texts by oblique or thick -body characters, the future browser and various document generation tools may use these content -based styles in a very creative way.
The current HTML/XHTML standards provide a total of 9 physical styles, including BOLD, ITALIC, Monospaced, UnderLINED, Strikethrough, LARGER), and narrowing. Smaller), SuperScript and Subscripted text. These tags are:
<b> <big> <i> <s> <small>
The above is the common format label introduced by the editor to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!