HTML based

Three elements of web page

  • HTML: Basic structure of a web page
  • CSS: Display effect of a web page
  • JS: Function and behavior of web pages

Introduction of HTML

HTML (HyperText Markup Language) is a Markup Language used to build the basic structure and content of a web page

Hypertext: Text that contains links to other text

Markup language: Combines text and other text-related information to reveal the structure of the document, such as HTML, XML, KML, Markdown, and so on

HTML Document structure

<! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title>My test site</title>
    </head>
    <body>
        <p class="editor-note">My cat has a bad temper</p>
        <img src="cat.png" alt="Cat photos." />
    </body>
</html>
Copy the code
  • HTML documents contain multiple HTML elements that have different characteristics
  • HTML element = start tag + End tag + element content
  • Some elements have only one tag, such as img, input, br, etc
  • HTML element tags are case insensitive
  • Elements can be nested within other tags
  • Elements can have attributes, which contain additional information about the element

<! < HTML >: the root element, which contains the content of the entire page <head> : Invisible to the user, including keywords for search engines, page descriptions, character encoding declarations, CSS styles <body> : This element contains content accessible to the user, including text, images, video, games, audio, etc

<head>

meta : charset / name / http-equiv

<meta Charset =” UTF-8 “> Defines document character encoding

<meta name=”keywords” content=”HTML”

<meta name=”description” content=”HTML basics”

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1.0″> Defines the area of the device screen used to display web pages

< meta HTTP – equiv = “expires” content = “31 Dec 2021” > HTTP headers custom meta, provides some information for that specific website You may refer to the details wiki.whatwg.org/wiki/MetaEx…

: The title of the page, displayed on the browser TAB

The < style > : CSS styles

<link>:

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”> The icon of the current page

<link rel=”stylesheet” href=”my-css-file.css”> Link to the stylesheet

<link href=”fancy. CSS “rel=”alternate stylesheet” tyle=”text/ CSS” title=” fancy”

IO /css-example… mdn.github. Only supported in certain browsers such as Firefox

<script> Executable script

<script type=”text/javascript” src=”javascript.js”>

Properties:

Defer: Download immediately and defer execution, which means that the script can be executed until the DOM is fully parsed and displayed, only for external scripts. Scripts with the defer attribute block the DOMContentLoaded event until the script is loaded and parsed.

Async: downloads scripts immediately without interfering with other operations, such as downloading other resources or loading other scripts. This mode only applies to external scripts

<body>

Inline element

  • Occupies only the space contained in the border of its corresponding label
  • Only text or other inline elements can be contained
  • The size can only be changed by modifying the horizontal margin, border, or line height
  • Common inline elements:
    1. : hyperlinks
    2. < span > :
    3. < br > : a newline
    4. < I > :
    5. < em > :
    6. < strong > : bold
    7. < label > : the tag
    8. < q > :
    9. The < var > :
    10. : reference
    11. : code snippet

Block-level elements

  • The entire line that occupies its parent always starts on a new line
  • Can hold other block elements or inline elements
  • You can change the size by controlling width, line height, margin, border, and so on
  • Common block-level elements:
    1. <div>
    2. <p>
    3. <h1>-<h6>
    4. <ol>
    5. <ul>
    6. <dl>
    7. <table>
    8. <address>
    9. <blockquote>
    10. <form>

Inline block-level elements

  • Elements are arranged within a row, not on a single row
  • Supports wide height and vertical margin borders
  • Common inline elements:
    1. <img>
    2. <input>
    3. <td>

Semantic tag

According to the structure of the content, choose the appropriate tags to build a more maintainable code structure that is easy for developers to read and better for machines to parse.

Semantic tags are not applicable

<div class="header"></div>
<div class="section">
    <diy class="article">
        <div class="figure">
            <img>
        	<div class="figcapt ion"></div>
        </div>
    </div
</div>
<div class="footer"></div>
Copy the code

Use semantic tags to express

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

Semantic – block

<header>

  • Present introductory information
  • Usually contains a set of introductory or navigational elements such as title, Logo, search box, author name, etc
  • It cannot be placed inside a footer, address, or another header element

Example:

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

<nav>

  • Provide navigation links, such as menus, tables of contents, indexes, etc. in the current document or other documents
  • It is used to place popular links, and less frequently used links are placed at the bottom of the footer

Example:

<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

Example:

