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

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>: Title of the page , Displayed on the browser tab .

style

<style>: css style .

link

<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

<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

<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 <footer>、<address> Or another individual <header> Element interior

<header>
  <h1>html<h1>
  <img src="https://www.bilibili.com" alt="bilibili">
</header>
 Copy code

<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

<nav>
<ul>
<li><a herf="**">html</a></li>
<li><a herf="**">css</a></li>
<li><a herf="**">js</a></li>
</ul>
</nav>
 Copy code

<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

<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

<section>

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>

<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

Semantic grouping

<figure>

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

<figcaption>

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

<blockquote>

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

<dl>/<dt>/<dd>

Used to describe a set of key value pairs
Usually used for metadata 、 Definition of terms and other scenarios

Semantic text

<cite>

<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

<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

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

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

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
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.
https://en.cdmana.com/2022/01/202201262358479330.html