Category:HTML
Article From:https://www.cnblogs.com/diweikang/p/9060761.html

Preface:If you don’t sum up your learning habits, you will feel that you haven’t grasped the basic knowledge.

Part one: HTML initial

  1.What is HTML?

    HTMLRefer toHypertext markup language (Hyper Text Markup Language),It is a markup language consisting of a set of tags, which is used to describe and construct web pages.

  2.HTMLElements?

    HTMLThe element refers to all the code from the beginning tag to the end tag. The start label is called the open label, and the end tag is called the closing label.

  Element Grammar:

    1>Start with tag start and end with tag termination, most of which can be used for attributes.

    2>The empty element is closed in the start tag.

    3>HTMLNested elements can be nested, and web pages are made up of nested elements.

    4>HTMLThe element is not case sensitive, but it is recommended to use lowercase in the standard.

    <!-- The start tag and the end tag all have-->
    <p>HTMLThe basic syntax of elements is used for double tags of start tags and end tags.</p>
    <!-- Labels for attributes-->
    <a href="http://www.baidu.com"></a>
    <!-- The empty element ends at the start tag-->
    <br/>

The second part: the basic elements of HTML

  1.Title label (h*)

  HTMLThe headings are defined by < h1> – < h6> tags; H1 to H6 titles are large to small.

  Characteristic:The title tag belongs to the block level element in HTML and occupies a single line.

    <!-- A block element in the title tag, which makes up a single line-->
    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>

  Be careful:

    The title is a semantic tag. The correct usage is used only for titles, not just for bold or large text.

  2.Horizontal line label (HR)

  <hr/>Tags create horizontal lines in HTML pages, which can be used to separate content.

    <!-- hrHorizontal line labels are used to separate content-->
    <p>This is a paragraph</p>
    <hr />
    <p>This is a paragraph</p>
    <hr />
    <p>This is a paragraph</p>

  3.Paragraph label (P)

  Paragraphs can split HTML documents into paragraphs, defined by &lt, p&gt, and tags.

  pA paragraph is also a block level element, which will occupy a single line. Browsers will add blank lines before and after paragraphs.

    <!-- pThe paragraph label is also a block - level element, which makes up a single line-->
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>

  4.Line label (< br/>)

  Within the paragraph, no new paragraphs are generated, and line breaks are performed using < br/>

    <!-- brChange the content in a paragraph-->
    <p>This is<br />a para<br />graph with line breaks</p>

  Note: when the page is displayed, the browser removes redundant spaces and blank lines in the source code. All consecutive spaces or blank lines will be treated as spaces.

  5.Hyperlink (a)

  HTMLUsing hyperlinks to connect to another document on the web, clicking links can jump from one page to another.

  Hyperlinks can be a word, a group of words, or an image. Clicking can jump the new page or jump to other parts of the current page.

  Give an example:Jump to the new page / jump current page part

    <!-- Jump to the new page, Baidu home page-->
    <a href="http://www.baidu.com">Baidu</a>
    <br>
    <!-- aThe label has the ID attribute-->
    <a id='top'>Top</a>
    <br/>
    Back to the top<br/>
    Back to the top<br/>
    <!-- hrefProperty can be positioned to the a tag with the same page ID as top through #top.-->
    <a href="#top">Back to the top</a>

  Hyperlinks are images:

    <a href="index2.html">
        <img border="0" src="/img/logo.gif" />
    </a>

  Give an example:Anchor location between different pages

    First create the index2.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a id="index2">index2Anchors on the page</a>
</body>
</html>

  Cross page anchors jump:Click the a hyperlink to jump to the index2 page.

<body>
    <a href="index2.html#index2">Jump to index2.html</a>
