Nezha’s life creed: If you like what you learn, there will be strong motivation to support it.

Take your front end hold to death, every day to learn cool cool, wechat search [programmer Doraemon] pay attention to this different programmer, if you learn things in love will have A strong power support.

Thank you for every programmer who loves the front end, no matter how strange the front end skills are, welcome to pay attention to add me to the group

preface

I hope I can get help for you through this article. (Thanks for one button three times)

1.HTML5The input type added to the form

  1. urlType: for inputurlAddress definition text library that validates the format of input text if the content in the text box does not matchurlAddress format, prompting a validation error.
  2. emailType: Specifically for inputemailAddress definition text box, when verifying the format of the input text, if the content in the text box does not conformemailAddress format, prompting a validation error. inemailThe type ofinputThere’s one more elementmultipleProperty that indicates that multiple mail addresses separated by commas can be entered in the text box.
  3. rangeType: Used to display the input field as a slider that can be used as a value selector within a specific range.minandmaxProperties, representing the minimum value of the range, default is 0, and the maximum value of the range, default is 100.rangeThere’s one typestepProperty that represents the drag step size, which defaults to 1.
  4. numberType: a text box defined specifically for entering a particular number, withmin,max,stepFeatures.
  5. telType: A text box defined specifically for entering a phone number, with no special validation rules.
  6. searchType: A text box specifically defined for entering search engine keywords with no special validation rules.
  7. colorType:colorThe type ofinputThe element provides a color picker by default.
  8. dateType: Text box specifically for entering dates, default input box with date picker.
  9. Month, week, time, datetime, datetime-localThe type ofinputElements anddateThe type ofinputElement, providing a corresponding selector.

2.HTML5Add features and elements to the form

In HTML5, you can place a subordinate form element anywhere, and then specify the form property value of that element as the form ID, and that element is subordinate to the form.

<form name="da" type="text" form="form1" Required /> <form id="form1"> <form type="submit" value=" submit" /> </form>Copy the code
  1. formactionFeature: Every form passesactionFeature to submit form content to another page, while inhtml5For the different “Submit” buttonsformactionFeature, which overrides the formactionFeature to submit a form to a different page.
<form id="form1" method="post"> <form name="name" type="text" form="form1"/> <form type="submit" value=" page1" formaction="? page=1"/> </form>Copy the code

  1. Formmethod, formenctype, formnovalidate, formtarget: formmethod will cover form the method of characteristics; The formencType feature overrides the form’s encType; The formNovalidate feature overrides the novalidate feature, and the formTarget feature overrides the target feature of the form.

  2. Placeholder features, giving users descriptive information.

  3. The autofocus feature is used for all types of input elements. When the page is loaded, the focus is automatically obtained. Only one input element with the Autofocus feature is allowed on each page.

  4. Autocomplete feature: Applies to form elements and input elements for auto-complete of forms. You can autocomplete=”on”, which can specify “on”,”off”, and “none”.

  5. The list feature and datalist element, which can define alist of options for an inputable input element.

<input name="email" type="email" list="emaillist"/>

<datalist id="emaillist">
 <option value="[email protected]"> dada </option>
 <option value="[email protected]"> dada2 </option>
</datalist>
Copy the code
  1. keygenElement: provides a secure way to authenticate the user. This element has key generation capabilities. When submitting a form, a private key is generated and a public key is generated.
<form action="">
 <input type="text" name="name"/> <br>
 <keygen name="security"/>
 <br><input type="submit"/>
</form>
Copy the code
  1. outputThe element is used for different types of output and must be subordinate to a form, that is, written inside the form.
<form oninput="x.value=da.value">
 <input type="range" name="da" value="20"/>
 <output name="x"></output>
</form>
Copy the code

3.HTML5How is cross-domain implemented

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST");
response.setHeader("Access-Control-Allow-Headers", "x-requested-width,content-type");
Copy the code

4. What isWebSql

WebSql is a structural relational database in the browser client, is a local RDBMS relational database management system in the browser, can use SQL query.

WebSql is based on SQLite.

5. What are the functions of network commands in the application cache

NETWORK: login.php should never be cached or accessed offline in code login.phpCopy the code

Network commands describe files that do not need to be cached.

6.CanvasandSVGWhat is the difference between

SVG is scalable vector graphics. It is a text-based graphics language that uses text, lines, points, and so on to draw images.

A. Once the Canvas is drawn, it cannot access pixels or manipulate them. Any shape drawn using SVG can be remembered and manipulated, and can be displayed again by the browser.

