HTML Study Notes

preface

The whole process of temporary use of vscode development, error welcome correction, other to be added

Chapter 1 basic HTML identifiers

1.1 Basic framework analysis

Use “! “in an HTML file if vscode has installed the relevant plug-in. + TAB generates the following code

<! DOCTYPEhtml>		<! The document type declaration tag tells the browser which version of HTML to use to display the page -->		
<html lang="en">	 <! -- "lang" : short for language. Define the current document display language: en is defined as English, zh-cn is defined as Chinese -->
<head>
    <meta charset="UTF-8">		<! -- Charset character set. Utf-8 universal code: basically contains all the characters needed by all countries -->
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">	<! -- To be added -->
    <title>Document</title>		<! --Document is the name of the file displayed in the browser TAB bar -->
</head>
<body>Page content body</body>
</html>
Copy the code

1.2 Common HTML Tags

1.2.1 Title Labels

HTML provides 6 levels of web page tags namely < H1 > – < H6 >

H is head. The lower the number, the higher the series

The demo:

.<body>
    
    <h1>Primary title</h1>
    <h2>The secondary label</h2>.<h6>6 tag</h6>
    
</body>.Copy the code

1.2.2 Paragraphs and Newline Tags

The paragraph tag

divides the entire page into sections with large gaps between them

The line wrap tag

wraps the line immediately with a normal line spacing between the two lines without large spacing

P for com.lowagie.text.paragraph

Br for break

The demo:

.<body>
    
    <p>The first paragraph</p>Paragraph Test paragraph<br>Test paragraph Test paragraph Test Paragraph Test Paragraph Test paragraph Test<BR>Test paragraph test<p>The second paragraph test<br>First line feed<BR>The second line break</p>
    
</body>.Copy the code

1.2.3 Text Formatting Labels

Text can be set to bold, italic, underline, delete and other effects

The demo:

.<body>
    
    <strong>bold</strong>
    <em>italics</em>
    <ins>The underline</ins>
    <del>delete</del>
    
    <p><strong>bold</strong><em>italics</em><ins>The underline</ins><del>delete</del></p>
    
</body>.Copy the code

1.<div>with<span>The label

and
have no semantics and are just boxes to hold content for layout

Div for the division

Span, span, span

The usage and characteristics are as follows

.<body>
    
    <div>You can only fit one div box in a row</div>
    <span>You can place multiple SPAN boxes in a row</span>
    
</body>.Copy the code

1.2.5 Image labels and paths

1. Image labels

is used to define an image in an HTML page

Img for image

Properties: Attributes that belong to this image tag

Usage and properties are as follows

.<body>
    
    <img src="Image URL"> 	<! -- SRC is a required attribute for the <img> tag. Specifies the path and filename of the image file -->
    
	<img src="Image URL" alt="The image doesn't show up because I'm replacing it with text here." title="Text that appears when the mouse pointer is placed over the picture"
         width="500" height="600" border="15">
    <! -- 500,600,15 all indicate pixel border can set the border thickness of the image -->
    
</body>.Copy the code

point

  1. Image tags can have multiple attributes and must be written after the tag name.
  2. Attributes are in no order, tag names and attributes, and attributes and attributes are separated by Spaces
  3. Attributes take the key-value pair format, that is, key = “value” format, attribute = “attribute value”.
2. The path

There will be a lot of pictures on the page, and it is usually necessary to build a folder to store these images. When searching for images, the “path” method is used to specify the location of image files.

Paths can be divided into:

  1. Relative paths
  2. An absolute path

Relative path: The directory path (the position of the image relative to the HTML page) based on the location of the reference file.

Relative path classification symbol instructions
Same order path Image files are located at the same level as HTML files such as<img src="baidu.gif">
Next level path / The image file is one level below the HTML file<img src="images/baidu.gif">
Upper path ../ The image file is one level above the HTML file<img src=".. /baidu.gif">

** Absolute path: ** indicates the absolute location in a directory, usually starting from the drive letter

For example, “C: \ Game \ Config \ logo.gif” or the complete network address https://www.bilibili.com/

1.2.6 Hyperlink labels

Link classification:

  1. External links

  2. Internal link: the link between the internal pages of the website, directly link to the internal page name

  3. Empty link: If the link target is not determined at that time, it can be temporarily replaced by an empty link

  4. Download link: If the href address is a file or zip, the file will be downloaded

  5. Page element links: Hyperlinks can be added to various page elements in a web page, such as text, images, tables, audio and video

  6. Anchor link: Jump to a point on the page

    • Find the target location tag and add an ID attribute to it = the name you just had, such as

      first part

A. anchor B. anchor C. anchor D. anchor

demo

.<body>

    <a href="#one">The first part</a>						<! -- Anchor link -->

    <a href="http://www.baidu.com" target="_blank">Baidu hyperlink</a> 	         <! -- External link (text) -->
    <a href="http://www.baidu.com" target="_blank"><img src="img.jpg"></a>  <! External links (Page elements: images) -->

    <a href="index.html" target="_blank">Jump between sites</a>				<! -- Internal link -->

    <a href="#" target="_blank">For the time being to resist</a>						 <! -- Empty connection -->

    <a href="file.zip" target="_blank">The download file</a>					 <! Download link -->


    <h3 id="one">The first part</h3>						<! -- Anchor link -->

</body>.Copy the code
attribute role
href Required attribute. The URL used to specify the target of a link, which functions as a hyperlink when the href attribute is applied to the tag
target Used to specify how linked pages should be opened, where _self is the default (the current window opens the interface) and __blank is the new window opens the interface

1.3 HTML comments and special characters

1.3.1 annotation

Select vscode + shortcut key “CTRL + /”

Method of use

<! -- What needs to be commented -->
Copy the code

1.3.2 Special Characters

In HTML pages, some special characters are difficult or inconvenient to use directly, so use the following characters instead (for now)

A few commonly used

Special characters describe Character code
  Spaces & have spent
< Less than no. & lt;
> More than no. & gt;

List of special characters

demo

<body>
    
    <p>&lt;&nbsp;p&nbsp;&gt;</p>    <! -- "< p >" -->
    
</body>
Copy the code

1.4 Table Label

1.4.1 Basic Labels

Main purpose of tables: To display data

  • <table></table>The label used to define the table
  • <tr></tr>Used to define rows in a table that must be nested in<table></table>In the label
  • <td></td>Used to define cells in a table that must be nested in<tr></tr>In the label
  • <th></th>Function and use the same td, but the header cell inside the text will be bold center display

The tr for table row

Td for table data

Th for the table head

1.4.2 Table Structure Labels

Easy to fold code

  • : Used to define the header of the table. must have a tag inside

  • : Used to define the body of the table, mainly used to place the data ontology

  • The above tags are placed in the

    tag

demo

<body>

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="400" heigth="249">
        <thead>
            <tr>
                <th>name</th>
                <th>rank</th>
                <th>add</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>csdn</td>
                <td>1</td>
                <td><a href="https://www.csdn.net/"><img
                            src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo.png?v=20200416.1" alt="csdn"
                            width="50"></a></td>
            </tr>
            <tr>
                <td>bilibili</td>
                <td>2</td>
                <td><a href="https://www.bilibili.com/"><img
                            src="https://i0.hdslb.com/bfs/archive/622017dd4b0140432962d3ce0c6db99d77d2e937.png"
                            alt="bilibili" width="50"></a></td>
            </tr>
        </tbody>

        <! -- Generated tables are automatically left aligned -->
    </table>

</body>
Copy the code

Enter it in vscodetr * nAfter automatic completion, n elements can be generated, th, TD and so on

1.4.3 Table Properties

Chicken ribs. Not commonly used, basically replaced by CSS, only do not remember uncomfortable

All attributes are written in

The property name Attribute values describe
align Left, center, right Specifies the alignment of the table with respect to surrounding elements
border 1, or “” Specifies whether a table cell has a border. Default is “”, indicating no border
cellpadding Pixel values Specifies the space between the cell edge and the content, default 1 pixel
cellspacing Pixel values Specifies white space between cells, default 2 pixels
width / height Pixel value or percentage Specify the width/height of the table

demo

<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="400" heigth="249">.</table>
</body>
Copy the code

1.4.4 Cell merging

  • Rowspan = “Number of merged cells”
  • Colspan = “Number of merged cells”

Target cell

  • Cross-line: the uppermost cell is the target cell, and the merge code is written

  • Cross column: far left…

Merger way

  1. Find the target cell, merge method = number of merged cells. e.g.<td colspan="2"></td>
  2. Deletes excess cells, all cells except the target cell. If you don’t delete it something amazing happens to the table

demo

<body>
    
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="400" heigth="249">
        <tr>
            <td></td>
            <td colspan="2">Column merge test</td>
            <! -- <td></td> -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td rowspan="2">Row merge test</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <! -- <td></td> -->
        </tr>
    </table>

</body>
Copy the code

1.5 List Labels

Unlike table labels, lists are primarily used for layout rather than for displaying data

1.5.1 Unordered and ordered lists

The

    tag represents an unordered list of items in an HTML page, defined using the

  • tag (most commonly)

The < OL > tag represents an ordered list of items in an HTML page, defined using the

  • tag

    • demo

    <body>
    <! - disorder -- -- >
    <ul>        
        <li>List item 1</li>
        <li>list 2</li>
        <li>
            <h1>Big head</h1>
            <p>Paragraph 1</p>
        </li>    
    </ul>
    
    <! Orderly -- - >
    <ol>
        <li>top1</li>
        <li>top2</li>
        <li>top3</li>
    </ol>
    
</body>
Copy the code
    1. Items in an unordered list are juxtaposed rather than ordered.
    2. <ul></ul>Can only be nested<li></li>Directly in<ul></ul>It is not allowed to enter other tags or text in the tag.
    3. <li></li>Is equivalent to a container, can hold all the elements
    4. Lists have their own style properties, which are typically set with CSS when used in practice

    1.5.2 Custom List

    Usage scenario: Usually used to explain or describe terms or nouns. There is no bullet before the list of custom lists

    The < DL > tag is used to define the description list (or definition list), which is used with

    (defining the item/name) and < DD > (describing each item/name)

    demo

    <body>
    
	<dl>
        <dt>Follow me!!</dt>
        <dd>zhihu</dd>
        <dd>wechat</dd>
        <dd>qq</dd>
    </dl>
    
</body>
Copy the code
    1. <dl></dl>insideonlycontains<dt> 和 <dd>
    2. <dt> 和 <dd>There is no limit to the number of, usually one<dt>Corresponding to multiple<dd>

    1.6 Form Labels

    It is used to collect information

    A complete form is usually composed of three parts: form field, form control (form element) and prompt message

    1.6.1 <input>The form elements

    The tag in the form element is used to collect user information. The tag contains a type attribute. Depending on the value of the Type attribute, input fields can take many forms (text fields, checkboxes, masked text controls, radio buttons, buttons, and so on).

    <input type="Attribute value">
Copy the code
    • <input>For a single tag
    • The type property sets different property values to specify different control types

    Type Common attributes and their values are as follows

    Attribute values describe
    button Define clickable buttons (most often used to launch scripts from JS)
    checkbox Define check boxes
    file Define input fields and browse buttons for file upload
    hidden Define hidden input fields
    password Defines a password field in which the characters are masked
    radio Define radio buttons
    reset Define a reset button to clear all data in the form
    submit Define a submit button to send the form’s data to the server
    text Defines a single-line input field into which the user can enter text, with a default width of 20 characters

    In addition to the type attribute, the other common attributes of are as follows

    attribute Attribute values describe
    name User defined Define the name of the input element
    value User defined Specifies the value of the input element
    checked checked Specifies that this input element should be selected when it is first loaded
    maxlength Positive integer Specifies the maximum length of characters in an input field
    1. Name and value are attribute values that each form element has and are intended for use by backend personnel
    2. Name Specifies the name of the form element, requiring that radio buttons and check boxes have the same name value
    3. The Checked attribute is for radio buttons and check boxes and is used to enable a form element to be selected by default as soon as the page is opened
    4. Maxlength is the maximum number of characters a user can enter in a form element and is rarely used

    demo

    <body>
    <form action="xxx.php" method="get">

        <! The user can enter any text in the text box -->User name:<input type="text" name="username" value="Please enter user name" maxlength="6"> <br>

        <! The user cannot see the entered password -->Password:<input type="password" name="pwd"> <br>

        <! -- Radio radio button allows multiple selections -->
        <! The gender radio button must have the same name to enable multiple selection -->
        <! -- Radio buttons and check boxes can be set to checked properties, which are checked when the page is opened by default -->Gender: male<input type="radio" name="sex" value="Male"> 女 <input type="radio" name="sex" value="Female"
            checked="checked"><br>

        <! -- Checkbox allows multiple selections -->Hobbies: Eating<input type="checkbox" name="hobby" value="Eat">Go to bed<input type="checkbox" name="hobby">Play doug<input
            type="checkbox" name="hobby" checked="checked">
        <br>
        <! Click the submit button to submit the value of the form element in the form field to the background server.
        <input type="submit" value="Free registration">

        <! The reset button restores the original default state of the form element -->
        <input type="reset" value="Fill in again">

        <! -- Common button button later combined with JS collocation -->
        <input type="button" value="Obtain SMS verification code"> <br>

        <! -- File domain Application Scenario -->Upload profile picture:<input type="file">
    </form>
</body>
Copy the code

    1.6.2 <lable>The form elements

    The

    tag defines the annotation (tag) for the input element

    The

    tag is used to bind a form element, and when the text within the

    tag is clicked, the browser automatically moves the focus (cursor) to or selects the corresponding form element to enhance the user experience

    demo

    <label for="sex">male</label>
<input type="radio" name="sex" id="sex">
Copy the code
    • Core: The for attribute of the tag should be the same as the ID attribute of the associated element

    1.6.3 <select>The form elements

    To save page space, you can use the < SELECT > TAB control to define drop-down lists.

    demo

    <body>
    <form>Form tests:<select name="" id="">
            <option value="one">Option 1</option>
            <option value="two" selected ="selected">Option 2</option>
            <option value="three">Option 3</option>
        </select>
        
    </form>
</body>
Copy the code
    • <select>Contains at least one pair
    • in<select>Is defined as “selected”, the current item is the default selected item

    1.6.4<textarea>The form elements

    Use the

    demo

    <form>
	<textarea rows="3" cols="20">The text content</textarea> 
</form>
Copy the code
    • through<textarea>The tag makes it easy to create a multi-line text input box
    • Cols = “number of characters per line”, rows= “number of rows displayed”, will not be used in real development, CSS is used to change the size