Follow teacher pink's pre-school HTML-D1

0. Composition of web standards

Structure: used to organize and classify web page elements (HTML)

Presentation: used to set the layout, color, size and other appearance styles (CSS) of web page elements

Behavior: definition of web page model and preparation of interaction (JavaScript)

1. HTML syntax specification

1. Basic grammar

  1. The label is inside angle brackets

  2. Labels always appear in pairs, called Double labels

  3. Very few are single labels < br \ >

2. Label relationship

<html>

	<head></head>

	<body></body>

</html>

Inclusion relation

Juxtaposition relation

2. HTML basic structure tag

<html></html>:html Label, root label
<head></head>:Document header, in head When a label must be set in the label title
<title></title>:Page title
<body></body>:The main body of the document and the content of the page are basically body inside
<html>
    <head>
         <title>Title</title>
    </head>
    <body>
    </body>
</html>

3. Web development tools

1. Use of vscode

  1. Save (ctrl+s), to save as html file
  2. ctrl+shift+x: Download plug-ins
  3. Generate page skeleton structure: enter! Press the tab key.
  4. Alt+B: open the browser (right click open in browser).

2. VsCode installation plug-in

  1. Chinese language pack for VS Code
  2. Open in Browser
  3. Auto Rename Tag: automatically rename paired HTML/XML tags
  4. CSS Peek: trace to style

3. The vscode tool generates a new code for the skeleton label

<!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>I use vscode First page created</title>
</head>
<body>
    Fill up
</body>
</html>
  1. The document type declaration tells the browser which html version to use to display the web page.
<!DOCTYPE html>
//Not an html tag
//It must be written on the first line
  1. lang language type

    <html lang="en">
    //en is English and zh cn is Chinese
    
  2. Character set that specifies which character encoding should be used in HTML documents

    <meta charset="UTF-8">
    //"UTF-8" is a universal code, which basically contains characters used by all countries in the world.
    

4. Common HTML tags

1. Title label < H1 > - < H6 >

<body>
    <h1>Title label</h1>
    <h1>The title consists of six lines</h1>
    <h2>Text bold one line</h2>
    <h3>Decrease from small to large</h3>
    <h4>From heavy to light</h4>
    <h5>After grammar specification writing</h5>
    <h6>See for specific effects</h6>
</body>

2. Paragraph < p > and newline label < br / >

<p>2021 At about 23:40 on June 9, 2004, a case of intentional injury occurred in the west section of the second ring road in our city, and a woman was injured in her lower abdomen.<br />After working, the police arrested the suspect on the 10 day, 13 hours (male, 43 years old, Shaanxi, theft, robbery). After examination, he Moumou confessed to the crime of deliberately harming others in vain. At present, the injured woman has been treated in the hospital and her vital signs are stable. Criminal suspect He Mou has been legally arrested by our bureau, and the case is being further investigated.
</p>
//< br / > is a single label, forced line feed but no segmentation.

3. Text formatting label

<body>
    I am<strong>Bold label</strong> <br />
    Me too.<b>Bold label</b> <br />
    I am<em>Tilt label</em> <br />
    Me too.<i>Tilt label</i> <br />
    I am<del>Delete line</del> <br />
    Me too.<s>Delete line</s> <br />
    I am<ins>Underline</ins> <br />
    Me too.<u>Underline</u> <br />
</body>

4. Box label < div > < span >

  1. div is the abbreviation of division, which means division and partition. Separate lines, large boxes, block level labels.
  2. Span means span, span. A row can have multiple span labels, small boxes, and row level labels.

5. Image labels and paths

1. Image label

The image label is a single label

<body>
    <h4>Use of picture labels</h4>
    <img src="kitty.jpg" />	//Must write
    <h4>alt Replace the text, and replace it with text when the image cannot be displayed</h4>
    <img src="kitty1.jpg" alt="Hello!riki!"/>
    <h4>title Prompt text, mouse over the image and prompt with text</h4>
    <img src="kitty.jpg" title="Hello!riki!"/>
    
    <h4>width Set width for image:</h4>
    <img src="kitty.jpg" width="300" title="Hello!riki!"/>
    <h4>height Set height for image:</h4>
    <img src="kitty.jpg" height="300" title="Hello!riki!"/>

    <h4>border Set border for image:</h4>
    <img src="kitty.jpg" title="Hello!riki!" width="300" border="15" />
</body>

