current position:Home>Interesting HTML Basics

Interesting HTML Basics

2021-08-23 07:20:34 PHP Development Engineer

🥳 preface

as everyone knows ,html It is the first language at the beginning of front-end learning . However , In our daily actual development , Always focus on practice and Application . But what everyone knows is , Many friends ignore a lot about html Relevant basic introduction . So in the next article , Will explain html What is it? , What is its development history ? also html How to use , And how to write more semantic html .

Next, let's study together ⑧~🧐

One 、 Three elements of web page

Everybody knows , For web pages , There are three basic elements . That's what everyone is familiar with html , css and js . For all three , The main description is as follows :

  • html : Basic structure of web page ;

  • css : The presentation effect of web pages ;

  • js : The function and behavior of web pages .

Two 、HTML brief introduction

1. Definition

HTML , Its full name is HyperText Markup Language , Hypertext markup language ), It's used to build Basic structure and content of web pages A markup language . Next, let's look at what hypertext and markup language are :

Hypertext : The text contains a pointer to Other text Link to ;

Markup language : Combine the text and other information related to the text , Show Document structure , Such as : HTMLXMLKMLMarkdown wait .

2. The development history

After reading the definition , Let's see HTML A development history of . As follows :

  • berners - Li stay 1989 year A hypertext system based on Internet is proposed .
  • 1993 year IETF ( Internet Engineering Task Force ) Release the first HTML The proposal , thus , HTML The first edition of the language was born .
  • After going through several drafts , HTML 2.0 On 1995 year Release , It includes Based on forms File upload of 、 form 、 Internationalization and other functions .
  • 1994 year W3C establish , Then took over HTML Standardization work of , And in 1997 year Released HTML3.2 .
  • Later released HTML4.0 Many browser specific element types and attributes are used in .
  • stay 2014 year When , HTML5 As W3C The recommended standards for .

3、 ... and 、HTML structure

1. Cited examples

Let's take a look HTML Code , As follows :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Test site </title>
</head>
<body>
    <p class="editor-note"> Monday's cat is very cute !</p>
    <img src="cat.png" alt=" Pictures of cats ">
</body>
</html>
 Copy code 

You can see , In the above paragraph HTML In the code , Include htmlheadmetatitle and body Wait for the label , By these labels above , That makes up. html Structure .

Let's take a look at html What are the characteristics of .

2. characteristic

  • HTML The document contains multiple HTML Elements , Elements have different properties .
  • HTML Elements = The start tag + End tag + Element content .
  • Some elements have only one label , Such as imginputbr etc. .
  • HTML The element tag Case insensitive .
  • Elements can be nested among other elements .
  • Elements can have attributes , Attributes contain additional information about the element .

Next, let's look at the respective functions of the above tags .

3. HTML Page structure

(1)DOCTYPE

<DocTYPE HTML> , Often placed in HTML The front position of the document , After adding it, it will follow W3C Of HTML5 Standard to parse rendered pages .

(2)html

<html> , Is the root element of the web page , Contains the contents of the entire page .

(3)head

<head> , This label is not visible to the user , It includes things like Search engine oriented keywords Page description Character encoding declaration CSS style The content such as .

(4)body

<body> , This element contains Content that can be accessed by users , Including text 、 Images 、 video 、 game 、 Audio and so on .

(5)meta

<meta> , The frequently set contents are : charset/name/http-equiv . Here are some common configuration information .

<meta charset="utf-8"> Define document character encoding 
<meta name="keywords" content="HTML">  keyword 
<meta name="description" content="HTML Basics "> Page description 
<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">http Head 

 Here is a custom meta Website , You can check it by yourself ~
https://wiki.whatwg.org/wiki/MetaExtennsions
 Copy code 

(6)title

<title> , Represents the title of the page , Often displayed on the browser tab .

(7)style

<style> , yes CSS The style of .

(8)link

<link> , Indicates a jump link . Here are some common link The way . As follows :

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

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

<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
 Replaceable style sheets 
 Copy code 

(9)script

<script> Represents an executable script . The usual way of reference is as follows :

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

Let's look at its two properties :

  • defer: Download now , Delay the , Indicates that the script can wait until dom Be fully parsed and displayed before executing , Only valid for external scripts . Yes defer Property will block DOMContentLoaded event , Until the script is loaded and parsed .
  • async: Download script now , And do not hinder other operations , For example, when downloading other resources or loading other scripts , Only valid for external scripts .

Let's use a picture to show the difference between the two , The details are as follows: :

