HTML5 authoritative guide-new tag changes, file API, drag-and-drop API (brief study note 1 ),

HTML5 authoritative guide-new tag changes, file API, drag-and-drop API (brief study note 1 ),
1. More semantic tag Elements 2.The content type is still "text/html"The extension is still html or htm.<1> DOCTYPE declaration <! DOCTYPE html>. No version declaration is required. <2> Develop the character encoding <meta charset = "UTF-8"> and do not need to use <meta http-equiv = "Content-type" content = "text/html; charset = UTF-8 ">. 3. Omit quotation marksIn HTML5, when the attribute value does not include characters such as null strings, <,>, =, single quotation marks, and double quotation marks, the quotation marks on both sides of the attribute value can be omitted. For example:

<input type=text>

  4. New Global attributes<1> ContentEditable: The main function is to allow users to edit the content in the element. This attribute is a Boolean attribute and can be specified as TRUE or FALSE. Example:

<ul contenteditable="true"><li>asdasdas</li><li>asdasdas</li><li>asdasdas</li><li>asdasdas</li></ul>

<2> DesignMode: Specifies whether the entire page can be edited. When the page can be edited, any element on the page that supports the contenteditable attribute described in the context changes to editable. This attribute has two values: on and off. This attribute can only be edited and modified in the script. For example:

document.designMode="on";

<3> Spellcheck: Performs spelling and syntax checks on text entered by the user. This attribute is a Boolean value. <4> Tabindex: When you continuously press the Tab key to focus on the window or space in the page. When all the controls on the page are convenient, the tabindex of each control indicates that the control is accessed by the first few. 4. Changed ElementsA: New Structure ElementSection, article, aside, header, hgroup, footer, nav, figureb: Other elementsVideo, audio, embed, mark, progress, time, ruby, rt, rp, wbrc. New FeaturesCanvas, command, details, datakist, datagrid, keygen, output, source, menud: Type of the newly added input elementEmail, url, number, range, Date Pickers 5. Many browsers do not fully support HTML5.

/* Append block Declaration */article, aside, dialog, figure, footer, header, legend, nav, section {display: block}

 

  6. New AttributesA: FormIn HTML5, you can write them anywhere on the page and specify an attribute for the element. The attribute value is the id of the form. For example:

<form id="do">    <input type="text"></form><textarea form="do"></textarea >

B: FormactionYou can add this attribute to all the submit buttons. You can click different buttons to submit the form to different pages. C: FormmethodYou can specify different submission methods for the form elements of the opposite brother: post, get d: PlaceholderIt refers to the input prompt e displayed when the text box is in the unentered status: AutofocusWhen the page is opened, the cursor focus is automatically obtained by adding the text box and other controls of this attribute. Only one control on a page can have this property. F: ListG: AutocompleteAuto-completion of auxiliary input 7. input types with large changesUrl, email, date, time, datetime, datetime-local, month, week, number, range, search, tel, color 8. Element Content Input Validation<1> required: if the content of the element is blank, submission is not allowed. The prompt text is displayed in the browser, prompting users that the content must be entered. <2> pattern: Set the attribute value to a regular expression in a certain format and check the format of the input content. <3> min and max: These two attributes are special attributes of the input element of the value type and date type, which limit the input value and date range in the input element. <4> step: control the stride when the value in the input element is increased or decreased. 9. Improved ol listYou have added the start and reversed attributes to customize the initial values of numbers for the star attribute. The reversed attribute sorts the list in reverse order. 10. Improved dl listFor example:

<Dl> <dt> RSS </dt> <dd> RSS is also called aggregate RSS, which is a simple way to share content online... </dd> <dt> blog </dt> <dd> the blog is also known as network log... </dd> </dl>

  11. File APIHTML5 provides a file API for file operations. <1> FileList object and file objectExample: <2> Blob ObjectBlob indicates the original binary data. The above file object also inherits this Blob Object. A Blob Object has two attributes. The size attribute indicates the length of a Blob Object in bytes. The type attribute indicates the MIME type of Blob. If it is an unknown type, an empty string is returned. For example:

function shw(){ var file; var a=document.getElementById('file').files; console.log(a[0].name);} 

<3> FileReader InterfaceThis interface is mainly used to read files into the memory and read data in files. The FileReader interface provides an asynchronous API. With this API, you can access the file system asynchronously in the main thread of the browser to read data in the file. A: The following three methods of this interface: B: The interface event: html:

<Input type = "file" id = "file"/> <input type = "button" value = "read image" onclick = "re () "/> <input type =" button "value =" Read Binary data "onclick =" er () "/> <input type =" button "value =" Read File "onclick =" dq () "/> <div name =" result "id =" result "> </div>

 

Js:

Function re () {var file = document. getElementById ("file "). files [0]; var reader = new FileReader (); // read the file into the page reader as text. readAsDataURL (file); reader. onload = function (e) {var result = document. getElementById ("result"); result. innerHTML = ''; // alert (file. name) ;}} function er () {var file = document. getElementById ("file "). files [0]; var reader = new FileReader (); // read the file into the page reader in binary format. readAsBinaryString (file); reader. onload = function (e) {var result = document. getElementById ("result"); result. innerHTML = this. result; // alert (file. name) ;}} function dq () {var file = document. getElementById ("file "). files [0]; var reader = new FileReader (); // read the file into the page reader as a Data URL. readAsText (file); reader. onload = function (e) {var result = document. getElementById ("result"); result. innerHTML = this. result; // alert (file. name );}}

  12. Drag and Drop API<1> drag and drop events, such as html:

<Div id = "dragme" draggable = "true" style = "width; 200px; border: 1px solid red "> dragged DIV </div> <div id =" text "draggable =" true "style =" width; 200px; border: 1px solid red "> placed DIV </div>

 

Js:

Function init () {var source = document. getElementById ("dragme"); var dest = document. getElementById ("text"); source. addEventListener ("dragstart", function (ev) {var dt = ev. dataTransfer; dt. export tallowed = 'all'; dt. setData ("text/plain", "hello") ;}, false); dest. addEventListener ("dragend", function (ev) {ev. preventDefault () ;}, false); dest. addEventListener ("drop", function (ev) {var dt = ev. dataTransfer; var text = dt. getData ("text/plain"); dest. textContent + = text; ev. preventDefault (); ev. stopPropagation () ;}, false) ;}document. ondragover = function (e) {e. preventDefault ();} document. ondrop = function (e) {e. preventDefault ();}

Specific analysis: <2> DataTransfer object attributes and Methods<3> Set the visual effect during drag-and-drop