HTML (HyperText Markup Language), the Markup Language used to build the basic structure of a web page and its content
Hypertext: Text that contains links to only other text
Markup language: Combines text and other information related to text to present information about document structure, such as HTML, XML, KML, Markdown
HTML structure
<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8" /> <title> Test HTML</title> </head> <body> <p Class = "one" > this is p tag < / p > < div id = "one" > this is div tags < / div > < / body > < / HTML >Copy the code
<! DOCTYPE html>: is placed at the front of the HTML document and is used to render the interface according to the W3C HTML5 standard
<html>: the root element, which contains the entire page content
<head>: is not visible to the user, including search engine oriented keywords, page descriptions, character encoding declarations, CSS styles, etc
<body>: Content that can be accessed by the user with this element, including text, graphics, video, games, audio, etc
HTML Page structure
meta
<meta name="keywords" content="HTML"> <meta name="description" Content ="HTML base "> <meta name="viewport" content="width= device-width, initial-scale =1.0, maximum-scale =1.0, User scalable=0"> Customizable Meta for HTTP headers to provide information to specific sites <meta "http-equiv="expires" content="31 Dec 2021">Copy the code
<script type="text/javascript" SRC =" javascret.js ">Copy the code
The script properties
Defer: instantly download, delay the, said script can wait until the dom after being parsed and displayed in full in the execution, applies only to external script. The script with the defer property blocks the DOMContentL oaded 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
HTML Common elements
Inline element
Occupies only the space contained by the border of its corresponding label
Can only hold text or other inline elements
Dimensions can only be changed by modifying horizontal margins, borders, or row heights
Common inline elements:< a >, < span >. < br >, < I >, < em >, < strong >, < label >, < q >. < var >, < cite >, < code >
Block-level elements
The entire row that occupies its parent element always starts on a new row
Can hold other block elements or inline elements
You can control width height, line height, margin, border and so on to change its size
Common block-level elements:
The < div >, < p >, < h1 > - < h6 >, < ol >, < ul >, < dl >, < table >, < address >, < blockquote >, < form >
Inline block-level elements
Elements are arranged within a row and do not own a row
You can set the width, height, vertical margin, and border
Common inline elements:<img> <input> <td>
semantic
The role of tag semantics:
Make it easier for developers to read and write more elegant code.
At the same time let the browser or web crawler can be very good parsing, so that better analysis of the content.
Better search engine optimization.
Bottom line: THE job of HTML is to describe what a piece of content is (or what it means), not what it looks like; Its appearance should be determined by CSS.
The semantic
semantic
Semantically – blocks
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
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
article
Separate documents, pages, applications, sites
Independently assignable or reusable structures, such as forum posts, news articles, blogs, user-submitted comments, interactive components, etc
section
Group content by topic, usually with a title
It usually appears in the outline of a document
Do not use it as a normal container, for example to beautify fragment styles
More appropriate – If there are separate chunks of content inside the element that can be published individually, this is more appropriate
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
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
Semantically – grouping
Figure, figcaption
The contents of the package that are referenced independently: charts, illustrations, code, etc., usually with a title
The description/title of the chart associated with it, usually located at
The first or the last of
blockquote
Block-level reference elements
The cite attribute represents the URL of the source
Dl, DT, dd
Used to describe – group key – value pairs
Usually used in metadata, term definition, and other scenarios
Semantically – text
cite
The element is usually used to refer to the title of the work.
Include citations of papers, documents, books, movies, etc
time
Machine readable time and date
Datetime indicates the date and time to which this element is associated. If not specified, the element will not be resolved to a date
other
Used in references to indicate that attention is requiredCode snippetDisclaimer, notes, etc
Multimedia elements
The picture
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. The screen reader will then read these descriptions to the user who wants to use the screen reader to let them know what the image means. When the image fails to load (network error, content blocked, or link expired), the browser displays the text in the Alt attribute on the page
Decoding modes: asynchronous and synchronous
Loading a lazy loading
picture
The element provides an image version for different display/device scenarios by containing zero or more elements and one element
Media properties: render the corresponding image according to the media conditions, similar to media query
The TYPE attribute: the MIME type that renders the corresponding image according to what the browser supports
Audio and video
video
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
Loop Plays a loop.
The source element represents alternative resources for the video (different formats, sharpness, and sequence of attempts if reading fails or decoding fails)
HTML parsing
DOM(Document Object Model) : A structured representation of nodes and defines a way for programs to access this structure linking Web pages to scripting languages
Build a DOM tree
Style calculation to build the CSSOM tree
Combine DOM and CSSOM into a Render tree
Layout calculation
draw
Conclusion:
What is the meaning of DOCTYPE?
Let the browser render in standard mode
Let the browser know the validity of the element
What is the meaning of semantic?
It is easy for developers to understand and maintain.
Machines (search engines, screen readers, etc.) can easily understand the structure
