HTML5

HTML5 and HTML events

Note: inline code for H5 new events

Window event attributes:

Events fired against the Window object (applied to the tag)

onafterprint The script to run after the document is printed
onbeforeprint The script that runs before the document is printed
onbeforeunload The document unloads the script that was previously run
onerror Scripts that are executed when an error occurs
onhaschange The script that runs when the document changes
onload Triggered after the page has finished loading
onmessgae A script that runs when a message is triggered
onoffline A script that runs when the document is offline
ononline The script that runs when the document comes online
onpagehide A script that runs when the window is hidden
onpageshow The script that runs when the window becomes visible
onpagestate Script to run when window history changes
onredo A script is run when a document executes redo
onresize Triggered when the browser window is resized
onstorage A script that runs after an update in the Web Storage area
onundo A script that runs when the document executes undo
onunload Triggered once the page has been downloaded (or the browser window has been closed).

Form the event

The time triggered by an animation in an HTML form applies to almost all HTML elements, but is most commonly used in form elements

onblur Element runs when it loses focus
onchange Runs when the value of the element is changed
oncontextmenu Run when the context menu is triggered
onfocus Runs when the element is in active focus
onformchange Runs when the form changes
onforminput Run when the form gets user input
oninput Run when the element gets user input
oninvalid Run when an element is invalid
onreset Run when the reset button in the form is clicked
onselect Triggered when the element text is selected
onsubmit Triggered when the form is submitted

The rid_device_info_keyboard event

onkeydown Triggered when a key is pressed
onkeypress The user clicks the button to trigger it
onkeyup Triggered when release key

The Mouse events

Triggered by mouse or similar user action

onclick Triggered when a mouse click occurs on the element
ondblclick Triggered when a double mouse click occurs on the element
ondrag The script to run when the element is dragged
ondragend A script that runs at the end of a drag operation
ondragenter Script to run when an element has been dragged into a valid drag-and-drop area
ondragleave Runs when an element leaves a valid drag-and-drop area
ondragover Runs when an element is being dragged on a drag target
ondragstart Run when the drag operation starts
ondrop Run while dragged element is being dragged (release mouse)
onmousedown Triggered when the mouse button is pressed on the element
onmousemove Fires when the mouse pointer moves over an element
onmouseout Triggered when the mouse pointer moves out of the element
onmouseover Triggered when the mouse pointer moves over an element, or when it is first entered
onmouseup Triggered when the mouse button is released on the element
onmousewheel When the mouse wheel is being rolled
onscroll The script that runs when the element scrollbar is scrolled

Media event

Media-penalized events, such as video images and audio, apply to all HTML elements, but are common in media elements

onabort Scripts that run on exit
oncanplay When the file is ready to start playing is triggered
oncanplaythrough Run when the medium can play to the end without stopping for buffering
ondurationchange Run when the medium length changes
onemptied Triggered when a failure occurs and the file is suddenly unavailable
onended A script to run when the medium has reached the end
onerror A script that is run when an error occurs during file loading
onloadeddate A script that runs when media data has been loaded
onloadedmetadata Run when metadata is loaded, such as resolution and duration
onloadstart Run before the file starts loading without actually loading any data
onpause Run when the media is suspended by the user or the program
onplaying Run when the media is ready to start playing
onprogress Run while the browser is fetching media data
onratechange A script that runs whenever the playback rate changes
onreadystatechange A script that runs whenever the ready state changes
onseeked When seeking is set to false, the runtime indicates that the location has ended
onseeking When seeking is set to true, the runtime indicates that the location is active
onstalled Run when the browser fails to retrieve media data for no reason
onsuspend Run when the media data is fully connected to the previous aborted media data retrieval for whatever reason
ontimeupdate A script that runs when the playback position changes, including setting the volume to mute
onvolumechange Run when the volume changes
onwaiting When the medium has stopped playing but intends to continue

Input type attribute value

HTML

button button
checkout Check box
file File upload
hidden Define hidden input fields
image Define submit buttons in the form of images
password Define a password field
radio The radio button
reset The reset button
submit The submit button
text The input field

HTML5

