2018-05-10 HTML Common Tags Introduction

Introduction to HTML Common tags

List of HTML tags listed in MDN

1. Some simple and common labels

• Title element
• <p>Paragraph elements
• <ul>Unordered list
• <ol>Ordered list
• <small>Non-important text
• <strongvImportant Words
• <kbd>Keyboard input elements
• <video>Video element audio> Audio element
• <svg>Scalable Vector Graphics
• <div>Chunk element
• <span>Phrase content

2.<a>Tags &&<ifram>Label

• <a>Anchor points, get requests in HTTP, with the following common properties
  (1) HREF attribute: Required attribute, defines a hypertext link source for anchor
  ==> href= "Qq.com" will be opened as file (due to open Protocol not set)
  ==> href= "//qq.com" No protocol absolute address, at present what protocol is open with what protocol
  ==> href= "index.html" relative path to FTP protocol
  ==> href= "#XX" defines the anchor point of the current page
  ==> href= "? Xx=yy" Query parameters
  ==> href= "Javascript:alert (' 1 ')" JavaScript pseudo-protocol
  ==> href= "javascript:;" The effect of not jumping to reach the click link
  (2) Target property: This property specifies where the linked resource is displayed and can be used with the <iframe> tag, pointing to the name of the IFRAME
  ==> Target=_blank opens in new page
  ==> Target=_self Open in itself
  ==> Target=_top If in an IFRAME, open at its outermost
  ==> target=_parent If in an IFRAME, the IFRAME on its upper layer opens
  (3) Download property: When the response content-type of a webpage is set to "Application/octet-stream", it can be used without download
  When Content-type is set to "text/html", if you want to download the <a href="index.html" download>link</a> download
• <iframe>Inline frame elements, with the following common properties
  ==> src Property The path that the IFRAME points to
  The ==> Name property is used in conjunction with the label to link to the label
  ==> frameborder Property IFRAME label outer border, General set to 0

3. Forms tab

Note: If the form element is to be submitted to the server normally, the name attribute

• <form>Post requests are generally made in HTTP
  The ==> Action property is used to set the target for form submissions
  The ==> method property is used to indicate how the form is sent to the destination
  ==> target property with the tag target
• <input type="submit">&& <input type="button"> &&<button>
  PS: There must be a submit button in a form, otherwise the form data cannot be submitted
  ==> <input type="submit"> submit button to Enter upload form data after entering data
  ==> <button> If there is no submit button in a form, only the button tag, the label will be automatically upgraded to submit
  ==> <input type="button"> This is just a normal button, even if the form does not have a submit button and does not automatically upgrade
• <input typt="checkbox>"&&<label>
  ==> <input type="checkbox"> check box
  ==> can be used when the text is clicked to select the check box <label> , such as:
  <input type="checkbox" id="btn"> <label for="btn">apple</label>
  However, this is commonly used in the following notation:
  <label>apple<input type="checkbox"></label>
• <input type="radio">Radio box, you can also be used with a label like a check box <label>
  To set the same Name property, you can only select one effect for several radio boxes.
• <select>Drop-down form, commonly used with the name attribute, multiple (optional) property

• <option>The options in the drop-down form have the following common properties
  ==> <optgroup> A group for multiple option tags, set the group name with the label property, such as:

   <optgroup label="x1">  <option value="1">10</option>  <option value="2">12</option> </optgroup>

  <option>the common properties of the ==> tag are value, and the setting option uploads values to the server:
  Disabled property, set selection is not optional;
  Selected property, set this option by default;

• <textarea>Multiline text fields
  ==> Although the label has the Cols property and the Rows property control the number of columns and the row number respectively, but are not very accurate, so the size of the general <texrtarea> label with CSS height and width to control
  ==> in CSS, you can also set its resize=none, to control the multiline text field cannot be pulled by the user, to prevent the impact of page layout

4.<table>Table elements

• There are only <thead> , <tbody> <tfoot> three labels in the table label.
• If not <thead> and <tfoot> tags, all the content is added by default in the <tbody> label, if there is no <tbody> label, the browser will automatically add.
• After setting, <thead> <tbody> <tfoot> Three kinds of labels, the order of three tags in the code will not affect the effect of page rendering, always in <thead> , <tbody> <tfoot> order to show.
• <td>Represents the table's data, <th> represents the header (the default style includes bold and centered), <tr> representing each row
• All the <td> <th> labels are in the <tr> label.

• <colgroup>(with closed tag), <col> (empty label)
  Code instance parameter to view the label effect

  <table border=1><colgroup>  <col width=100> <!-- 控制第一列的宽度-->  <col width=100 bgcolor="blue"><!-- 控制第二列的宽度和背景颜色-->  <col width=100>  <col width=100></colgroup><thead>  <tr>    <th>h1</th>    <th>h2</th>    <th>h3</th>    <th>h4</th>  </tr></thead><tbody>  <tr>    <td>11</td>    <td>12</td>    <td>13</td>    <td>14</td></tbody><tfoot>  <tr>    <td>31</td>    <td>32</td>    <td>33</td>    <td>34</td>  </tr></tfoot>  </table>

• CSS, set the border of the label to merge
  table{ border-collapse:collapse; }

  5. Common content Partitioning Semantic tags
• <article>Represents an independent structure in a document, page, app, or Web site
• <aside>It usually behaves as a sidebar or embedded content
• <footer>Represents the last chapter content or the footer of a root node element
• Represents a set of Guided Help that may contain a heading element
• <nav>Navigation bar, depicting a region with multiple hyperlinks
• <section>Represents an area (or section) in a document, such as a theme group in the content, which generally contains a title
• <dl>, <dt> ,<dd>
  ==> <dl> is a list that contains definitions of terms and descriptions
  ==> <dt> used to declare a term in a list of definitions
  ==> <dd> is used to indicate a description of a term in a description list <dl> element
• <main>Represents the body content of a document, consisting of content that is directly related to the document, or that extends to the central theme of the document, and the main functional part of the app.

• <address>Allows the author to provide contact information for its most recent <article> or <body> ancestral elements. In the latter case, it applies to the entire document.

2018-05-10 HTML Common Tags Introduction