“This is the 11th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.”

Today’s main character is HTML, come to kangkang today what knowledge point!

♥ Explains the basic composition of a page

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <title>Document</title> </head> <body> </body> </body> </ HTML >Copy the code

(1),
: a document type declaration tag that tells the browser what HTML version to use to display the page. HTML is the HTML5 version.

② lang=”en” : used to define the current document display language, zh-cn definition language is Chinese.


♥HTML5 new features

  • Semantic features such as

    ,

    ,

    ,

  • Add the type attribute value to the form, email, TE, number, search, range, time, date

  • New form attributes: placeholder(hint text), Autofocus (automatic focus), Pattern (regular expression)

    There are two premises: 1, the submission must be successful, submission will only be recorded; 2. The current tag must have a name attribute

  • A new element is added to the form, which has the same effect as select, but can be typed and bound to an input whose list value is equal to the dataList id value.

  • New event in form: onInput (): emitted when the content of the bound element changes; Onkeyup (): triggered when each key is pressed

  • Main methods and features of full-screen operation

    • RequestFullScreen () :Before open full-screen, different browsers and different prefix, chorme: its, firefox: moz, ie: ms, opera: o
    • CancelFullScreen () :Exit the full screen display
    • FullScreenElement:Whether it is in full screen mode

  • FileReader

  • Drag interface, if you want to drag elements, you must add a draggable=”true” to the element, images and hyperlinks can be dragged by default, learn drag, mainly learn drag events

    Applied to the element being dragged

    • Ondrug: The entire drag process is called
    • Ondrugstart: called when the drag starts
    • Ondrugleave: The drag element is called when the mouse leaves
    • Ondrugend: called when the drag ends

    Events applied to the target element

    • Ondrugenter: called when the drag element comes in
    • Ondrugover: Called when hovering over a target element
    • Ondrop: called when the mouse is released over the target element
    • Ondrugleave: called when the mouse is off the target element

  • LocalStorage features, such as sessionStorage and localStorage

  • Web Multimedia,

  • Two dimensions, three dimensions

  • Special effects (transitions, animation)

Has sessionStorage and localStorage

SessionStorage As long as the browser is not closed, the data always exists, in the same window (page) data can be shared, stored in the form of key-value pairs.

  • sessionStorage.setItem(key, value): Stores data
  • SessionStorage. The getItem (key) :To get the data
  • SessionStorage. RemoveItem (key) :Delete the data
  • sessionStorage.clear():Delete all data

LocalStorage permanently valid, closed browser data still exists, unless manually deleted, can be multi-window (page) sharing, in the form of key-value pair storage use

  • LocalStorage. SetItem (key, value) :Store the data
  • LocalStorage. The getItem (key) :To get the data
  • LocalStorage. RemoveItem (key) :Delete the data
  • localStorage.clear(): Delete all data

Reviewed H5, recorded a few knowledge points, not comprehensive also please forgive ~

Stop curling up and go to bed