1. HTML text structure

Browsers often add different styles to their text elements to distinguish them from plain text. For example, the text in the EM and CITE elements is italic. Another example is the code element, which is used to format code in a script or program. By default, the text in this element is in a uniform font. The way the content appears is independent of the tags it uses. So you shouldn’t use EM or CITE just to make text italic, it’s CSS’s job to add styles. Instead, choose HTML elements that describe the content.

  1. Add a paragraph: To start a new paragraph on a web page, use the P element. CSS allows you to add styles to paragraphs, including fonts, size, colors, and so on. As well as control of inline spacing, paragraph text alignment, etc.)

     <p> Text </p>
Copy the code

  2. Specify a detail: The small element represents a side note like a detail, usually a small piece of text.

    <p> HTML <small> HyperText Markup Language </small> </p>
Copy the code

3. Marking importance and emphasizing text: The strong element indicates the importance of the content, while the EM element indicates the emphasis of the content.

   <p> <strong> Warning:Do not approach the ... <em>
     under any... </em> </strong> just because... </p>
Copy the code

Browsers typically display strong text in bold and EM text in italic. You can use CSS to make any text bold or italic, and you can override the browser’s default display style for elements such as Strong and EM.

4. Create a diagram: A diagram can be a diagram, a photo, a graphic, an illustration, a code snippet, and other similar standalone content. By introducing the figure and the FigCaption, the Figcaption is the title of the figure.

[insert content] <img SRC = "Reveue "width = "180" height = "143" Alt = "Reveue" chart:Clothing 42%,Toys 36%, Food 22%" /> </figure>Copy the code

The FigCaption element is not required, but to include it, it must be the first or last embedded in the Figure element, and there can only be one. Cite: Use the cite element to indicate a reference or reference to a source of content. It defaults to italics (not to cite people)

 <p> he Listend to <cite> Abbey Road </cite> </p>
Copy the code

6. Quoted text: There are two special elements to mark the quoted text. The blockquote element represents a separate quote, which is displayed on a new line by default. The q element is used for short references, such as a quote within a sentence. The q element should be avoided due to its browser problems and used in quotes instead.

<blockquote> text... </blockquote> The browser automatically quotes the text in the Q element. <p> And then she said,<q lang ="" > Have you read... </q> </p>Copy the code

7. Specify time: Use the time element to mark a time, date, or period. Enter datetime=”time” to specify the date in any format you wish.

<time> 16:20 </time> <time> 2021-07-24 </time> <time datetime= "2021-07-24"> Ochtober 24,2021 </time>Copy the code

8. Explain abbreviations: Use the ABBR element to mark abbreviations and explain their meaning. (Usually the most direct way to interpret an abbreviation is to provide the full name of the abbreviation using parentheses.)

<p> The <abbr title = "Notional Football league"> NFL </abbr> </p>
<p> But,that's ... <abbr> MLB </abbr> (Major league Baseball) ... </p>
Copy the code

9. Define terms: When defining terms in HTML, the DFN element is used to distinguish them semantically. The first time a term is defined, it is usually added to distinguish it from other text formats, and the subsequent use of terms is no longer required to use DFN to mark them up. (The default is italic)

  <p> The contesttant ... <dfn> pleonasm </dfn> </p>
Copy the code

10. Create superscripts and subscripts: Letters and numbers that are slightly higher or lower than the body text are called superscripts and subscripts, respectively. You can use the sub element to create subscripts and the sup element to create superscripts. Superscript and subscript characters slightly disrupt the uniform spacing between lines, but you can fix this using CSS.

<p> ... <a href = "#footnote-1" title = "REad footnote 1"> 
    Text   <sub> 1 </sub> </a> </p>
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
    Text <sup> 1 </sup> </a> </p>
Copy the code

11. Add author contact information: The Address element is used to assign author, person, or organization contact information associated with an HTML page or section of the page, usually at the bottom of the page or in the relevant section.

 <footer role = "contentinfo">
  <p> <small> &copy; 2021 The Paper of ... </small> </p>
 <address>
  Hava a question or ... <a href = "site-feedback.html"> Contact our </a>
  </address>		
</footer>
Copy the code

12. Annotate edits and text that is no longer accurate: Sometimes it may be necessary to highlight edits made to a page after a previous version, or to mark text that is no longer accurate and no longer relevant. There are two types of elements that are used to annotate editing: Ins elements that represent added content and DEL elements that mark removed content.

  <li> <del> desks </del> </li>
  <li> <ins> bicycle </ins> </li>
  
