HTML content of the Frontend knowledge

Last Update:2018-03-05 Source: Internet

Author: User

Tags opening and closing tags tag name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML introduces the nature of Web services

Import Socketsk = Socket.socket () sk.bind (("127.0.0.1", 8080)) Sk.listen (5) while True:    conn, addr = sk.accept ()    data = Conn.recv (8096)    conn.send (b "http/1.1 ok\r\n\r\n")    Conn.secd (b "
The browser sends the request--the HTTP protocol--the server receives the request--the server returns the response--the server sends the HTML file content to the browser--Browser rendering page
What is HTML?
 
 
  
   
   Hypertext Markup Language (hypertext Markup Language, HTML) is a markup language for creating Web pages. 
   is essentially a browser-aware rule, we write pages according to rules, and browsers render our pages according to rules. For different browsers, there may be different interpretations of the same tag. (compatibility issues) 
   Web page file extension:. html or. htm 
  
 
 
What is HTML?
HTML is a markup Language (markup language), which is not a programming language.
HTML uses tags to describe web pages.
HTML Document Structure
The most basic HTML document:
<! DOCTYPE html>

 
  
  
    
    <! DOCTYPE Html> is declared as a HTML5 document. 
     
     
    <title>, </title> defines the page title, which is displayed in the browser title bar. 
    The text between <body> and </body> is visible as the main content of the page. 
   
 
  
Note: for Chinese web pages it is necessary to use <meta charset= "Utf-8" > declaration encoding, otherwise garbled characters will appear. Some browsers will set GBK as the default encoding, then you need to set <meta charset= "GBK" >. 
HTML tag format
 
  
  
    
    HTML tags are keywords surrounded by angle brackets, such as  
    HTML tags are usually paired, such as:<div> and </div> The first tag is the start and the second is the end. The end tag will have a slash. 
    Also some of the labels are presented separately, such as:<br/>,  
    Tags can have several properties, or without attributes. 
   
 
  
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" .../> 
   
 
  
Several very important properties:

 
  
  
    
    ID: The unique id,html that defines the label unique in the document tree 
    Class: Defines one or more classes names (classname) for HTML elements (CSS style class names) 
    Style: The inline style of the specified element (CSS style) 
   
 
  
HTML annotations<!--comment Content--
Comments are the mother of the code. --excerpt from the quotes
<! Doctype> Label
<! The doctype> declaration must be the first line in the HTML document, before the 
<! The doctype> declaration is not an HTML tag; it is a directive that instructs the Web browser to write which HTML version of the page to use.
Common tags in the head of common HTML tags
 
   
  
    
     
     label 
     meaning 
     
    
  
    
     
     <title></title> 
     Define page Titles 
     
     
     <style></style> 
     Defining an internal style sheet 
     
     
     <script></script> 
     Define JS code or introduce an external JS file 
     
     
     <link/> 
     Introducing external style sheet files 
     
     
     <meta/> 
     Define the original page information 
     
    
 
  
META tags
Meta Tag Introduction:

 
  
  
    
    The <meta> element provides the original information about the page (mata-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.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.
<!--2 seconds to jump to the corresponding URL, note the quotation marks--><meta http-equiv= "Refresh" content= "2; Url=https://www.oldboyedu.com "><!--the encoding type of the specified document--><meta http-equiv=" Content-type "Charset=utf8" >< !--tell IE to render documents in superlative mode--><meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
2.name properties: 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= "meta Summary, HTML Meta,meta properties, meta jump" ><meta name= "description" content= " Old boy Education Python Academy ">
Basic tags (block-level labels and inline tags) used in body<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
<s> Delete </s>

<p> paragraph Labels </p>


<!--line Wrap-
<br>

<!--Horizontal-->Special characters
 
    
  
     
      
      content 
      corresponding Code 
      
     
  
     
      
      Space 
      &nbsp; 
      
      
      > 
      &gt; 
      
      
      < 
      &lt; 
      
      
      & 
      &amp; 
      
      
      ￥ 
      &yen; 
      
      
      Copyright 
      &copy; 
      
      
      Registered 
      &reg; 
      
     
 
   
div tags and span tags
div tags are used to define a block-level element and have no practical meaning. It is mainly given a different performance by CSS styles.
The span tag is used to define inline (inline) elements and has no practical meaning. It is mainly given a different performance 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.
Attention:
About tag nesting: usually block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements.
P tags cannot contain block-level labels.
IMG Tags
A label
Hyperlink label
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.
URL<a href= "http://www.oldboyedu.com" target= "_blank" > Point me </a>
The href attribute specifies the destination Web 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 anchor in page (href= "#top") 
    
 
   
Target

 
   
  
     
     _blank to open the destination page in a new tab page 
     _self indicates that the destination page is open in the current tab page 
    
 
   
List
1. Unordered list
<ul type= "disc" >  <li> First </li>  <li> second </li></ul>
Type property:

 
   
  
     
     Disc (solid dot, default value) 
     Circle (Hollow Circle) 
     Square (solid block) 
     None (no style) 
    
 
   
2. Ordered list
<ol type= "1" start= "2" >  <li> First </li>  <li> second </li></ol>
Type property:

 
   
  
     
     1 List of numbers, default values 
     A Capital Letter 
     A lowercase letter 
     Ⅰ Capital Rome 
     Ⅰ Small Roman 
    
 
   
3. Title List
<dl>  <dt> title 1</dt>  <dd> content 1</dd>  <dt> title 2</dt>  <dd > Content 1</dd>  <dd> content 2</dd></dl>
Form
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>  <thead>  <tr>    <th> serial number    </th> <th> name </th>    <th> Hobbies </th>  </tr>  </thead>  <tbody>  <tr>    <td >1</td>    <td>Egon</td>    <td> bar Niang </td>  </tr>  <tr>    <td>2</td>    <td>Yuan</td>    <td> Day </td>  </tr>  </tbody></table>
Property:

 
   
  
     
     Border: Table border. 
     cellpadding: Inner margin 
     cellspacing: Margin. 
     Width: Percentage of pixels. (preferably with CSS to set the length width) 
     RowSpan: How many rows the cell spans vertically 
     colspan: How many columns the cell spans (that is, merged cells) 
    
 
   
Form
Function:
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

 
    
  
     
      
      Properties 
      value 
      meaning 
      
     
  
     
      
      Action 
      Url 
      Specifies a form that processes the destination URL, and the form data is submitted to the handler for that URL address. If the property value is empty, it is committed to the document itself. 
      
      
      Method 
      Get or Post 
      Method of submitting form data to an HTTP server, default to get 
      
      
      Enctype 
      application/x-www-form-urlencoded 
      Specifies the type of encoding for the form data, which is valid only if the method property is set to post. The default value is Application/x-www-form-urlencode to encode all characters. If the form contains a control for file uploads (input type= "file"), then this property value must be set to Multipart/form-data and the character will not be encoded. 
      
     
 
   
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
 
   
  
     
      
       Type property value  
       representation  
       corresponding code  
      
    
  
     
      
      Text 
      Single-Line Input text 
      <input Type=text "/> 
      
      
      Password 
      Password entry box 
      <input type= "Password"/> 
      
      
      CheckBox 
      check box 
      <input type= "checkbox" checked= "Checked"/> 
      
      
      Radio 
      Radio Box 
      <input type= "Radio"/> 
      
      
      Submit 
      Submit button 
      <input type= "Submit" value= "Submission"/> 
      
      
      Reset 
      Reset button 
      <input type= "reset" value= "reset"/> 
      
      
      button 
      Normal button 
      <input type= "button" value= "normal button"/> 
      
      
      Hidden 
      Hide button 
      <input type= "hidden" value= "Hide button"/> 
      
      
      File 
      Text selection box 
      <input type= "File"/> 
      
    
 
   
Type description:

 
   
  
     
     Text: Input Box 
     Password: Password entry box 
     Radio: Radio Box 
     CheckBox: Multi Marquee 
     Submit: Commit button 
     Button: Clickable buttons, no behavior, general with JS use 
     Hidden: The ID value of the record data when it is not visible to the user and is typically used to modify a piece of data 
     File: Submit document form form need to add enctype= "Multipart/form-data", method= "POST" 
    
 
   
Property Description:

 
   
  
     
     Name: the "key" when the form was submitted, the difference between the notice and the ID 
     Value: Values for the corresponding item when the form is submitted 
       
       Type= "button", "Reset", "submit" when the text is displayed on the button for the year content 
       Type= "text", "Password", "hidden" when the initial value of the input box 
       Type= "checkbox", "Radio", "File", the value associated with the input 
       
     Checked:radio and checkbox are selected by default 
     Readonly:text and password set read-only 
     Disabled: All input is available 
    
 
   
Select Label<form action= "" method= "post" >  <select name= "City" id= "City" >    <option value= "1" > Beijing </ option>    <option selected= "selected" value= "2" > Shanghai </option>    <option value= "3" > Guangzhou </ option>    <option value= "4" > Shenzhen </option>  </select></form>
Property Description:

 
   
  
     
     Multiple: Boolean property, set to multiple selection, otherwise the default radio 
     Disabled: Disable 
     Selected: This item is selected by default 
     Value: Defines the option value at commit 
    
 
   
Label label
Define the:<label> label to define the callout (tag) for the INPUT element.
Description

 
   
  
     
     The label element does not present any special effects to the user. 
     The For property value of the <label> tag should be the same as the id attribute value of the related element. 
    
 
   
<form action= "" >  <label for= "username" > user name </label>  <input type= "text" id= "username" Name= "username" ></form>
TextArea multiple lines of text<textarea name= "Memo" id= "Memo" cols= "rows=" >  default Content </textarea>
Property Description:

 
   
  
     
     Name: Names 
     Rows: Number of rows 
     COLS: Number of columns 
     Disabled: Disable 
    
 
   
HTML content of the Frontend knowledge

label	meaning
<title></title>	Define page Titles
<style></style>	Defining an internal style sheet
<script></script>	Define JS code or introduce an external JS file
<link/>	Introducing external style sheet files
<meta/>	Define the original page information

content	corresponding Code
Space
>	>
<	<
&	&
￥	¥
Copyright	©
Registered	®

Properties	value	meaning
Action	Url	Specifies a form that processes the destination URL, and the form data is submitted to the handler for that URL address. If the property value is empty, it is committed to the document itself.
Method	Get or Post	Method of submitting form data to an HTTP server, default to get
Enctype	application/x-www-form-urlencoded	Specifies the type of encoding for the form data, which is valid only if the method property is set to post. The default value is Application/x-www-form-urlencode to encode all characters. If the form contains a control for file uploads (input type= "file"), then this property value must be set to Multipart/form-data and the character will not be encoded.

Type property value	representation	corresponding code
Text	Single-Line Input text	<input Type=text "/>
Password	Password entry box	<input type= "Password"/>
CheckBox	check box	<input type= "checkbox" checked= "Checked"/>
Radio	Radio Box	<input type= "Radio"/>
Submit	Submit button	<input type= "Submit" value= "Submission"/>
Reset	Reset button	<input type= "reset" value= "reset"/>
button	Normal button	<input type= "button" value= "normal button"/>
Hidden	Hide button	<input type= "hidden" value= "Hide button"/>
File	Text selection box	<input type= "File"/>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More