Last time we learned what HTML is and wrote the first HTML, today we are going to learn what HTML tags are

Through this article you will learn: 

- Where is the current knowledge in the front-end knowledge system? - What is semantic? - The general process of writing an HTML page? - Familiar with HTML tags: - How to represent headings? - How to represent paragraphs? - How to wrap lines? - How to display a picture? - How to display a hyperlink? - How to represent ordered lists? - How to represent an unordered list? - Improve efficiency: Use EMmet syntax to quickly write HTML tags - check if written HTML is normalCopy the code

Zero, where is the current knowledge in the front-end knowledge system?


What is semantic? When you think of the title, you know to use H1 ~ H6, etc., and use the appropriate tag to represent the corresponding content.

How to write an HTML page?

1. According to the design draft, make macro division of the page, such as several lines and columns, what is in the head, what is in the middle, what is at the bottom. 2. According to the division of the first step, select an appropriate layout: Table or float or position or flex or grid 3. 4. Complete the writing of THE HTML page, the browser to view the effect, do fine tuning, and then CSS beautification (later to CSS again)Copy the code

Three, familiar with HTML tags:

1. Title tag: 'H1 ~ H6' indicates.Copy the code

2. Paragraph labeling: The 'P' tag is used to indicate (paragraph).Copy the code

3. Text related labels: bold 'B' or 'strong', tilt 'em', delete line 'del' and underline 'ins'.Copy the code
    
    
     

     
  1. Newline tag:brTyping this label will wrap the line
    2. 
    

<img SRC =" imgURL "Alt =" Prompt text is displayed when image load fails "> 'Copy the code
    
    
     

     
  1. Ordered list OL > Li, unordered list ul> Li
    2. 
    

7. Hyperlinks are represented with 'a' tags, '<a href="google.com" title="a title" > Google </a> or <a href="index.html" > > flatline the index.html page </a>'Copy the code

Use emmet syntax to improve the efficiency of writing HTML

var a = 1; <div id="app"></div>
Container + TAB <div class="container"></div>


<div> <p></p> </div>


Sibling div+ul>li <div></div> <ul> </li> </li>


The superior div > ul > li ^ div can be produced to press the TAB in the < div > < ul > < li > < / li > < / ul > < div > < / div > < / div >


<div></div> </div> </div>


Group () div > (ul > li > a) + div > p can be produced to press the TAB in the < div > < ul > < li > < a href = "" > < / a > < / li > < / ul > < div > < p > < / p > < / div > < / div >


<img SRC ="" Alt ="">

Copy the code
A [hrefgoogle.com]{Google} <a href="www.goole.com"> Google </a> etc

Check whether the written HTML is canonical: at this site: w3c Markup Validation service:

The next content:

  • blocks and inline-blocks elements
  • Html5 for HTML, what new tags
  • Introduction to table elements
  • Introduction to form elements
  • Practice 1: Implement a news page
  • Field 2: Create a table
  • Actual combat 3: Realize tag navigation
  • Practice 3: Implement a login page

Summary:

You learned basic HTML elements. For more detailed usage, refer to MDN, and usually know what elements to use according to your needs.

References:

  • emmet
  • mdn html
  • w3c markup validation service

This article is formatted using MDNICE