Front-End HTML Summary 1.0——introduce HTML skeleton tag

    1. Introduction to HTML

    • HTML stands for Hypertext Markup Language (Hyper Text Markup Language) is a language used to describe web pages.
    • HTML is not a programming language, but a markup language
    • A markup language is a set of markup tags

    A web page is composed of web elements, which are described by html tags, and then parsed by the browser, and displayed to the user.

    The so-called hypertext has two meanings:

    1. Because it can add pictures, sounds, animations, multimedia and other content (beyond the text limit)
    2. Not only that, it can jump from one file to another, linking with files from hosts around the world (hyperlink text).

    html summary:

    • html is a hypertext markup (tag) language
    • We learn html, mainly learn html tags
    • We use html tags to describe web elements. Such as image tags, text tags, link tags, etc.
    • tags have their own syntax specifications, all html tags are represented by <>


    1.1 HTML skeleton tag

    In daily life letters, we have to follow a common convention.

    The same is true: HTML has its own language syntax skeleton format: (to follow, to be professional) It must be written down fluently

    <head>
       <!-- title tag -->
        <title></title>
    </head>
      <!-- The body of the document -->
    <body>
    </body>
    </html>
    

    html tag

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    


    Document Type Declaration <!DOCTYPE>

    usage:

    <!DOCTYPE html>


    effect:

    • The <!DOCTYPE> declaration is placed first in the document, before the tag. This tag tells the browser which HTML or XHTML specification the document uses
    • <!DOCTYPE> is not an HTML tag, it is a doctype declaration tag


    Team Agreement:

    HTML files must add a DOCTYPE declaration and use the HTML5 document declaration uniformly


    page language lang

    <html lang="en"> specifies the html language

    The 2 most common:

    1. en defines the language as English
    2. zh-CN defines the language as Chinese

    The role of lang: According to the lang attribute to set the css style of different languages, or the font to tell the search engine to do accurate identification
    Let the grammar checker do the language recognition
    Help translation tools to identify
    Help web readers do recognition


    character set

    <meta charset="UTF-8" />

    A character set is a collection of multiple characters.

    In order for the computer to accurately process the characters of various character sets, character encoding is required so that the computer can recognize and store various characters.

    utf-8 is the most commonly used character set encoding method at present, and the commonly used character set encoding methods are gbk and gb2312.

    • gb2312 Simple Chinese including 6763 Chinese characters GUO BIAO
    • BIG5 Traditional Chinese for Hong Kong, Macao and Taiwan etc.
    • GBK contains all Chinese characters and is an extension of GB2312, adding support for traditional Chinese characters, compatible with GB2312
    • UTF-8 basically contains the characters that all countries in the world need to use

    PS: For <meta>, <metacharset="utf-8"> ​​should be placed at the top of the head, because it specifies what encoding should be used to parse the entire web page, which is effective Avoid garbled characters

    In addition the element contains the name and content attributes: <meta http-equiv="X-UA-Compatible" content="initial-scale=1.0" name="viewport">

    • name specifies the type of the element; the description should contain information about the type of the element.
    • content specifies the actual metadata content. These two meta elements are used to define the author of your page and provide a brief description of the page Because it might or make your page appear more in relevant searches on search engines (these actions are termed SEO, or SEO.)


    Team convention capitalization

    HTML tag names, class names, tag attributes and most attribute values ​​are all in lowercase

    recommend:

    <head>
        <title>My First Page</title>
    </head>
    

    Not recommended:

    <HEAD>
        <TITLE>My first page</TITLE>
    </HEAD>
    


    1.2 HTML element tag classification

    Label:

    In HTML pages, elements with "< >" symbols are called HTML tags. As mentioned above, <html>, <head>, <body> are all HTML skeleton structure tags.

    Classification:

    1. Regular elements (double tags)
    
    <tag name> content </tag name> such as <body> I am text </body>
    • In this syntax, "" indicates the beginning of the function of the tag, generally called "start tag", "</tag name>" indicates the end of the function of the tag, generally called "end tag ( end tag)".
    • Compared with the opening tag, the closing tag is just preceded by a closing character "/".
    • What we will contact in the future are basically double labels

    • Empty element (single tag)

    
    <tag name /> e.g. <br />
    • Empty elements are represented by a single tag. Simply put, it does not need to contain content, and only one opening tag does not need to be closed.


    1.3 HTML tag relationship

    There are two main types of interrelationships for dual tags:

    1.Nested relationship

    <head>
        <title></title>
    </head>
    

    2.Parallel relationship

    <head></head>
    <body></body>
    

    Initiative:

    If the relationship between the two tags is a nested relationship, the child element is best indented by a tab key (a tab is 4 spaces). If it is a side-by-side relationship, it is best to align it up and down.

    2. Code development tools (writing code)

    • In order to improve our development efficiency
    • Reduce code errors we do not advocate using Notepad development
    • VScode
    • Dreamweaver
    • SublimeText
    • WebStorm
    • HBuilder


    3. Semanticization of HTML tags

    By tag semanticization, we mean the meaning of tags.

    Give a most reasonable tag in the right place according to the semantics of the tag to make the structure clearer.

    1. facilitate the reading and maintenance of the code
    2. it also allows browsers or web crawlers to parse well and analyze the content better
    3. use semantic tags will have better search engine optimization

    Whether the semantics are good: When we remove the CSS, the web structure is still organized and has good readability.

    The principle to follow: first determine the semantic HTML , then choose the appropriate CSS. so to remember according to the semantics. The implementation of any element in an HTML page relies on HTML tags.

    Popular posts from this blog

    大学资料分享——广工计院各个科目实验报告、课设及期末复习资料!!

    Win10 远程计算机或设备将不接受连接

    JAVA Traffic Signal Light Course Design (Source Code + Report + Video Demonstration)

    Implementation of Ajax Interceptor