Commonly used HTML format tags_Powernode Java Academy

1. Title

HTML defines six <h> tags: <h1></h1> to <h6></h6>, which are used for headings with different font sizes. The font size is from large to small, with <h1> being the largest and <h6> being the smallest.

Heading tag needs to pay attention to: a. The browser will automatically add blank lines before and after the title. Because the Heading tag is a block-level element, and by default, HTML will automatically add an extra blank line (<br/>) before and after the block-level element. b. The title is important to the entire page. You should use the HTML heading tag only for the title, not just to create bold or large text. Because the Heading tag is very friendly to SEO, search engines use titles to index the structure and content of your web pages, and users use titles to quickly browse your web pages, so it is important to use titles to present the document structure. You should use <h1> as the main heading (the most important), followed by <h2> (the next most important), then <h3>, and so on.

 <!--The <h> tag is used to set the title. Put important information in <h1> so that search engines will give it priority. -->
      <h1>
          China One</h1>
      <h2>
        China II</h2>
      <h3>
          China Three</h3>
      <h4>
          China Four</h4>
     <h5>
        China Five</h5>
     <h6>
       China Six

The effect is as follows, with font sizes from large to small:

2. Line break <br/>, no line break <nobr></nobr> and paragraph break <p></p>

The difference between the line break tag <br/> and the paragraph break tag <p></p> in HTML is that the line break tag <br/> is just a carriage return, while <p></p> is a paragraph break. Because the <p> tag is a block-level element, there will be relatively large spaces before and after it (<br/> is automatically added), while the <br/> tag is a line-level element, it simply wraps the line with no spaces before and after. There is a tag <nobr></nobr> which is opposite to <br/>. It means no line break and is usually used to prevent the browser from automatically wrapping program codes and other places where no line break is required.

 <!-- Line breaks and paragraph breaks: -->   
      <p>
          This is the first paragraph<br /> <!--Line break-->
          Line break tags are used<br />
          Please see the effect<br />
          Easy to understand</p>
      <p>
          This is the second paragraph</p> <!--Section, automatic line break-->
      <p>
         This is the third paragraph</p>
     <p>
     <nobr> <!--Prevent line break-->
    int i =0,j=10;
     </nobr>
     </p>

3. Horizontal line tag <hr/>

The <hr /> tag creates a horizontal rule in an HTML page. One way to do this is to use horizontal rules (the <hr> tag) to separate sections within an article. The <hr/> tag can set width and height, and these two attributes can be expressed in pixels and percentages respectively. In addition, the <hr/> tag has size (thickness), color (color) and noshade (no shadow) attributes.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
      <title></title>
  </head>
  <body>
      <hr size="5" color="#FF0000" />
      <!-- Defines the hr tag with size (thickness) of 5 and color of red -->
    <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 attribute, the possible values are left, right and center-->
     <hr width="20%" align="left" />
     <hr width="20%" align="right" />
     <hr width="20%" align="center" />
     <hr color="#FF0000" />
     <!--noshade attribute, set no shadow effect-->
     <hr noshade="noshade" />
 </body>
</html>

4. Text formatting tags

 <!--Common text format tags-->
  <center>博客园</center> displays <b>Hello, World!</center> in the center. </b>Bold, it is recommended to use the <strong> tag.
  <i>It's slanted</i> italics.
  <u>I am an underline tag</u> is underlined.
  <em>emphasis, italics</em>
  <sub>2</sub> subscript, such as: H<sub>2</sub>O
  <sup>2</sup> superscript, such as: 10<sup>2</sup> 
  <!--Setting font size can be divided into absolute font size and relative font size. The absolute font size is set through the size attribute of the <font> tag, while the relative font size is the relative value of the default font. -->
  <!--The absolute font size is a number between 1 and 7 -->
  <!--color (set color) size (1-7). -->
  <!--The face attribute is used to set the font-->
 <font></font>Font tag, <font color="red" size="7" face="隶书">red</font>

5. Preformatting Tag <pre>

