Html commonly used tags and attributes (including Html5)

Common tags and attributes

Basic label

1. <title></title>Tags are used to define the title in the document and are required in all HTML documents. The title content inside will appear on the browser's tab page, which is an important content that affects search engine rankings .
2. <style></style>It is a tag that defines the style of an HTML document. Used to write an internal style sheet for the page. A document can contain multiple style tags, and can be written in any position (generally written in the head tag).
3. <script></script> The tags can either directly contain javascript statements or point to external js files through the src attribute , but they cannot be mixed ( the script tag using the src attribute must be empty ). The script tag can be placed anywhere in the html file.
4. <link />Tags are used to link external style sheets and can only be used within the head tag. The href attribute is used to specify the location of the css style file.

---

5. <h1>~<h6>The title tag will affect the ranking of the page in search engines. Avoid skipping certain levels when using it, for example, jump directly from h3 to h5. But it is allowed to jump to a higher level.
6. <p></p> Tags are used to define paragraphs.
7. <a />Labels are used to define hyperlinks. The most important attribute is the href attribute (required attribute) , which is used to specify the link target. The target attribute is used to stipulate that the attribute value of the position to open a new page can be _blank, _parent, _self, _top, framename.
8. <img />Tags are used to define images in html pages. The src attribute specifies the URL of the displayed image, and the alt attribute specifies the replacement text of the image (the text that appears when the image is loaded incorrectly).
9. <em></em>Labels define emphasized text and appear in italics .
10. <strong></strong>It is also used to define more emphasized texts, which appear in bold .
11. <del></del> Define the deleted text.
12. <ins></ins> Define the text to be inserted into the document.
13. <span></span>Tags are used to group inline elements within a document .
14. <div></div>It can be used to define a section or section in a document. It is a block-level element with no semantics .
15. <ul></ul>Define an unordered list , and the list items are contained by the li element.
16. <ol></ol>Define an ordered list , and the list items are contained by the li element.
17. <dl></dl>Define a custom list and use it in combination with <dt></dt>(define list items) and <dd></dd>(describe list items).

---

Form label

1. <table></table> The label is used to define the table.
2. <tr></tr>The label is used to define the rows in the table and must be nested in the <table></table>label.
3. <td></td>Used to define the cells in the table and must be nested in the <tr></tr>label.
4. Tag header cell represented html form header portion (abbreviation table head) is generally located in the first row or the first column of the table, the text inside the tag with respect to differences will tr bold centered displayed. <th></th>
5. Table structure of the label: when the table is very long, in order to better represent the semantics of the table, the table may be divided into two parts and forms the body of the head form; tag table, respectively, using the tag table indicates the head region, the label Represents the main area of ​​the table. <thead> <tbody>

Common attributes of the table

• border: Specifies whether the cells of the table have a border or not, the default is not.
• cellspacing : Set the space between cells, the default is 2px.
• cellpadding : Specifies the space between the edge of the cell and its content, the default is 1px.
• rowspan : Merge cells across rows (merge cells up and down).
• colspan : merge cells across columns (merge cells left and right).

<table border="5px" cellpadding="10px" cellspacing="20px" >
	<tr>
		<td rowspan="2">上下合并</td>
		<td colspan="2">左右合并</td>
		<!--左右单元格合并后需要将(1,3)这个单元格去掉 --> 
	</tr>
	<tr>
	<!--上下单元格合并后需要将(2,1)这个单元格去掉 --> 
		<td>（2，2）</td>
		<td>（2，3）</td>		
	</tr>
</table>

---

Form label

Form field

       A complete form usually consists of three parts: form fields, form controls (that is, various form elements), and prompt information . In html <form></form>tag defines a form field to enable collection and transmission of user information, form elements of the tag information in its scope will be submitted to the server. Various form elements can be defined in the form field. These form elements are controls that allow users to enter or select content in the form.

<form></form> The attributes of the label:

• action : Used to specify the url address of the server program that receives and processes form data ( required attribute ).
• method : Used to set the submission method of the form data, its value is get or post ( required attribute ).
• name : Used to specify the name of the form to distinguish multiple form fields on the same page.

Form control

1. <input></input>Tags are used to collect user information. Depending on the value of the type attribute, the input field has many forms. The input field can be a text field, a check box, a text control after a mask, a radio button, a button, and so on.

attribute value of type	description
button	Define clickable buttons (used to launch scripts via javascript in most cases)
checkbox	Define checkbox
password	Define the password field, the characters in this field are masked
radio	Define radio buttons
reset	Define a reset button, the reset button will clear all the data in the form
submit	Define the submit button, the submit button will send the form data to the server
image	Define the submit button in the form of an image
file	Define input fields and "browse" button for file upload.
text	Define a single-line input field, the user can enter text in it, the default width is 20 characters

2. <select></select>In the page, if there are multiple options allow users to choose, and to save page space, we can use the <select>tag defines the drop-down list control.

    <select>
    	<option value="city1" name="option1">选项1</option>
    	<option value="city2" name="option2">选项2</option>
    	...
    </select>
   

