current position:Home>[youth training camp] - HTML

[youth training camp] - HTML

2022-01-26 23:58:53 Li Xinyi

HTML brief introduction

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">
    <meta charset="UTF-8" />
    <title> test HTML</title>
    <p class="one"> This is a p label </p>
    <div id="one"> This is a div label </div>
 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


 Define document character encoding 
<meta charset="utf- -8"> 

<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 


 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 


 Executable script 
<script type="text/javascript" src="javascript.js">
 Copy code 

script attribute

  • 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

  • Commonly used block level elements :

    <div>、<p>、 <h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address> 、<blockquote> 、<form>

In line block level elements

  • Elements are arranged in rows , Don't monopolize a line
  • Support setting width, height and vertical margin 、 Frame
  • Common inline elements : <img>、 <input>、 <td>


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

carbon (1).png


carbon (2).png

semantic - block


  • 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

carbon (3).png


  • 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

carbon (4).png


  • 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

carbon (5).png


  • 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

carbon (6).png


  • 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

carbon (7).png


  • 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

carbon (8).png

semantic - grouping


  • 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

carbon (9).png


  • Block level reference elements
  • cite Property represents the of the source url

carbon (10).png


  • Used to describe - Group key value pairs
  • Usually used for metadata 、 Definition of terms and other scenarios

carbon (11).png

semantic - Text


  • Element is usually used to reference the title of the work .
  • Including papers 、 file 、 Books 、 References to movies, etc

carbon (12).png


  • 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

carbon (13).png


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



  • 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

carbon (14).png


  • 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

carbon (15).png

carbon (16).png

Audio and 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 )

carbon (17).png

carbon (18).png

carbon (19).png

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 .
  • machine ( Search engine 、 Screen reading software, etc ) Easy to understand structure
  • be conducive to SEO
  • And CSS3 A more harmonious relationship .

copyright notice
author[Li Xinyi],Please bring the original link to reprint, thank you.

Random recommended