2. Path

  1. Relative path: the position of the picture relative to the HTML file

    1) Same level path

    <img src="kitty.jpg" />
    
    1. Next level path:
    <img src="images/kitty.jpg" />
    

    3) Upper level path:

    <img src="../kitty.jpg" />
    
  2. Absolute path

    <body>
        <img src="C:\Users\Pessimistic\Pictures\wife\kiss.png" width="500"/>
    
        <img src="https://wx3.sinaimg.cn/mw690/006SBzwCgy1gr6ha4aq6aj33k02o0b2b.jpg" />
    </body>
    

6. Hyperlink labels

  1. External links

    <h4>1.External links</h4>
    <a href="https://weibo. com/6303673834/profile? rightmod=1&wvr=6&mod=personnumber&is_ all=1#_ rnd1623480704164" target="_ Blank "> my home page</a>
    //target attribute: the default is_ self the current window opens the link_ blank opens a new window and jumps to the link
    
  2. internal link

    <h4>2.Internal links: links between internal pages of a website</h4>
    <a href="01-HTML.html">01-HTML</a>
    
  3. Empty link

    <h4>3.Empty link:#</h4>
    <a href="#"> empty link</a>
    
  4. Download link

    <h4>4.Download link: the address links to the file.exe Or.zip Equal compressed packet format</h4>
    <a href="kitty.zip">Download File</a>
    
  5. Page element link

    <h4>5.Links to web page elements</h4>
    <a href="https://weibo.com/6303673834/profile?rightmod=1&wvr=6&mod=personnumber&is_all=1#_rnd1623480704164">
        <img src="kitty.jpg" height="300">
    </a>
    
  6. Anchor link

    <h2 id="return">catalogue</h2>
    1.Acting experience<br />
    <a href="#Zyjm "> 2. Variety show < / a > < br / >
    3.Character evaluation<br />
    
    <h3>Acting experience</h3>
    2017 On July 26, 2017, the first album was released [1] 
    2018 On July 15, 2004, the single "up wind" was released freestyle> [7]  ;7 On June 20, he released his personal single "enemy" freestyle> [8]  ;8 On June 2, he released his personal single "uniform rise" [9]  ;9 On May 5, he launched his personal single "Netease cloud" [6]  ;9 On June 16, the single "struggling" was released [10]  ;10 Published on June 6 diss Song "listen to this song without singing" [11]  . 2019 On March 12, 2004, the single "I don't regret meeting you" was released [12]  ;4 On June 12, he released his personal single "I didn't sleep" [13]  ;4 Launched on 28th, with Zhang Xuefei Lil.Fred Cooperation single "Besieged City" [14]  ;5 On January 21, he released his personal album "C" [15]  ;7 On June 16, the single "row to the right" was released. [16] 2020 On January 7, 2004, he released his personal album "early" [3]  ;In the same year, he participated in the rap program "rap new generation" [4]  ;5 On August 8, he launched his personal single "house" [17]  ;12 On September 9, she released the prelude "starting point" of the album "900 steps" in cooperation with adawa [5]  ;12 On June 16, in the live broadcast of Senma Doinb Chorus single "tongs of fire 2021" [18] 2021 On January 1, 2004, I participated in the dry food MSN Music Festival Performance; [19]  1 Make complaints about Jiang Yunsheng's first team in the fifth quarter of the 26 quarter of Tucao conference. [20]  1 Make complaints about the 31 quarter of Tucao fifth.<br />
    <img src="https://img9.doubanio.com/view/group_topic/l/public/p355637924.webp" height="800">
    
    <h3 id="zyjm">variety show</h3>
    Broadcast time	Program name	brief introduction
    2021-1	Make complaints about the fifth quarter of the conference	Recording guests[21] 
    2020-8-22	Rap new generation	One of the contestants<br />
    <img src="https://img2.doubanio.com/view/group_topic/l/public/p354438091.webp">
    <a href="#Return "> return to the top</a>
    
    <h3>Character evaluation</h3>
    Music single
     Song name	Release time	Song introduction
     house[17] 	2020-5-8	Contemporary rap performance artists
     Stroke to the right	2019-7-16	Why are you so scum[16] 
    A Town Besieged[14] 	2019-4-28	There are only two kinds of people in the world
     I didn't sleep[13] 	2019-4-12	Dedicated to every simple boy misunderstood by his girlfriend, the kind as simple as me.
    

    Target setting id

    <h2 id="return">catalogue</h2>
    

    Set hyperlink from

    <a href="#Return "> return to the top</a>
    

7. Annotation labels and special characters

Special charactersdescribecode
Space&nbsp
<Less than sign&lt
>Greater than sign&gt

Keywords: html

Added by Syto on Sun, 30 Jan 2022 03:43:45 +0200