British scientist Tim Berners-Lee invented the World Wide Web in 1989. URL+HTTP+HTML

1. Basic Concepts

1. Web pages and websites

  • A website is a collection of web pages that are made on the Internet according to certain rules and using HTML to display specific content
  • A web page is a page in a web site, usually an HTML file, read through a browser
  • Web page is the basic element of the website, it is usually composed of pictures, links, text, sound, video and other elements. Usually we see a web page, common file ending in.htm or.html, so it is commonly known as HTML file

2. HTML

  • HTML stands for Hyper Text Markup Language, which 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.

Hypertext has two meanings: 1. It can include images, sounds, animations, multimedia, etc. (beyond the limits of text) 2. It can jump from one file to another, linking files with hosts around the world (hyperlink text)

3. Composition of web pages

A web page is made up of web elements that are described using HTML tags and then displayed to the user through browser parsing

4. Web standards

Web standards are a collection of standards developed by the W3C and other standardization organizations. W3C (World Wide Web Consortium) is the most famous standardization organization in the world.

Why do We need Web standards?

Following Web standards has the following advantages in addition to making pages written by different developers more standard and uniform:

1. Make the Future of the Web wider.

2. Content can be accessed by a wider range of devices.

3. More likely to be searched by search engines.

4. Reduce traffic costs.

5. Make your site easier to maintain.

6. Speed up your page browsing.

5. Composition of Web standards

It mainly includes three aspects: Structure, Presentation and Behavior. Simple: Structure goes to HTML files, presentation goes to CSS files, behavior goes to JavaScript files.

Second, HTML syntax specification

1. The HTML hands

<! DOCTYPEhtml>// Document type, which is html5 type<html lang="en">// HTML tag, language=en, usually zh-cn<head>
    <meta charset="UTF-8">// Character encoding<meta name="viewport" content="Width = device - width, initial - scale = 1.0">// Prevents page zooming<title>Document</title>// Write the title</head>
<body>
    
</body>
</html>
Copy the code

2. The contents of the body

<! DOCTYPEhtml>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <header>Advertising for lease</header>The header / / head<div>                                  //划分div
      <main>// Mark the main content main<h1>That's a title</h1>
        <section>// create a new section<h2>Brand new chapter</h2>
          <section>
            <h4>1.1</h4>//h1~h6, adjust font size<p>Paragraph by paragraph</p>P / / paragraph</section>
        </section>
      </main>
      <aside>// mark aside for page 1, 2, 3</aside>
    </div>
    <footer>&copy;YDZ enterprise</footer>/ / at the bottom of the footer</body>
</html>
Copy the code

3. Global properties

Attributes owned by all tags

<! DOCTYPEhtml>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      .middle {
        background: green;
        color: white;
      }
      .bordered {
        border: 10px solid blue;
      }
      [id=xxx] {
        border: 10px solid yellow;
      }
    </style>
  </head>

  <body>
    <header hidden>Advertising for lease</header>
    <div class="middle bordered" contenteditable>
      <main>
        <h1 style="border: 10px solid red;" tabindex="1" title="Complete content.">That's a title</h1>
        <section>
          <h2 tabindex="2">Brand new chapter</h2>
          <section>
            <h4 tabindex="3">1.1</h4>
            <p>Paragraph by paragraph</p>
          </section>
        </section>
      </main>
      <aside>Go to page 1, 2 and 3</aside>
    </div>
    <footer id="xxx">&copy;YDZ enterprise</footer>
  </body>
</html>
Copy the code

  • Class and ID: Each HTML element can be styled using the class attribute added to. Every HTML element can use the ID attribute, but it must be unique. Therefore, id is not recommended

  • Contenteditable makes owning contenteditable

  • Hidden hidden

  • Note: JS implements overridden styles

  • Tabindex allows users to switch between tabIndex =0 (last) and tabIndex =-1 (never accessed) by pressing the Tab key

  • The title command displays the content when the mouse hovers over the ellipsis

4. Default styles

How to find the default style: Open the Chrome developer Tool, Elements->Styles-> User Agent stylesheet

CSS reset changes the default style

5. Content labels

5.1. Ol + Li ordered list

<ol>
  <li>list </li>
  <li>item</li>
</ol>             //ordered list
Copy the code

5.2. Ul + LI Unordered list