<pre> Preformatting tag, keep the content of the web page displayed as it is. It can be used to display certain special content, and can also be used to display computer programming source code (for example, the source code of Blog Garden is displayed through the <pre> tag).

 <p>The pre tag displays some special content that you want to display as is:</p>
      <pre> 
      I am a good kid.
          I like this, this is a preformatted tag____
    (. \
     \ |   
      \ |___(\--/)
    __/ ( . . )
   "'._. '-.O.' Hello, I'm a kitten! 
        '-. \ "|\
           '.,,/'.,,
  (⊙_⊙)? What did you say? ? ? ?
  </pre>
 The <p>pre tag is great for displaying computer code:</p>
 <pre>
 for i = 1 to 10
      print i
 next i
 </pre>

6. <marquee></marquee> tag

The <marquee></marquee> tag pair tells the browser to move the text and images within it.

     <div>
         <!--marquee tag Some browsers support: IE, FF-->
         <!--direction attribute: specifies the direction of content movement. Possible values are left, right, up and down-->
         <!--behavior attribute: specifies the behavior of the tag, the possible values are scroll, alternate and slide-->
         <marquee direction="left" scrolldelay="" behavior="alternate">
         Hello everyone, welcome to my homepage! ......
         </marquee>
     </div>

7. Other format tag examples.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <title></title>
  </head>
  <body>
   <!--<abbr>Show abbreviation: -->
   <abbr title="British Broadcasting Corporation">
          BBC</abbr><br />
  <!-- <acronym> Displays the abbreviation of a phrase: -->
   <acronym title="World Wide Web">www</acronym><br />
   <!--<blockquote> defines a quote for a long text:-->
      <blockquote>
          <p>
              Beyond two or three days, the world's best forecasts are speculative, and beyond
              six or seven they are worthless.
          </p>
          <br />
        <!-- <q> tag defines a short quote: -->
          <q>The q label!!!</q>
      </blockquote>
  <!--<address>Address, signature, document author information, etc.:-->
      <address>
        Zhongguancun Software Park, Haidian District, Beijing, [email protected]
      </address>
  <!--The <bdo> tag uses the dir attribute to define the order in which text is displayed: -->
      <bdo dir="ltr">Power node</bdo><br /> <!--ltr: left to right, from left to right-->
      <bdo dir="rtl">Power node</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/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w.org//xhtml">
   <head>
       <title></title>
   </head>
   <body>
       <b>HTML List:</b><br />
     <hr size="5" color="#FF0000;" />
       <br />
      <!--First, unordered list (ul:unordered list)-->
      <font size="+" color="#FF" face="华文楷体">I. Unordered List:</font><br />
      .Default:<br />
      <ul>
          <li>Banana</li>
          <li>Apple</li>
          <li>Orange</li>
      </ul>
      .Use the type attribute:<br />
      <!--The value of the ul type attribute:
        disc: solid circle, circle: hollow circle, square: solid square -->
      <!--ol type attribute value:
        <ul type="I"/"a"/"A"/"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 for emphasis:<br />
      <ul type="circle">
          <li>Banana</li>
          <li type="disc">Apple</li>
          <li>Orange</li>
      </ul>
      <!--Second, ordered list (ol, ordered list)-->
    II. Ordered List:
      .Default:<br />
      <ol>
          <li>Basketball</li>
          <li>Volleyball</li>
          <li>Football</li>
      </ol>
     2. Use the type attribute:
      <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. Change the leading number of ordered list items:<br />
      <blockquote>
          a.<font color="#FFFF">start</font> attribute used alone:<br />
         <ol start="3">
              <li>Basketball</li>
              <li>Volleyball</li>
              <li>Football</li>
          </ol>
          b.<font color="#FFFF">vlaue</font> attribute used alone:<br />
          <ol>
              <li>Basketball</li>
            <li value="5">Volleyball</li>
              <li>Football</li>
          </ol>
          c. Common use of <font color="#FFFF">start, value</font> attributes:<br />
        <ol start="8">
              <li>Basketball</li>
            <li value="15">Volleyball</li>
              <li>Football</li>
          </ol>
      </blockquote>
     <font size="+1" color="#00FF00" face="花纹楷体">III. Nested Lists:</font><br />
     1. Nested unordered list in unordered list:<br />
      <ul>
          <li>Drinks</li>
          <li>Fruit<ul>
                  <li>Banana</li>
                  <li>Apple</li>
                  <li>Orange</li>
              </ul>
          </li>
          <li>Vegetables</li>
          <li>Tea</li>
      </ul>
    2. Nested ordered list in unordered list:<br />
      <ul>
          <li>Drinks</li>
          <li>Fruit<ol>
                  <li>Banana</li>
                 <li>Apple</li>
                 <li>Orange</li>
             </ol>
         </li>
         <li>Vegetables</li>
         <li>Tea</li>
     </ul>
     3. Nested ordered lists within ordered lists:<br />
     <ol>
         <li>Drinks</li>
         <li>Fruit<ol>
                 <li>Banana</li>
                 <li>Apple</li>
                 <li>Orange</li>
             </ol>
         </li>
         <li>Vegetables</li>
         <li>Tea</li>
     </ol>
     4..Nesting an unordered list in an ordered list:<br />
     <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 nesting of lists:<br />
     <ol>
         <li>Drinks</li>
         <li>Fruit<ul>
                 <li>Banana</li>
                 <li>Apple<ul>
                         <li>Made in Brazil</li>
                         <li>Made in China</li>
                     </ul>
                 </li>
                 <li>Orange</li>
             </ul>
         </li>
         <li>Vegetables</li>
         <li>Tea</li>
     </ol>
     <!--Third, definition list (dl, definition list)-->
     <font size="+1" color="#00FF00">IV. Definition list:</font><br />
     1. Definition list:<br />
     <!--
         <dl>
           <dt>First header item</dt> 
           <dd>Explanatory text for the first header item</dd>
           <dt>Second title item</dt>
           <dd>Explanatory text for the second header item</dd>
         </dl>
         Among them: <dl> is used to mark the beginning of the definition list;
               <dt> is used to identify the list items of the definition list;
               <dd> is used to identify explanatory text of list items in a definition list.
         -->
     <dl>
         <!--dt:definition term (definition term) defines the title item "Beijing" -->
         <dt>Beijing</dt>
         <!--dd:definition definition (definition of the explanation of the term) explanation of the title item "Beijing" -->
         <dd>
             China's political center
         <dt>Shanghai</dt>
         <dd>
             China's economic center
         <dt>Shenzhen</dt>
         <dd>
             A frontier city of China's reform and opening up
     </dl>
 </body>
 </html>

Many tags can be used to change the appearance of text and associate hidden meaning with it. 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 they contain has a specific meaning, context, or usage. The browser then applies formatting to the text that is consistent with that meaning, context, or usage. Note that content-based tags impart meaning, not formatting. Therefore, they are important for automated processing; the computer does not care what the document looks like.

Because font styles are specified using semantic clues, the browser can choose an appropriate display style for the user. Because styles vary from one venue to another, using content-based styles can help you ensure that your document makes sense to a wide range of readers. This is especially important in browsers designed for blind and disabled people, as their display options may be fundamentally different from our traditional text or may be very limited in some way.

The current HTML and XHTML standards do not define a format for every content-based tag; they simply specify that content-based styles must be displayed differently from ordinary text in the document. The standard doesn't even require that these content-based styles be displayed differently from each other. In actual applications, you may find that many of these tags have a very obvious relationship with traditional printing. They have similar meanings and display styles, and are displayed in the same style and font in most browsers.

There are some rules to follow when using HTML/XHTML content-based style tags, because it is very easy to simply think about how the text should be displayed without necessarily knowing what the text means. Once you start using content-based styles, your documents will be more consistent and better able to assist with automated searching and content editing. The tags are:

<abbr>
 <acronym>
 <cite>
 <code>
 <dfn>
 <em>
 <kbd>
 <samp>
 <strong>
 <var>

2. Physical style

We often use the word "intent" when discussing content-based style tags. This is because the meaning conveyed by the tag is more important than the way the browser displays the text. However, in some cases, perhaps for legal or copyright reasons, you may want text to appear in a particular way (for example, italicized or bold). In this case, you can use physical styles for the text.

While the trend in other text processing systems is to provide precise control over style and appearance, when using HTML or XHTML, you should avoid using physical tags except in rare circumstances. Whenever possible, provide contextual information to the browser and use content-based styles. Although browsers today simply display this text in italics or bold, future browsers and various document generation tools may take advantage of these content-based styles in very creative ways.

The current HTML/XHTML standard provides a total of 9 physical styles, including bold, italic, monospaced, underlined, strikethrough, larger, smaller, superscripted, and subscripted text. The tags are:

 <b>
 <big>
 <i>
 <s>
 <small>
 <strike>
 <sub>
 <sup>
 <tt>

The above are the commonly used HTML format tags introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: Solution to the cross-domain problem of SpringBoot and Vue interaction

>>: CenOS6.7 mysql 8.0.22 installation and configuration method graphic tutorial

Commonly used HTML format tags_Powernode Java Academy

js to implement collision detection

Understanding and application scenarios of enumeration types in TypeScript

Vue implements top left and right sliding navigation

How to set the width and height of html table cells

mysql-8.0.15-winx64 decompression version installation tutorial and three ways to exit

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

Detailed tutorial on how to compile and install mysql8.0.29 in CentOS8 deployment LNMP environment

MySQL5.7+ MySQL Workbench installation and configuration method graphic tutorial under MAC

Detailed tutorial on MySql installation and uninstallation

MySQL database master-slave replication and read-write separation

Recommend

How to use Vue3 to achieve a magnifying glass effect example

An example of how JavaScript can prevent duplicate network requests

The latest virtual machine VMware 14 installation tutorial

How to limit the number of concurrent connection requests in nginx

Enter the style file for the automatic search suggestion function: suggestion.css

VMware Tools installation and configuration tutorial for Ubuntu

Getting Started Guide to MySQL Sharding

JavaScript lazy loading detailed explanation

Quick understanding of Vue routing navigation guard

How to use CocosCreator for sound processing in game development

mysql zip file installation tutorial

mysql security management details

Detailed explanation of 4 common data sources in Spark SQL

How to compile and install opencv under ubuntu

JavaScript implementation of classic snake game