B. Canvas is good for drawing animations and games, SVG is good for creating images.

C. Canvas runs fast because there is no need to remember the future, while SVG needs to record coordinates, so it runs slowly.

D. Cannot bind events to draw objects in Canvas; You can bind events to draw objects in SVG.

E. Canvas draws a bitmap, so there is a resolution. SVG is a vector map, and resolution is irrelevant.

Draw in SVG:

< SVG XMLNS ="http://ww.xx.xx/pic/svg" version="1.1"> <rect stype="fill: RGB (255,100,0);" height="200" width="400"></rect> </svg>Copy the code

Drawing with Canvas:

<canvas id="myCanvas" width="500" height="500"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); CTX. The rect (100100300200); ctx.fillStyle="red" ctx.fill()Copy the code

7. Does data stored locally have a life cycle

Locally stored data has no life cycle, and it will store data until the user cleans it from the browser or removes it with javascript code.

8. Form-validatedAPI

  1. requiredFeature: Indicates that the value of this item cannot be empty, otherwise the form cannot be submitted.
  2. patternFeature used ininputThe element defines a validation schema.
<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="6 "/>Copy the code
  1. min,max,stepfeatures
  2. novalidateUsed to specify that forms or elements within forms are not validated when submitted,formElements of the applicationnovalidateProperty that indicates that all elements in the form are no longer validated when submitted.
  3. validatyProperty used to get form elementsValidityStateObject that contains validation results for eight aspects.ValidityStateObjects persist every time they are fetchedvalidityProperty, returns the sameValidityStateObject.
var validityState=document.getElementById("username").validity;
Copy the code
  1. willValidateProperty to get a Boolean value indicating whether the form element requires validation, if it is setrequiredFeatures orpatternFeatures,willValidateProperties fortrueThat is, the form’s validation will be performed.
var willValidate=document.getElementById("username").willValidate;
Copy the code
  1. validationMessageProperty to get error messages for form elements
var validationMessage = document.getElementById("username").validationMessage;
Copy the code

The ValidityState object, obtained through the validity property, has eight properties.

A. ValueMissing property: The value of the mandatory form element is empty. If the required field is set, it is required. If the required field is empty, it will not pass the form’s validation. The valueMissing property returns true, otherwise it will return true.

B. TypeMismatch: The input value does not match the type of type. Html5 adds form types such as email to include a raw type validation. The typeMismatch attribute returns true if the user enters something that does not match the form type, and vice versa.

C. PatternMismatch property: The input value does not match the regular of the Pattern feature. Form elements can be validated by the pattern feature array regular expression, and if the input does not match, the patternMismatch will return true, or vice versa.

D. TooLong: The size of the input content exceeds the character length specified by the maxLength feature of the form element. Returns true if the tooLong attribute is exceeded, or vice versa.

E. RangeOverflow property: the value entered is greater than the value of the Max property. Form elements that are normally used to fill in values may also use the Max property to set the maximum value range. If the value entered is greater than the maximum value, rangeOverflow returns true, otherwise it is vice versa.

F. RangeUnderflow property, the input value is less than the min property value, same as above.

G. stepMismatch. The value entered does not match the rule predicted by the STEP feature. Inconsistency is true, otherwise vice versa.

H. CustomError: Displays a customized error message. In some cases, you cannot use the built-in error message provided by the browser. You need to customize the error message.

Methods of form validation

  1. checkValidity()Method, an explicit validation method, can be called by each form elementcheckValidity()Method, which returns a Boolean value indicating whether validation has passed. By default, form validation occurs when the form is submitted, if usedcheckValidity()Method to validate the form wherever needed.
  2. setCustomValidity()Method, a way to customize error messages. If the default error message cannot meet the requirements, you can use this method to customize the error message. Element when customizing error messages using this methodvalidationMessageProperty value changes to the defined error message, andValidityStateThe object’scustomErrorProperty value becomestrue.

