HTML（HyperText Markup Language, Hypertext markup language ）, Markup language for building the basic structure and content of web pages
Hypertext ： The text contains links that only want to other text
Markup language ： Combine the text and other information related to the text , Show 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 a p label </p>
<div id="one"> This is a div label </div>
</body>
</html>
Copy code
<!DOCTYPE html>： Put it in HTML The front position of the document , After adding it, it will follow W3C Of HTML5 Standard to render the interface
<html>： Root element , Contains the entire page content
<head>： Invisible to users , These include, for example, keywords for search engines 、 Page description 、 Character encoding declaration 、CSS Patterns, etc
<body>： The content that the element can be accessed by the user , Including text 、 Images 、 video 、 game 、 Audio etc.
HTML Page structure
meta
Define document character encoding
<meta charset="utf- -8">
keyword
<meta name="keywords" content="HTML">
Page description
<meta name="description" content="HTML Basics ">
It's mainly used in mobile terminal , Defines the area on the device screen where web pages are displayed
<meta name="viewport" content="width=device -width,initial- scale=1.0, maximum- scale=1.0, user - scalable=0">
http Head custom meta, Used to provide some information to specific websites
<meta "http-equiv="expires" content="31 Dec 2021">
Copy code
link
Current page favicon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Link to style sheet
<link rel="stylesheet" href="my- CcSs file.css">
Replaceable style sheets
<link href-"fancy.css" rel="alternate styleshet" type="text/css" title="Fancy">
Copy code
defer： Download now , Delay the , Indicates that the script can wait until dom After being fully parsed and displayed, execute , Only valid for external scripts . Yes defer Property will block DOMContentL oaded event , Until the script is loaded and parsed .
async： Download script now , No interference with other operations , Such as downloading other resources or loading other scripts , Only valid for external scripts
HTML Common elements
Inline elements
Only occupy the space contained in the border of its corresponding label
Only text or other inline elements can be accommodated
You can only change the horizontal margin 、 Change the size by border or row height
Common inline elements : <a>、 <span>. <br>、 <i>、 <em>、<strong>、<label>、 <q>. <var>、 <cite>、<code>
Block-level elements
Occupy the entire line of its parent element , Always start with something new
Can accommodate other block elements or inline elements
Width and height can be controlled 、 Row height 、 Margin 、 Frame, etc. change its size
Elements are arranged in rows , Don't monopolize a line
Support setting width, height and vertical margin 、 Frame
Common inline elements : <img>、 <input>、 <td>
semantic
The role of label semantics ：
It is easy for developers to read and write more elegant code .
At the same time, let the browser or web crawler can parse well , So that we can better analyze the content .
Better SEO .
summary ：HTML Your job is to describe what a piece of content is （ Or its significance ）, Not what it looks like ; Its appearance should be determined by CSS To decide .
Non semantic
semantic
semantic - block
header
Present introductory information
It usually contains a set of introductory or navigational elements , As the title 、Logo、 Search box 、 Author name, etc
Can't put 、 Or something else - Inside an element
nav
Provide navigation links in the current document or other documents , Such as menu 、 Catalog 、 Index, etc.
Used to place some popular links , Infrequently used links are usually placed in footer Bottom in
article
Independent documentation 、 page 、 application 、 Site
An independently distributable or reusable structure , Such as forum posts 、 News articles 、 Blog 、 Comments submitted by users 、 Interactive components, etc
section
Group content by topic , There is usually a title
It usually appears in the outline of the document
Don't take as Use ordinary containers , For example, for beautifying fragment styles , Use at this time
More appropriate - If the element is an independent piece of content , You can publish a single , Is more suitable for
aside
Represents a section that has little to do with the rest of the page , In other words, separate disassembly will not affect the overall content
Usually on the sidebar , For display advertising 、tips、 References, etc
footer
Indicates the footer of the most recent chapter
The author who usually includes this chapter 、 Information such as copyright data or document links
footer The elements in are not part of the chapter , Not included in the outline
semantic - grouping
figure、figcaption
The content of the package that is independently referenced : Chart 、 illustrations 、 Code etc. , There is usually a title
Description of the chart associated with it / title , Usually located in
The first or last of
blockquote
Block level reference elements
cite Property represents the of the source url
dl、dt、dd
Used to describe - Group key value pairs
Usually used for metadata 、 Definition of terms and other scenarios
semantic - Text
cite
Element is usually used to reference the title of the work .
Including papers 、 file 、 Books 、 References to movies, etc
time
Machine readable time and date
datetime Indicates that this element is off The time and date of the contact , If not specified, the element will not be resolved to date
other
Contact information of a person or organization
Use... In references , Indicates that attention needs to be paid to code snippet disclaimer 、 Precautions, etc
Multimedia elements
picture
img
src Properties are required , The file path of the embedded picture
alt Property contains a text description of the image , optional . Screen readers will read these descriptions to users who need to use the reader , Let them know the meaning of the image . When the image cannot be loaded ( Network error 、 When the content is blocked or the link expires ), The browser will display... On the page alt Text in attributes
decoding Decoding method : asynchronous 、 Sync
loading Lazy loading
picture
Elements are displayed for different by containing zero or more elements and one element / The device scene provides the corresponding image version
media attribute : Render the corresponding pictures according to the media conditions , Similar to media query
type attribute : MIME type , Render corresponding pictures according to browser support
Audio and video
video
src Properties are required , Embedded video file path
controls Whether to display the browser's own controls , You can create custom controls
autoplay Auto play or not
loop Loop Playback .
source Element represents an alternative resource for video ( Different formats 、 clarity , When reading fails or cannot be decoded, you can try in turn )
HTML analysis
DOM( Document object model )： Structured representation of nodes , A way is defined to enable the program to access the structure web Linking pages to scripting languages
structure DOM Trees
Pattern calculation , structure CSSOM Trees
take DOM and CSSOM Combine into one Render Trees
Layout calculation
draw
summary ：
DOCTYPE What is the meaning of ？
Let the browser render in standard mode
Let the browser know the legitimacy of the element
What is the meaning of semantic ？
Developers are easy to understand , Easy to maintain .
