Know the rules of HTML tags

HTML is marked with tags. HTML tag tags are often called HTML tags.

Label syntax

1. Wrap keywords in Angle brackets;

2. Labels come in pairs, consisting of a start tag and an end tag.

3. The closing tag has one more slash than the opening tag (backslash)

However, there are some special tags, which are called single tags, self-closing tags, or empty tags, such as

, .

Basic structure of HTML

Gb2312 character set for Asian countries, only simplified characters, not traditional characters (now our compatriots Taiwan still use traditional characters)

GBK can recognize traditional characters

Unicode universal code

Utf-8 is an upgrade to Unicode

<! < HTML lang="en"> // language type, lang="en" stands for English, <head> <meta charset="UTF-8"/> // GBK, GB2312, <meta name="keywords" content=" keywords" /> <meta name="description" content=" description" > <title> Visual part </body> </ HTML >Copy the code

P paragraph tag

<p> I am a paragraph p</p>Copy the code

hyperlinks

The target attribute can be used in two ways: _self _blank

<a href="#" target= "_self" >Copy the code

The headline h1 – h6

Shortcut key: H {level title}*6

Image tag IMG

<img src="" title="" alt="" />
Copy the code

How many languages you need to write a page

  • HTML: It is a hypertext markup language, why hypertext? Because it can not only express text, but also express audio, video, pictures and so on. (skeleton)

  • CSS: Cascading style sheets, which are mainly used to beautify pages. (Clothes, cosmetics)

  • Js: javascript is a lightweight programming language. For example: click events in the page, and some business logic (behavior and dynamics)

Characteristics of labels

  • They’re all enclosed in Angle brackets

  • It comes in pairs and consists of a start tag and an end tag

  • The end tag has one more backslash than the start tag

Special case: Some tags such as IMG and meta do not come in pairs. These tags are called “single tags” or “empty tags” or “self-closing tags”.

Attributes of tags

Attributes of the tag: Attributes provide more information about HTML elements that describe certain features and functions. There are built-in attributes and custom attributes.

Representation: Attributes always appear as name/value pairs, such as name=”value”. (key-value pairs) Details to note:

  • Attributes are always specified in the opening tag of an HTML element (after the keyword) in the form of key-value pairs elements can have multiple attributes,

  • There must be at least one space between properties and properties

  • Attributes are in no order

For example:

<img SRC ="a.jpg" Alt =" welcome to join the twelfth CSS image "title=" Come on ">Copy the code

Basic structure of HTML

The document statement

Declarations help browsers display web pages correctly;

Define the type of the document, the browser will first recognize this sentence, will parse the document according to this type;

There are many different versions of HTML, and a browser can’t display an HTML page correctly until it fully understands the exact HTML version used in the page.

Generally, the higher version is compatible with the lower version, so we can write the higher version by default in our work (HTML5 document declaration).

Document declarations are case insensitive;

The document declaration must be on the first line (because the browser parses from top to bottom)

You have to document it, and if you don’t, weird things will happen;

A document declaration is not a label, it is just a declaration;

<! < HTML > <head> <meta charset=" UTF-8 "> <meta name="description" content=" keywords" content=" keywords" <title> </title> </head> <body> Viewable area </body> </ HTML >Copy the code

The title tag

Title tags can be divided into six levels, H1 to H6, from thick to thin, and from large to small. For search engines, it is divided by the degree of importance. H1 is the most important, and then it goes down. H1 usually appears only once on a page. Most are used for logos

Level and fast generation: h ${$title} * 6 < h1 > grade 1 title < / h1 > < h2 > 2 title < / h2 > < h3 > 3 title < / h3 > < h4 > level 4 title < / h4 > < h5 > 5 title < / h5 > < h6 > 6 title < / h6 >Copy the code

Paragraph p

< p > paragraph < / p >Copy the code

The picture

  • SRC: indicates the path of the image

  • Alt: When the network is slow or the image path is not correct, resulting in the image load failure, then Alt Settings if there is text, will appear next to the cracked image, more conducive to user experience

  • Title: When the mouse slides over the picture, the text set inside the title will appear, with a follow effect

Hyperlink a tag

  • Href: Url to jump to

  • Target:

  • _blank opens in a new window

  • _self opens in the current window

    baidu

