Python Learning-day14-front-end HTML, CSS

First, HTML1, Essence: A rule, the browser can task the rules 2, the developer:
Learning HTML Rules
Development daemon:
-Write HTML files (acting as templates) ******
-The database gets the data and then replaces it to the specified location in the HTML file (Web frame) 3, HTML fixed format introduction

<! DOCTYPE html>               <!--  #doctype指定统一规范: HTML-->Similar to the HTML format (HTML, head, body are fixed format, not variable
<!--  comment content-->, note

4, label 1, label classification

Tags can be nested

The meaning of the label exists: used for positioning, through the tag + tags inside the properties (such as id= "1", name= "XX", etc.), after positioning, for the CSS, JS operation

-Self-closing and labeling such as:<meta> no need to follow a </meta> this is called the self-closing and labeling. For the convenience of viewing the closed and label needs to be added in the following/, example: <meta/>

-manual closure of labels such as:

• Inline label (inline label): All labels occupy one row.
• Block-level Tags: a label occupies one line regardless of the content

2, head tag 1, META tag properties: Encoding, refresh, set page encoding, keywords (for search engines), jump, description

• • • Refresh: <meta http-equiv= "Refresh" content= "ten" > #每过10秒刷新一次
    • Jump: <meta http-equiv= "Refresh" content= "3; Url=http://www.baidu.com "> #过3秒跳转到www. baidu.com
    • Key words: <meta name= "keywords" content= "old boy, blog, mini-game" > #设置关键词, for crawler crawling, Baidu search engine searches These keywords, the page (website) to join the search results
    • Description: Describe what the site does

2. Title Tag

Web header information

3. Body tag 1, various symbols

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

Spaces &nbsp; Greater than sign &gt; Less than number &lt

　　　　

<a href= "www.baidu.com" >LW </a>    #俩个空格

2. P Label and BR label

P Tags: paragraph, default 2 paragraphs between paragraphs are spaced

BR Tags: line break

　　　　

   <P>1111<BR/>ggggggg</p>    <p>123</p>     #第一个段落 (P tag) and the second paragraph are spaced when the browser is opened (2 lines), The first paragraph, plus the BR line, turns into 2 lines, but no spacing, which belongs to a paragraph

　　

3, h tag

Title tags, h1 to H6, from big to small

4. Span Label

span tags, whiteboard one, what properties are not, inline labels, all labels are a row. Use CSS to make it a label for any feature

5. Div tag

Block-level labels, also whiteboard, no attributes, because it is a block-level label, a DIV is a row, but the line is not directly spaced, but also through the CSS to make it into any label

6. Input Box label

Get and Post differences:

HTTP requests will have 2 parts , part of the request header, part of the request content

　　　　　Get Submit method, the requested data is in the request header, that is, in the URL can be directly seen,

Post method, the requested data is in the requested content (body),the URL is not visible

　　　　

Input type= ' text '   Name property, value (default) input type= ' password ' name attribute input type= ' submit '    #提交表单input type= ' button '    #按钮 (can be decorated with CSS properties)
Input type= ' Radio '     #单选框, value,check= "Checked", Name property (name same is mutually exclusive)
Input type= ' checkbox '  #复选框, value,checked= "checked" (default), Name property (bulk fetch data)
Input type= ' file '      #上传文件属性, relies on a property in form form, chctype= "Multipart/form-data"  #如果没有这个属性, does not transfer files,
Only add this property, click on the upload will be a little bit to transfer the file past
Input type= ' rest '      #重置, which resets what is entered (or selected) when clicked

The background can only get the contents of input