9.cookie.sessionStorage.localStorage

  • cookieThe data is stored on the client’s browser,sessionThe data is stored on the server.
  • cookieIt’s not very secure. Someone can analyze it and store it locallycookieAnd carry oncookieDeception.
  • sessionIt is stored on the server for a certain period of time, and occupies a large number of server resources when the access is increased. Should be used to reduce the load on the servercookieIn the right circumstances.
  • A singlecookieYou can’t save more than 4KB of data, and many browsers limit you to 20 per sitecookie
  • It is recommended to store important contents such as login informationsession, others can be storedcookieIn the.
  • cookieThere are limits to the number and length of eachdomainThere can be no more than 20cookie, eachcookieThe length cannot exceed 4KB, otherwise it will be cut.
  • Security issues, ifcookieIf someone intercepts you, you get all of themsessionInformation, even encrypted, is useless. Interceptors don’t need to knowcookieThe meaning of as long as the original forwardcookieThat will get you there.
  • Some states cannot be saved on the client side.
  • Through good programming, control is saved incookieIn thesessionSize of the object.
  • Through encryption and secure transmission technologysslAnd reduce thecookieThe possibility of being cracked.
  • Only in thecookieStorage of insensitive data, even if stolen will not have a significant loss.
  • controlcookieLife cycle, so that it will not be valid forever, data thieves are likely to get an expiredcookie.
  • cookieThe maximum value is 4096 bytes. Generally, the maximum value is 4095 bytes for compatibility.
  • A maximum of 20 domain names can be generated for each specific domain namecookie
  • ie6Up to 20 versions or lowercookie
  • ie7And later versions can have up to 50cookie
  • firefoxYou can have up to 50cookie
  • ChromeandSafariThere is no hard limit
  • sessionStorageIt is used to store data in a session locally, which can only be accessed by pages in the same session. When the session ends, the data is also destroyedsessionStorageNot persistent local storage, just session-level storage.
  • localStorageUsed for persistent local storage, data is generally never out of date unless actively deleted.
  • localStorageIt’s designed for more storage,cookieIs limited in size, and each time a new page is requested,cookieIt’s going to be sent, it’s going to waste bandwidth,cookieNeed to specify scope, can not be called across domains.

10.HTML5Data storage solutions provided for browsers

In older browsers, sessionStorage and globalStorage are provided, and localStorage replaces globalStorage in the HTML5 specification.

Application caching:

  • Offline browsing allows users to use applications when they are offline.
  • Speed, so that cached resources load faster.
  • Reduce server load so that the browser will download updated resources from the server.

The goal of HTML5 application caching is to help users browse pages offline. If the Internet connection is not available, the opened pages will come from the browser cache. Offline application caching can help users achieve this goal.

Local storage data lasts forever, but session storage is valid when the browser is open and session resets the stored data when the browser is closed.

Improve site performance:

<! doctype html> <html manifest="dadda.appcache"> </html>Copy the code

11. How to implement communication between multiple tabs in the browser

Between the tabs, call localstorage,cookies and other data stores, can realize the communication between the tabs.

12.Web WorkerandwebSocketThe role of

WebSocket: It is a web application transport protocol, provides a two-way, arrived in the flow of data in order, it is HTML 5 additional agreements, WebSocket connection is lasting, it duplex connections between the client and the server, the server update can timely delivery to the client, without the need for a client to polling at a certain time interval.

Web Worker: load a javascript file through Worker =new Worker(URL), create a Worker, and return an instance of Worker; Send data to worker with worker.postmessage (data); Bind worker. onMessage to receive the data sent by the worker; You can terminate the execution of a worker using worker.terminate().

13. HTML5New features

Drag-and-drop API, better semantically labeled content, audio, video, canvas, geographic API, etc., local offline storage, session storage, form controls.

Embedded audio:

<audio controls>
 <source src="dada.mp3" type="audio/mpeg">
 dadaqianduan.cn
</audio>
Copy the code

Embedded video:

<video width="450" height="100" controls>
 <source src="dada.mp4" type="video/mp4">
 dadaqianduan.cn
</video>
Copy the code

New form properties include: datalist, datetime, the output, the keygen, date, month, week, time, number, range, emailurl

There are a lot of new apis, Including Media API, Text Track API, Application Cache API, User Interaction API, Data Transfer API, Command API, Constraint Validation API, History API

14. How is the differencehtmlandhtml5

Use a DOCTYPE declaration to distinguish between new structural and functional elements.

15.HTML5 CanvasWhat’s the use of elements

The Canvas element is used to draw graphics on web pages. The power of the tag of this element lies in that graphic operations can be carried out directly on HTML.

Likes, favorites and comments

I’m Jeskson, thanks for your talent: likes, favorites and comments, and we’ll see you next time! ☞ Thank you for learning with me.

See you next time!

This article is constantly updated. You can search “Programmer Doraemon” on wechat to read it for the first time, and reply [information] there are materials of first-line big factories prepared by me, which have been included in this article www.dadaqianduan.cn/#/

Star: github.com/webVueBlog/…