Python Learning bits-day12-HTML of the front-end base

Source: Internet
Author: User
Tags opening and closing tags tag name url example

HTML definition:
    • The Hypertext Markup Language (hypertext Markup language,html) marks individual parts of the page to be displayed in a label language . A set of rules, a browser-aware rule
    • The browser renders the Web page file sequentially, and then interprets and displays the content based on the marker. However, it is important to note that for different browsers, the same label may not have the exact same interpretation (compatibility)
    • Static Web page File extension:. html or. htm
    • HTML is not a programming language, but a markup language (markup language)
    • HTML uses tag tags to describe web pages
HTML structure
<! DOCTYPE html> HTML file declaration begins "en">"UTF-8">    <title> page title </title>        file Body </body>
    • <! DOCTYPE Html> tells the browser what HTML or XHTML to use to parse the HTML document
    • The
    • <title></title> defines the page title, which is displayed in the browser title bar.
    • The text between <body></body> is visible on the page body content
HTML tag format

Closed and self-closing labels

Syntax for Tags:

< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" ......> content section </tag name >
< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" .../>

Common tags
<! Doctype> Label

<! The doctype> declaration is positioned at the front of the document, before the

Function: Declares the parsing type (document.compatmode) of the document, avoiding the bizarre mode of the browser.

Document.compatmode:

    1. Backcompat: Weird mode, the browser uses its own weird mode to parse the rendered page.
    2. Css1compat: Standard mode, browser uses the standard resolution rendering page.

This property will be recognized and used by the browser, but if your page does not have a DOCTYPE declaration, the Compatmode default is Backcompat

Commonly used tags in <meta> Tags

Meta Introduction
The <meta> element provides meta-information about the page (meta-information), a description of the search engine and the frequency of updates, and keywords.
The <meta> tag is located in the header of the document and does not contain any content.
The information provided by <meta> is not visible to the user

Meta tag composition: Meta tags have two attributes, which are the Http-equiv property and the Name property, and different properties have different parameter values, these different parameter values to achieve a different page function.

(1) Name attribute: Mainly used to describe the Web page, the corresponding property value of content,content content is mainly for the search engine to find information and classification information.

<meta name="keywords" content= " Mars novel, Mars, novel rankings, Tian Silkworm potatoes, Yuan Zun, free download reading, complete the novel, Fantasy Fairy novel, mystery novel, modern Urban fiction, ancient romantic novels, modern romantic novels, the latest series, the hottest finish, good-looking novels, novel Reading Network "><meta name="  Description" content="  Mars fiction web, reading with humans, offers the latest and hottest free novel online reading as well as free download reading, a variety of good-looking novel leaderboards, including modern urban fiction, Mystery novels, historical military novels, fantasy fairy novels, modern romantic novels, ancient romantic novels, Pure Love fiction, fairy-man fantasy novels in the exchange. High-quality Copyright fiction: Yuan Zun, the underworld businessman, the Underworld God, Youth does not regret juvenile madness, the yuan is not extinguished the tactic, the immortal male god, supposition password, flower god record, isolated city closed.  ">

(2) Http-equiv property: equivalent to the file header of HTTP, it can send back some useful information to the browser to help correctly display the content of the Web page, the corresponding property value of Content,content is actually the variable value of each parameter.

<meta http-equiv="Refresh" content="2; url=https://www.oldboy.com">//<meta http-equiv="content-type  " Charset=utf8">"x-ua-compatible"" Ie=emulateie7 "
Non-<meta> tags
    <title>oldboy</title>    <link rel= "icon" href= "Http://www.jd.com/favicon.ico" >    <link Rel= "stylesheet" href= "Css.css" >    <script src= "Hello.js" ></script>
Commonly used tags in <body>

Basic tags ( block-level labels and inline tags )

" "  ""
Example:
<div> and <span>

<div></div>: <div> is just a block-level element that has no practical meaning. It is mainly given a different performance by CSS styles.
<span></span>: <span> represents inline rows (inline elements) and has no practical meaning, and is mainly given a different representation by CSS styles.

The difference between a block-level element and an in-line element
The so-called block element is the element that begins to render on another line, and the inline element does not need another line. If you insert these two elements separately in a Web page, you will not have any effect on the page.
These two elements are specifically designed to define a CSS style.