<ul>
  <li>list</li>
  <li>item</li>
</ul>              //unordered list
Copy the code

5.3. Dl + + dd dt

<dl>                //description list
  <dt>Describe the target</dt>  //describe term
  <dd>Describing the content</dd>
</dl>
Copy the code

5.4. Pre Retains space, Enter, and Tab

<pre>               
<h2 tabindex="2">Brand new chapter</h2>
</pre>
Copy the code

5.5. code All fonts equal width

<pre>
<code>
  abcd
  efgh
</code>
</pre>
Copy the code

5.6. Hr horizontal divider

Personal center<hr>
Copy the code

5.7. Br a newline

<h4>On a line<br>The next line</h4>
Copy the code

5.8. a hyperlink

<p>
  <a href="//google.com">search</a>
</p>
Copy the code

5.9. Em Is highlighted

<p>
  <em>The key mark</em>
</p>
Copy the code

5.10. ‘

<p>
  <strong>Bold font</strong>
</p>
Copy the code

5.11. The quote

reference

5.12. blockquote

References are separated by Spaces

6. A label

6.1. The attribute

Href means Hyper Reference hyperlink

<p>
  <a href="//google.com">search</a>
</p>
Copy the code

You can install a parcel to open the link using the parcel.

λ yarn global add parcel
λ parcel index.html
Server running at http://localhost:1234 
√  Built in 4.43s.
Copy the code

6.2. The url

// Google.com writes this url instead of HTTPS or HTTP to prevent errors

6.3. The path

/a/b/c.html and A /b/c.html (absolute and relative paths are the same in the same root directory)

Index.html is the same as./index.html (same root directory)

6.4. The pseudo protocol

6.4.1 javascript code

(You can make an a tag with no response, empty code)

<body>
  <a href="javascrip:alert(1);">Javascrip pseudo-protocol, javascrip: fill in code;</a>
</body>
Copy the code

6.4.2 mailto: mail

<body>
  <a href="mailto:[email protected]">Email YDZ</a>
</body>
Copy the code

6.4.3 TEL: Indicates the mobile phone number

<body>
  <a href="tel:1384135xxxx">Contact YDZ by phone</a>
</body>
Copy the code

6.4.4 id

href=#xxx

Href =”# XXX “href=”# XXX” href=”# XXX”

6.4.5 target

Specifies the window in which the hyperlink is opened

<p>
  <a href="http:google.com" target="_blank">search</a>
</p>
Copy the code

The value of target:

  • _blank (Open the link on a new page)
<body>
  <a href="//google.com" target="_blank">To search</a>
</body>
Copy the code
  • _self (opens the link on the current page)
<body>
  <a href="//google.com" target="_self">To search</a>