color Pick color
data Date fields
datatime Date fields
datatime-local Date fields
month The month of the date field
week Date field week
time Date field hour minute second
email Defines a text field for an E-mail address
number Defines a number field with a spinner control
range Number field with slider control, value range
search Text field for search
tel Defines a text field for a phone number
url Defines a text field for the URL

HTML5 offline storage

www.cnblogs.com/jing-tian/p…

Drag and drop the release

Drag and drop is a very common feature in the H5. Note: Links and images are dragable by default and do not require additional draggable properties

  • Trigger event on drag target (source element) :
    • ondragstart: Triggered when you start dragging elements
    • ondragEmitted while the: element is being dragged
    • ondragend: Triggered when the user finishes dragging elements
  • The event that fires when the target is released (target element) :
    • ondragenter: Triggered when a mouse-dragged object enters its container scope
    • ondragover: Triggered when a dragged object is dragged within the scope of another object container
      • Note: this fires every 350 milliseconds as you drag an elementondragover Events.
    • ondragleave: Triggered when an object dragged by the mouse leaves its container scope
    • ondrop: Triggered when the mouse is released during a drag

User-defined attribute data-id

Easy to save and apply data

  • Set custom attributes: element.setAttribute(name, value);

  • Get custom attributes: element.getAttribute(name, value);

  • Removes an attribute from the specified element: removeAttribute()

H5 Added the obtaining method: dataset

<div id="one" data-wenbo="yiran"></div>;

var one = document.getElementById("one");
console.log(one.dataset.wenbo); //yiran
one.dataset.wenbo = "wenbo";
console.log(one.dataset.wenbo); //wenbo
Copy the code

Semantic tag

  • header: Section or page header
  • nav: Navigation connection
  • footer: section or page Footer
  • aside: Content outside the page content
  • article: the article
  • sectionSection B

Audio video

audioandvideo

  • Autoplay: Add autoplay to the label properties
  • Audio and video related methods, properties, and events

The Canvas Canvas

Canvas tag defines the picture canvas itself has no drawing ability, all drawing work must be completed inside JavaScript

Image describes pictures in the form of objects, while Canvas draws pictures on the canvas through special API.

<canvas id="canvas"></canvas>
<script>
  var c = document.getElementById("canvas");
  // Draw a rectangle
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#ccc";
  ctx.fillRect(0.0.100.150);
  // Draw a line
  ctx.moveTo(0.0);
  ctx.lineTo(200.200);
  ctx.stroke();
</script>
Copy the code

Canvas related methods, properties

Geolocation API

The navigator. Geolocation. GetCurrentPosition () : get the user current location, the arguments are two callback function, a success, a failure

  • Other methods of Geolocation objects:
    • watchPosition(): returns the current location of the user and continues to return the updated location when the user moved.
    • clearWatch()Stop:watchPosition()methods
navigator.geolocation.getCurrentPosition(
  (res) = > {
    console.log("User location obtained successfully:", res);
  },
  (err) = > {
    console.log("Fetch failed, error message:", err); });Copy the code

LocalStorage and sessionStorage

  • localStorage: the storage capacity is about 5M. Data can be stored locally for a long time. Shared data in the Same-origin domain name window.
  • sessionStorage: storage size about 5M, andlocalStorageSimilar, but save data only the current window, close the window automatically delete.

H5 browser storage

  • cookie
  • localStorage
  • sessionStorage
  • indexedDB
  • WebSQL
  • The window variable

The form controls

  • email: the email address
  • url: connection
  • number: digital
  • range: Range selection
  • Date pickers: Select the date and time
    • data month week time datetime datetime-local
  • searchSearch:
  • color: Color selection

New technologies Web worker and Web Socket

Web Worker Web Worker application tutorial

Create a multithreaded environment for JavaScript that allows you to thread the worker thread on the main thread and assign some tasks to the worker thread. While the main thread is running, the Worker thread is running in the background without interfering with each other. When the Worker thread completes the calculation, it returns the result to the main thread. Note: Once a Worker thread is created, it will always run and will not be interrupted by activity on the main thread. After use, need to close in time.

Web Socket

HTML5 provides a protocol for full duplex communication over a single TCP connection.

The Web Socket makes the data exchange between the client and the server easier, allowing the server to actively push data to the client. In the WebSocket API, the browser and server only need to complete a handshake to create a persistent connection and two-way data transfer. 支那

CSS3

Color: added RGBA, HSLA modes

  • RGBA:Background-color: rgba(179, 133, 133, 0.5);
  • HSLA:Background-color: HSLA (120, 60%, 70%, 0.3)
    • hsla(hue, saturation, lightness, alpha):
    • hueHue, the basic property of color, commonly known as color.
    • saturation: saturation, color purity, the higher the color is, the purer, the lower the color gradually gray, 0-100%
    • lightness: brightness, increase brightness, color will change to white, decrease will change to black. The value 0-100%,
    • alpha: transparency. The value ranges from 0 to 1, indicating transparency.

Text shadow

  • text-shadow: h-shadow v-shadow blur color;
    • h-shadow: required. The position of the horizontal shadow, allowing negative values
    • v-shadow: required. The position of the vertical shadow, allowing negative values
    • blur: Optional, fuzzy distance
    • color: Optional, shadow color

Border shadow

box-shadow: h-shadow v-shadow blur color;

Rounded corners

Border-radius: left upper right upper right lower left lower;

The box model

Box models include: outer border Margin, border border, inner border padding, and content

Related background

  • background-size: Specifies the size of the background image
  • Grammar:background-size: length|percentage|cover|contain;
    • length: Sets the width and height of the picture. The first value is width and the first value is height. If there is only one value, set the second value to auto
    • percentage: Percentage Width and height.
    • cover: Maintain the aspect ratio of the image scale the image to a minimum size that completely covers the background location area
    • contain: Maintain the aspect ratio of the image scale the image to the maximum size that completely covers the background location area
  • background-origin: Specify the position of the picture relative to what position
  • Grammar:background-origin: padding-box|border-box|content-box;
    • padding-box: The background is positioned relative to the inner border (default)
    • boder-box: The background is positioned relative to the border box
    • content-box: The background is positioned relative to the content box
  • background-clip: Specifies the drawing area of the background
  • Grammar:background-clip: border-box|padding-box|content-box;
    • padding-boxThe background is clipped to the border box
    • boder-boxThe: background is clipped to the inner border box
    • content-boxThe background is clipped to the content box

The gradient

Linear gradient

  • Grammar:background-image: linear-gradient(direction, color-stop1, color-stop2, ...) ;
    • direction: Unit of direction Angle DEg
    • color-stop1,color-stop2,...: Gradient color, can have multiple color nodes

Repeat linear gradient:

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
Copy the code

Radial gradient

  • Grammar:background-image: radial-gradient(shape size at position, start-color, ... , last-color);
    • shape: shape, can becircle orellipse
    • size: Gradient size: The parameter is availableclosest-side.farthest-side.closest-corner.farthset-corner

Such as:

background-image: radial-gradient(circle, red, yellow, green);
background-image: radial-gradient(circle at 100% 100%, red, yellow, green);
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
Copy the code

Repeated radial gradient

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
Copy the code

excessive

  • transitionTransitions allow smooth changes in property values over a specified period of time
    • Transitions can be serialized, onetransitionWrite multiple transitions.
    • transition: Short for transition, set four transition properties in a property
    • transition-property: Specifies the name of the CSS property that applies the transition
    • transition-duration: Define the time spent on transition effects,
    • transition-timing-function: Specifies the time curve of the transition effect.
      • linear ，ease .ease-in .ease-out .ease-in-out ，cubic-bezoer(n,n,n,n)
    • transition-delay: Specifies when the transition effect starts, in seconds or milliseconds

Custom animation

  • animation:
  • Grammar:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
    • animation-name: Specifies the name of the keyframe to bind to the selector
    • animation-duration: The animation specifies how many seconds or milliseconds it takes to complete
    • animation-timing-functionHow does the animation complete a cycle
    • animation-delay: Sets the delay interval before animation starts
    • animation-iteration-count: Defines the morphemes for animation playback
    • animation-direction: Whether the animation should take turns playing backwards
    • animation-fill-mode: Style to apply to an element when the animation is not playing
    • animation-play-state: Specifies whether the animation is running again or has been paused
    • @keyframes: Create an animation, specify a CSS style and the animation will gradually change from the current style to the new style
