Python Basics 14

Html

HTML is an abbreviation for the English Hyper Text mark-up Language (Hypertext Markup Language), which is a standard language (tag) for making Web pages. The equivalent of a uniform set of rules, everyone to abide by him, so that you can let the browser according to the rules of the markup language to explain it.

The browser is responsible for translating the label into a user "readable" format, presented to the user!

Doctype

DOCTYPE tells the browser what HTML or XHTML specification to use to parse an HTML document

The difference between having and not

• Backcompat: Standard compatibility mode is not turned on (or is called "weird" mode [Quirks modes], promiscuous mode)
• Css1compat: Standard compatibility mode is turned on (or called strict mode [standards Mode/strict mode])

This property will be recognized and used by the browser, but if your page does not have a DOCTYPE declaration, then compatmode default is Backcompat, which is the beginning of the devil-the browser in its own way to parse the rendered page, then the different browsers will show different styles. If your page is added, then it is equivalent to opening the standard mode, then the browser will have to honestly interpret the rendering page according to the standards of the Web, so that your page in all browsers will display a look.

DOCTYPE tells the browser what HTML or XHTML specifications are used to parse the HTML document, and the DTD file contains tags, attributes, properties, and constraint rules.

Headmeta (metadata information)

Provides meta-information about pages, such as page encodings, refreshes, jumps, descriptions and keywords for search engines and update frequency

1. Page encoding (tell the browser what the code is)

< meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >

2. Refresh and jump

< meta http-equiv= "Refresh" content= "30″>

< meta http-equiv= "Refresh" content= "5; Url=http://www.autohome.com.cn "/>

3. Key words

< meta name= "keywords" content= "StarCraft 2, star old boy, interview, F91, small color, JOY" >

4. Description

Example: Cnblogs

5.x-ua-compatible

Microsoft's IE6 is through the XP, Win2003 and other operating systems released, as the dominant desktop operating system, also makes IE occupy the notice status, many Web site development, in accordance with the standards of IE6 development, and IE6 own standards is also within the Microsoft Company defined. To IE7 out of the time, the adoption of the Microsoft internal standards and some of the standard, this time many sites to upgrade to IE7 time, it is more painful, a lot of code must be adjusted to be able to run normally. And to Microsoft's IE8 this version, basically the Microsoft internal definition of the standard abandoned, and comprehensive support standards, because based on the changes to the standard, so that the original IE8 version can visit the site, in the IE8 to the normal access, there will be some typographical disorders, text overlap, Display not equal to various compatibility errors.

Internet Explorer 8 provides tighter support for industry standards than any earlier browser version. As a result, sites designed for older browsers may not appear as expected. To help mitigate any problems, Internet Explorer 8 introduces the concept of document compatibility, which allows you to specify the version of Internet Explorer that your site supports. Document compatibility adds new patterns to Internet Explorer 8, which tells the browser how to interpret and render the site. If your site does not display correctly in Internet Explorer 8, you can update the site to support the latest WEB standards (preferred), or you can force Internet Explorer 8 to display content in the same way that you view the site in an older version of the browser. You can do this by adding the X-ua-compatible header to the Web page by using the META element.

When Internet Explorer 8 encounters a webpage that does not contain a x-ua-compatible header, it uses directives to determine how to display the Web page. If the directive is missing or does not specify a standards-based document type, Internet Explorer 8 will display the page in IE5 mode (Quirks mode)

Title

Web header information

Common tags

Labels are generally divided into two categories: block-level labels and inline labels

• Inline Tags: span (whiteboard), etc.
• Block-level Tags: div (whiteboard), H-series (increased bold), p label (spacing between paragraphs and paragraphs), etc.

The P tag represents a paragraph, and the default paragraph is spaced!

BR tag is line break

A label

< a href= "http://www.autohome.com.cn" >

1. Target property, _black means open on new page

2. Anchor

H tag

Picture (Images)

List

UL ol DL

<ul>    <li>line1</li>    <li>line2</li>    <li>line3</li></ul>

<ol>    <li>line1</li>    <li>line2</li>    <li>line3</li></ol>

<dl>    <dt>河北省</dt>    <!--dt是标签，dd是标签里的内容-->        <dd>石家庄</dd>        <dd>衡水市</dd>    <dt>山东省</dt>    <!--dt是标签，dd是标签里的内容-->        <dd>济南市</dd>        <dd>烟台市</dd></dl>