</body>
Copy the code
  • _top (if there is no frame, the same effect as _self opens the hyperlink in the current browser window; If you have a frame, unlike _self, _self will open the hyperlink in the frame, while _top will open the link in the browser window (the browser window contains the frame).
<body>
  <a href="//google.com" target="_top">To search</a>
</body>
Copy the code
  • The _parent (target=”_parent”, property causes the document to load the parent window or the framesets containing frames referenced by the hyperlink. If the reference is in a window or in a top-level frame, it is equivalent to the target _self.
<body style="background: yellow;">
    <a href="//google.com" target="_parent"></a>
  </body>
Copy the code
  • Name your own window.name (command will open a new page and name it “YDZ”, so that some links can be opened on YDZ page as well (for example, baidu)
<body>
  <a href="//google.com" target="YDZ">To search</a>
  <a href="//baidu.com" target="YDZ">To search</a>
</body>
Copy the code
  • Name your own ifame. Name (in a page can be Google and Baidu)
<body>
  <a href="//google.com" target="YDZ">To search</a>
  <a href="//baidu.com" target="DZY">To search</a>
  <hr />
  <iframe src="" name="YDZ"></iframe>
  <hr />
  <iframe src="" name="DZY"></iframe>
</body>
Copy the code

At 6.5.

Download current page (not supported in most browsers)

6.6. Rel = noopener

Used to resolve maliciously exploited security vulnerabilities. After opening the new Tab page with target=”_blank”, the JS function will grant the new window some permissions to operate the original Tab page. The window object of the new page has an attribute opener, which points to the window object of the previous page. Malicious web site will use Windows. Opener. The location. The replace to change the original web site URL

7. The iframe tag

The iframe element creates an inline frame (that is, an inline frame) that contains another document. Built-in Windows. (Rarely used now)

8. The table tag

8.1. The TABLE element of HTML represents tabular data — that is, information represented through a two-dimensional data table

<body>
    <table>
      <thead>
        <tr>
          //table row
          <th></th>
          <th>The class</th>
          //table head
          <th>The name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>The first name</th>
          <td>Three class eight</td>
          //table data
          <td>Big fish miscellaneous</td>
        </tr>
        <tr>
          <th>Second,</th>
          <td>Three class eight</td>
          <td>careless</td>
        </tr>
        <tr>
          <th>The third</th>
          <td>Three class eight</td>
          <td>Monkey big thunder</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>statistical</th>
          <td>There are three students in Class eight</td>
          <td>Three students</td>
        </tr>
      </tfoot>
    </table>
  </body>
Copy the code

Observe the above examples and comments (table, thead, tbody, tfoot, TR, TD, th)

8.2 Related Styles

8.2.1 table-layout

The table-layout CSS property defines the algorithm used to layout the cells, rows, and columns of a table.

Values:

  <style>
      table{
          table-layout: auto;
      }
  </style>
Copy the code

Most browsers use automatic table layout algorithms for table layout. The width of tables and cells depends on what they contain.

  <style>
    table {
      table-layout: fixed;
    }
  </style>
Copy the code

The widths of tables and columns are set by the width of the table, and the width of a column is determined only by the first row of the column. In the current column, the row following the row of the cell does not affect the entire column width.

With the “fixed” layout, the entire table can be parsed and rendered as soon as its first row is downloaded. This speeds up rendering for “automatic” layout, but subsequent cell content does not adapt to the current column width. Any cell that contains overflow content can use the overflow property to control whether content overflow is allowed.

8.2.2 border – the collapse

<style>
    table {
      table-layout: fixed;
      border-spacing: 0px;
      border-collapse: collapse;
    }
    td.th {
      border: 1px blue;
    }
  </style>
Copy the code

The border-collapse CSS property is used to determine whether the borders of the table are separated or merged. In delimited mode, adjacent cells have independent borders. In merge mode, adjacent cells share borders.

Values:

(1) In the collapsed mode, adjacent cells in the table share borders. In this mode, the CSS border-style property has the value inset as slot and the value outset as ridge.

(2) Separated mode is the traditional mode of HTML table. Adjacent cells have different borders. The spacing between borders is determined by the CSS attribute border-spacing.

8.2.3 border – spacing

The border-spacing attribute specifies the spacing between adjacent cell borders (only applicable in border-separation mode). Equivalent to the cellspacing attribute in HTML, but the second optional value can be used to set vertical spacing as opposed to horizontal spacing.

The border-spacing value also applies to the outer border of the table. That is, the spacing between the border of the table and the cells in the first row, first column, last row, and last column is determined by the corresponding (horizontal or vertical) border spacing (border-spacing) and the corresponding (top, right, Bottom or left) sum of inner margins.

This property only works when border-collapse is separate.

Values:

(1) length

A length value that describes the horizontal and vertical distances between cells. It is only used in single-valued syntax.

(2) horizontal

A length value that describes the horizontal distance between cells in two adjacent columns. It is only used in double-valued syntax.

(3) vertical

A length value that describes the vertical distance between adjacent rows of cells. It is only used in double-valued syntax.

(4) inherit

A keyword that indicates the calculated value of border-spacing for the parent element, which must have border-spacing applied.

9. Img tags

The img element inserts an image into the document. It can make a GET request and display the image.

9.1. The attribute

<img class="fit-picture"
     src="/media/examples/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">
Copy the code

  • The SRC attribute is required and contains the file path of the image you want to embed.

  • The Alt attribute contains a text description of the image, which is not mandatory, but is incredibly useful for accessibility — the screen reader reads the description to the user who needs to use the reader to let them know what the image means. Normal browsers also display alternate text in the Alt attribute on the page if the image cannot be loaded for some reason: for example, when a network error occurs, the content is blocked, or the link is out of date.

Other attributes:

  • Referrer/CORS control to ensure security and privacy: see Crossorigin attribute and ReferrerPolicy attribute for details.

  • Set the original resolution using width, height, and intrinsicSize (rarely used) : This sets the space the image should take up to ensure that the layout of the page is stable before the image is loaded.

  • Use Sizes and SRcset to set up responsive images (also refer to the Picture element and our responsive image tutorial).

9.2 event

onload/onerror

<body>
    <img id="xxx" width="800" src="1234.jpg" alt="This is a photo of the ear that failed to load." />
    <script>
      xxx.onload = function () {
        console.log("Image loaded successfully");
      };
      xxx.onerror = function () {
        console.log("Image load failed");
        xxx.src = "/ backup image.png";
      };
    </script>
  </body>
Copy the code

You can use an alternate image if the image fails to load

9.3 responsive

max-width:100%

The max-width property is used to set the maximum width value for an element. Elements defined by max-width will avoid further enlarging by the width attribute once they reach the value

Note:max-widthoverwritewidthSet, butmin-widthSettings overridemax-width.

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>img</title>
    <style>* {// All elementsmargin: 0; // The margin is0
        padding: 0; // The inner margin is0
        box-sizing: border-box; / / note}img {
        max-width: 100%;
      }
    </style>
  </head>
Copy the code

The code allows mobile users to have a better experience viewing images

Note: The box-sizing attribute can be used to adjust these representations: Content-box is the default. If you set the width of an element to 100px, the content area of the element will be 100px wide, and the width of any borders and margins will be added to the width of the final drawn element. Border-box tells the browser that the border and margin values you want to set are contained within width. That is, if you set the width of an element to 100px, then the 100px will contain the border and padding. The actual width of the content area is width minus (border + padding). In most cases, this makes it easier to set the width and height of an element.

10. The form tag

The Form element represents an area in the document that contains interactive controls for submitting information to the Web server.

This element has global attributes

10.1. The action

<body>
    <form action="/xxx" method="POST">Method is used to control whether GET or POST is used<input type="text" />/ / input box<input type="submit" />// Submit button</form>
  </body>
Copy the code

URL to handle form submission. This value can be overridden by the formAction attribute on a button, input Type =”submit”, or input Type =”image” element.

10.2. autocomplete

Indicates whether the input element can have a default value, which is automatically completed by the browser. This setting can be overridden by the autocomplete property of a child element of the form.

<body>
    <form action="/xxx" method="POST" autocomplete="on">
      <input name="username" type="text" />
      <input type="submit" />
    </form>
</body>
Copy the code

Can display the user name, optional

10.3. method

Browsers use this HTTP method to submit forms. Possible values are:

  • post: means HTTPPOST method; The form data is contained in the form body and sent to the server.
  • get: means HTTPThe GET method; The form data will be attached toactionProperty, and ends with the ‘? ‘as a separator,No side effects”, use this method.
  • dialog: If the form is in<dialog>Element to close the dialog box when committing.

10.4. The target

Represents where the response information is displayed after the form is submitted. In HTML 4, this is a frame name/keyword pair. In HTML5, this is the name/keyword of a browsing context (such as a TAB, window, or iframe). The following keywords have special meanings:

_self: default value. Load in the same browsing context.

_blank: Loaded in the new unnamed browse context.

_parent: is loaded in the parent browsing context of the current context, or if there is no parent, behaves the same as _self.

_top: In the top-level browsing context (that is, an ancestor browsing context that has no parent of the current context), or if there is no parent, behaves the same as _self.

  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" />
      <iframe name="a" src="index-demo-0.html" frameborder="0"></iframe>
    </form>
  </body>
Copy the code

10.5. onsubmit

  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" value="Let's Go" />
      <button type="submit">Let's Go</button>
      <iframe name="a" src="index-demo-0.html" frameborder="0"></iframe>
    </form>
  </body>
Copy the code

Submit must have type=submit, if not the default type=submit

Both button and input are used to write submit buttons. The difference is that input can only have plain text, and a button can have any label

11. The input tag

The HTML input element is used to create interactive controls for web-based forms to accept data from users; Various types of input data and control widgets can be used, depending on the device and the User Agent.

How input works depends largely on the value of the Type attribute, which is described in the respective reference pages. If this property is not specified, the default type is text.

Available values include:

Click to view input