Html development basics, html Development

Html development basics, html Development

1 Doctype2 3 Doctype tell the browser what html or xhtml specifications are used to parse html document 4 5There is no difference6 7 BackCompat: The standard compatibility mode is not enabled (or the odd mode [Quirks mode], mixed mode) 8 9 CSS1Compat: if the standard compatibility mode is enabled (or the Strict mode [Standards mode/Strict mode]) 10 11 is recognized and used by the browser, but if your page does not contain the DOCTYPE statement, then compatMode is BackCompat by default, which is the beginning of the Devil-the browser parses and renders the page in its own way, then different styles will be displayed in different browsers. If your page is added, it is equivalent to enabling the standard mode, so the browser has to honestly parse and render the page according to W3C standards, your page is displayed in all browsers. 12 13Function14 15 Doctype tells the browser what html or xhtml specifications are used to parse html documents. The dtd file contains tags, attributes, properties, and constraints. 16 17 Meta (metadata information) 18 19 provides Meta information about the page, for example, page encoding, refresh, jump, description and keywords for the search engine and update frequency.

Page code (tell the browser what code it is)

<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

Refresh and redirect

< meta http-equiv=“Refresh” Content=“30″>< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

Keywords

<Meta name = "keywords" content = "interview, 11, 43"

X-UA-Compatible

Compared with any earlier browser versions, Internet Explorer 8 provides closer support for industry standards. Therefore, Websites designed for earlier versions of browsers may not be displayed as expected. To help mitigate any problems, Internet Explorer 8 introduces the concept of document compatibility, allowing you to specify the version of Internet Explorer supported by the site. New modes are added to Internet Explorer 8 for document compatibility. These modes tell the browser how to interpret and present the website. If your site cannot be correctly displayed in Internet Explorer 8, you can update the site to support the latest Web standards (preferred ), you can also force Internet Explorer 8 to display the content by viewing the site in the browser of the old version. You can use the meta element to add the X-UA-Compatible header to the webpage. When Internet Explorer 8 encounters a webpage that does not contain the X-UA-Compatible header, it uses commands to determine how to display the webpage. If this command is missing or a standard-based document type is not specified, Internet Explorer 8 displays the webpage in IE5 mode (Quirks mode. More <meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7"/>

TitleWebpage header information

 

Link1.css< link rel="stylesheet" type="text/css" href="css/common.css" >2.icon< link rel="shortcut icon" href="image/favicon.ico">

 

Style: <style type = "text/css">. bb {background-color: red;} </style> Script

Introduce file <script type = "text/javascript" src = "http://www.googletagservices.com/tag/js/gpt.js"> </script> write js Code <script type = "text/javascript">... </script>

Common labels

 

Tags are generally divided into two types: block-level labels and intra-Row Labels: a, span, select, etc. # a line of block-level labels is displayed on the page: div, h1, p, etc. # The whole page is displayed
Various symbol http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
It is similar to <div>, which cannot be directly displayed. Therefore, you need to use specific symbols to display & lt; div & gt;

P and brp indicate paragraphs. By default, there is an interval between paragraphs! Br is a line feed

A label <a href = "http://www.autohome.com.cn"> </a> 1. target attribute, _ blank indicates opening 2.

H tag H1 H2 H3 H4 H5 H6

Select tag <select> <option value = '1'> Shanghai </option> <option value = '2'> Beijing </option> <option value = '3' selected = 'selected'> Guangzhou </option> selected = 'selected' indicates that the mode is selected, the value defined by value is used to submit it to the background for data operations, 1 indicates Shanghai </select> <select multiple = "multiple" size = '2'> multiple indicates the number of visible options in the size drop-down list. <optgroup> label you can combine related options, label is the description specified by the quota group, grouping function <select> <optgroup label = 'hebei province '> <option> Shijiazhuang </option> <option> Handan </option> </optgroup> <optgroup label = 'shanxi Province '> <option> Taiyuan </option> <option> Pingyao </option> </optgroup> </select>

 

<Input type = "checkbox/radio/text/password/button/submit/file" name = 'xx'/> the Checkbox check box radio single queue is in a single queue. If mutex attributes are required, you need to set name to the same text box password box button submit button will submit data file upload file when submitting the file: enctype = 'multipart/form-data' method = 'post'

Text Box entered by multiple lines
<Textarea> asdjoifjwe </textarea>

<Form action = 'background url' method = 'post'> NAME: <input name = 'username' type = 'txt '/> <br/> pwd: <input name = 'passwd 'Type = 'Password'/> <input type = 'push' onclick = 'alert (123) 'value = 'Submit'/> <input type = 'submit 'value = 'Submit'/>
</Form>

Name is mainly used to obtain the value in the background.

As long as my cursor reaches this line, it will be automatically located in the text box.
<Label for = 'name2'> name: <input id = 'name2' type = 'txt '/> </label>

Three list styles
<Ul> <li> ul. li </li>

</Ul> <ol> <li> ul. li </li> <li> ul. li </li> <li> ul. li </li> </ol> <dl> <dt> Jiangsu </dt> <dd> Nantong </dd> <dd> Suzhou </dd> <dt> Beijing </dt> <dd> Beijing </dd> </dl>

Table

    <table>            <tr>                <td>1</td>                <td>2</td>            </tr>            <tr>                <td>2</td>                <td>3</td>            </tr>    </table>    

<Table border = '1'> border tag <tr> <th> 1 </th> title th <th> 2 </th> </tr> <td> 1 </td> <td> 2 </td> </tr> <td> 2 </td> <td> 3 </td> </tr> </table>

Colspan = '2' merge rows
Rowspan = '2' merge Columns

 

Style
<Fieldset> <legend> logon </legend> <p> User name: </p> <p> password: </p> </fieldset>