Form

Table

<table border="1">    <thead>    <!--表头-->        <tr>            <th>表1</th>            <th>表2</th>            <th>表3</th>        </tr>    </thead>    <tbody>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>            <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>            <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>    </tbody></table>

Merge cells Horizontally: colspan = "

Vertically merged cells: rowspan = "

Select Label

Single-Selection Menu

<select>    <option value="1">北京</option>    <option value="2">上海</option>    <option value="3" selected="selected">深圳</option>    <!--selected="selected"表示默认选择深圳--></select>

Multi-Select Menu

<select multiple="multiple" size="3">    <option>香港</option>    <option>北京</option>    <option>上海</option>    <option>深圳</option></select>

Input series label Radio Box (radio)

Radio tags are only true if the name value is the same as they are mutually exclusive;

<!--对于input标签来说只要，radio的name值相同，那么他们就会互斥--><p>请选择性别：</p>男：<input type="radio" name="gender" value="1" />女：<input type="radio" name="gender" value="2" />

check box (checkbox)

<p>请选择体育爱好：</p>篮球：<input type="checkbox" name="favor" value="1">足球：<input type="checkbox" name="favor" value="1">乒乓球：<input type="checkbox" name="favor" value="1" checked="checked">羽毛球：<input type="checkbox" name="favor" value="1" checked="checked"><!--这里加一个标识checked="checked，为默认选择"-->

Input box (text & password)

<!--标准的输入框--><input type="text"/><!--密码的输入框（输入的内容是保密的）--><input type="password"/>

Submit button (Button & Submit & Reset)

<!--普通的按钮--><input type="button" value="提交"/><!--带提交表单功能的按钮？--><input type="submit" value="提交"/><!--重置按钮，清空所有输入的数据--><input type="reset"  value="重置" />

Submit document (file)

<input type="file" name="fname"/>

Multiline text box (TEXTAREA)

<textarea style="height: 100px;width: 100px;"></textarea>

Form form

Input series requires form form to submit data

<form action="http://localhost:8888/index" method="get">    <!--这里action是告诉html提交到那里-->    <!--method是通过什么方法去action指定的地址-->    <!--表单会把所有获取输入的数据存成一个json提交到后台-->    <input type="text" name="user" />    <input type="text" name="email" />    <input type="password" name="pwd" />    <input type="button" value="button1" />    <input type="submit" value="提交"/>    <!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->    <!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单--></form>

Lable label

When you use the label tag, the selection text will go into the corresponding box body, he is similar to a jump

<label for="username">用户名：</label><input id="username" type="text" name="user" /><br /><label for="pwd">密码：</label><input id="pwd" type="text" name="user" />

Various symbols:

Http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

Css

CSS is an abbreviation for the English cascading style sheets, called Cascading style sheets, to beautify the page.

There are three ways to exist: element inline, page embedding, and external introduction, comparing the pros and cons of three different ways.

• Use style= ' xx:xxx in the label; '
• Embed < style type= "TEXT/CSS" > Blocks in the page
• Introducing an external CSS file

Necessity: The American Union is responsible for the color collocation of the page and the beautification of the picture, and the developer must know how to achieve it.

Tag Selector

div{ background-color:red; } <div > </div>

Class Selector

.bd{ background-color:red; } <div class=‘bd‘> </div>

ID Selector

#idselect{ background-color:red; } <div id=‘idselect‘ > </div>

Association Selector

#idselect p{ background-color:red; } <div id=‘idselect‘ > <p> </p> </div>

Combo Selector

Property Selector

CSS styles can also be written in separate files

Comments

/* Content */

Border

width, style, color (border:4px dotted (dashed) solid (solid line) red)

• Height can be written in pixels or percentages (percentages are meaningless)
• Width widths can be written in pixels or percentages
• Text-align:ceter, centered horizontally
• Line-height, vertical direction according to label height
• Color font
• Font-size Font Size
• Font-weight Font Bold

float float

• Float= "left" floating
• Float= "left" floats to the right
• When the parent cannot control:

Display

• Display:none; Let the label disappear
• Display:inline; Block-level labels into inline labels
• Display:block; Inline labels to block-level labels
• Display:inline-block; With inline, the default number of its own how much, with block, can be set cannot set height, width, padding margin
• Inline Tags: Unable to set height, width, padding margin
• Block-level Tags: can be set height, width, padding margin

Python Basics 14