A tag several values of href

  • Href = “www.baidu.com”

  • Back to top: href= “#”

  • Prohibit jumping: href= “javascript:;”

  • Anchor jump: give each module a name with its ID. The href value in the A tag should be # plus the name in the ID tag

    Document div{/* height this value is the same as the line height, the vertical center */ height:500px; line-height: 500px; background:darkturquoise; margin-bottom:20px; /* text-align: center; }

    Good Store Live
    The quality characteristics
    Affordable selling
    Guess you like

    Good Store Live The quality characteristics Affordable selling Guess you like Back to the top

HTML character entities:www.w3school.com.cn/html/html\_…

Semantic HTML tags

Meaning:

  • Reasonable labels do reasonable things

Why follow tag semantics:

  • Good for SEO optimization (that is, search engine crawling, search engine crawlers also rely on tags to determine the context and the weight of each keyword);

  • When styles are lost, you can still render structure better;

  • Better support for various terminals, such as accessible reading and audio novels;

  • Good for team development and maintenance, the W3C set a standard for us, so that teams follow this standard, so that the code differences will be reduced, in the development and maintenance can improve efficiency;

How to follow tag semantics in daily work:

  • Minimize meaningless tags, such as span and div;

  • Try not to use CSS attributes of the tag itself, such as B, FONT, and S. If these styles are needed, use CSS styles to add them.

  • Use strong and em for emphasis, but use CSS styles as much as possible.

  • When building a list, use

      unordered list

    < OL > ordered list
    < DL > to define a list;

Add a few tags

  • Div: Large box label, used to divide a large area

  • Span: small box label used to divide small areas

  • Formatting label

  • Bold: B or strong

  • Italics: I or em

  • Delete lines: DEL and S

  • Underline: INS and U

  • Pre-formatted label Pre: Displays the label in the preset format

  • Video: video

  • Audio: audio

  • Controller: Controls

  • Autoplay: Autoplay

  • Loop play: loop

  • Iframe: The iframe element creates an inline frame that contains another document

  • Display border when frameborder=”1″

  • Do not display border when frameborder=”0″

attribute

value

describe

align

  • left

  • right

  • top

  • middle

  • bottom

Use is not approved. Use styles instead.

Specifies how to align the frame based on surrounding elements.

frameborder

  • 1
  • 0

Specifies whether to display the border around the frame.

height

  • pixels

  • %

Specify the height of the IFrame.

longdesc

URL

Specify a page that contains a longer description of the IFrame.

marginheight

pixels

Defines the top and bottom margins of the iframe.

marginwidth

pixels

Define the left and right margins of the iframe.

name

frame_name

Specify the name of an iframe.

sandbox

  • “”

  • allow-forms

  • allow-same-origin

  • allow-scripts

  • allow-top-navigation

Enable a number of additional restrictions on content in.

scrolling

  • yes

  • no

  • auto

Specifies whether to display a scroll bar in an IFrame.

seamless

seamless

The specification looks like a part of the contained document.

src

URL

Specifies the URL of the document to display in the iframe.

srcdoc

HTML_code

Specifies the HTML content of the page to display in.

width

  • pixels

  • %

Define the width of an iframe.

List three

1, unordered list: ul, LI, this is a fixed format, the next to ul must be LI, not other labels, but can continue to nest other labels in LI.

Work < ul > < li > < / li > < li > eating < / li > < li > sleep < / li > < li > play doug < / li > < / ul >Copy the code

2, ordered list: OL, LI, this is a fixed format, ul inside the next must be Li, not other labels, but can continue to nest other labels in li.

< OL > <li> Go to work </li> <li> eat </li> </li>Copy the code

3. Customize lists

The next thing to dl can only be DT or DD, but there are other labels you can put inside dt or DD

A day of 3 eat < / h3 > < h3 > < dl > < dt > < / dt > breakfast soya-bean < dd > < / dd > < / dd > < dd > steamed stuffed bun lunch < dt > < / dt > < dd > over rice < / dd > < / dd > < dd > egg surface dinner < dt > < / dt > < dd > < / dd > small lobsters < DD > Beverage </ DD > </dl>Copy the code

CSS is introduced in several ways:

1. Inline form

<div style="color:deeppink;" Word-wrap: break-word! Important; "> < p style =" max-width: 100%; </div>Copy the code

2, inline: inside the head with the style tag, as follows

<style>
        div,p{
            width:500px;
            height:200px;
            background:greenyellow;
            color:hotpink;
        }
</style>
Copy the code

3, external links, in the head through the link tag to the style sheet.

<link rel="stylesheet" href="index.css">
Copy the code

4. Import

<style>
        @import "index.css"
</style>
Copy the code

Label division

  • Block-level elements

  • An exclusive line

  • Setting width, height, margin, and padding works.

  • Arrangement: from top to bottom

  • If the width is not set, it will fill the width of the parent

  • H1-h6, DIV, P, UL, OL, LI, DL, DT, DD

Note: block-level elements cannot be used within literal elements. The P tag is mainly used to store text, so you can’t put block-level elements in p.

  • Inline elements

  • A total of a line

  • Margin and padding don’t work when setting width, height, and vertical; the size depends on the content

  • Arrangement: left to right

  • A, SPAN, B, strong, EM, I, del, big, small

  • Inline blocks

  • A total of a line

  • Set width and height to work

  • Arrangement: left to right

  • img

Label aggregation

  • Title: h1 – h6

  • Paragraph: p

  • Images: img

  • Hyperlink: A

  • div

  • span

  • Format labels: B, strong, I, EM, INS, U, del, and S

  • pre

  • Three lists: UL, OL, LI, DL, DT, DD

Several values of display

  • Inline: Converts to inline elements (usually not, if you need to use inline elements directly)

  • Block: Converts to block-level elements

  • Inline-block: converts to an inline block

  • None: disappear

Interview question: How many ways can you make an element disappear?

  • Display: none;

  • visibility:hidden;

  • Opacity :0

  • Control hierarchy via Z-Index (locating elements)

  • Move one side of the screen with a margin negative

  • Width and height is equal to 0

Display: None, visibility, and opacity

Display: none is completely disappeared, does not occupy the position, but visibility: hidden; And opacity: 0; It’s out of sight, but it’s still there.

Clear the default margin and padding values of elements on the page

Margin = 0; margin = 0; margin = 0; padding = 0

*{
margin:0;
padding:0;
}
Copy the code

Clear the default style at the front of the list

ul,ol{
list-style: none;
}
Copy the code

Clear the underline of label A

a{
text-decoration: none;
}
Copy the code

The width of an element, the height of an element.

<style>
     div{
         width:200px;
         height:200px;
         background-color:red;
     }
</style>
Copy the code

Represents the background color: background-color

Indent: text-indent

Text-indent can be followed by a specific pixel value, or by em, where 2em represents an indentation of two words.

<style>
    p{
        /* text-indent: 10px; */
        text-indent:2em;        
    }
