Python Day14 (HTML)

I. Overview 1. IntroductionHTML 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! 2. For developers:

• Learning HTML Rules
• Development daemon:

-Write an HTML file (acting as a template)-the database gets the data and then replaces it to the specified location in the HTML file (Web framework) 3. Local Test related

• Find file path, direct browser open
• Pycharm Open directly

4. Writing HTML files

• DOCTYPE correspondence (DOCTYPE tells the browser what HTML or XHTML specification to use to parse the HTML document)
• HTML Comment: <!--the contents of the comment--

5. Label classification:

• Self-closing labels

<meta charset= "UTF-8"/> (General self-closing tag in front of the right angle bracket plus/, the main convenience to let yourself or others know this is self-closing label)

• Active closing label

<title> old boy </title> The HTML file consists of: Second, head tag 1.Meta (metadata information)Provides meta-information about pages, such as page encodings, refreshes, jumps, descriptions and keywords for search engines and update frequency

• Page encoding (tells the browser what encoding)

<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/> <meta charset= "UTF-8"/> # General With this

• Refresh and jump

<meta http-equiv= "Refresh" content= "five"/> # 30 seconds Refresh <meta http-equiv= "Refresh" content= "5; Url=http://www.autohome.com.cn "/> # 5 Seconds jump to the specified URL

• Keywords

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

• Describe

<meta name= "description" content= "Balalallalall"/>

• X-ua-compatible

<meta http-equiv= "x-ua-compatible" content= "Ie=edge"/> 2.TitleWeb header information

<title>Title</title>

3.Link

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

4.StyleWrite a style on the page eg:

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

5.Script

    * Introduction file           <script type="text/javascript" src="http ://www.googletagservices.com/tag/js/gpt.js"></script >    * write JS code           <script type="text/javascript" ></script >

Third, body tag 1. Various symbols:

• &nbsp; # Stands for space (awesome space)
• &lt; # Left Angle Bracket
• &gt; # Right Angle bracket
• Http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html # More

2.P Label    

<p></p>  #  represents a paragraph with a gap between the default paragraphs <br/>  #  indicates a newline

Small Summary:

• All tags are divided into:

block-level tags: div (whiteboard), H-Series (enlarged bold), p label (spacing between paragraphs and paragraphs) Inline Tags: span (whiteboard)

• Tags can be nested between
• The meaning of tag existence, CSS operation, JS operation
• Ps:chorme use of review elements

-Positioning -View Styles 3.h Series Labels (total 6, from big to small)

4.div tags (most useful, default block-level labels)
<div></div>
5.span tags (also widely useful, default inline labels)
<span></span>
6.input series + form labels (both of which are commonly used for submitting forms )
<input type="text"Name="username"Value="Default Value"/>#Input Box<input type="Password"Name="Password"Value="Default Password"/>#Password Entry box<input type="Submit"Value="Submit"/>#Submission Form single<input type="Button"Value="Button"/>#a normal button.<input type="Image"Src="Img/search.png"/>#you can turn the submit button into a picture<input type="Radio"Name="Sex"Value="1"Checked="checked"/>#Radio box, name same can be mutually exclusive<input type="checkbox"Name="Skill"Value="1"Checked="checked"/>#check box, background can get the value in bulk by name, is a list<input type="file"/>#submit File button, which relies on a property of form form enctype= "Multipart/form-data"<input type="Reset"/>#Reset button<textarea name="T1"Id=""cols=" -"Rows="Ten"></textarea>#Text input Box<select name=" City"Id="city1"Size="2"multiple="multiple">#size shows several, multiple can be multiple, selected is selected by default<option value="1"> Beijing </option> <option value="2"> Shanghai </option> <option value="3"Selected="selected"> Hangzhou </option></select><select name="Sheng"> <optgroup label="Hebei province"> <option> shijiazhuang </option> <option> handan </option> </optgroup> <optgroup L Abel="Shanxi Province"> <option> Taiyuan </option> <option> Pingyao </option> </optgroup></select>
 7.a LabelJump
<a href="http://www.baidu.com" target="_blank"> Baidu </a>  #  page Jump, target property, _blank means open on new page
Anchor (href= ' #某个标签的ID ' tag ID is not allowed to repeat)
<a href="#part2"> See chapter II </a><p id="part1" style ="height:1000px;background-color:red"></p><p id="part2  " style=" ></p> "height:1000px;background-color:green"
8.img Label
<img src="bk-hill-2.jpg" alt=" picture " title="  This is a picture ">
9. List
<ul>    <li></li>    <li></li></ul>
<ol>    <li></li>    <li></li></ol>
<dl>    <dt> title </dt>    <dd> content </dd></dl>
10.table Label
<table border="1"> <thead> <tr> <th> table Head 1</th> <th> table Head 1</th>        <th> Header 1</th> <th> header 1</th> </tr> </thead> <tbody> <tr> <td>1</td> &LT;TD colspan="3">1</td> </tr> <tr> <td rowspan="2">1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td&gt            ;1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody></table>
11.label Label
for ="username"> User name:</label>  #  for plus input box ID is used to click on the file, Makes the associated label get cursor <input id="username" type="text" Name="user" />  
12.fieldset Label
<fieldset>    <legend> Login </legend>    <p> user name:</p>    <p> Password:</p> </fieldset>
13.hr Label
Python Day14 (HTML)