HTML

define

language

role

Create web pages

content

Label by label

Block-level elements

div,h1~h6,ul,li,dl,dt,p

The characteristics of

An exclusive line

Properties can be set

Inline elements

span,a,i,em,b,strong,del

The characteristics of

Lateral inside and outside margins can be set

Adjacent elements have whitespace

— Cause: line breaks in code

1. Remove space from code

</ span> </ span>

3. Set font size to 0 for the parent

4. Switch to block level and float

Inline block elements

Input, img, TD

The characteristics of

Adjacent elements have whitespace

Height, line height, inside and outside margin can be set

Empty elements

br,hr,img,link,meta

The characteristics of

It has no content

A page structure

<! DOCTYPE html>

  <meta charset=”UTF-8″>

  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

< meta name = “viewport” content = “width = device – width, initial – scale = 1.0” >

​​

HTML5

Label semantics

define

The name of the tag is readable, but it has no function of its own, like div

content

<nav> : Tag navigation, used only for important link groups in the document. <main> : indicates the main content of a page. A page can be used only once. If it's a Web application, cover its main functions. <article> : Defines external content that is independent of the rest of the document. <section> : Defines sections (sections, sections) in a document. Such as a chapter, header, footer, or other part of a document. <aside> : Define something other than what it's in. A sidebar, a set of links to an article, an advertisement, a friendship link, a list of related products, etc. <footer> : footer, which is the footer of the entire page only if the parent is body. <small> : Render small font, specify details, enter disclaimer, comments, signature, copyright. <strong> : Like the EM tag, it is used to emphasize text, but to a greater degree. <em> : Represents the text as emphasis, in italics. <mark> : Highlight part of the text with yellow. <figure> : Specify separate stream content (images, charts, photos, code, etc.) (default margin around 40px). <figcaption> : Defines the title of the figure element, which should be placed in the position of the first or last child of the figure element. <cite> : Refers to a reference in the contained text, such as the title of a book or magazine. <blockquoto> : defines block references, which have their own space. <q> : Short quotes (cross-browser issues, avoid them if possible). <time> : The datetime attribute follows a specific format. If this attribute is ignored, the text content must be in a valid date or time format. < abBR > : abbreviation or abbreviation. < DFN > : Defines the term element, which must be next to the definition and can be used in the description list DL element. <address> : Contact information for the author, person or organization (E-mail address, link to contact information page). <del> : Removed content. <ins> : Added content. <code> : Marks the code. <meter> : Defines scalar measurements within a known range or fraction value. (Internet Explorer does not support the meter tag.) <progress> : Defines the progress (process) that is running. ` ` `Copy the code

role

0. Easy to read, easy to modify
1. Search engine friendly, good for SEO
2. For device parsing, such as blind people, semantic tags are much better than div tags

Form enhancement

< form action = "" method =" get "> < p > email: < input type =" email "> < / p > < p > digital tags: < input type =" number "> < / p > < p > slider tags: < input type = "range" > < / p > < p > search box labels: < input type = "search" > < / p > < p > date box: < input type = "date" > < / p > < p > week box: < input type = "week" > < / p > < p > in the box: < input type = "month" > < / p > < p > color box: < input type = "color" > < / p > < p > url box: <input type="url"></p> <div> <input type="submit"> <input type="reset"> </div> </form>Copy the code

Canvas

define

Canvas, using JavaScript to draw

content

<canvas id="myCanvas" width="100" height="100"> </canvas>
Copy the code

video/audio

<audio SRC ="./media/luffy.mp3" controls="controls"> This page does not support media tags </audio>Copy the code

<audio controls="controls"> <source src="./media/luffy.ogg"></source> <source src="./media/luffy.mp3"></source> This page does not support media tag </audio>Copy the code

Drag and drop

Select –> Drag –> Release

The selected

In the HTML5 standard, to make elements dragable, the draggable property is set to true. Text, images, and links are drag-and-drop by default, and their draggable property is automatically set to True. Images and links can be dragged and dropped by holding down the left mouse button. Text can only be dragged and dropped if it is selected. If the display Settings text draggable property is true, hold down the left mouse button to drag and drop directly.

Draggable property: Sets whether an element can be dragged. Grammar: < element draggable = “true | | false auto” >

• True: Can be dragged
• False: Forbid dragging
• Auto: Follows the browser definition to determine whether dragging can be performed

Drag the

Every draggable element, as it drags, goes through three processes: drag begins > drag begins > drag ends.

The default behavior of the Dragenter and dragover events is to reject any drag-and-drop elements. Therefore, we must prevent the browser from default behavior. e.preventDefault();

The release of

When the destination is reached, the element event is released

The local store

Storage

It is divided into LocalStorage and SessionStorage

Web Worker

geolocation

datalist

<input id="myCar" list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>
​
Copy the code

Editable content

<div class="edit" contenteditable='true'></div>
Copy the code

Cross domain