HTML(HyperText MarkupLanguage), used to build web pages
Hypertext: Text that contains links to other text
Markup language: Combines text with other text-related information
Development over
Berners-lee proposed an Internet-based hypertext system in 1989
In 1993, IETF(Internet Engineering Task Force) issued the first HTML proposal, from which the first version of HTML language was born
HTML 2.0 was released in 1995 after several drafts, including form-based file uploads, tables, internationalization, and more
In 1994, the W3C was formed to take over the standardization of HTML, releasing HTML 3.2 in 1997
Many browser-specific element types and attributes were adopted in the subsequent release of HTML4.0
HTML5 was released as a W3C recommendation in 2014
HTML structure
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
HTML page structure
<! DOCTYPE HTML > : placed at the top of the HTML document, this will parse the rendered page according to the W3C HTML.5 standard
< HTML >: The root element that contains the content of the entire page
<head> : not visible to the user, contains, for example, search engine oriented keywords, page descriptions, character encoding declarations, CSS styles, etc
<body>: This element contains content accessible to the user, including text, images, video, games, audio, etc
tags: 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=0″> Defines the area of the device screen used to display web pages
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
The commonly used 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:
,
,
–
, < 0L >,
, < DL >,
,
,
,
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: , , < 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.
block
<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
Cannot be placed inside a
<nav>
Provide navigation links, such as menus, tables of contents, indexes, and so on, 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
<article>
Separate documents, pages, applications, sites
Independently assignable or reusable structures, such as forum posts, news articles, blogs, user-submitted comments, interactive components, and so on
<section>
To group content by topic, usually there is a heading <section> which is usually found in the outline of the document. Do not use <section> as a normal container, for example, to beautify the fragment style. It is more appropriate to use <div> if the element contains a single block of content, you can publish it individually, <article> is more appropriate
<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
The elements in the footer are not part of the section and are not included in the outline
grouping
<figure>/ <figcaption>
wraps things that are individually referenced: diagrams, illustrations, code, etc., usually with a title
The caption of the diagram associated with it, usually located first or last in the
<blockquote>
Block-level reference elements
The cite attribute 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
The text
<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
<address>
Contact information for a person or organization
<mark>
Used in a reference to indicate a need for attention
<code>
Code snippet
<small>
Disclaimer, notes, 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. When the image fails to load (network error, blocked content, or expired link), the browser displays the text in the Alt attribute on the page
Decoding methods: asynchronous and synchronous
Loading a lazy loading
<picture>
Element provides versions of images for different display/device scenarios by containing zero or moreelements and a element
Media property: Render the corresponding image according to the media condition, similar to media query
Type property: MIME type, render corresponding image according to browser support
Audio and video
<video> / <audio>
The SRC attribute is required to embed the video file path
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, try in turn if it fails to read or cannot be decoded)
THML parsing
DOM (Document Object Model) : Represents nodes structurally and defines a way for programs to access this structure, linking Web pages to scripting languages
