HTML basics summary

preface

This article mainly summarizes the basic knowledge related to html

Tip: the following is the main content of this article

1. Entities

Multiple spaces written in the page will be resolved into one space by the browser.
Some special symbols cannot be written directly in HTML, such as the greater than sign and less than sign on both sides of the letter. If we need to write these special symbols in the page, we need to use the entities in HTML, that is, escape characters.
Syntax of entity: & name of entity
The following are some common special symbols: (spaces) & nbsp; (greater than) & gt; (less than) & lt; (copyright number) & copy;

2.meta label

The code is as follows (example):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
        meta It is mainly used to set some metadata in web pages. Metadata is not for users 
            charset Specifies the dataset for the web page
            name    The name of the specified data
            content Contents of the specified data
            keywords  Represents the keyword of the website. Multiple keywords can be specified at the same time. The keyword is used between keywords,separate

            description Used to specify the description of the website. The description of the website will be displayed in the search results of the search engine
            title The contents of the tag are displayed as text on the hyperlink of the search results
    -->
    <meta name="keywords" content="HTML5,front end,CSS3">
    <meta name="description" content="HTML5,front end,CSS3">
    <!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> 
        Redirect the page to another web site 3;3 Jump in seconds
    -->
    <!-- <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> -->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3. Semantic label

In web pages, html is specially used to take charge of the structure of the website, so when using HTML tags, we should pay attention to the semantics of the tags rather than their styles.
Block element:
*address - address
*blockquote - block reference
*center - align blocks
*dir - directory list
*div - commonly used, easy at block level, is also the main label of css layout
*dl - definition list
*fieldset - form control group
*Form - interactive form
*h1 - headline
*h2 - subtitle
*H3 - Level 3 title
*H4 - level 4 title
*H5 - level 5 title
*H6 - level 6 title
*hr - horizontal divider
* isindex - input prompt
*Menu - menu list
*NOFRAMES - frame optional content (this block content is displayed for browsers that do not support frame)
*noscript - optional script content (displayed for browsers that do not support script)
*ol - sort list
*p - paragraph
*pre - formatted text
*Table - table
*ul - non sorted list
* li

Inline elements:
*a - anchor point
*abbr - abbreviation
*Acronym - acronym
*b - bold (not recommended)
* bdo - bidi override
*big - large font
*br - line feed
*cite - Reference
*Code - computer code (required when referencing source code)
*dfn - define fields
*em - Emphasis
*Font - font setting (not recommended)
*i - italics
*img - picture
*Input - input box
*kbd - define keyboard text
*Label - table label
*q - short reference
*s - Center dash (not recommended)
*samp - define sample computer code
*select - item selection
*Small - small text
*span - Common inline containers that define blocks within text
*strike - middle dash
*strong - bold emphasis
*sub - subscript
*sup - superscript
*textarea - multiline text input box
*tt - telex text
*u - underline
*var - define variables

<!-- 
  Block element( block element)
       -In web pages, the layout of web pages is generally carried out through block elements
       		Always start on a new line;
            Height, row height, outer margin and inner margin can be controlled;
            The default width is 100 of its container%,Unless you set a width.
            It can accommodate inline elements and other block elements

   Inline element( inline element)Also called inline elements
       -Inline elements are mainly used to wrap text
      		And other elements on the same line;
            Height, row height, outer margin and inner margin cannot be changed;
            Width is the width of its text or picture, which cannot be changed
            Inline elements can only hold text or other inline elements
            be careful:
            Set width width Invalid.
            Set height height Invalid, you can use line-height To set.
            set up margin Only about margin Valid, up and down invalid.
            set up padding Only about padding Valid, up and down are invalid. Note that the element range is increased, but it has no effect on the content around the element.
            adopt display Property to switch between inline and block level elements(Mainly look at Chapter 2.3.4 Values): 

       -In general, inner elements are released within blocks, rather than block elements in inline elements
       -Basically everything can be put in a block element
       -p Element cannot put any block elements

   When the browser parses the web page, it will automatically correct the non-conforming content in the web page
       For example:
           The tag is written outside the root element
           p A block element is nested within the element
           Division in root element head and body Unexpected child element
           ... ...
-->

<!-- 
        Layout tags (structured semantic tags)
-->

     <!-- 
        header Represents the header of a web page
        main Represents the body of a web page (only one in a page) main)
        footer Represents the bottom of a web page

        nav Represents navigation in a web page
        aside Indicates other content related to the subject (sidebar)
        article Represents a separate article

        section Represents an independent block. It is used when none of the labels on it can represent it section

        div Without semantics, it is used to represent a block. At present div Or our main layout element
        span Inline elements, without any semantics, are generally used to select text in web pages
        -->

<!--Title label: h1~h6,There are six levels of titles. Title tags are block elements(Exclusive row of elements)-->
	 <h1>Primary title</h1>
     <h2>Secondary title</h2>
     <h3>Tertiary title</h3>
     <h4>Four level title</h4>
     <h5>Five level title</h5>
     <h6>Six level title</h6>

<!--Title Group
	hgroup Tags are used to group headings. A group of related tags can be placed in the header at the same time hgroup
-->
	 <hgroup>
         <h1>In the Quiet Night</h1>
         <h2>Li Bai</h2>
     </hgroup>

<!-- 
    p A label represents a paragraph in a page
    
     p It is also a block element