Copy the code

It is common to strikeout deleted text and underline inserted text. Tags text that is no longer accurate or relevant

  <li> <s> 5 p.m </s> SOLD </li>
  
Copy the code

13. Tag code: If your content contains a code example or file name, use the code element.

<p> The <code> showPhoto() </code> ... <code> &lt ; ul id = "thumbanil" &gt; </code> list </p>Copy the code

14. Use preformatted text: Normally browsers compress all the extra carriage returns and whitespace and wrap it according to the window size. Preformatted text can keep the inherent newlines and whitespace. The pre element.

<pre>
 <code>
  abbr[title] {
    border-boottom: 1px dotted #000;
  }
</code>
Copy the code

15. Highlight text: Like a highlighter in text! HTML5 is implemented with the new Mark element to draw the reader’s attention to a particular piece of text. Browsers with native support will default to a yellow background for the element text.

<p> GSL is <mark> YYDS! </mark>       
Copy the code

16. Create a newline: Use the BR element (the empty element) when we want to manually force a newline to the text.

<p> 123 <br />
    456 <br />
</p>
Copy the code

17. Create a span: Like div, the span element has no semantics. The difference is that span is only suitable for enclosing word or phrase content, while div is suitable for containing block-level content.

 <p> Gaudi's work was essentially useful.
 <span lang ="es"> La Casa Mila </span> is an ...
 </p>
Copy the code

18. Other elements:

U element: Used to underline text.

WBR element: represents a newline. Let the browser know where to wrap lines as needed (there are cross-version issues).

Ruby elements: A sidenote tag is an idiomatic symbol often used to indicate the pronunciation of obscure words.

Bdi and BDO elements: If some pages have a mix of left-to-right characters (such as Latin characters) and right-to-left characters (such as Arabic), the BDI and BDO elements may be used.

Meter element: The meter element represents the value of a fraction or the measurement of a known range.

  <p> Project completion status: <meter value="0.60">80% completed </meter> </p>
Copy the code

The progress element: represents the progress of completion of a task and can be used to represent a progress bar. Cannot be used together with Meter.

<p> Current progress: <progress max="100" value="30"> 30% saved </progress> </p>
Copy the code

Two, HTML pictures

To insert an image on the page: enter <img SRC =image.url” />

<img src="xxx.jpg" alt="" />        
Copy the code

To provide alternative text: In the img tag, after the SRC attribute and value, type Alt =””; Enter the text that should appear if the image is not displayed for some reason. Specify the size of the image: in the img tag, enter width=”x”, heigth=”y” after the SRC attribute; Specify x and y in pixels.

HTML links

Create a link to another page:

<a href=" http://www.baidu.com"> </a>Copy the code

Create an anchor and link to an anchor: Usually activating a link takes the user to the top of the corresponding page. If you want the user to jump to a specific area of the page, you can create an anchor and refer to it in the link.

1. Create an anchor: Enter id=” anchors -name”, where name is the text used internally to identify this part of the page.

<a href=”#”anchor-name>, where anchor-name is the value of the target ID attribute.

3. Enter the label text (with an underlined blue font by default), which, when activated by the user, takes the user to the area text referenced in step (1).

` `` 
         
      Creating and Linking to Anchors
Frequently Asked Questions (FAQ)
 
        
Can an id have more than one word? 
 
       
Yes, your ids can have more than one word as long as there are no spaces. Separate each word with a dash instead.
 
       
Can visitors bookmark anchor links? 
 
       
Yes, they can! And when they visit that link, the browser will jump down to the anchor as expected. Visitors can share the link with others, too, so all the more reason to choose meaningful anchor names.
 
       
My anchor link isn't working. What am  I doing wrong? 
 
       
The problem could be a few things. First, double-check that you added an id (without "#") to the element your link should point to. Also, be sure that the anchor in your link is preceded by "#" and that it matches the anchor id.
 
       
How do I link to a specific part of someone else's webpage? 
 
       
Although you obviously can't add anchors to other people's pages, you can take advantage of the ones that they have already created. View the source code of their webpage to see if they've included an id on the part of the page you want to link to. (For help viewing source code, consult "The Inspiration of Others" in Chapter 2.) Then create a link that includes the anchor.
 
      
  The < / HTML >,Copy the code