What is an element

HTML elements refer to all the code from the start tag to the end tag.

HTML element syntax

  • HTML tags start with a start tag and end with an end tag
  • Element content is the content before the start tag and the end tag
  • Some HTML elements haveEmpty content. 如
  • Empty elements are closed in the start tag (ending at the end of the start tag). Such as
  • Most HTML elements have attributes

Element = Start tag + End tag + Content = Start tag + End tag = Start tag (end at start tag)

What HTML elements do

3-1 instructs the Web browser to write instructions about which HTML version of the page to use

Element: <DOCTYPE> DOCTYPE html>Copy the code

3-2 Define the start and end points of the document

< HTML ></ HTML > Common: < HTML lang="zh-cn"></ HTML > lang property: declaration languageCopy the code

3-3 Reference scripts, reference stylesheets, provide meta information, etc

<head> // contains all header elements <title> browser title </title> // The element that defines the browser title <base href="http://www.abc.com" /> // defines the default address for all links on the page <base <link rel="stylesheet" type="text/ CSS "href="theme. CSS" /> // link <meta name="keywords" content="HTML,ASP,PHP,SQL" /> <meta HTTP-equiv =" Charset "content=" ISO-8859-1" /> <meta http-equiv=" Expires "Content ="31 Dec 2008" <meta charset=" UTF-8 "<meta http-equiv="Refresh" content="5; <style type="text/ CSS "> h1, h2 {padding: 0; margin: 0; } </style> // Style element is used to define HTML document style information // type attribute is required <script type="text/javascript"> document.write("Hello World!" ); </script> <script SRC ="index.js"></script> // Script elements can contain script statements, and can also import external script files via the SRC attribute // Since script blocks page rendering, Unless not, it is recommended to place it after the </head> element </body>Copy the code

3-4 Describe the web page

The contents of the <body> <p>body element are displayed in the browser. </p> </body>Copy the code

 

Semantic elements

Section 4-1 elements

Definition: A section is a group of content with a topic, usually a title

<section> <h1>HTML</h1> <p>HTML is hypertext Markup language </p> </section>Copy the code

Application scenarios

  • Break down your home page into profiles, content, contact information, and so on

4-2 article element

Definition: can be read independently of the rest of the site

<article> <h1> what is HTML? </h1> <p>HTML is hypertext markup language </p> </article>Copy the code

Application scenarios

  • BBS
  • blog
  • news

4-3 header element

Definition: Specifies a header for a document or section, often used as a container for introductory content

<article> <header> <h1> What is HTML? What does </h1> <p> do? </p> </header> <p>HTML is hypertext markup language. HTML uses tag tags to describe web pages </p> </article>Copy the code

4-4 footer element

Definition: Specifies a footer for a document or section, usually containing the author of the document, copyright information, contact information, or web site registration information

<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</footer> 
Copy the code

4-5 nav element

Definition: Defines a set of navigation links, defines a large block of navigation links

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav> 
Copy the code

4 to 6 value elements

Definition: Contains some content other than the main content of the page (e.g. sidebars, advertising messages, etc.)

<body>
  <main>
    <aside>
      <a href="/html/">HTML</a> |
        <a href="/css/">CSS</a> |
        <a href="/js/">JavaScript</a> |
        <a href="/jquery/">jQuery</a>
    </aside>
  </main>
</body>
Copy the code

4 to 7 main elements

Definition: Contains the body content of a document

<body> <main> <aside> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a Href ="/jquery/"> jquery </a> </aside> </h1> </h1> <p>Google Chrome, Firefox and Internet Explorer are the most popular browsers by far. </p> <article> < H1 >Google Chrome </ H1 > < P >Google Chrome is a free, open source Web browser developed by Google and released in 2008. </p> </article> <article> < H1 >Internet Explorer browser </ H1 > <p>Internet Explorer is a free web browser developed by Microsoft and released in 1995. </p> </article> <article> < H1 >Mozilla Firefox browser </ H1 > <p>Firefox is a free, open source Web browser from Mozilla, released in 2004. </p> </article> </main> </body>Copy the code

The role of semantic elements

  • Clearly describe the meaning to browsers and developers
  • It is helpful for search engines to read the content of the page