@keyframes myfirst {
  from {
    background: red;
  }
  to {
    background: yellow; }}@-webkit-keyframesMyfirst /* Safari with Chrome */ {from {
    background: red;
  }
  to {
    background: yellow; }}Copy the code

Use:

animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari with Chrome */
Copy the code

Media queries

  • Define different styles for different media types (depending on screen size).
  • Grammar:
  • @media mediatype and|not|only (media feature) {
  • CSS-Code;
  • }
  • mediatype: Media type
    • print: Printer and print preview
    • screen: For computer screens, tablets, smartphones
    • speech: Used in screen readers and other voice devices
// If the document width is smaller than300Pixels change the background color (background-color):
@media screen and (max-width: 300px) { body { background-color: lightblue; }}Copy the code

Border images

Grammar: border – image: the source slice width outset repeat | initial | inherit;

transform

Transform: 2D transform:

  • translate(X,Y): Moves elements from the current position to the specified position
  • rotate(deg): Rotates elements according to the given Angle
  • scale(X,Y): Increases or decreases the element default value of 1
  • scaleX(X): Increases or decreases the element width
  • scaleY(Y): Increases or decreases the element height
  • skewX(X): tilts the element at a given Angle along the X-axis
  • skewY(Y): tilts the element at a given Angle along the Y-axis
  • skew(X,Y): inclines an element at a given Angle along the X and Y axes
  • matrix(): Combines all 2D transformations into one
    • matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

3 d conversion:

  • rotate3d(x,y,z,angle)
  • rotateX(deg): rotates the element about its X-axis
  • rotateY(deg): rotates the element about its Y-axis
  • rotateZ(deg): rotates an element about its z-axis
  • translate3d(x,y,z)
  • translateX(x): move for the X axis
  • translateY(y): move for the Y-axis
  • translateZ(z): move for Z axis
  • scale3d(x,y,z)Zoom: 3 d
  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)

Transform Other related styles

  • transform-style: Specifies how nested elements are rendered in three dimensions.
    • Flat: All child elements are rendered in 2D
    • Preserve-3d: indicates that all child elements are rendered in 3d space
  • transform-origin: Sets the element transformation center point
    • The X axis
    • Y
    • The Z axis

The fonts icon

A special font, through this font display to the user like a picture of the same advantages: no deformation, fast loading. You can use CSS to control its size and color. Take iconfont as an example:

Unicode reference

Unicode is the original use of fonts on the web

  • Advantages:
    • Compatible line is best, supports IE6 +, and all modern browsers
    • Supports dynamic adjustment of font size and color
  • Disadvantages:
    • Multicolor icon is not supported. Multicolor icon automatically selects color
  • Use steps:
    • Step 1: Copy what is generated under the projectfont-face
@font-face {
  font-family: "iconfont";
  src: url("iconfont.eot");
  src: url("iconfont.eot? #iefix") format("embedded-opentype"), url("iconfont.woff")
      format("woff"), url("iconfont.ttf") format("truetype"), url("iconfont.svg#iconfont")
      format("svg"); } // Support network addresses@font-face {
  font-family: "iconfont";
  src: url("//at.alicdn.com/t/font.eot");
  src: url("//at.alicdn.com/t/font.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font.woff2")
      format("woff2"), url("//at.alicdn.com/t/font.woff") format("woff"), url("//at.alicdn.com/t/font.ttf")
      format("truetype"),
    url("//at.alicdn.com/t/font.svg#iconfont") format("svg");
}
Copy the code
  • Step 2: Define styles that use iconFONT
.iconfont {
  font-family: "iconfont" ! important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2 px.;
  -moz-osx-font-smoothing: grayscale;
}
Copy the code
  • Step 3: Pick the appropriate icon and get the font code to apply to the page
<i class="iconfont">&#x33; </i>
Copy the code

The font – class reference