-->
     <p>stay p The content in the label represents a paragraph</p>
     <p>stay p The content in the label represents a paragraph</p>
     <!-- 
         em The label indicates the accentuation of pronunciation and intonation

         Elements that do not monopolize a row in a page are called inline elements(inline element)
      -->
     <p>Today's weather<em>really<em>not bad</p>

    <!--
        strong Emphasize the important content
      -->
     <p>You must today<strong>finish one's homework!</strong></p>

     Lu Xun said:
     <!-- 
         blockquote  Represents a long reference
     -->
     <blockquote>
         balabala
     </blockquote>

     <!-- q Represents a short reference -->
     confucius said<q>I think twice a day!</q>

     <!-- 
         br Indicates a line break
      -->
     <br>
     It's cold

4. List

There are three kinds of lists in html: ① ordered list, ② unordered list, and ③ defined list
Ordered list: use the ol tag to create an ordered list, and use li to represent list items
Unordered list: use the ul tag to create an unordered list, and use li to represent list items
Definition list: use the dl tag class to create a definition list, use dt to represent the defined content, and use dd to explain the content

Lists can be nested

5. Hyperlink

Hyperlinks allow us to jump from one page to another, or to another location on the current page.
Use label a class definition:
href specifies the target path to jump. The value can be the address of an external website or the address of an internal web page.

<a href="https://Www.baidu.com "> hyperlink</a> 

target attribute: used to specify where the hyperlink is opened
Optional values:
-The default value of self is to open hyperlinks in the current web page
-blank opens a hyperlink on a new page

 <a href="07.list.html" target="_blank">Hyperlinks</a>
 <br></br>
 <a href="#Bottom "> go to the bottom</a>
 <br></br>
 <a href="#P3 "> go to the third natural section</a>
 <br></br>

You can directly set the href of the hyperlink to #, so that after clicking the hyperlink, the page will not jump, but go to the top of the current page.
You can skip to the specified position of the pressing surface, just set the href attribute to the id attribute value of the # target element.
Unique and non duplicate id attribute: each tag can add an id attribute. The id attribute is the unique identification of the element. Duplicate id attributes cannot appear on the same page.

<a id="p3" href="#"> back to top</a>
	<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
    <p id="p3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quos? Suscipit autem, facere assumenda exercitationem nihil accusantium placeat iusto ea, eligendi eveniet, voluptatem aut nam ullam et nobis nisi deleniti?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi suscipit nisi modi ullam impedit? Autem aspernatur illo, repudiandae placeat possimus sint laudantium delectus ut officiis deserunt necessitatibus sunt fuga consequuntur?</p>

6. Picture label

The picture tag is used to introduce an external picture to the current page
Use img tag to introduce external pictures. Img tag is a self ending tag
img is a replacement element (between block and inline elements, it has the characteristics of two elements)

    Properties:
        src Property specifies the path of the external picture (the path rule is the same as that of the hyperlink)
        alt The description of the picture will not be displayed by default. Some browsers will display it when the picture cannot be loaded
            Search engines will alt To identify the picture if not written alt Property, the picture will not be recognized by the search engine

        width The width of the picture in pixels
        heigth Height of picture
            -If you change only one height and width, the other will scale equally

        be careful:
            In general pc It is not recommended to change the size of the picture. The size of the picture can be cut as large as it needs
            However, the mobile terminal often needs to scale the picture (large picture reduction)

        Format of picture:
            jpeg(jpg)
                -The supported colors are rich, and do not support transparent effects and moving pictures
                -Generally used to display photos
            gif
                -It supports few colors, simple and transparent, and dynamic graphics
                -Single color, moving picture
            png
                -It supports rich colors, supports complex transparency, and does not support dynamic graphics
                -Rich colors, complex and transparent dynamic pictures (specially designed for web pages)
            webp
                -This format is a new format launched by Google to represent images in web pages
                -It has all the advantages of other picture formats, and the file is especially small
                -Disadvantages: poor compatibility

            base64
                -Use pictures base64 Encode so that the picture can be converted into characters. Introduce the picture in the form of characters
                -Generally, some images loaded with web pages will be used base64

            The effect is the same. Use a small one
            The effect is different. It works well
	<img src="./img/1.gif" alt="squirrel">
    <img width="200" height="250" src="http://Img.uuwtq.com/uploads/i_1_263912736x779368623_27. JPG "ALT =" Iron Man ">

7. Inline framework

Inline frame: used to introduce another page to the current page
src specifies the path of the web page to be imported
frameborder specifies the border of the inline frame

    Inline frames are not retrieved by search engines
<iframe src="https:www.qq.com" width="800" height="600" frameborder="0"></iframe>

8. Audio and video

The audio tag is used to introduce an external audio file (replacement element) to the page
-When importing audio and video files, the user is not allowed to control the playback stop by default

    Properties:
        controls Allow users to control playback
        autoplay Does the audio file play automatically
            -If set autoplay,The music will play automatically when the page is opened
              But at present, most browsers will not automatically play music
        loop Does the music cycle
<!-- Except through src In addition to specifying the path of the external file, you can also use the source To specify the path to the file -->
     <audio controls>
         <!-- Sorry, your browser does not support playing audio, please upgrade your browser version! -->
         <source src="source/audio.mp3">
         <source src="source/audio.ogg"> 
         <embed src="./source/audio.mp3" type="" width="500" height="300">
     </audio>

The video tag is used to introduce an external video file (replacement element) to the page

	<video controls>
         <source src="./source/flower.webm">
         <source src="./source/flower.mp4">
         <embed src="./source/flower.mp4" type="video/mp4">
     </video>
     <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=d0040cqqgtz" width="600" height="600" allowFullScreen="true"></iframe>

summary

The above is a summary of the basic knowledge of HTML. If there are mistakes, you are welcome to correct them!

Tags: Front-end html5 html

Posted on Tue, 09 Nov 2021 17:00:10 -0500 by raquelzinha