async and defer

You can see , async Support in case of js When you file , Download script now . And for defer Come on , It can only the front js

All contents are loaded first , Then perform the operation .

Four 、 Common elements

1. Three common elements

(1) Inline elements

  • Only occupy itself The border of the corresponding label The space contained .
  • 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 are : <a><span><br><i><em><strong><label><q><var><cite><code> .

(2) 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> .

(3) Block-level elements

  • Occupy the entire line of its parent element , Always start with a new line .
  • Can accommodate other block elements or inline elements .
  • Can be controlled Wide and high Row height Margin Frame Wait to change its size .
  • Commonly used block level elements : <div><p><h1>-<h6><ol><ul><dl><table><address><blockquote><form> .

2. legend

Let's use a diagram to understand the differences between the three commonly used elements . The details are as follows: :

3 Two common elements

5、 ... and 、 semantic

1. Definition

The so-called semantic , That is, according to the structure of the content , Select the appropriate tags to build a more maintainable code structure that is easy for developers to read , At the same time, it can make the machine better analyze . As shown below :

<div class="header"></div>
<div class="section"> <div class="article"> <div class="figure"> <img> <div class="figcaption"></div> </div> </div> </div> <div class="footer"></div>  Copy code 
<header></header>
<section>
	<section>
    	<figure>
        	<img>
            	<figcaption></figcaption>
        </figure>
    </section>
</section>
<footer></footer>
 Copy code 

2. Common semantic label parsing

Next, let's look at some common semantic tags , As follows .

(1) semantic - Block category label

1)header

  • header It is mainly used to show some introductory information .
  • Usually contains ⼀ A group of introductory or navigational elements , As the title 、 Logo 、 Search box 、 Author name, etc .
  • Can't put <footer><address> Or something else ⼀ individual <header> Element interior .

such as :

<header>
	<h1>HTML</h1>
    <P><time pubdate datetime="2021-08-15"></time></P>
</header>
 Copy code 

2)nav

  • At present ⽂ Gear or other ⽂ Navigation links are provided in the file , Such as menu 、⽬ record 、 Index, etc. .
  • ⽤ To place ⼀ It's a little hot ⻔ Link to , seldom ⽤ Links are usually placed in footer ⾥ At the bottom .

such as :

<nav>
	<ol>
        <li><a href="#">HTML</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">js</a></li>
    </ol>
</nav>
 Copy code 

3)article

  • single ⽴ Of ⽂ files 、 page 、 Should be ⽤、 Site .
  • But only ⽴ Distributive or reproducible ⽤ Structure , Such as forum post ⼦、 Journalism ⽂ Chapter 、 Blog 、⽤ Comments submitted by users 、 Interactive components, etc .

such as :

<article class="forecast">
    
    <h1> The weather forecast for Guangzhou </h1>
    
    <article class="day-forecast"> <h2>2021.08.15</h2> <p> cloudy </p> </article>
    
    <article class="day-forecast"> <h2>2021.08.16</h2> <p> a sunny day </p> </article>
    
</article>
 Copy code 

4)section

  • Group content by topic , There is usually a title .
  • <section> Usually occurs in ⽂ Stall ⼤ In the outline .
  • Don't put the <section> Use as a common container , For example, for beautifying fragment styles , Use at this time <div> More appropriate .
  • If the element is an independent piece of content , It can be published separately , Is more suitable for <article> .

such as :

<h1> Choose an apple </h1>
<section>
    <h2> Introduce </h2>
    <p> This document will provide a guide , Help choose the right Apple </p>
</section>
<section>
    <h2> standard </h2>
    <p> For choosing an apple , There are many different standards , Like size , Color , Sweetness, etc </p>
</section>
 Copy code 

5)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 .

such as :

<p> The weather is not bad today , I decided to go for an outing </p>
<aside>
	<h4> Picnic </h4>
    <P> Prepare all kinds of food , About the morning 9 Set out for a picnic at o'clock .</P>
</aside>
 Copy code 

6)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 .

such as :

<footer>
	<h1> Copyright No  by monday</h1>
    <P><time pubdate datetime="2021-08-15"></time></P>
</footer>
 Copy code 

(2) semantic - Group category labels

1)figure/figcaption

  • <figure> The package was wrapped alone ⽴ lead ⽤ The content of : Chart 、 illustrations 、 Code etc. , There is usually a title ;
  • <figcaption> Description of the chart associated with it / title , Usually located in <figure> Of the ⼀ One or last ⼀ individual .

such as :

