Basic HTML knowledge, May 24, 2017 (2), 2017

Basic HTML knowledge, May 24, 2017 (2), 2017

 

1 shortcut: html: xt + tab transition XHTML

Html: xs + tab strict XHTML

! + Tab html5 label Structure

2. Charset Encoding

<Meta charset = "UTF-8">

Ascll

Ansi

Unicode

Gbk contains all Chinese Characters in Traditional Chinese

Gb2312 Simplified Chinese

Big5 traditional Chinese

The Utf-8 universal character set contains the characters needed by all countries around the world

2. 1. Meta tag Introduction

Meta has two attributes: name and http-equiv.

2.1.1 name

The attributes are described as follows:
Set to all: the file will be retrieved, and the link on the page can be queried;
Set to none: files will not be retrieved, and links on the page cannot be queried;
Set to index: the file will be retrieved;
Set to follow: links on the page can be queried;
Set to noindex: the file will not be retrieved, but the link on the page can be queried;
Set to nofollow: files will not be retrieved, and links on the page can be queried.

2.1.2Webpage redirection

<! -- Refresh the page 5 seconds later and jump to the Xiaomi official website -->
<Meta http-equiv = "refresh" content = "5; http://www.mi.cn">

2.2. link labels: 

1: Reference external css
2: Reference title image (icon) for example: <link rel = "icon" href = "1. icon">

Link external style sheet

 

 SetIcon

3, Table

 

<Table> table

<Tr> line

<Td> </td> Column

<Td> </td>

</Tr>

</Table>

Table attributes: Fill attributes and spacing attributes

Attributes in the table

3.1 standard table structure

When you use a table for layout, you can divide the table into headers, subjects, and footers.

<Thead> </thead>: used to define the header of a table. It must be in the <table> </table> label and generally contains the header information such as the logo and navigation of a webpage.
<Tfoot> </tfoot>: used to define the table footer, after the <table> </table> label <thead> </thead> label, generally, enterprise information at the bottom of a webpage is contained.
<Tbody> </tbody>: used to define the table body, after the <table> </table> MARK <tfoot> </tfoot>, it generally contains content except the header and the bottom of a webpage.

3.3 merge headers and cells

<Caption> </caption>The element defines the table title. The caption label must follow the table label. You can define only one title for each table. This title is usually centered on the table.

3.4Table title, border color, and content Vertical Alignment

◆ Table title <th> </th> text with the same title as td is automatically bold and horizontally centered

◆ Border color bordercolor = ""

◆ Vertical content alignment <td valign = "top"> account </td>

Valign = "top | middle | bottom"

 

PS:Table line table background color td Background WHITE

4. Form

Form is used to collect information.

Form Composition

 

◆ Prompt information

　　　　A form usually contains descriptive text, prompting users to enter and operate, such as user names and passwords.

◆ Form Control

Contains specific form function items, such as single-line text input box, password input box, check box, submit button, reset button, etc.

◆ Form field

It is equivalent to a container used to hold all Form Controls and prompt information. You can use it to define the url address of the program used to process form data and the method for submitting data to the server. If the form field is not defined, the data in the form cannot be transmitted to the background server.

<Form name = "form_name" action = "1.php" method =" post ">

 

Property: action: Process Information

Method = "get | post"

Get provides (transmission) information through the address bar, with poor security.

Post uses 1. php to process information, which is highly secure.

 

◆ Input control

Username: <input type = "text" maxlength = "8" disabled = "disabled" name = "username" value = "study">

<Input/> the type attribute is a single tag and the type attribute is its most basic attribute. It can be used to specify different control types. In addition to the type attribute, the <input/> tag can also define many other attributes. The common attributes are shown in the following table.

 

◆ Drop-down list

<Select>

<Option> drop-down list options </option>

<Option> drop-down list options </option>

......

</Select>

In HTML, you can tag <select> and <option> attributes to change the Display Effect of the drop-down menu, as shown in the following table.

 

<Optgroup> </optgroup>Group the drop-down list. Label =.

Multiple selection box:

Checked = "checked" sets the default selected item

◆ Textarea Control

 If you need to enter a large amount of information, you need to use the <textarea> </textarea> mark. The textarea control allows you to easily create multi-line text input boxes.

Cols:Controls the length of input characters, which is equal to the widthRows:Control the number of input rows, equivalent to the height

◆ Form information grouping

<Fieldset> </fieldset> grouping form information

<Legend> </legend> form information group name

 

Html5 Supplementary Form Control

 

5. Tag Semantics

-Tag Semantic Concept: select the appropriate tag (Code semantic) based on the content structure (content semantic)

-Semantic meaning of tags: 1. Reasonable webpage Structure

2: Good seo: It establishes good communication with search engines. With good structure and semantics, Your webpage content is naturally easily crawled by search engines;

3: Facilitate resolution by other devices (such as screen readers, blind readers, and mobile devices)

4: Easy for team development and maintenance

Tag semantics (note)

1: Use the divs and span labels as few as possible;

2: When the semantics is unclear, when using div or p, try to use p, because p has upper and lower spacing by default, which is advantageous for compatibility with special terminals;

3: Do not use pure style labels, such as B, font, u, etc. Use css settings instead.

4: The text to be emphasized can be included in strong or em tags. The default strong style is bold (B is not used), and em is italic (I is not used );