HTML   css   js

1, Basic understanding

A. Understand web pages and related concepts

   1. Website essence: collection of web pages

   2. Web page: it is essentially an HTML file, which displays the page in the browser. Web pages are composed of text, video, images, etc

B. Browser

   1. Common international browsers: IE browser, Edge, Firefox, Chrome, Safari, Opera

   2. Browser kernel (rendering engine): responsible for reading web page content, sorting messages, calculating the display mode of web pages and displaying pages

C.Web standards (key)

Meaning: Web standard is a collection of a series of standards customized by W3C organization and other standardization organizations.

1. Why do you need Web standards

Avoid typographical differences due to different browsers. advantage:

          1. Make the Web have broader development prospects

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

          3. Easier to be searched by search engines

          4. Reduce website traffic costs

          5. Make the website easier to maintain

          6. Improve page browsing speed

  2. Composition of web standards

It is mainly composed of structure, performance and behavior

The best experience scheme proposed by Web standards: separation of structure, performance and behavior. (each written in the corresponding document)

... development environment

The first is vscode (text wrap alt+Z), which can be configured with corresponding plug-ins.

2, HTML (Hyper Text Markup Language) hypertext markup language

A. Basic grammar specification

Label: included in < >, it is divided into double label and single label
； There are also inclusive relations and parallel relations.

B. Common labels

1. Title label? > The content of each title is displayed on a separate line, and the content outside the label will start a new line

           <h1>Primary label</h1>

           <h2>Secondary label</h2>

           <h3>Tertiary label</h3>

           <h4>Four level label</h4>

           <h5>Five level label</h5>

           <h6>Six level label</h6>

2. Paragraph labels

There will be gaps between lines.

3. Line feed label
Forced line feed. There is no special gap between lines.

4. Text formatting label

5. Layout label

Box label, one line for each box.

Cross region means that there can be multiple tags in a unified line.

6. Image label

Display picture

Directory file: a common folder that stores material related information, such as html, pictures, videos, etc

Root file: open the first layer of the directory folder

Relative path: establish a directory path based on the location of the referenced file

Absolute path: refers to the absolute location in the directory. It directly reaches the target location, usually starting from the drive letter

eg: "D: \ Netease cloud" or specific website“ https://pic.sogou.com/picsfrom=vr_10000106&query=%E7%BE%8E%E5%A5%B3" 

7. Hyperlink labels

<a href="0.jpg">Text or image or URL link</a>
<h1 id="2">1.External links</h1>
<a href="http://www.qq. com" target="_ Self "> Tencent < / a > <! -- target has two attributes _self (current window open, default new window) and _blank (new window open) - >
<a href="http://www.baidu. com" target="_ Blank "> Baidu</a>
<h1>2.Internal links: links between pages within a website</h1>
<a href="01-First page.html">Internal link to first page</a>
<h1>3.Empty link</h1>
<a href="#"> empty link, which can be set temporarily when the link address is not known</a>
<h1 id="1">4.Download link. The address links to the file.exe or .zip .rar Equal compression package form</h1>
<a href="0.rar">Download pictures</a>
<h1>5.Links to web page elements</h1>
<a href="http://www.qq.com" target="_blank"><img src="0.jpg"/></a>
<h1>6.Anchor link: quickly locate and display to the page/The location of the link.</h1>
<a href="#1 "> download link</a>
<a href="#2 "> external links</a>

8. Annotation label

<!--Annotation syntax, vs Shortcut key Ctrl+/--> 

9 special characters

10. Form label

The specific labels are as follows, but don't type the code horizontally as shown in Figure 2. Difficult to modify and error prone.

Note: the merged form, the merged column colspan and the merged row rowspan are both td attributes. The td of the merged form in this row does not need to be written out (there is no code in this part, which takes up some space)

<html>
<body>
<!--Table labels are used to display and display data-->
<table align="center" border="1" cellpadding="30" cellspacing="10" width="500" height="10" >Define table labels
    <!--Several attributes in the table are the display position of the table, the table border, the interval between the inner margin and text of the table, the distance between the inner margin and outer margin of the table, the width and height of the form!!!! However, these attributes are basically not in HTML Display, but put in css In style-->
    <tr>Define rows in a table<th>full name</th>       <th>Gender</th>        <th>Age</th></tr> <!--<th></th>The header cell is also a table label in each row/The column starts with bold and centered effect-->
    <tr><td>full name</td>       <td>Gender</td>        <td>Age</td></tr><!--<td></td>Define cells in a table-->
    <tr><td>Lao Xin</td>       <td>male</td>        <td>16</td></tr>
    <tr><td>Rubber boots</td>       <td>female</td>        <td>18</td></tr>
    <tr><td>Leke</td>       <td>male</td>        <td>15</td></tr>
    <tr><td>One knee</td>       <td>female</td>        <td>13</td></tr>