<figure>
    <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="A robotic monster over the letters MDN.">
    <figcaption>MDN logo</figcaption>
</figure>
 Copy code 

2)blockquote

  • Block level lead ⽤ Elements .
  • cite Property represents the of the source url .

such as :

<figure>
    <blockquote cite="https://www.huxley.net/bnw/one.html">
        <p>Words can be X-rays, if you use them properly - they'll go through anything.</p>
    </blockquote>
    <figcaption>-Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>
 Copy code 

3)dl/dt/dd

  • Used to describe a set of key value pairs .
  • Usually used for metadata 、 Definition of terms and other scenarios .
<dl>
	<dt>FireFox</dt>
	<dd>A free, open source, cross-platform.</dd>
</dl>
 Copy code 

(3) semantic - Text label

1)cite

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

2)time

  • Machine readable time and date .
  • datetime Represents the time and date associated with this element , If not specified, the element will not be resolved to date .

3)address

  • Indicates the contact information of a person or organization .

4)mark

  • Use... In references , Indicates that attention needs to be paid to .

5)code

  • Represents a code fragment .

6)small

  • Represents a disclaimer 、 Notice and other information .

(4) semantic - Multimedia element tags

1)img

  • src Properties are required , Embedded ⼊ chart ⽚ Of ⽂ Piece path .
  • alt Attribute contains ⼀ strip On images ⽂ This description ,⾮ mandatory . The screen reader will read these descriptions to the user who needs to make ⽤ The reader makes ⽤ Listener , Let them know the meaning of the image . Images ⽆ When loading (⽹ Network error 、 When the content is blocked or the link expires ), The browser will be in ⻚⾯ Displayed on the alt Attribute ⽂ Ben .
  • decoding decode ⽅ type : asynchronous 、 Sync .
  • loading Lazy loading .

2)picture

  • Element by containing zero or more <source> Elements and ⼀ individual <img> Element for different .
  • Show / The device scene provides the corresponding image version .
  • media attribute : Render the corresponding graph according to the media conditions ⽚, Similar to media query .
  • type attribute : MIME type , According to the browser ⽀ Consistently render the corresponding graph ⽚.

3) Audio and video

  • So-called Audio and Video Tags , namely <video></video> and <audio></audio> label .

  • src Properties are required , Embedded ⼊ video ⽂ Piece path .

  • controls Indicates whether to display the browser ⾃ Controls with , At the same time, you can create ⾃ Define controls .

  • autoplay whether ⾃ Play it .

  • source The element represents the of the video Alternative resources ( Different formats 、 clarity , Reading failed or ⽆ When decoding, you can try it in turn ).

such as :

<video controls>
    <source src="/flower.webm" type="video/webm">
    <source src="/flower.mp4" type="video/mp4">
    Sorry, your brower doesn't support embedded videos.
</video>

<audio controls src="/xxx.mp3">
    Your brower deos not support the <code>audio</code> element.
</audio>

<video controls src="/friday.mp4">
    <track default kind="captions" srclang="en" src="friday.vtt"/>
    Sorry, your brower doesn't support embedded videos.
</video>
 Copy code 

🧐 6、 ... and 、HTML analysis

Let's take a look HTML How to parse .

1. DOM Document object model

So-called DOM , That is, to the node structured Make a statement , A way is defined to enable the program to access the structure , It will web The page is linked to the scripting language .

2. HTML Analytic process

about DOM For trees , The construction process is as follows :

  • First build DOM Trees ;
  • Secondly, calculate the style , At this point, build CSSOM Trees ;
  • And then DOM and CSSOM Combine into one Render Render tree ;
  • Now? , The browser will calculate the layout of the entire page ;
  • Last , Draw page .

The details are shown in the following figure :

HTML analysis

7、 ... and 、 Conclusion

In the above , We learned about the three elements of the web page , HTML An introduction to the 、 Structure and its analytical process . Of course , Also important is the semantic tag . For semantic tags , It can let us know what it means at a glance , It greatly improves the development efficiency .

Come here , About HTML That's the end of the basics of ! Hopefully that helped ~

Conclusion

It's not easy to create , If it helps you , I hope you will like to support , Any questions can also be discussed in the comments section ~

If you think this article is useful to you , Please give our open source project a little bit star: http://github.crmeb.net/u/defu       Thank you for !
 
come from “ Open source dominates ” , link :   https://ym.baisou.ltd/post/854.html

 

copyright notice
author[PHP Development Engineer ],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823072026831M.html

Random recommended