3. <lable></lable>Tag is used to bind a form element, click on the <lable>text inside the tag, the browser will automatically move the cursor to select or form elements corresponding to improve the user experience.

   <lable for="man">男</lable>
   <!--for属性指向对应控件的id属性的值-->
   <input type="radio" name="sex" id="man" value="man"/>
   <lable for="woman">女</lable>
   <input type="radio" name="sex" id="woman" value="woman"/>
   

4. Labels are used to define multi-line text input controls. <textarea></textarea>

• Attributes of form elements
  1. The name attribute represents the name of the form element, and the radio button and the check box must have the same name value .
  2. The value attribute specifies the value of the input element.
  3. The checked attribute specifies that this input element should be checked when it is first loaded (checkbox, radio button).
  4. The selected attribute specifies the option selected by default when the drop-down radio menu is loaded.

Nane and value are the attribute values ​​that every form element must have, and they are mainly used by back-end personnel.

---

Three commonly used global attributes
       1. id attribute : used to specify the unique id of HTML elements ; id attribute can be used for link anchors, through js or css to change or add styles for elements with specified id.
       2. class attribute : used to define the class name of the element; multiple class names can be set for one element (separated by spaces), or the same class name can be set for several elements .
       3. title attribute : used to specify the tooltip text of the element (it will be displayed when the mouse is moved in).

H5 new commonly used tags

1. Video tag : You can place text content between the start tag and the end tag, so that old browsers can display information that does not support the tag. <video></video>

• Common attributes
  • poster = "imgurl": The picture of the screen waiting for loading.
  • src = "url": video address.
  • loop = "loop": Loop playback attribute.
  • muted = "muted": Mute playback attribute.
  • controls = "controls": Play control attributes.
  • autoplay = "autoplay": autoplay attribute.

2. Audio tag : You can place text content between the start tag and the end tag, so that old browsers can display information that does not support this tag. <audio></audio>

• Common attributes
  • src = "url": audio address
  • loop = "loop": loop playback attribute
  • muted = "muted": muted playback attribute
  • controls = "controls": playback control properties
  • autoplay = "autoplay": autoplay attribute

---

3. <header></header>: Define the header of a certain part of the web page (there can be multiple header tags in the page).
4. <section></section>: Define a certain area of ​​the document. The section element represents a general section of the document or application. It is usually a group of content with similar themes, and usually contains a theme .
5. <nav></nav>: Navigation tab, used for important link groups in the document . Inserting a set of links on the page does not mean that they must be included in the nav tag. Whether to add a nav tag to a set of links depends on the organization of the content. At least the global navigation of the website (the navigation that allows users to jump to the main parts of the website) should be marked as nav.
6. <article></article>: Content tag; article element table design document, page, application or website in an independent container, in principle, it can be independently distributed or reusable. It can be a forum post, magazine article, user-submitted comment, blog entry, an interactive widget or gadget, or any other independent content item.
7. <footer></footer>: Define the end of a part of the web page (there can be multiple footer tags in the page).
8. <asider></asider>: Sidebar label, which can be used to mark a part of the content that is not so relevant to the main content and can exist independently (sidebar, advertisements, blog friendship links, important quotes, or a set of links to related articles on news sites, etc.) .
9. <main></main>: Define the main area of ​​the page. Include the content representing the main content of the page in the main tag, and a page can only appear once.
10. <figure></figure>: Used to specify independent streaming content (images, icons, photos, codes, etc.). The content within the element should be related to the main content, and the position of the element is independent of the main content . If it is deleted, it should not affect the document flow.
11. <figcaption></figcaption>: Used to define the title for the figure element, which should be placed in the position of the first or last child element. For example, the title of the question sheet.
12. <address></address>: Used to define the contact information of the author/owner of the document. If it is located in the body tag, it means the contact information of the author/owner of the document; if it is located in the article tag, it is the contact information of the author/owner of the article.
    For example, using html, the entire page can be laid out as follows:

    	<body>
    			<header>
    				<nav>&lt;nav&gt;</nav>
    				&lt;header&gt;	
    			</header>		<!--头部标签一般都有整个页面的主导航栏-->
    			<article>
    				&lt;article&gt;
    				<section>
    					&lt;section&gt;
    				</section>
    			</article>
    			<aside>
    				&lt;aside&gt;
    			</aside>
    			<footer>
    				&lt;footer&gt;
    				<address>
    					&lt;address&gt;
    				</address>
    			</footer>
    		</body>
    

Note: If these new semantic tag groups are designed for search engines. Div should be used as the last backup container because it has no semantic value. Most of the time, it is more appropriate to use header, footer, main (used only once), article, section, aside, and nav instead of div. But if it is not semantically appropriate, it is not necessary to use the above elements in order to avoid the use of divs.

Types and new attributes of H5's new input form items

type attribute value	description
email	The user's input must be in email format.
tel	The user input must be a mobile phone number.
search	Define the text field for entering the search string.
number	Define the fields for entering numbers.
date	Define the date control (including year, month, day, excluding time).

Added common attributes	description
required = "required"	The content of the defined form item cannot be empty.
placeholder = "Prompt text"	The prompt information of the form will not be displayed if there is a default value.
autofocus = 'autofocus"	Auto focus properties.
autocomplete = “off/on”	The history type record is opened by default, and it needs to be placed in the form field with the name attribute .
multiple = “multiple”	You can choose to submit multiple files.

#扬尘/2020/12/18/