<article>
    <h1>Weather forecast for Beijing</h1>
    <article>
        <h2>15 August 2021</h2>
        <p>Rain</p>
    </article>
    <article>
        <h2>16 August 2021</h2>
        <p>Periods of rain</p>
    </article>
    <article>
        <h2>17 August 2021</h2>
        <p>Heavy rain</p>
    </article>
</article>
Copy the code

<section>

  • Groups content by subject, usually with headings
  • Sections usually appear in the outline of a document
  • Do not use sections as normal containers, such as for styling page fragments. Dic is more appropriate
  • An article is more appropriate if the element contains a single block of content that can be published individually

Example:

<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,tertness...</p>
</section>
Copy the code

<aside>

  • Represents a section that has little to do with the rest of the page, or that does not affect the overall content
  • Usually placed in the sidebar for displaying ads, tips, references, etc

Example:

<p>I'm going to bytedance youth camp today</p>
<aside>
    <h4>The teens</h4>
    <p>The Youth Training camp is a series of technical training and talent selection program initiated by bytedance's technical team</p>
</aside>
Copy the code

<footer>

  • Represents the footer of the most recent chapter
  • It usually contains information about the author of the chapter, copyright data, or document links
  • The elements in the footer are not part of the section and are not included in the outline

Example:

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

The case for using semantic tags

Semantically – grouping

<figure>/<figcaption>

  • Wraps content that is referenced independently, ICONS, illustrations, code, etc., usually with a title
  • The caption of the diagram associated with it, usually located first or last in

Example:

<figure>
    <img src="cat.jpeg" alt="a cat">
    <figcaption>Cat Picture</figcaption>
</figure>
Copy the code

<blockquote>

  • Block-level reference elements
  • The cite attribute represents the URL of the source

Example:

<blockquote cite="http://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly they'll go through anything</p>
</blockquote>
Copy the code

<dl>/<dt>/<dd>

  • Used to describe key-value pairs
  • Typically used for metadata, term definition, and other scenarios

Example:

<dl>
    <dt>Firefox</dt>
    <dd>
        A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
    </dd>
</dl>
Copy the code

<cite>

  • The element is usually used to refer to the title of the work
  • Includes citations from papers, documents, books, films, 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><time pubdate datetime="2021-08-15"></time></p>
Copy the code

<address>

Contact information for a person or organization

<mark>

The use of representations in references requires caution

<code>

Code snippet

<small>

Disclaimer and notes

Multimedia elements

The picture

<img>

  • The SRC attribute is required to embed the file path of the image
  • The Alt attribute contains an optional text description of the image. The screen reader reads these descriptions to the user who needs to use the reader to let them know what the image means. When the image fails to load, the browser displays text with the Alt attribute on the page.
  • Decoding mode: asynchronous and synchronous
  • Loading a lazy loading

Example:

<img src="smiley.gif" alt="Smiley face">
Copy the code

<picture>

  • Element provides versions of images for different display/device scenarios by containing zero or moreelements and a element
  • Media properties: Render corresponding images according to media conditions, similar to media query
  • Type property: MIME type, render corresponding image according to browser support

Example:

<picture>
    <source media="(min-width:600px)" srcset="mdn-logo-wide.png">
    <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

<picture>
    <source srcset="xxx.webp" type="image/webp">
    <img src="xxx.jpg" decoding="async" loading="lazy">
</picture>
Copy the code

Audio and video

<video>/<audio>

  • SRC: indicates the path of the embedded video file
  • Controls Specifies whether to display built-in controls of the browser. You can create custom controls
  • Autoplay Specifies whether toplay automatically
  • The source element represents alternative resources for the video (different formats, sharpness, read failure, or undecoded can be tried in turn)

Example:

<video controls>
    <source src="/flower.webm" type="video/webm">
    <source src="/flower.mp4" type="video/mp4">
    Sorry,your browser doesn't support embedded videos.
</video>

<audio controls src="xxx.mp3">
    your browser does not support the <code> audio </code> element.
</audio>

<video src="friday.mp4">
    <! -- Subtitle file -->
    <track default kind="captions" srclang="en" src="friday.vtt"/>
    sorry ,your browser does not support embedded video.
</video>
Copy the code

HTML parsing

DOM(Document Object Model) : Represents nodes structurally and defines a way for programs to access this structure, linking Web pages to scripting languages

  1. Build a DOM tree
  2. Style calculation, build CSSOM tree
  3. Combine DOM and CSSOM into a Render tree
  4. Layout calculation
  5. draw