First, about HTML5
HTML5 appearance intention:compatibility between Web browsers is low, the document structure is not clear, and the functionality of the Web application is limited
1, HTML5 new features
canvas label 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
the difference between HTML5 and HTML4:1. Changes in grammar:(1) DOCTYPE statement: The original version needs to be clearly declared version, now only need to<! DOCTYPE html>.
(2) character encoding: HTML4 need to declare a lot,<meta http-equiv="Content-type" Content=" text/html; Charset=utf-8 ",HTML5 is very brief ,<meta charset=" UTF-8 "> (3) elements that can be omitted from markup(4) has a Boolean worth attribute (5) omitting quotation marks2. New elements and abolished elements
3. New global Elementscontenteditable: Whether the specified elements can be edited;ContextMenu: The context menu for the specified element. The context menu appears when the user clicks on the element (only Firefox support is available);draggable: Specifies whether the element can be dragged;Dropzone: Specifies whether the element is copied, moved, or linked while it is being dragged; spellcheck: Specifies whether to check the spelling or grammar of the elements;Translate: Specifies whether the element content should be translated;
4, the new main structure elementarticle: A stand-alone, complete, externally referenced content that represents a document, page, or application
Section: chunking the content on a page in a Web site or application (do not use the section element as a set style page container, which is div work, no header content does not have a section element)
nav: Can be used as a page navigation connection group, where navigation elements are linked to other pages or other parts of the current page
aside: Represents the part of the current or article's subsidiary information that can contain references, sidebar, ads, navigation bars related to the current page or main content
5. New non-subject structure elements
header, footer, Hgroup, address
6. HTML5 Forms(1) input type:
Email: for example: <input
type="email"Name= "User_email"/> Automatically verify the value of the email domain
Url: Number:<input
type="number"Name= "Points" min= "1" max= "ten"/> Range: An input field with a range of numeric values displayed as a slider date selector:
- Date-Select day, month, year
- Month-Select months, years
- Week-Select minute
- Time-Select the Times (hours and minutes)
- DateTime-Select time, day, month, year (UTC time)
- Datetime-local-Select time, day, month, year (local time)
(2) Form elements: The datalist:datalist element specifies a list of options for the input field. The list is created by the option element within DataList. To bind DataList to an input field, use the input field's List property to refer to the ID of the DataList, such as: (3) Form properties: The new form property:
- AutoComplete
- Novalidate: The form or input field should not be validated when the form is submitted.
The new input property:
7. New additions to other tags:Audio: Define sound
canvas: Defines graphs, tables, and other images. Just the graphics container, you must use a script to draw the graphic. get the context object via GetContext ("2d") , This object provides methods and properties for drawing on the canvas.
Figure: The label specifies separate stream content (images, charts, photos, code, and so on). The content of the figure element should be related to the main content, but if deleted, it should not affect the flow of the document. Figcaption: Defines the caption of a figure elementExample:<figure><figcaption> Lupu Bridge on the Huangpu River </figcaption> </figure>Details: Tags are used to describe the detail of a document or part of a documentSummary: This tag is used with details to define a caption for details. The caption is visible and details are displayed when the user clicks on the title. Mark: Highlight part of the text. progress: Used with JS to show the progress of the task. <progress value= "max=" ></progress>max the total number of tasks required, value represents the amount of tasks now completed. meter: Defines a scalar measurement within a known range or a fractal value. Also known as scale, example: disk usage, correlation of query results. Do not apply to progressOL: Defines an ordered list. New property: Compact: The specified list renders less than normal. Reversed: (reversed) specifies that the list order is descending. Start: Specifies the starting value of the ordered list. Type: Specifies the types of tags in the listDL: Defines a list of definitions. Combine <dt> (define items in a list) and <dd> (items in a description list)cite: typically represents a reference to a reference in the text it contains. embed: Defining external interaction content or pluginsVideo: Defining videos
Seventh Week assignment _2013551605