</body>

  aTags to achieve SMS, telephone, email, location and other functions.

    <div id="my">
        <!-- Make a phone call-->
        <a href="tel:xxxxxxxxx">xxxxxxxxxxxx</a>
        <!-- Emailing functions-->
        <a href="mailto:c1586@qq.com?subject=TestObject">c6088@qq.com</a>
        <!-- Realization of SMS-->
        <a href="sms:10086?body=message_body">Give 10086 messages</a>
        <!-- Realization of positioning function-->
        <a href="geopoint:116.281469,39.866035">My position</a>
    </div>

  aThe target attribute of the label:

  targetattributeDefine where the linked document is displayed.

  Value:_blankIn the new window, _self– opens in the current window and _top– (jumps out of the frame).

  Be careful:Please always add the forward slash to the subfolder. If you write links like this: href= “http://www.w3school.com.cn/html”, you will generate two HTTP requests to the server. This is because the server will add a forward slash to this address.Then create a new request, like this: href= “http://www.w3school.com.cn/html/”.

  6.Image label (< img>)

  By using the &lt in HTML; img> the label displays images in the document, < img> it is an empty label, containing only the attributes that have no closed labels, and use the SRC attribute to display the image.

    <div id="testImg">
        <!-- srcRepresents the storage path of the image. ALT indicates the prompt information when the SRC image is not found.-->
        <img src="./img/cat.jpg" alt="Current picture loss ">
    </div>

  Be careful:If the HTML file contains ten images, in order to correctly display the page, you need to load 11 files, which means you need to send 11 requests to increase the pressure of the server, so you need to ‘use the picture carefully’.

  Image mapping:<map><area></area></map>

  We often bind hyperlinks to pictures to facilitate users to enjoy big pictures or jump pages. HTML has the function of image mapping, which can bind links in different areas of a large picture, so that users can have more new experience.

  Example: refer to –http://www.w3school.com.cn/tags/tag_map.asp in detail.

<body>
    <!-- imgYou need to map the map element with the usemap attribute Association-->
    <img src="./img/bigDog.jpg" usemap="#umap" alt="Cats and dogs " />
    <!-- mapID representation is required in the element so that the IMG tag references.-->
    <map id="umap" name="umap">
        <!-- areaIt means that this is a different region in the IMG image.-->
        <!-- shapeRepresents the shape of the area. Coords represents the coordinate position of the region. Href indicates the resource of the jump in the region. It can be a picture or a page.-->
        <area shape="rect" coords="220,180,420,400" href="./img/smlDog1.jpg"
            alt="Dog 1 " target="_blank" />
        <area shape="circle" coords="685,340,130" href="./img/smlDog2.jpg"
            alt="Dog 2 " target="_blank" />
    </map>
</body>

  7.Table and its subelements

  The form is defined by the table tag, the row is &lt, and tr> and the cell is defined by < td&gt. It is mainly used for formatting display data.

  Table borders, headings, margins: border/cellpadding/cellspacing

<body>
    <!-- borderA border is added for tables and cells. The inner margin of a cell can be set by cellpadding, and cellspacing sets the outer margin of the cell.-->
    <table border="1" cellpadding='10' cellspacing='10'>
        <!-- thTable header-->
        <tr>
            <th>Chinese</th>
            <th>Mathematics</th>
        </tr>
        <tr>
            <td>100</td>
            <td>96</td>
        </tr>
        <tr>
            <td>87</td>
            <td>100</td>
        </tr>
    </table>
</body>

  Cross – row, cross – column: rowspan/colspan

