Common tags for HTML basics

Meta tags introduce two properties for meta: The name and Http-equivname properties are used to describe the Web page, which corresponds to the content

• <meta name= "Generator" contect= "" > To illustrate the Build tool (such as Microsoft FrontPage 4.0);
• <meta name= "KEYWords" contect= "" > to the search engine to explain the keywords of your page;
• <meta name= "DEscription" contect= "" > Tell the Search engine the main content of your site;
• <meta name= "Author" contect= "Your Name" > tell the Search engine the author of your site's production;
• <meta name= "Robots" contect= "All|none|index|noindex|follow|nofollow" > The properties described below:

1. Set to all: The file will be retrieved and the link on the page can be queried;
2. Set to None: The file will not be retrieved, and the link on the page cannot be queried;
3. Set to index: The file will be retrieved;
4. Set to follow: links on the page can be queried;
5. Set to NOINDEX: The file will not be retrieved, but the link on the page can be queried;
6. Set to Nofollow: The file will not be retrieved and the link on the page can be queried.

Http-equiv

Http-equiv, as the name implies, is equivalent to the HTTP file header function, it can send back some useful information to the browser to help correct and accurate display of the content of the Web page, and the corresponding property value of content,content content is actually the variable value of each parameter.

The Http-equiv property syntax format for the meat tag is:

1. Expires (term)
   Description: Can be used to set the expiration time of a Web page. Once the page expires, it must be retransmitted to the server.

＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞  

1. Pragma (Cache mode)
   Note: is used to set the browser from the local computer cache to access the content of the page, once left the page can not be recalled from the cache
   Usage:

＜meta http-equiv="Pragma" content="no-cache"＞  

Note: This setting makes it impossible for visitors to browse offline.

1. Refresh Description: Automatically refreshes and points to the new page.

＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞  

Note: 2 of these are meant to be automatically refreshed to URL URLs after 2 seconds of stay.

1. Set-cookie (Cookie setting)
   Note: If the page expires, the cookie will be deleted.

＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞  

1. Window-target (display window settings)
   Description: Forces the page to appear on a separate page in the current window.

＜meta http-equiv="Window-target" content="_top"＞  

Note: Used to prevent others from calling their own pages in the frame.

1. Content-type (Displays the settings of the character set)

1. Pics-label (Web level rating)

Description: There is a content setting in Internet Options for IE that prevents you from browsing some restricted sites, and the limit level for websites is set by the meta attribute.

8.page_enter, Page_exit

Set special effects when entering a page

<meta http-equiv="Page-Enter"    contect="revealTrans(duration=1.0,transtion=    12)">

Set special effects when leaving the page

<meta http-equiv="Page-Exit"    contect="revealTrans(duration=1.0,transtion=    

1. Set the expiration time for a webpage

<meta http-equiv="expires" content="0">  

1. Keywords that are used by search engines

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  

1. Page description

<meta http-equiv="description" content="This is my page">  

Link label

• referencing external CSS

• Refer to the title Picture (icon) For example:

   <link  rel="icon"  href="1.icon">

Character

• Utf-8 is the most commonly used character set encoding method, and the commonly used character set encoding methods are GBK and gb2312
• gb2312 Simple Chinese
• GBK contains all Chinese characters in traditional
• BIG5 Traditional Chinese
• UTF-8 contains the characters that are needed for all countries in the world

Form (table) 1.<table>

<table>...</table> tags are used to create tables in HTML documents. It contains the table name and the code for the contents of the table itself. The basic unit of a table is a cell, defined with a <td>...</td> tag.

2.<tr>

The table row is defined by the <tr> tag, which consists of cells. Multiple rows are combined to form a table, which is reflected in the HTML syntax used to create the table. Each row of the table is represented by a <tr> tag and ends with the corresponding </tr>?

3.<td>

• Each row of the table has several table cells, denoted by a <td>...</td> tag. TD is the abbreviation for "Tabular data". The <td> tag defines a column nested within the <tr> tag.
• The Border property is the most commonly used property and can be used to define the cells and structure of a table. This property specifies the thickness of the border, and if its value is set to 0 (0), the border is not displayed.

Basic syntax for creating a table:

<table>  <tr>     <td>单元格内容</td>  </tr></table>

Property

Property name	meaning	common property values
Border	Set border default to 0 no border	Units are PX pixel values
CellSpacing	Set the distance between cells and cells	Pixels per PX Value default 2px
cellpadding	Set the distance between text and cells	Pixels per PX Value default 2px
Width	Set the width of a table	Unit px
Height	Set Table Height	Unit px
Align	Set the alignment of a table in a Web page	Left

Right
Center Center
bgcolor | Set Background Color | White, Red,green

Caption element definition table title

The caption tag must follow the table label immediately. You can only define a title for each table. Usually the title is centered on the table.

<th> tags and Their properties

The header is generally located in the first row or column of the table, with the text bold centered, as shown in the table with the header set. Setting the header is very simple, just use the header marker <th></th> replace the corresponding cell tag <td></td>.

Structure of the table

• When you use a table for layout, you can divide the table into headers, bodies, and footers, as follows:

1. <thead></thead>: The header used to define the table must be located in the <table></table> tag, which typically contains header information such as the logo and navigation of the Web page.
2. <tfoot></tfoot;: Used to define the footer of the table, in the <table></table> tag <thead></thead> tag, Typically includes corporate information at the bottom of the page.
3. <tbody></tbody>: Used to define the body of the table, which is located in the <table></table> tag <tfoot></tfoot > tag, Typically contains content that is not in the Web page other than the head and bottom.

form (form) syntax:

<form name="form_name" action="url" method="get|post">…</form>

• Name: Define the names of the forms
• Method: Defines how the form results are routed from the browser to the server, with the default parameters: get;
• Action: Used to specify the location of the form handler (server-side script handler)
• FieldSet: Grouping The forms
• Legend: Group Name

Input control

<input  type=“控件类型”>

In the above syntax, the <input/> is marked as a single tag, the type attribute is its most basic property and has several values that specify different control types. In addition to the Type property, the <input/> Tag can also define many other properties

TEXTAREA controls

If you need to enter a large amount of information, you need to use the <textarea></textarea> tag. The textarea control makes it easy to create multi-line text input boxes with the following basic syntax format:

<textarea cols="每行中的字符数" rows="显示的行数">       文本内容</textarea>

• Cols: Equivalent width
• Rows: equivalent to Height

Select control

In HTML, to create a drop-down menu as shown, you need to use the Select control

<select>        <option>选项1</option>        <option>选项2</option>        <option>选项3</option>       ...    </select>

It is worth mentioning that in HTML, you can define properties for <select> and <option> tags to change the appearance of the drop-down menu

Label Semantic label Semantics concept:

Select the appropriate tag (code semantics) based on the content's structure (content semantics)

Semantic Meaning of tags:

• Reasonable Web page structure
• Facilitates SEO: Good communication with search engine building, with good structure and semantics your Web content is naturally easily crawled by search engines
• facilitates other device parsing (such as screen readers, blind readers, mobile devices)
• Facilitates team development and maintenance

Label Semantics (caveats)

• Use as few semantic-free tag div and span as possible;
• When the semantics are not obvious, you can use the DIV or P, as far as possible with P, because P has the upper and lower spacing by default, is advantageous to the compatibility of special terminal
• Do not use plain style labels, such as: B, Font, u, etc., instead of CSS settings
• The text that needs to be emphasized can be included in the strong or EM tag strong The default style is bold (do not use B), EM is italic (without i)

Common tags for HTML basics