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

[youth training camp] - HTML learning notes

2022-01-26 23:58:50 A chicken with vegetables

Three elements of web page

6.png If the web page is regarded as a creature ,HTML It forms the skeleton of the web page , Make the web page have the basic structure ;css Forms the skin of a web page , Make web pages no longer boring ; and js Equivalent to various organs of organisms , Control the web page to realize various operations .

HTML brief introduction

html(Hyper Text Markup Language) Hypertext markup language , Markup language for building the basic structure and content of web pages .

Hypertext : The text contains links to other text .

Markup language : Combine the text and other information related to the text , Show about document structure .

The development history

  • 1989 year —— berners - Li proposed an Internet-based hypertext system
  • 1993 year ——IETF( Internet Engineering Task Force ) Release the first TML The proposal , thus HTML The first edition of language was born
  • 1994 year ——W3C establish , Then took over HTML Standardization work of
  • 1995 year —— After going through several drafts HTML2.0 Release ( This version mainly supplements some basic functions , Including form based file upload 、 form 、 Internationalization and other functions
  • 1997 year ——1 Month issued HTML3.2, And then 12 Month issued HTML4.0( This Many browser specific element types and attributes are used in this release
  • 2014 year ——HTML5 As W3C Release of recommended standards

HTML structure

  • One HTML The document contains multiple HTML label , Each tag has its own characteristics .
  • HTML Elements = The start tag + End tag + Element content Such as :<P> I am a p label </p>.
  • But some elements are a label Such as :<img> ;<br> etc. .
  • stay HTML Tags in are not case sensitive .
  • Elements can be nested in other elements .
  • Elements can have attributes , Attributes contain additional information about the element .

Build a simple page based on a few tabs :

  • <!DOCTYPE html>: Put it in HTML The front position of the document , After adding it, it will follow W3C Of HTML 5 Standard to parse rendered pages .
  • <html>: Root element , Contains the contents of the entire page .
  • <head>: Invisible to users , It contains, for example, keywords for search engines 、 Page description 、 Character encoding declaration 、CSS Patterns, etc .
  • <body>: This element contains content that can be accessed by the user , Including text 、 Images 、 video 、 game 、 Audio etc. .

head Elements contained in

meta yes html Language head An auxiliary label for the zone , At the head of the document , It doesn't contain anything . The attribute of the tag defines the name associated with the document / It's worth it .

<meta charset='utf-8'> Defines the document character encoding

<meta name="keywords" content="HTML"> keyword , When searching , If there is a keyword of a website in the content you search , Then the engine will push you to this website .

<meta name="description" content="HTML Basics "> Page description , Describe the web page in more detail than the title , When the mouse hovers over the title, it will pop up .

<meta name="viewport" content="width=device -width,initial- scale=1.0, maximum- scale=1.0, user - scalable=0"> It's mainly used in mobile terminal , Defines the area on the device screen where web pages are displayed .

<meta "http-equiv="expires" content="31 Dec 2021"> Used to provide some information to specific websites .


<title>: Title of the page , Displayed on the browser tab .


<style>: css style .


<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> Current page favicon

<link rel="stylesheet" href="my- CcSs file.css"> Link to style sheet

<link href-"fancy.css" rel="alternate styleshet" type="text/css" title="Fancy"> Replaceable style sheets ( Not all browsers support )


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

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 .

body The elements in

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>

HTML Semantically

The advantages of semantics

  • Easy for users to read , When the style is lost, it can make the page present a clear structure .
  • advantageous to SEO, The search engine determines the context and the weight of each keyword according to the tag .
  • Facilitate analysis of other equipment , For example, blind readers render web pages according to semantics
  • Good for development and maintenance , Semantic is more readable , Better code maintenance , And CSS3 A more harmonious relationship .

Semantic blocks


  • 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 <footer>、<address> Or another individual <header> Element interior
  <img src="" alt="bilibili">
 Copy code 


  • 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
<li><a herf="**">html</a></li>
<li><a herf="**">css</a></li>
<li><a herf="**">js</a></li>
 Copy code 


  • 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
<h1> What's the weather like today? </h1>
  <article class="user">
  <h3> On the first floor </h3>
  <p> That's good </p>
  <article class="user">
  <h3>  On the second floor </h3>
  <p> That's good </p>
<article class="user">
<h3> Third floor </h3>
  <p> That's good </p>
 Copy code 


  • Group content by topic , There is usually a title
  • <section> It usually appears in the outline of the document
  • Don't put the <section> As Use ordinary containers , For example, for beautifying fragment styles , Use at this time <div> More appropriate
  • If the element is an independent piece of content , You can publish a single , Is more suitable for <article>


  • 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

Semantic grouping


  • Contains content that is independently referenced : Chart 、 illustrations 、 Code etc.
  • There is usually a title


  • Description of the icon associated with it 、 title
  • Usually located in <figure> The first or last of


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


  • Used to describe a set of 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


  • 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

<address> Contact information of a person or organization

<mark> Use... In references , Indicates that attention needs to be paid to

<code> code snippet

<small> 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


  • An element consists of zero or more elements and one Element to display for different / 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


  • 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
  • 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 - - individual Render Trees

  • Layout calculation

  • draw

copyright notice
author[A chicken with vegetables],Please bring the original link to reprint, thank you.

Random recommended