1. HTML structure

  • An HTML document contains several HTML elements with different characteristics

  • HTML element = start tag + (End tag) + element content ==> IMG, INPUT, br, and other elements have no end tag

  • HTML element tags are case insensitive

  • Elements can be nested among other elements

  • Elements can have attributes that contain additional information about the element

  • : is placed at the front of the HTML document and will parse the rendered page according to the W3C HTML5 standard

  • < HTML > : the root element, which contains the entire page content

  • : not visible to the user, which contains, for example, search engine oriented keywords, page description, character encoding declaration, CSS style, and so on. The following shows what it contains

  • The < meta > : charset/name/HTTP - equiv

    • Define the document character encoding

      • < Meta name=”viewport” content=”width=device-width, initial =1.0, maximum-scale=1.0, User-Scalable =0″> Defines the area of the device screen used to display web pages

      • HTTP header

    • : The title of the page, which is displayed on the browser TAB

    • < link > :

      • <script type="text/javascript" src="javascript.js"

      • To solve the problem that putting a script tag in the head may affect the parsing of an HTML page, the script tag provides two attributes:

        • Defer: Download immediately, defer, meaning that the script can be executed until the DOM has been fully parsed and displayed, and is valid only for external scripts. A script with the defer property will block the DOMContentLoaded event until the script is loaded and parsed.

        • Async: downloads scripts immediately and does not interfere with other operations, such as downloading other resources or loading other scripts. It is valid only for external scripts.

  • : Contains content that can be accessed by the user, including text, images, video, games, audio, etc

Two, common elements

  1. Inline element

    1. Occupies only the space contained by the border of its corresponding label
    2. Can only hold text or other inline elements
    3. Dimensions can only be changed by modifying horizontal margins, borders, or row heights
    4. Common inline elements:< a >, < span >, < br >, < I >, < em >, < strong >, < label >, < q >, < var >, < cite >, < code >

  2. Block-level elements

    1. The entire row that occupies its parent element always starts on a new row
    2. Can hold other block elements or inline elements
    3. You can control width height, line height, margin, border and so on to change its size
    4. Common block-level elements:The < div >, < p >, < h1 > - < h6 >, < ol >, < ul >, < dl >, < table >, < address >, < blockquote >, < form >

  3. Inline block-level elements

    1. Elements are arranged within a row and do not own a row
    2. You can set the width, height, vertical margin, and border
    3. Common inline block-level elements:<img>、<input>、<td>

Third, semantic

Depending on the structure of the content, choosing the right tags builds a more maintainable code structure that developers can read and that machines can parse better

<header></header>
<section>
    <article>
        <figure>
            <img>
            <figcaption></figcaption>
        </figure>
    </article>
</section>
<footer></footer>
Copy the code
  1. block

  • <header>

    • Present introductory information

    • Usually contains a set of introductory or navigational elements such as a title, Logo, search box, author name, etc

    • Cannot be placed inside

      ,

      , or another

      element
<header>
    <h1>HTML</h1>
    <p>
        <time pubdate datetime="2021-08-15"</time>
    </p>
</header>
Copy the code

  • <nav>

    • Provide navigation links in the current document or other documents, such as menus, directories, indexes, and so on

    • This is used to place the most popular links. The less common links are usually placed in the footer at the bottom

<nav>
    <ol>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JS</a></li>
    </ol>
</nav>
Copy the code

  • <article>

    • Separate documents, pages, applications, sites

    • Independently assignable or reusable structures, such as forum posts, news articles, blogs, user-submitted comments, interactive components, etc

<article class="forecast">
    <h1>Weather forecast for Beijing</h1>
    <article class="day-forecast">
        <h2>16 August 2021</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>17 August 2021</h2>
        <p>Heavy rain.</p>
    </article>
</article>
Copy the code

  • <section>

    • Group content by topic, usually with a title

    • usually appears in the outline of a document

    • Do not use

      as a normal container, such as to beautify a fragment style, when

      is more appropriate

    • is more appropriate if the element contains a single piece of content that can be published individually.

<h1>Choosing an Apple</h1> <section> <h2>Introduction</h2> <p> This document provides a guide to help with the important  task of choosing the correct Apple. </p> </section> <section> <h2>Criteria</h2> <p> There are many different criteria to be considered when choosing an Apple - size, color, firmness, sweetness,tartness... </p> </section>Copy the code

  • <aside>

    • Represents a section that has little to do with the rest of the page’s content, or that does not affect the overall content when taken apart

    • Usually used in the sidebar to display ads, tips, quotes, etc

<p> I'm going to Bytedance Youth camp today... </p> </p> </p>Copy the code

  • <footer>

    • Represents the footer of the most recent chapter

    • Usually contains information about the author of the chapter, copyright data, or a link to the document

    • Elements within the footer are not part of the section and are not included in the outline

<footer>
    <p>Posted by: ByteFE</p>
    <p>
        <time pubdate datetime="2021-08-15"></time>
    </p>
</footer>
Copy the code
  1. grouping

  • <figure>/<figcaption>

    • Packages independently referenced content: charts, illustrations, code, etc., usually with a title

    • < FigCaption > The caption/title of the diagram associated with it, usually first or last in 

<figure> <img src="" alt="A robotic.." > <figcaption>MDN Logo</figcaption> </figure>Copy the code

  • <blockquote>

    • Block-level reference elements

    • The cite attribute represents the URL of the source

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can</p>
    </blockquote>
    <figcaption>Aldous Huxley,<cite>Brave New World</cite></figcaption>
</figure>
Copy the code

  • <dl>/<dt>/<dd>

    • Used to describe a set of key – value pairs

    • Usually used in metadata, term definition, and other scenarios

    • Dt is usually used to represent a Key or a Key; Dd indicates the description corresponding to the keyword

<dl>
    <dt>Firefox</dt>
    <dd>A free</dd>
</dl>
Copy the code
  1. The text

  • <cite>

    • The element is usually used to refer to the title of a work

    • Include citations of papers, documents, books, movies, etc

  • <time>

    • Machine readable time and date

    • Datetime indicates the date and time associated with this element. If not specified, the element will not be resolved to a date

<p>
    The concert took place on<time datetime="2021-05-15 19:00">May 15</time>.
</p>
Copy the code
  • <address>Contact information for a person or organization
  • <mark>Used in references to indicate that attention is required
  • <code>Code snippet
  • <small>Free statement, notes, etc

Four, multimedia elements

  1. The picture

    1. <img>

      • The SRC attribute is required to embed the image in the file path

      • The Alt attribute contains a text description of the image and is optional. When the image fails to load, the browser displays the text in the Alt attribute on the page

      • Decoding modes: asynchronous and synchronous

      • Loading a lazy loading

    2. <picture>

      • Theelement provides versions of images for different display/device scenarios by containing zero or moreelements and one element

      • Media attribute in: render the corresponding image according to the media conditions, similar to media query

      • The TYPE attribute in: the MIME type that renders the corresponding image according to what the browser supports

  1. Audio and video

<video>/<audio>

  • The SRC attribute is required to embed the video file path

  • Controls Specifies whether to display browser controls. You can create custom controls

  • Autoplay Indicates whether toplay autoplay

  • The source element represents an alternative resource for the video

<video controls>
    <source src="/flower.webm" type="video/webm">
</video>
<audio controls src="/xxx.mp3">
    Your browser does not support the <code>audio</code> element.
</audio>
<video controls src="/friday.mp4">
    <track default kind="captions" srclang="en" src="/friday.vtt" />
    Sorry,...
</video>
Copy the code

Five, HTML parsing

DOM (Document Object Model) : A structured representation of nodes and a way for programs to access that structure, linking Web pages to scripting languages

  1. Build a DOM tree

  2. Style calculation to build the CSSOM tree

  3. Combine DOM and CSSOM into a Render tree

  4. Layout calculation

  5. draw