Font -class is a variant of Unicode, mainly to solve the problem of unicode writing is not intuitive, ambiguous semantics.

  • Advantages over Unicode:
    • Good compatibility, support ie8+, and all modern browsers.
    • It is more intuitive to write than Unicode. It’s easy to tell what the icon is.
    • Because you use class to define ICONS, you only need to change the Unicode reference in the class to replace the icon.
  • Disadvantages:
    • The font is still in use, so multicolor ICONS are still not supported.
  • Use steps:
    • Step 1: Copy the FontClass code generated under the project
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
Copy the code
  • Step 2: Pick the appropriate icon and get the class name to apply to the page
<i class="iconfont icon-xxx"></i>
Copy the code

The symbol referenced

A new way of using it, it should be said that this is the mainstream of the future, and is currently recommended by the platform.

  • This usage actually makes a collection of SVG, which has the following characteristics compared to the above two:
    • Support for multi-color ICONS, no longer limited by monochrome.
    • With a few tricks, it is possible to adjust styles like fonts by font size and color.
  • Disadvantages:
    • Poor compatibility, support for IE9 +, and modern browsers.
    • Browsers render SVG with mediocre performance, not as good as PNG.
  • Use steps:
    • Step 1: Copy the symbol code generated under the project:
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
Copy the code
  • Step 2: Add generic CSS code (just once) :
<style type="text/css">
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15 em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
Copy the code
  • Step 3: Select the corresponding icon and get the class name, apply to the page:
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>
Copy the code

Elastic layout

Flex: A new layout for CSS3

Provides a more efficient way to arrange and allocate empty space among the children of a container

  • flex-direction: Specifies the position of the child in the parent container (used to adjust the spindle orientation)
    • row: Horizontal left-to-right arrangement (default)
    • row-reverse: Flip horizontally, from back to front
    • column: Vertical arrangement
    • column-reverse: Reverse longitudinal alignment, from back to front
  • justif-content: Contents to it, the way elements are to it on an elastic container (main axis)
    • flex-start: The default, all elements are filled next to each other at the beginning
    • flex-end: All elements are padded next to each other at the end
    • center: The elements in the container are centered next to each other
    • space-between: Evenly distributed on the row, next to the container on both sides
    • space-around: Evenly distributed on the change of line, with half of the space left on both sides
  • align-items: Sets the way elements are aligned in the side axis
    • flex-start: Default value, starting position of the side axis
    • flex-end: End position of the side axis to it
    • center: Middle position against it
    • baseline: Baseline against it, will not stretch height
    • stretch: Stretch the child element without setting the height
  • flex-wrap: Specifies the line wrap method for the child elements of the elastic box
    • nowrap: Default, no line breaks. Overflow the container
    • wrap: a newline
    • wrap-reverse: Reverses the wrap arrangement
  • align-content: How the child elements are aligned on the lateral axis (multi-line mode)
    • stretch– the default. The rows will stretch out to take up the remaining space.
    • flex-start– Stack each row to the start position of the elastic box container.
    • flex-end– Stack each row to the end of the elastic box container.
    • center– Stack each row in the middle of the elastic box container.
    • space-between– The rows are evenly distributed in the elastic box container.
    • space-around– The rows are evenly distributed in the elastic box container, with each end retaining half of the spacing between the child elements.
  • align-self: Alignment of itself in the lateral axis direction
    • auto: If ‘align-self’ has a value of ‘auto’, it evaluates to the ‘align-items’ value of the element’s parent, or ‘stretch’ if it has no parent.
    • flex-start: The boundary of the starting position of the lateral axis (vertical axis) of the elastic box element is close to the starting boundary of the lateral axis of the row.
    • flex-end: The boundary of the starting position of the side axis (vertical axis) of the elastic box element is immediately adjacent to the end boundary of the side axis of the row.
    • center: The elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the line is smaller than the size of the elastic box element, the same length will overflow in both directions).
    • baseline: If the inner axis and side axis of the elastic box element are the same, the value isflex-startEquivalent. In other cases, this value will participate in baseline alignment.
    • stretch: If the attribute value of the side axis size isauto, the value makes the size of the item’s margin box as close to the size of the row as possible, but at the same time followsmin/max-width/heightAttribute constraints.
  • Elastic layout child attributes:
    • order: Defines the order by integer, with the smallest number in front
    • margin: set toautoWhen can be horizontally centered on both axes
    • flex: Specify how an elastic child allocates space