1. In the body of the first sentence with: small knowledge, big challenge! This paper is participating in the  Essentials for programmers  “Creative activities
  2. In the second sentence of the text, add the following words Project Diggin  To win the creative gift package and challenge the creative incentive money

Previous introduction: front-end learning route

Html code is made up of tags, and tags are the most basic things, so we’ll focus on those tags. I have sorted out almost all commonly used labels in detail, looking forward to your attention and support. Cut the crap and get right to the point.

Basic structure label

1.
Comment tags make our code clearer and have no effect on the web page and do not display on the desktop

2. Document type declaration tag:
DOCTYPE is short for Document Type, meaning Document Type. The first line in the HTML document infrastructure is the HTML DOCTYPE declaration.

3. Root label: < HTML > Except for the document type declaration at the beginning of the article, all HTML documents start with the < HTML > tag and end with the
tag. Inside the < HTML > and
tags are two important tags: the header tag and the body tag. Mark the header and body of the document separately.

4. Header tag: The header of an HTML document begins with and ends with the tag. The contents of the tag are not displayed in the pages of the web page. The tag can contain tags such as

and
, which are used to declare page titles, character sets, keywords, etc.

5. Page title tag:

HTML documents use the and tags to mark the title of the page. This title is displayed in the title bar of the browser window.

The tag is used to set the default URL or target for all links on the page. When a relative path is used in an HTML document, the browser completes the URL specified by the tag.

<head>
<base href="http://loacalhost/images"/>
</head>
<body>
<img arc="sunflower.jpg"/>
</body>
Copy the code

At this time, the SRC attribute in the image tag is filled in a relative path. Due to the function of the tag, this path will be automatically completed by the browser: < img SRC = “http://loacalhost/imagessunflower.jpg/” / > < base > tag can also be set open for all links on this page and unified way, Target =”_blank” means that all the hyperlinks in the document will open in a new window.

<head>
<base target="_blank">
</head>

<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.163.com">netease</a>
</body>
Copy the code

7. Metadata tags :

tags are used to provide metadata for the current HTML document that is not directly displayed on a web page, but is machine-readable and suitable for search engine indexing. Usually used to define character sets, keywords, descriptions, author information, etc.

The style tag can be used to define the font style, background color, alignment, and other style information for a specific area of the document.

<head>
<style>
p {color:red}
</style>
<body>
<p>This is a paragraph tag</p>
</body>
Copy the code

This code displays paragraphs in an HTML document that do not specify a font color as red.

9. Link tags: The tag is used to connect external resources to the current HTML document. It only appears in the head tags and and is usually used to link external stylesheets. Such as:

<head>
<link rel="stylesheet" href="yangshi.css"/>
Copy the code

10. Script tags: tags. Such as:

<head>
<script src="text.js"></script>
</head>
Copy the code

11 Body tags: The body of an HTML document begins with a tag and ends with a tag. The contents of the tag are all displayed on the page. Text can be added directly to the tag, or other tags can be nested to form a diversified display.

Example:.html code

<! DOCTYPEhtml>
<html>
  <head>
    <title>This is the title tag</title>
<link rel="stylesheet" type="text/css" href="./yangshi.css">
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <! --style attribute tag -->
    <style>
    .div{
    width:100px;
    height:100px;
    background:green;
    }
    </style>
  </head>
  
  <! -- Body tag -->
  <body>
  <p>This is the paragraph tag</p>
  <div class="div">This is a block-level element</div>
  </body>
  
</html>
Copy the code

Yangshi. CSS code

@CHARSET "UTF-8"; p{color:red; font-size:9; The font-family: official script; background-color:blue; }Copy the code

Running results:

Based on label

1. Paragraph tags:

The paragraph tags

and

are used to form a new paragraph, separated by a blank line by default. 

<head>
<style>
      .p1{
  background-color:red;
  }
  .p2{
  background-color:green;
  }
    </style>
</head>
<body>
<p class="p1">This is paragraph one</p>
<p class="p2">This is paragraph two</p>
</body>
Copy the code

