I've known HTML for a long time, and I've been working on it before. However, it has not formed a system and is not familiar with many elements of HTML. Another HTML study, but there are still a lot of areas left unscanned.Copy the code

Three elements of the Web

  • 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(HyperTextMarkupLanguage), a markup language used to build the basic structure and content of web pages.

  • Hypertext: Text that contains links to other text
  • Markup language: Combines text and other text-related information to reveal information about the structure of the document, such as HTML, XML, KML, Markdown, etc

HTML structure

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test site</title>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>
Copy the code

Above is a simple page, where

is the start tag,

is the end tag, Hello World! It’s the content, the whole thing is one element.

Here are some rules:

  • 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, and so on
  • HTML element tags are case insensitive
  • Elements can be nested among other elements
  • Elements can have attributes, which contain additional information about the element

: the root element, which contains the contents of the entire page : Invisible to the user, it contains keywords for search engines, page descriptions, character encoding declarations, CSS styles, etc. : This element contains content accessible to the user, including text, images, video, games, audio, etc

HTMLPage structure

<link>

<linkrel="shortcuticon"href="favicon.ico"type="image/x-icon">

Favicon for the current page

<linkrel="stylesheet"href="my-css-file.css">

Link to the stylesheet

<linkhref="fancy.css"rel="alternatestylesheet"type="text/css"title="Fancy">

Replaceable style sheets

<scripttype="text/javascript"src="javascript.js">

attribute

  • 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.

Common elements

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:<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>

Block-level elements

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

Inline block-level elements

  • Elements are arranged within a row, not on a single row
  • Supports setting width and height as well as vertical margins and borders
  • Common inline elements:<img>,<input>,<td>

semantic

Depending on the structure of the content, select the right tags to build a more maintainable code structure that developers can read and machines can parse better.

<header>

  • Present introductory information
  • It usually contains a set of introductory or navigational elements, such as a title, Logo, search box, author name, and so on
  • Can’t put<footer>,<address>Or another one<header>Elements of the internal

<nav>

  • Provide navigation links, such as menus, tables of contents, indexes, and so on, in the current document or other documents
  • Used to place some popular links, uncommon links are usually placed<footer>Put in the bottom

<article>

  • Separate documents, pages, applications, sites
  • A structure that can be assigned independently or reused, such as forum posts, news articles, blogs, and user comments

Comments, interactive components, etc

<section>

  • Groups content by subject, usually with headings
  • It usually appears in the outline of a document
  • Do not use it as a normal container, for example, to beautify fragment styles<div>A more appropriate
  • This works best if the element contains a single block of content that can be published singly<article>

<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 a sidebar, used to display ads, tips, references, etc

<footer>

  • Represents the footer of the most recent chapter
  • Usually contains information about the chapter’s author, copyright data, or document links
  • <footer>The elements in are not part of the section content and are not included in the outline

Semantically – grouping

<figure>/<figcaption>

  • <figure>Wrap content that is referenced independently: diagrams, illustrations, code, etc., usually with a title
  • <figcaption>Description/title of the chart associated with it, usually located<figure>The first or the last one

<blockquote>

  • Block-level reference elements
  • <cite>Property represents the URL of the source

<dl>/<dt>/<dd>

  • Term used to describe a set of key-value pairs
  • Typically used for metadata, term definition, and other scenarios

Semantic – text

<time>

  • Machine readable time and date
  • datetimeRepresents the date and time associated with this element. If not specified, the element will not be resolved to a date

<cite>

  • <cite>The element is usually used to refer to the work title
  • Includes citations from papers, documents, books, films, etc
Contact information of a person or organization Is used in a reference to indicate that attention is required. Code snippets Disclaimers, precautions, etc

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. The browser displays the image on the page when it cannot load (network error, blocked content, or expired link)altText in property
  • decodingDecoding mode: asynchronous, synchronous
  • loadingLazy loading

<picture>

  • Element by containing zero or more<source>Element and one<img>Element to provide versions of images for different display/device scenarios
  • mediaProperties: Render the corresponding image according to the media condition, similar to media query
  • typeProperty: MIME type, render corresponding image according to browser support

Audio and video

<video>/<audio>

  • srcProperty is required to embed the video file path
  • controlsWhether to display built-in controls of the browser. You can create custom controls
  • autoplayAuto play
  • sourceThe element represents alternative resources for the video (different formats, sharpness, try in turn if it fails to read or cannot be decoded)

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 and construction of CSSOM tree

3. Combine DOM and CSSOM into a Render tree

4. Layout calculation

5. Draw