<!-- colspanRepresent merge multi - column-->
    <table border="1">
        <tr>
            <th>Full name</th>
            <th colspan="2">Telephone</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>555 77 854</td>
            <td>555 77 855</td>
        </tr>
    </table>
    <!-- rowspanRepresent merge multiple lines-->
    <table border="1">
        <tr>
            <th>Full name</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone</th>
            <td>555 77 854</td>
        </tr>
        <tr>
            <td>555 77 855</td>
        </tr>
    </table>

  8.htmlA list in the list

  HTMLSupports orderly, unordered, custom list, mainly used to display data in list format.

  Disordered list:

    <!-- The default style is the big black dot. You can use the type property to set the style.Type value: square/disc/circle and so on-->
    <ul type='disc'>
        <li>Basketball</li>
        <li>Badminton</li>
        <li>Swimming</li>
        <li>Run</li>
    </ul>

  Ordered list:

    <!-- The default style is numeric, and you can use type to set styles.Type: A/a/I/i-->
    <ol type="A">
        <li>Apple</li>
        <li>Banana</li>
        <li>lemon</li>
        <li>Orange</li>
    </ol>

  Custom list:

    <h2>A list of definitions:</h2>
    <dl>
        <dt>Computer</dt>
        <dd>The instrument used to calculate...</dd>
        <dt>Monitor</dt>
        <dd>A device that displays information in a visual way...</dd>
    </dl>

  Note: ul/ol direct child elements can only be Li tags, and Li tags can be embedded with other element tags.

  9.htmlForm elements in the form

  HTMLForms are mainly used for collectionDifferent types of user input,It is composed of form and different types of input elements.

  inputCommon elements:

    text、password、radio、checkbox、button、reset、submit

    <form action="#">
        User name:<input type="text">
        <br/>
        Password:<input type="password">
        <br/>
        <!-- Note: the same type of name attribute must be added to the radio type so that the single selection function can be implemented.-->
        Sex:<input type="radio" name="gender" value="male">male<input type="radio" name="gender" value="female">female<br/>
        Hobbies:<input type="checkbox" name="hobby" value="basketball">Basketball<input type="checkbox" name="hobby" value="swim">Swimming<input type="checkbox" name="hobby" value="volleyball">Volleyball<br/>
        <!-- submitOnly submits the value of the input element with the name attribute-->
        <input type="submit" value="submit">
    </form>

  Be careful:In the previous example, the radio button needs to add the same name attribute, and the value in it is the true submission value, and the submit will only submit the input value with the name attribute.

  formElements and attributes:More new properties can beRefer to my part of the HTML5

    <!-- action:The path that represents the data submission to the backgroundMethod: represents the way of data submission, with two values of get and post, and the default is (get).Target: the open way to represent the submission operationAccept-charset: RulesFixed character codingEctype: the data is encoded, and the default is (url-encodeed).Autocomplete: whether to set up automatic completion of forms.Novalidate: set form when submittingWhether or not to verify.-->
    <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded"
        autocomplete="off" novalidate>
        input elements
    </form>

  fieldsetelement:You can use the fieldset element to formatted form form elements.

    <form action="#">
        <fieldset style="width: 30%;">
            <legend>User information statistics table</legend>
            User name:<input type="text">
            <br/>
            Password:<input type="password">
            <br/>
            <!-- Note: the same type of name attribute must be added to the radio type so that the single selection function can be implemented.-->
            Sex:<input type="radio" name="gender" value="male">male<input type="radio" name="gender" value="female">female<br/>
            Hobbies:<input type="checkbox" name="hobby" value="basketball">Basketball<input type="checkbox" name="hobby" value="swim">Swimming<input type="checkbox" name="hobby" value="volleyball">Volleyball<br/>
            <!-- submitOnly submits the value of the input element with the name attribute-->
            <input type="submit" value="submit">
        </fieldset>
    </form>

  Design sketch:

  

  Other elements of the form:select、textarea、button

    <form action="#">
        <!-- selectSet the drop-down list box, which is user selected. Value is the submitted value.-->
        <select name=""Native place">
            <option value="Shaanxi ">Dingxi</option>
            <option value="Shaanxi ">Jehol</option>
            <option value="Shaanxi ">Nanjing Road</option>
            <option value="Shaanxi ">Zhengzhou</option>
        </select>
        <!-- textareaSet the text box, cols indicates the number of columns, and rows means the number of rows.-->
        <textarea name="introdution" cols="30" rows="10">
            this is a introduction about textarea。
        </textarea>
        <!-- buttonSet the click button on the page, similar to type=button in input.-->
        <button>Submission</button>
    </form>

  Summary:This section mainly reviews the commonly used tags in HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *