HTML5 (first article)

HTML5 is the next generation of HTML. What is HTML5?

HTML5 will be the new standard for HTML, XHTML, and HTML DOM.

The last version of HTML was born in 1999. Since then, the Web world has undergone great changes.

HTML5 is still in perfect. However, most modern browsers already have some HTML5 support.

How did the HTML5 start?

HTML5 is the result of the cooperation between the WHATWG and the consortium.

Editor's note: World Wide Web Consortium, www Alliance.

Editor's note: WHATWG refers to the Web Hypertext application Technology working Group.

WHATWG is dedicated to Web forms and applications, while the website focuses on XHTML 2.0. In 2006, the two sides decided to work together to create a new version of HTML.

Some of the rules established for HTML5:

• The new features should be based on HTML, CSS, DOM, and JavaScript.
• Reduce the need for external plug-ins (such as Flash)
• Better error handling
• More tags for replacing scripts
• HTML5 should be independent of the device
• The development process should be transparent to the public

New features

Some interesting new features in HTML5:

• Canvas Elements for painting
• Video and audio elements for media playback
• Better support for local off-line storage
• New special content elements such as article, footer, header, nav, section
• New form controls, such as Calendar, date, time, email, url, search

Browser support

The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.

In this chapter, what do we say about HTML?

Htyper Text Markup Language is Hypertext Markup language

Hypertext: Refers to the page can contain pictures, links, and even music, programs and other non-text elements.

Markup Language: The language in which tags (tags) are composed.

Web page ==html document, parsed by the browser, used to show the

Static Web pages: Static resources, such as xxx.html

Dynamic Web pages: HTML code is dynamically generated by a development language based on user requests

HTML Document tree structure diagram

What is a label:

• is made up of a pair of bracketed words. For example:
• Labels are case-insensitive .
• The label is divided into two parts: start tag <a> and end tag </a>. The part between the two tags we call the label body.
• Some labeling functions are simple. Use a label. This label is called a self-closing tag. For example: <br/>
• tags can be nested. But cannot cross-nest. <a><b></a></b>

Properties of the Label:

• Usually occurs as a key-value pair. Like Name= "Alex."
• Attributes can only be present in the start tag or in the self-closing and label.
• Attribute names are all lowercase. * Attribute values must be wrapped in double or single quotes such as name= "Alex"
• If the property value is exactly the same as the property name. Write the property name directly. e.g. ReadOnly

<! DOCTYPE html> Label

Head tag:

• <meta>meta Tags: Meta tags have two properties, respectively, they are the Http-equiv property and the Name property, and different attributes have different parameter values, these different parameter values to achieve a different page function.

1 The Name property is mainly used to describe the Web page, and its corresponding property value is content,content content is mainly convenient for search engine robots to find information and classification information.

<meta name= "keywords" content= "meta Summary, HTML Meta,meta properties, meta jump" >

<meta name= "description" content= "Old boy training institution was created by an old boy" >

2 Http-equiv as the name implies, the equivalent of HTTP file header function, it can send back some useful information to the browser to help correctly and accurately display the content of the Web page, with the corresponding property values for content, contents is actually the variable value of each parameter.

<meta http-equiv= "Refresh" content= "1" >
<!--refresh once every 1 faces--
<meta http-equiv= "Refresh" content= "2; Url=https://www.baidu.com ">//(Note the following quotes, respectively, before the number of seconds and after the URL)

<title> Little Apple </title>
<link rel= "icon" href= "20.jpg" >
<!--page Display icon--

Body tag:

A basic label

<P>: paragraph label. The contents of the package are wrapped. And there is a blank line between the contents.

<b> <strong>: Bold label.

<strike>: Add a median line to the text.

<em>: Text becomes italic.

<sup> and <SUB>: Upper corner and lower corner table.

<br>: line break.

<div><span>

<body><a href= "#ooo" style= "Color:aqua" > First chapter </a><a href= "#ket" > Chapter II </a>    <H1 id= "Alex" >hello
　　
Block-level labels and inline labels
Block-level label:<p>
Inline Tags: <a><input><sub><sup><textarea><span>
(block) characteristics of block elements
① always start on a new line;
② height, row height, margin and inner margin can be controlled;
The ③ width defaults to 100% of its container unless a width is set.
④ it can accommodate inline elements and other block elements
(inline) features of inline elements
① and other elements are on one line;
The ② is high, the row height and the margin and the inner margin cannot be changed;
The width of the ③ is the width of its text or picture, and cannot be changed.
④ inline elements can only hold text or other inline elements

For inline elements, be aware of the following
Setting width is not valid.
Setting height is invalid and can be set by Line-height.
Setting margin is only valid for margin, upper and lower invalid.
Set padding only left and right padding valid, upper and lower is invalid. Note that the element range is increased, but the content around the element is not affected.
Special characters:
&lt; &gt;&quot;&copy;&reg;
Http://www.sjyhome.com/html/html-special-characters.html
Two graphic Tags: :
SRC: The path of the picture to display.
ALT: The picture does not load successfully when prompted.
Title: The message when hovering the mouse.
Width: The width of the picture
Height: The height of the picture (width height Two attributes only one will be automatically equal to zoom.)
　　
Three hyperlink tags (anchor label) <a>:
HREF: The resource path format to be connected is as follows: href= "http://www.baidu.com"
Target: _blank: Opens the hyperlink in a new window. Frame name: Opens the connected content in the specified frame.
Name: Defines a bookmark for a page.
For jumping href: #书签名称.
<p><a href= "#777" > Welcome to xxoo</a></p><!--can be more ID to skip directory-->...............p><div ID = "777" style= "color:blue" > I should let go </div></p>
　　
Jump page
<a href= "http://www.baidu.com" target= "_blank" name= "this melancholy eye" > 10,000 reluctant </a>
　　
Four List Labels:
<ul>: Unordered list
<ol>: Ordered list
<LI>: Each item in the list.
<dl> definition List
<dt> List Title
<dd> list Items
        <ol style= "Color:aqua" >            <li>python</li>            <li>java</li>            <li>php </li>        </ol>        <ul style= "Color:salmon" >            <li> College student </li>            <li> Dr. </li>            <li> Postgraduate </li>        </ul>
　　
Five table Tags: <table>:
Border: Table border.
cellpadding: Inner margin
cellspacing: Margin.
Width: Percentage of pixels. (preferably with CSS to set the length width)
There are two types of cells in an HTML table:

 
 

  
  
 
   
Header cell-Contains header information (created by th element)
 
   
Standard cell-contains data (created by TD Element)
 
  
 
 
RowSpan: How many rows the cell spans vertically
colspan: How many columns the cell spans (that is, merged cells)
<th>: Table header <tbody> (infrequently used): partitioning the table.
<table style= "Color:aqua" border= "ten" cellpadding= "cellspacing=" 1 "width=" > <thead> <tr> <th rowspan= "2" >Month</th> <th>savings</th&                    Gt <th >Chro</th> <th>Server</th> </tr> </thead                    > <tr> <td>Sum</td> <td>$180</td>                <td>Sum</td> <td>$180</td> </tr>                    <tr> <td>Sum1</td> <td>$1800</td>                <td>Sum2</td> <td rowspan= "2" >$18</td> </tr> <tr> <td colspan= "2" >Sun</td> <!--<td>$11</td& GT;--> <td>Sk</td> <!--<td>$177</td>--> </tr>
　　
Six-form label (Django) <form>:
Forms are used to transfer data to the server.
A form can contain input elements such as text fields, checkboxes, radio boxes, submit buttons, and so on.
Forms can also contain textarea, select, FieldSet, and label elements.
1. Form Properties
HTML forms are used to receive different types of user input, which transmits data to the server when the user submits the form, thus enabling the user to interact with the Web server. Form label, all content to be submitted should be in that tag.
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 (envelope)
Get:1. Committed key-value pairs. Put it in the address bar after the URL. 2. The security is relatively poor. 3. There is a limit to the length of submissions.
Post:1. Committed key-value pairs are not in the address bar. 2. Security is relatively high. 3. The length of the submission is theoretically unlimited.
Get/post is a common two-way request.
2. Form elements
<input> type:text text Input box
Password Password entry box
Radio Radio Box
CheckBox multiple Marquee
Submit button
button (need to use with JS.) What is the difference between button and submit?
File submission: Form form needs to add attribute enctype= "Multipart/form-data"
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 intended for client programming and is used in CSS and JavaScript.
Value: The values of the form submission item.
The use of the Value property differs 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 password
Disabled: It works for the input you use.
<select> drop-down tab properties:
Name: The key of the form submission item.
Size: Number of options
Multiple:multiple
<option> drop-down check each of the properties: value: The values of the form submission item. Selected:selected drop-Down is selected by default
<optgroup> for each item plus grouping
   
 
<! DOCTYPE html>
　　
HTML5 (first article)