HTML5 and CSS3 authoritative guide. Pdf1

The difference between HTML5 and HTML4 in the 2nd Chapter

HTML5 file extension and content type remain the same as ". html" or ". htm", and the content type (ContentType) is still "text/html"

DOCTYPE statement:

HTML4, <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

HTML5, <! DOCTYPE html> (case insensitive)

In addition, when using the tool, you can also include the system identifier in the declaration

<! DOCTYPE HTML SYSTEM "About:legacy-compat" >

Specify character encoding

Html4,<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >

Html5,<meta charset= "Utf-8" >

Element not allowed to write end tag: area base br col command embed hr img input keygen link meta param source track WBR

Elements that can omit the closing tag: Li DT dd p RT RP optgroup option Colgroup thead tbody tfoot tr TD th

You can omit all tagged elements: HTML head body colgroup tbody

Omit quotation marks

Quotation marks around attributes are omitted when the property value does not include the empty string "<" ">" = "single quote double quotation mark

<input type= "Text" >

<input type=text>

New structure elements

section element, which represents a chunk of content in a page, such as chapters, headers, footers, and so on

A article element that represents a piece of independent content in the page that is not relevant to the context

The aside element that represents the related auxiliary information outside the article element

header element, which represents the title of a content area or page

Hgroup element, which is used to group the title of a content chunk

A footer element that represents the footer of a chunk of content throughout a page or page, usually containing the author's name, date of creation, etc.

A NAV element that represents the part of a navigation link in a page

A figure element that represents a separate stream content that typically represents a separate unit in the content of the document body flow, using the figcaption element to add a caption to the figure element

Additional elements to add

Video elements, defining videos, such as movie fragments

Audio element, defining music or other audio streams

Embed element, used to insert various multimedia, format can be midi, Wav, AIFF, AU, MP3, etc.

Mark element that visually renders the text that needs highlighting

A progress element that represents a running process

The time element, which represents the date

Ruby elements, representing Ruby annotations

An RT element that represents the interpretation or pronunciation of a character.

RP element that defines what is displayed by browsers that do not support ruby elements

WBR element, soft line, and BR element difference is, BR refers to must wrap, WBR is wide enough, do not need to wrap, not enough width for line wrapping

Canvas elements

Command element, which represents a button, such as a radio button, a check box, or a button

Detail element, with summary element (click to show details) mates

DataList represents an optional list of data, mates with input, making a drop-down list of input values

A DataGrid element that represents an optional list of data that is displayed in a tree form

keygen element to generate the key

An output element that represents different types of outputs, such as the output of a script

source element, defining media resources for media elements (such as <video>)

menu element, which represents a list of menus

New type of INPUT element

Email

Url

Number

The range type indicates that a text box must be entered in a range of numeric values

Date pickers, which provides a new input text box for selecting dates and times

date-Select Day, month, year

month-Select Month, year

week-Select Week, year

time-pick time (hours and minutes)

datetime-Select time, day, month, year (UTC time)

Datetime-local Select time, day, month, year (local time)

Elements of abolition

can be replaced with CSS elements, purely for the screen display services, HTML5 have abolished the Basefont Big center font s Strike TT u

No longer use frame frame, frame framework has a negative impact on web usability, HTML5 does not support frame frame, only support iframe frame, frameset frame noframes

New properties

Form Related:

The autofocus attribute can be specified on the input (type=text) Select TextArea button element, which automatically acquires focus when the screen is opened

You can specify the placeholder property on input (Type=text) and TEXTAREA elements, which prompts the user for input

You can specify the form property on the input output Select TextArea button and fieldset, declare which form it belongs to, and then place it anywhere on the page

You can specify the required attribute on input (type=text) and textarea elements, which is checked (input) when the user commits

Several new attributes have been added to the INPUT element autocomplete min Max multiple pattern and step, and a new list element is used with the DataList element. The DataList element is used in conjunction with the AutoComplete property. The Multiple property allows multiple files to be uploaded at one time while uploading a file

Adds FormAction formenctype formmetthod formnovalidate and formtarget to the INPUT element and the button element, they can overload the action, Enctype, and method, Novalidate, and Target properties. Added the disabled attribute to the field element to set its child element to disabled (invalid) state

To add the Novalidate property to the INPUT element, button, form, you can cancel the check that was made when the commit

Link-related properties

Adds the media property to the A and area elements, which specifies that the destination URL is optimized for the vector/device of the Divine horse type, and can only be used when the href attribute exists

Add the Hreflang property and the Rel attribute to the AREA element to maintain consistency with the a element, the link element

Adds a new attribute, sizes, to the link element, which can be used in conjunction with the icon Element (via the Rel attribute), which specifies the size of the associated icon (icon element)

Adds the target property to the base element to maintain consistency with the A element

Other properties

Add attribute reversed for OL element, specify reverse list display

Add charset attribute to meta

Adds two new attributes to the menu element, type and label. The Label property defines a visible callout for the menu, and the Type property allows the menu to appear in three forms of a context menu, a toolbar, and a list menu

Adds a scoped attribute to the style element, which specifies the scope of the style

Add the Async attribute to the script element to define whether the scripts execute asynchronously

Adding attribute manifest to HTML elements, when developing an offline Web application it is used in conjunction with the API, which defines a URL that describes the cached information of a document in this URL

Added sandbox seamless srcdoc for IFRAME elements provides page security

Revoked Properties

Global Properties

Global property refers to a property that can be used on any element

Contenteditable property, the primary function of this property is to allow the user to edit the contents of the element, which must be the element that can be focusable, the value of the property is a Boolean value that has the inherit state (inherited from the parent element when no attribute value is specified), There is also a iscontenteditable property to detect whether editable

DesignMode property, which specifies whether the entire page can be edited, two property values "on", "off"

Document.designmode= "on";//ie8 not allowed; IE9 allowed; Chrome3 and safari inline frame editable; Firefox and opera allowed;

The hidden element, similar to the hidden property of the input element, is a feature that notifies the browser not to render the element, making the element invisible, with two values of true and False

The SpellCheck property, which provides a new property for input (Type=text) and textarea, to spell-check the text content entered by the user, with a true and false value of two, it is important to note that If the element's ReadOnly property or the Disabled property is set to True, the spell check is not performed

TabIndex property, set the value of the element's TabIndex property to 1 to cancel the behavior when the control in the window or page is given focus by constantly tapping the TAB key this chapter ends