Home > Developer > Web Develop
Recently re-read the knowledge of HTML tags, there are many new experience, on the meaning of a new understanding.
So what is called semantic, the popular point is: understand the purpose of each label (in which case the use of this label is reasonable) For example, the title of the article on the page can be used as a title tag, the column name of each column on the page can also use the title tag. The paragraph in the article should be placed in the paragraph label, in the article has the want to emphasize the text, you can use the EM tag to express emphasis and so on.
There are two main aspects of semantic benefits:
1. More easily indexed by search engines.
2. It is easier for screen readers to read the page content. (A screen reader is a software that converts text, graphics, and other parts of the computer's interface (borrowed text-to-speech technology) into speech and/or dots.) )
Here is a summary of my understanding of HTML tags:
Syntax for Tags:
1. The label < is enclosed in English angle brackets and > is a label.
2. The tags in the HTML are usually paired, with the start and end tags. The end tag is one more than the start tag / .
3. Tags and labels can be nested, but the order must be consistent, such as:<div> nested <P>, then </p> must be placed in front of </div>.
4. HTML tags are case-insensitive, and <H1> are the same, but are recommended in lowercase because most programmers are lowercase.
HTML structure:
1. called the root tag, all the page tags are in
2. the label is used to define the head of the document, which is the container for all head elements. Header elements have,,,, and <title> <script> <style> <link> <meta> so on, the head tag in the next section will be described in detail.
3. The <body> content </body> between and tags is the main content of the Web page, such as,,, and <p> <a> Other Web content tags, the contents of the label in this place will be displayed in the browser.
1.
The role of the label. The header of the document describes various properties and information about the document, including the title of the document, and so on. Most of the data contained in the header of a document is not actually displayed to the reader as content.
2.<title> Label
<title> Tags : The text content between <title> and </title> tags is the title information of the page, which appears in the title bar of the browser. The title tag of the Web page is used to tell the user and search engine the main content of this page, search engine can through the page title, quickly determine the theme of the page. The content of each page is different, each page should have a unique title.
3.<body> Label
The page content to be displayed on the page must be placed in the body tag.
4.<p> Label
Used to display the content of the article, the default style is left blank before or after the paragraph.
5.
Used to display the title of the article, a total of six is a first- h1、h2、h3、h4、h5、h6 level title, two-level title, three-level title, four-level title, five-level title, six-level title. and decreases on the basis of importance. is the highest level. The default style is bold and the font size is smaller from H1 to H6.
6.<em> Label
Used to emphasize certain words with an accent tone, with the default style becoming italic for the emphasis content.
7.<strong> Label
Used to emphasize some text, but the accent is greater than the <em> label, and the default style is bold for emphasis.
8.<span> Label
Without semantics, add a specific style as text without a default style.
9.<q> Label
Use as a reference for short text, without quoting quotation marks,<q> label default style automatically adds quotation marks to quoted text. Note that quoting quoted text is quoted differently, using the <q> tag to make the content semantically, telling the browser that it refers to someone else, and directly quoting without semantics.
10.<blockquote> Label
Used as a reference for long text, the default style is to indent a certain blank left and right.
11.<br> Label
The <BR/> Tag acts as a carriage return in a Word document. (Entering enter in the HTML code, spaces are not useful.) In the HTML text you want to enter the carriage return line, you must enter <br /> )
<br> tags have two ways of writing one is xhtml1.0 writing <br />，另一种是 html4.01 wording<br>。现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
The <br> tag is an empty tag, meaning there is no HTML content.
12. 
It is not useful to enter a carriage return or a space in the HTML code. If you want to enter a space in the HTML text, you must enter it.
13.
For adding horizontal dashes, the default style line is thicker and the color is gray.
html4.01 wording
The
14.<address> Label
Used to display contact information for some websites, or to define an address (such as an e-mail address), a signature, or a document's author identity. The default style is italic.
15.<code> Label
Used to add a line of code.
16.<pre> Label
Used to add pre-formatted text. Text that is enclosed in the pre element usually retains spaces and line breaks. So it can be used to add a large piece of code.
17.<ul> Label
Used to display no post-order list information, Ul-li is a list of information that has no back-and-forth order. The default style is to bring a dot before each li.
18.<ol> Label
Used to display pre-and post-list information, the default style is preceded by a sequence number for each item <li> , and the sequence number defaults from the 1 beginning.
19.<div> Label
Used to divide a separate logical part (the logical part is a set of elements that are interrelated on the page) the,<div> tag acts as a container.
20.<table> Label
Used to display tabular information
1. Create four elements of a table: table, tbody, tr, TH, TD
2.<TABLE>...</TABLE>: The entire table starts with a <table> marker and ends with a </table> marker.
3.<tbody>...</tbody>: If you do not add <thead><tbody><tfooter>, the table table is not displayed until it is loaded. In addition to these table structures, Tbody contains the contents of the row to download the priority display, do not have to wait for the table to be displayed at the end, and if the table is very long, with tbody segments, you can partially display. (Popular understanding table can be displayed as a block of structures, not when the entire table is loaded.) ）
4.<th>...</th>: A cell in the head of a table, table header.
5.<tr>...</tr>: One row of the table, so there are a few pairs of TR tables.
6.<td>...</td>: A cell in a table that contains several pairs in a row <td>...</td> , stating that there are several columns in a row.
7. The number of columns in the table depends on the number of data cells in the row.
8. Default Style table Table No table lines are displayed in the browser until the CSS style is added. The text in the table header, which is the th tag, defaults to bold and centered.
9.<table summary= "Table Introduction Text" > Add a Summary to the table (the content of the summary is not displayed in the browser.) Its role is to increase the readability of the table (semantic), so that the search engine to better understand the table content, but also to enable screen readers to better help special users to read the table content. ）
21.<caption> Label
Used to add a caption to the table, displayed above the table.
22.<a> Label
1. Used to implement a hyperlink, link to another page.
2.<a href= "Destination url" title= "mouse over displayed text" > link displays the text </a> (the Title property functions, the text content of this property is displayed when the mouse slides over the linked text.) This property is very useful in the actual web page development, it is convenient for the search engine to understand the content of the link address (semantically more friendly).
3. <a> label by default, the linked page is opened in the current browser window, and sometimes we need to open it in a new browser window. <a href= "Destination url" target= "_blank" >click here!</a>
4. <a> The label also has a role to be able to link the email address, using mailto can make it easy for visitors to send e-mail to the website manager.
If there are multiple arguments behind the mailto, the first argument must begin with " ? " and each subsequent parameter is delimited with "" & .
5. The default style is that as soon as you add a label to the text, the color of the text automatically changes to blue (the color of the clicked text is purple).
23. Label
Replace text for inserting picture
1.SRC: Identifies the location (address) of the image
2.alt: Specifies the descriptive text of the image, and when the image is not visible (when the download is unsuccessful), you can see the text specified by the attribute.
3.title: Provides a description of the image when the image is visible (the text that appears when the mouse slides over the picture).
4. The image can be an image file in gif,png,jpeg format.
24.<form> Label
The form label is used to transfer the data that the browser enters into the server side, so that the server-side program can process the data that the table only son over.
1. <form method= "transfer Mode" action= "Server File" >
2.<form>:<form> label is in pairs appear, start with <form>, end with </form>.
3.action: Where the data entered by the browser is transmitted, such as a PHP page (save.php).
4..method: The way data is transmitted (Get/post).
5. All form controls (text boxes, text fields, buttons, radio boxes, checkboxes, and so on) must be placed between the <form></form> tags (otherwise the user input information can not be submitted to the server Oh!). ）
25.<input> Label
1.<input type= "Text/password/radio/checkbox/submit/reset" name= "name" value= "/>
2. 当type="text"时，输入框为文本 Input Box;
3. 当type="password"时,输入框为密码输入框。
4. When type= "Radio", the control is a radio box. Value is the values of the option.
5. When type= "checkbox", the control is a check box. Value is the values of the option.
6. When the type value is set to submit, it is represented as a control button that has a commit effect. Value is the word displayed on the button
7. When the type value is set to reset, it behaves as a control button that has a commit effect. Value is the word displayed on the button
8.name：命名，以备后台程序ASP 、PHP使用。作为单复选框时，同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
9.value：为文本输入框设置默认值。(一般起到提示作用)。
10.checked: As a single check box, this option is selected by default when checked= "checked" is set.
26.<textarea> Label
1. <textarea rows=" 行数"cols="列数">文本</textarea>
2. To enter a large paragraph of text in a form
3.cols 多行输入域的列数。rows多行输入域的行数。（这两个属性可用css样式的width和height来代替：col用width、row用height来代替。）
27.<select> Label
1.<select><option value= "reading" selected= "selected" > Reading </option></select>
2. As the implementation drop-down list, the value is the value submitted to the server and the Selected= "selected" property is set, the option is selected by default.
3. Set the properties in the <select> tab, you multiple="multiple" can implement multi-select function, under the Windows operating system, press the key at the Ctrl same time 单击 (using Command + click on Mac), you can select multiple options.
28.<label> Label
The label label does not present any special effects to the user, and it is useful for improving usability for the mouse user. If you click on the text within the label tag, the control is triggered. That is, when the user clicks the label label, the browser automatically shifts focus to the label-related form control (automatically selected on the form control associated with the label label). (The value in the label's for property should necessarily be the same as the value of the associated control's ID property.) ）
Temporarily updated to here .....
HTML tags and semantic understanding of Web pages
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