Results: easy to distinguish color 2.Title tag: < H1 >~< H6 >HTML USES<hn>and</hn>To mark the title in the text, where n ranges from 1 to 6,<h1>Tags are labeled with the largest font, decreasing in order, and the default state of the title tag is left-aligned bold.

<body>
  <h1>Effect of h1</h1>
  <h2>Effect of h2</h2>
  <h3>Effect of h3</h3>
  <h4>H4 effect</h4>
  <h5>Effect of h5</h5>
  <h6>H6 effect</h6>
  </body>
Copy the code

Running results:

3. Horizontal tag: < HR > Horizontal tag is a horizontal line drawn on a web page to visually segment the text.

no closing tag can be used alone. 

<body>
  <h1>Effect of h1</h1>
    <hr>
  <h2>Effect of h2</h2>
    <hr>
  <h3>Effect of h3</h3>
    <hr>
  <h4>H4 effect</h4>
    <hr>
  <h5>Effect of h5</h5>
    <hr>
  <h6>H6 effect</h6>
  </body>
Copy the code

Running results: 4.Bold tags <b> and <strong>Bold labels<b>and<strong>Can display the text content between their first tags as bold font effect. The difference is the use<strong>The content of the tag is considered important content.

 <body>I'm not bold labels<br>
 <b>I'm bold tag (using tag B)</b><br>
 <strong>I'm using the bold tag.</strong>
  </body>
Copy the code

Running results:

5. The superscript tag and the subscript tag are used to display text in superscript form, such as x squared.

 <body>Superscript style: 2<sup>10</sup>= 1024<br>Subscript style: carbon dioxide CO<sub>2</sub>
  </body>
Copy the code

Running results:

There are two types of revision tags, which add strikeouts and underscores to the text, respectively


  <body>Delete line label application:<del>Error content</del><br>Application of the underline tag:<ins>The right content</ins>
  </body>
Copy the code

Running results:

7. Preformatting label 

 Preformatting label allows the text to be displayed with line breaks and Spaces.
  <body>In the quiet night, the moon shines before my bed. Can it be hoarfrost on the ground Looking up the bright moon, lower the head to think of home.<br>
    <! -- with <pre> and without comparison -->
    <pre>In the quiet night, the moon shines before my bed. Can it be hoarfrost on the ground Looking up the bright moon, lower the head to think of home.</pre>
  </body>

Copy the code

Running results:

A list of tags

1. Ordered list < OL > Ordered list is used to define ordered lists with numbers. It must be used together with the list item label

  • . Attribute:
      1. a Lowercase letters (a, B, C)
      A Capital Letters in English (A,B,C)
      i Roman numerals lowercase (I, II,iii)
      I Roman numerals uppercase (I,II,III)
      1 Arabic numerals (1,2,3) 
      <body>
     <ol>
     <li>The first item</li>
     <li>The second</li>
     <li>The third</li>
     </ol>
  </body>
Copy the code

      Running results:

      2. The ordered list

        Unordered list label is used to define unnumbered unordered lists. It must be used together with the list item label.

        disc Solid circular
        circle The hollow circular
        square square 
        <body>
     <ul type="circle">
     <li>The first item</li>
     <li>The second</li>
     <li>The third</li>
     </ul>
     <ul type="disc">
     <li>The first item</li>
     <li>The second</li>
     <li>The third</li>
     </ul>
  </body>
Copy the code

        Running results: 3.Define the list tag < DL >Defining list tags<dl>and</dl>Is a special list used for term definition, and each list item needs to be combined with the term tag<dt>And define tags<dd>Use together. The term tag should be marked at the beginning of each term, and the definition tag should be marked at the beginning of each definition section. By default, the full text is indented.

        <body>
     <dl>
     <dt>Motivational statements</dt>
     <dd>Born when high ideals, learning to insist on. From this moment on, I am still me, but the mood is different. No matter how the road in the future, I will silently encourage myself in the bottom of my heart, perseverance, waiting for the beauty of a broken cocoon.</dd>
     </dl>
     <dl>
     <dt>Romantic statement</dt>
     <dd>I don't know when it started, but finding you in a crowd has become my best thing. Miss the place to reach, eyes and everywhere is you.</dd>
     </dl>
  </body>
Copy the code

        Running results: