HTML (HyperText Mark-up Language) Hypertext Markup Language

<! DOCTYPE html >     <-! Statement which is a html document -> 
< html >     <-! Outermost layer of the label to define the scope of the label -> 
    < head >     <-! Header tag for introducing external file, specify the encoding format, set the title (browser tab title) name -> 
        < Meta charset = "UTF-8" >     <-! specify the encoding format -> 
        < title > </ title >     <! - The title tag -> 
    </ head > 
    < body >     <-! content tag (body) -> 
        < h1 of > <!- Title Tag, from large to small-H6 h1 -></ H1 of > 
        
        < br />      <-! Newline tag -> 
        
        < pre > 
            <-! Formatting tags (content can be identified line breaks - Enter) -> 
        </ pre > 
        
        < P > < ! - paragraph tags -> </ the p- > 
        <-! 
            picture tags: img 
                src: image path 
                alt: properties role 
     ① when the picture is not displayed properly, you will be prompted in the alt text, which will help the user experience 
     ② crawling pictures data, image analysis (as a condition for the attribute values crawling) 
        
        -> 
        < IMG the src = "" Alt = ""  />  
        <!- 
            link label: a- 
            used to jump web pages, HTML files can also jump page
            href attribute value is the address, if there is no default #, no effect after clicking 
            target attribute: _blank will again pop up a window 
                      _self to display the current page, the default is the Self 
        -> 
        < A href = "http://www.baidu. COM " > </ a > 
        
        < div ID =" " > block tag
             < span ID =" " > 
                modified short text of a paragraph 
            </ span > 
        </ div > 
    </ body > 
</ HTML >

CSS (cascading style sheets) Cascading Style Sheets

Role: to set a style tag
style: text, font, size, background color pages, pictures

CSS notation:
1, the formula row (too easy to write code duplication)

<div style="width: 800px;height: 600px;font-size: 14px;">
.......
</div>

2, embedded (likely to cause the same tag modified with a style issue)

< HTML > 
    < head > 
        < Meta charset = "UTF-. 8" > 
        < title > CSS border properties </ title > 
        < style type = "text / CSS" > 
            div { 
                width : 200px ; provided div width 
                height : 200px ; Settings div height 
                border : 3px Solid Gold ; set the border attribute 
                border-Top : 4px dotted Blue ; set on edge properties
                border-left : 5px Solid Green ; disposed on the left line attribute 
                border-bottom : Solid # FF0000 ; Set the bottom edge properties 
                border-right : Solid Aqua ; disposed on the right line attribute
             } 
        </ style > 
    </ head > 
    < body > 
        < div > 
            < h3 > borders show </ h3 > 
            AA 
            bb 
        </ div > 
    </ body > 
</ HTML >

3, the outer chain (reduce the coupling, high cohesion, low coupling code)
first create a file css (follows) link.css

div{
    background-color: green;
    color: red;
    height: 300px;
    width: 300px;
    
}

div p{
    color: aqua;
    font-family: serif;
    fon
}

Css file and then referenced in the original HTML file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css外链式</title>
        
        <link rel="stylesheet" type="text/css" href="../css/link.css"/>
        
    </head>
    <body>
        <div id="">
            超文本标记语言(Hyper Text Markup Language)
            <p>
                "Hypertext" refers to the inside pages can contain images, links, and even music, programs and other non-text elements.
            </p>
        </div>
    </body>
</html>

List Tags:
Categories:
1, unordered list: ul
ul> li * 5 under the Tab while generating ul li tag labels 5
ul tag can also add the type attribute (equivalent number): circle hollow circle, square filled square, disc solid circle (default)

2, ordered list: ol
default digit number (type)
may also specify the start attribute, which number begins from the calculation
type: 1,2,3,4
A, B, C
A, B, C
I, II, III,
I, II, III

3, a custom list: DL
dt title
dd list item

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--无序列表-->
        <ul type="square">
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </UL > 
        <-! ordered list -> 
        < OL Start = ". 3" type = "I" > 
            < Li > Golden Girls </ Li > 
            < Li > give it a go </ Li > 
            < Li > cycling becomes motorcycle </ li > 
        </ OL > 
        
        <-! custom list -> 
        < DL > 
            < dt > daily </ dt > 
            < dd > learning </dd>
            <dd>睡觉</dd>
        </dl>
    </body>
</html>

html and css label use of some common

HTML (HyperText Mark-up Language) Hypertext Markup Language

CSS (cascading style sheets) Cascading Style Sheets

Guess you like