</table>

<!--Improve the version and add it yourself-->
<table> 
    <thead>Table header label
           <tr>Table header labels must have this row</tr>
    </thead>
    <tbody>Table body label
            <tr>Table body labels can be omitted tr label, tbody Labels are used to store table data
            </tr>
    </tbody>
</table>
</body>
</html>

11. List label

Unordered list (common), ordered list, custom list (common)

Specific layout combined with css

  <h3>What's the food you don't like?</h3>
    <ul><!--The flag of an unordered list can only be placed li label-->
        <li>Mango</li><!--li All tags can be stored under the tag and have corresponding attributes, but generally only in css Used in-->
        <li>Meat patty</li>
        <li>Sweet soup</li>
    </ul>


  <h3>List of your favorite TV dramas</h3>
    <ol><!--Ordered list flag, and other properties are the same as above-->
        <li>Nirvana in Fire</li>
        <li>Redundant son-in-law</li>
        <li>Qing Nian</li>
    </ol>

 
    <h3>Custom list</h3>
    <dl><!--Custom list labels can only be placed dt,dd，And these two labels can't put other labels-->
        <dt>Vegetables</dt><!--Use the same subtitle to take the lead-->
        <dd>Broccoli</dd> <!--yes dt Explain the content of/elaborate-->
        <dd>tomato</dd>
        <dd>eggplant</dd>
    </dl>

12. Form label

Form purpose: collect user information

Form components: form fields, form controls (also known as form elements), and prompt information

Form controls include: input input form element, select drop-down form element and textarea text field label

 <h3>Form label</h3>
    <form><!--Function: submit the information of the form to the server-->
        <!--The form field label has three attributes, action To receive and process information to the server program url Address, name Indicates the name of the form, method Method for obtaining-->

        <!-- Form controls, input The form label must have type attribute -->
        
        <!-- text Text box, the user can see the content -->
        <!-- maxlength Limit the maximum number of characters entered. Use less, there will be more in the future css To define -->
        user name:<input type="text" value="enter one user name" maxlength="8"> <br>
        <!-- password Password box, the user cannot see the content -->
        password:<input type="password">  <br>
        <!-- radio Radio button to achieve radio effect --> 
        <!-- The form must have a form name name This property,And in the radio box/Check box name The values must be the same to achieve the radio selection effect -->
        <!-- value Property is useful for background personnel -->
        <!-- checked It can be used by radio boxes and check boxes to select an option by default when opening a page. -->
        Gender:<input type="radio" name="sex" value="male"> male  <input type="radio" name="sex" value="female">  female <br>
        <!-- checkbox Check box to achieve multi selection effect -->
        Hobbies:<input type="checkbox" checked="checked"> sing <input type="checkbox"> dance <input type="checkbox"> Play games <br>
        <!-- submit The form submit button will form The information of the form is submitted to the background server, value The value is the text displayed by the button, and the default value is submit -->
        <input type="submit" value="register">
        <!-- reset The reset button will reset the information of the form and restore it to the originally opened page state -->
        <input type="reset" value="Reset"> <br>
        <!-- button Normal button, later and js Use with -->
        <input type="button" value="Get verification code information">
        <!-- file File field, you can upload files -->
        <input type="file">

<!-- select Drop down menu bar, which can be placed in the form( form)，It can also be placed directly on the body in -->
        City:
        <select>
            <option>Tianjin</option>
            <option selected="selected">Beijing</option>
            <option>Shanghai</option>
            <option>Guangzhou</option>
            <option>Nanjing</option>
        </select>
    </form>

Attribute value of type attribute:

Note: the name and value attributes are necessary attributes of form elements, which are mainly used by background personnel

name requires the same values in radio buttons and check boxes.

 

13.label

<form>
        <input type="radio" name="sex" id="nan">
        <!--label Label, yes input The definition tag of is used to bind form elements. Its functions are as follows:
        click label When the text content in the tag is, the browser will automatically focus the cursor on or select the corresponding form element, which can increase the user experience-->
        <label for="nan">male</label>
        <input type="radio" name="sex" id="nv">
        <label for="nv">female</label>
    </form>