Graphic Tags:
" " src: The path of the picture to be displayed. alt: The picture does not prompt when it is loaded successfully. Title: Tip Information when hovering the mouse. Width: The height of the picture: high (width height two attributes only one will be automatically scaled.) " "
Hyperlink tag (anchor tag): <a> </a>
What is a hyperlink? A hyperlink is a link from a Web page to a target, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application.
What is a URL? The URL is the abbreviation for the Uniform Resource Locator (Uniform Resource Locator), also known as the Web address, which is the address of the standard resource on the Internet. URL example http://www.sohu.com/stu/intro.htmlhttp://222.172.123.33/stu/  Intro.htmlurl address consists of 4 parts 1th: For the Protocol: http://, ftp://, etc. 2nd: For the site address: can be a domain name or IP address 3rd: For the page in the Site Directory: Stu Part 4: For the page name, for example Index.html each partis separated by a "/" symbol.
" " <a href= "" target= "_blank" >click</a>href property specifies the destination page address. The address can have several types:    absolute URL-point to another site (such as href= "http://www.jd.com)    relative URL-refers to the exact path in the current site (href=" index.htm ")    anchor URL- Point to the anchor in the page (href= "#top")
List label
" " <ul>: Unordered list [type attribute: disc (solid dot) (default), Circle (Hollow Circle), Square (solid square)]<ol>: Sequence table         <li>: Each item in the list. <dl>  Define list         <dt> list title         <dd> list item '
Table Tags: <table>

Tabular Concepts
A table is a two-dimensional data space, a table consists of several rows, a row and a number of cells, cells can contain text, lists, patterns, forms, digital symbols, preset text and other tables and other content.
The most important purpose of the table is to display the table class data. Tabular data refers to data that best fits into a tabular format, which is organized by rows and columns.
The basic structure of the table:

<table>         <tr>                <td> title </td>                <td> title </td>         </tr>                  <tr>                <td> content </td>                <td> content </td>         </tr></table>
" " <tr>: Table row<th>: Table head cell<td>: Table Data cell property:    border: Table border.    cellpadding: Inner margin    cellspacing: margin.    Width: Percentage of pixels. (preferably with CSS to set the length and width)    rowspan:  How many rows the cell spans vertically    colspan:  how many columns (i.e. merged cells) the cells span

Forms Tags: <form>

Features: forms are used to transfer data to the server, enabling users to interact with the Web server

The form can contain input series labels such as text fields, checkboxes, radio boxes, submit buttons, and so on.

Forms can also contain textarea, select, FieldSet, and label labels.

Form Properties

Action: Where the form is submitted. Generally point to the server side of a program, the program receives the form submitted by the data (that is, the form element value) for the corresponding processing, such as Https://www.sogou.com/web

Method: How the form is submitted post/get default value is get

Form elements

Basic concepts:
HTML forms are a more complex part of HTML elements, and forms are often combined with features such as scripting, dynamic pages, and data processing, so it's important to make dynamic Web sites.
Forms are typically used to collect user input information
How the form works:
When a visitor browses a page with a form, they can fill in the necessary information and then press a button to submit it. This information is transmitted over the Internet to the server.
This data is processed by a specialized program on the server and returns an error message if there is an error and requires that the error be corrected. When the data is complete and correct, the server feeds back an input completion information

<input> Series Labels

" " <1> Form Type: text        text input box             password password input box             Radio single marquee checkbox             multiple Box submit               button                         button (need to cooperate with JS use.) What is the difference between button and submit?             file submission: Form form needs to add attribute enctype= "multipart/form-data"                         upload file Note Two: The request must be postenctype= "Multipart/form-data" <2> Form Properties Name:    The key of the form submission item.           Note the difference from the id attribute: The name attribute is the one used when communicating with the server           , and the id attribute is the name used by the browser side, which is primarily for client programming, and value used in CSS and javascript:    The value of the form submission item. The Value property is used differently for different input types:                type= "button", "Reset", "submit"-defines the displayed text on the button                                 type= "text", "Password", " Hidden "-Defines the initial value of the input field                                 type=" checkbox "," Radio "," image "-defines the value associated with the input checked:  Radio and checkbox are selected by default readonly: Read-only . Text and passworddisabled: works well for the input used. ""

Select Label

" " <select> drop-down tab Properties          name: The key of the form submission item.          Size: Number          of options Multiple:multiple                  <optgroup> for each item plus group                 <option> drop-down check each property:                       value: The values of the form submission item.                          Selected:selected dropdown selected by default "'

<textarea> Multi-line text box

" " <form id= "Form1" Name= "Form1" method= "Post" action= "" >        <textarea cols= "width" rows= "height" name= "name" >                   default content        </textarea></form>"'

<label> tags

Define the:<label> label to define the callout (tag) for the INPUT element.
Description
1 The Label element does not present any special effects to the user.
2 The For property value of the <label> tag should be the same as the id attribute value of the related element.

" " <form method= "POST" action= "" >        <label for= "username" > user name </label>        <input type= " Text "name=" username "id=" username "size= " "/></form>"

<fieldset> tags

" "

<fieldset>
<legend> Login Bar </legend>
<input type= "Text" >
</fieldset>

‘‘‘

Open the server socket

ImportSocketdefMain (): Sock=Socket.socket (socket.af_inet, socket. Sock_stream) Sock.bind (('localhost', 8080)) Sock.listen (5)     whileTrue:Print("server is working .....") conn, address=sock.accept () Request= CONN.RECV (1024) Conn.sendall (bytes ("http/1.1 201 Ok\r\n\r\n","UTF8") ) Conn.close ()if __name__=='__main__': Main ()
Example 1
ImportSocketdefMain (): Sock=Socket.socket (socket.af_inet, socket. Sock_stream) Sock.bind (('localhost', 8080)) Sock.listen (5)     whileTrue:Print("server is working .....") conn, address=sock.accept () Request= CONN.RECV (1024) with open ('index.html', encoding='Utf-8') as F:response=f.read () conn.send ('http/1.1 201 OK \r\n\r\n%s'%response). Encode ('Utf-8'))#read from Fileconn.close ()if __name__=='__main__': Main ()
Example 2

Python Learning bits-day12-HTML of the front-end base

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.