</style>
Copy the code

Font size

p{
font-size:26px;
}
Copy the code

Text color: color

Font: font-family

If the font is Chinese or English and consists of multiple words, use single or double quotation marks

Font-family: 宋体,"Times New Roman",Georgia,Serif;Copy the code

Control text weight: font-weight

  • 400 Normal thickness === Normal

  • 700 ===bold

  • 900 ===bolder

Font weight: normal(400);

<style>
    p{
        font-weight: bold;
    }
    b{  
        /* 400 */
        font-weight: normal;
    }
</style>
Copy the code

Control text tilt :font-style

  • font-style:italic; Tilt the text

  • font-style:normal; Make text normal

    Document span{ font-style: italic; } i{ font-style:normal; } span italics

Margin :0 auto;

div{
width:100px;
height:100px;
background:green;
margin:0 auto;
}
Copy the code

High line: the line – height

Center the text vertically

Height is the same value as line-height

li{
height:35px;
line-height:35px;
}
Copy the code

Frame: border

Dashed: the dotted line

Solid: solid line

<style>
  div{
            width:200px;
            height:200px;
            /* border:2px solid darkturquoise; */
             border:2px dashed darkturquoise; 
        }
</style>
Copy the code

Border-style Possible values

value

describe

none

Define no borders.

hidden

Same as “None”. Except when applied to tables, for which hidden is used to resolve border conflicts.

dotted

Define dot borders. Rendered as solid lines in most browsers.

dashed

Define the dotted line. Rendered as solid lines in most browsers.

solid

Define a solid line.

double

Define a double line. The width of the double line is equal to the value of border-width.

groove

Define 3D groove borders. The effect depends on the value of border-color.

ridge

Define a 3D ridge border. The effect depends on the value of border-color.

inset

Define 3D Inset borders. The effect depends on the value of border-color.

outset

Define 3D outset frame. The effect depends on the value of border-color.

inherit

Specifies that border styles should be inherited from the parent element.

The complete case of Everest in Motion

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> *{margin:0; padding:0; } ul,ol{ list-style: none; } a{ text-decoration: none; color:#333; } body{ background:lightblue; } .main{ width: 500px; margin:0 auto; border:2px dashed darkcyan; } h3{ height: 50px; line-height: 50px; font-weight: normal; font-size:22px; text-indent: 30px; } .more{ font-size:14px; } li{ height: 50px; line-height: 50px; text-indent: 30px; } li:hover{ background:lightseagreen; } span{ color:darkcyan; } < / style > < / head > < body > < div class = "main" > < h3 > Everest dynamic < a class = "more" href = "" > more < / a > < / h3 > < ul > < li > < a href =" "> < span > </a> </li> <a href="">< /span> </a> </li> <span> <span> </a> </li> <span> <span> </a> </li> <span> <span> </a> </li> <span> <span> </a> </li> <span> <span> </a> </li> <span> <span> Compassion heart grow read < / a > < / li > < li > < a href = "" > < span > Everest the secret of growth, decline between a pen < / span > to flourish, fresh compassion mind read < / a > < / li > < / ul > < / div > < / body > < / HTML >Copy the code

Everest story

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>Document</title> *{margin:0; padding:0; } ul,ol{ list-style: none; } body{ background:lemonchiffon; } a{ text-decoration: none; color:lightgreen; } li{ height:35px; line-height: 35px; } .main{ width:500px; margin:0 auto; border:1px dashed darkorange; padding:20px; } .icon{ width:16px; height:16px; line-height:15px; text-align:center; background:indianred; display:inline-block; font-size:12px; color:#fff; } .special{ color:lightblue; </style> </head> <body> <ul class="main"> <li> <span class="icon"> </ SPAN > <span class="icon"> </span> <span class="special"> </ SPAN > <span class="icon"> </span> <span class="special"> </ SPAN > <span class="icon"> </span> <span class="special"> </ SPAN > <span class="icon"> </span> <span class="special"> </ SPAN > <span class="icon"> </span> <span class="special"> </ SPAN > <span class="icon"> </span> <span class="special"> < / span > Everest employment are also wonders have been < / a > < / li > < / ul > < / body > < / HTML >Copy the code