<input type= "text"/>     #input标签的text属性: text <input type= "password"/>  #type属性: password attribute, input is encrypted <input  type= "button" value= "Login"/>  #button, buttons, button just button, and cannot submit <input  type= "Submit" value= " Login "/>   #submit, submit note: Only this is not submitted, you need to add a form label (form) above, click on the button, the form will be submitted to the location defined in the form (action). Example: <form action= "Http://localhost:8888/index" >            <input type= "text" name= "user"/>     #后台根据name属性 " User "to match the value, the background program inside the definition according to user acquisition (background to get what value, what to write here)
<input type= "text" email= "email"/>
<input type= "password" password= "pwd"/>

            <input  type= "button" value= "Login 1"/>            <input  type= "Submit" value= "Login 2"/>        </form >

Cases:

<body>    <form action= "Http://192.168.16.35:8888/index" method= "POST" >        <input type= "text" Name= "User"/  value= "Default" >   #value后面的东西是默认值, is to open the browser in the input box default value        <input type= "text" name= "email"/ >        <input type= "password" name= "pwd"/>        <!--{' user ': ' Users input user ', ' email ': ' xx ', ' pwd ': ' xx '}-->        <input type= "button"  value= "Login 1"/>        <input type= "Submit"  value= "Login 2"/>    </ form>    <br/>    <form>        <input type= "text"/>        <input type= "password"/>        <input type= "button"  value= "Login 1"/>        <input type= "Submit"  value= "Login 2"/>    < /form></body>

check box:

<form>            <div>                <p> Please select gender </p>                male: <input type= "Radio" name= "Gender" value= "1"/ >    #name属性, mutual exclusion, is only one choice, through value to determine which                female: <input type= "Radio" name= "Gender" value= "2"/>    # The thing behind name can be arbitrary, only with the program written in the background program get the same can be            </div>        </form>   <div>                <p> Hobby </p>                basketball: <input type= "checkbox" Name= "Favor" value= "1"/>  #多选框, you can select multiple, or the value of the choice of which                football:< Input type= "checkbox" Name= "Favor" value= "2"/>                Billiards: <input type= "checkbox" Name= "Favor" value= "3"/>                Tennis: <input type= "checkbox" Name= "Favor" value= "4"/>                            </div>

　　

7. textarea

Multi-line text input:

<div style= "Height:50px;width:100px;background-color: #dddddd" ></div>

8. Select Label

Select the label, drop-down box to select

<select name= "City" size= "3" multiple= "multiple" > #提交到后台后根据name (City) Gets, size: Shows how much, by default, one, that is, size= 1;multiple: Multiple selection (multiple options available)

<optgroup label= "China cities" >   #optgroup分组: The following options in this group, grouping is not selectable, only display

<option value= "1" > Beijing </option>   #根据value获取选择的是哪个

 <option value= "2" > Hebei </option>
 <option value= "3" selected= "selected" > Nanjing </option> #selectd默认选择哪一个

</optgroup>

</select>

　　

9. A label

Jump

<a href= "http://www.baidu.com" > Baidu </a>  #href hyperlinks, must add HTTP, otherwise error <a href= "Http://www.baidu.com" target= "_blank" > Baidu </a>  #target = "_blank" means open in New tab page

Anchor:

<a href= "#i1" > Chapter </a>   --#id和下面的id对应    <a href= "#i2" > Chapter II </a>    <a href= "#i3" > Chapter III </a>    <div id= "I1" > The contents of the first chapter </div>    <div id= "I2" > Chapter II content </div>    < Div id= "i3" > Chapter III content </div> NOTE: Anchor: When a page is very long, when the first chapter is clicked, it jumps to the content of the first chapter;

10. IMG Tag

Picture label

　　　　

   #--src directly behind the path of the picture, style behind can set the size of the picture!

Note: Title: The text will appear when you hover over the Picture: Blog Park
ALT: When this picture does not exist, the position of the picture shows the text: a la La chart.

Click on the image to jump, you can put the IMG tag inside the A tag

　　

<a href= "Http://www.xxx.com/1.jpg" >        </a > can click on the image to view this picture

　　

11. List--ul,ol,dl

Not commonly used, generally through the transformation of CSS

Code, Effects:

<ul>                           #ul, OL and Li Correspondence, paired        <li>test1</li>        <li>test2</li>        <li> test3</li>    </ul>    <ol>        <li>test4</li>        <li>test5</li>        <li>test6</li>    </ol>    <dl>        <dt>www</dt>        <dd> test7</dd>        <dd>test8</dd>        <dt>www2</dt>        <dd>test9</dd >        <dd>test10</dd>    </dl>

Effect:

12. Table Tab

TR indicates a row

TD represents columns

　　　　

    <table border= "1" >  #border表示加上边框, no border        <tr>            <td> first row, first column </td>            <TD > First row, second column </td>            <td> first row, third column </td>        </tr> <tr> <td>            second row, first column </td>            <td> second row, second column </td>            <td> second row, third column </td>        </tr>    </ Table>

The above code effect:

Table headers are individually labeled

<table border= "1" >        <thead>            <tr>                <th> table header 1</th>                <th> header 2</th >                <th> header 3</th>            </tr>        </thead> <tbody>        <tr>                < td>1.1.1.1</td>                <td>80</td>                <td> View details </td>            </tr>             <tr>                <td>2.2.2.2</td>                <td>80</td>                <td>                    <a href= " s1.html "> View details </a>  #可以点击查看详细                </td>            </tr>        </tbody>   </ Table>

　　

Merge cells:

<table border= "1" >        <thead>            <tr>                <th> table header 1</th>                <th> header 2</th >                <th> header 3</th>            </tr>        </thead> <tbody>        <tr>                < td>1</td>                <td colspan= "2" >1</td>     #相当于合并单元格, accounting for two columns, but the third column needs to be deleted, or the cell will be squeezed out.            </tr>             <tr>                <td>2</td>                <td rowspan= "2" >2</td>    # Equivalent to merging Danyang, two lines, the following line of the relative due column needs to be deleted, or extruded cells                <td>2</td>            </tr>            <tr>                <td >3</td>                <td>3</td>            </tr>        </tbody>    </table>

13, lable

　　　　

<label form= "username" > Username:</label>   #label就是一个普通的文本, and use the form together with        the following id=username link, when clicking on the user name , the cursor will be in the input box below input!        <input  id= "username" type= "text" name= "user" >

Second, CSS

HTML is divided into 3 pieces (3 div)

Set the Style property above the label

General CSS files are written separately in CSS files, imported in HTML :<link rel= "stylesheet" href= "Commont.css"/>

CSS file Comments:/* * *

　　　　a label can apply 2 styles, and if not, apply them all , if same, set down sequentially

Selector:

• ID selector:　　　　

#i1, #i2, #i3 {            background-color: #dddddd;        } <div id= "I1" >1</div>    <div id= "I2" >2</div>    <div id= "i3" >3</div> #对应id

• Class selector:

. c1{            Background-color: #dddddd;        } <div class= "C1" >4</div> points. Corresponding class, above with a point definition, the following is called by class, class can be repeated, C1 is the name

• Tag Selector

    div{            background-color: #dddddd;        } #下面所有div标签的全部设置上div标签选择器里面的样式.

• Hierarchy Selector

Span div{            ackground-color: #dddddd;        } #span Div Middle Space, below the span inside the DIV tag set above the style
The other, like,. C1 Div span ... The following can be written a lot, but very deep is not suitable.

• Property Selector

Input[type= ' text ']{            width:10px;            height:20px;        

input[n= ' eeee ']{
    width:10px;
    height:20px;
}

<input type= "text" n= "eee"/>

CSS separate file example:

Border
c3{    border:1px solid red;   
Can be summed up as: broadband, style, color  }
Properties Introduction
Height: high, generally using pixels (px), or percent width: width, pixels, percent text-align:center : Centered horizontally line-height: centered on label height color: Font Color font-size: Font size font-weight: Font Bold
　　
Background
Background-color: #dddddd
Float
　　　　
　　
Python Learning-day14-front-end HTML, CSS