If this article is useful to you, you can search my wechat public number: climb, which will push the latest blog articles in time, we make progress together oh!

For a better reading experience, check out the latest content at climbtw.com at blog.climbtw.com.

This article mainly involves the introduction of HTML, compatibility, layout, all global attributes and tag parsing, responsive design, H5 new features and so on.

1 Reference Materials

W3school document: www.w3school.com.cn/tags/index….

2 brief introduction

HTML: Hyper Text Markup Language. A markup language used to describe the structure and content of web pages.
H5HTML5 is the latest version of HTML. Basically, new attributes, new tags, new features are added to the original.
- HTML tags: Are tools that HTML uses to describe web pages.
- HTML document: It consists of HTML tags and plain text.
- Web page: refers to the browser after parsing an HTML document, the resulting interface.

3 Label Classification

3.1 Single and Double Labels

category	The number of	The label
Single label/empty element	12	`<base />`.`<meta />`.`<link />`.`<br />`.`<hr />`.`<img />`. `<area />`.`<col />`.`<input />`.`<param />`.`<embed />`.`<source />`
Double label	98	Don’t write it down.

3.2 Inline labels, block-level labels, and inline block labels

category	The characteristics of	The label
Inline tags	Do not monopolize a line, cannot set the width and height, width and height is completely supported by the content	`<span>`.`<a>`.`<label>`And so on.
Block-level tags	The width and height can be set for an exclusive row. If the width is not set, the browser width is 100% by default	`<hr />`.`<div>`.`<h1>`.`<h6>`.`<p>`And so on.
Inline block label	Do not monopolize a row, you can set width and height	`<img />`.`<th>`.`<td>`.`<form>`.`<input />`.`<textarea>`And so on.

Tips: These three tags can be converted freely by setting the CSSS attribute display, for example, inline, block, inline-block, inline, block, inline. For details, see CSS Details.

3.3 Semantic Labels (20 in total, 9 of which are added for H5)

Semanticalization: Refers to the label with special meaning.

Core: Give the most reasonable label in the appropriate place.

benefits:

Easy to read and maintain code.

Better optimization for search engines.

Let the browser, web crawler and so on can be very good parsing, for better analysis of the content.

How to judge: semantic is good, when CSS is removed, the structure of the page is still well organized and has good readability.

Rule of writing: first decide on semantic HTML, then choose appropriate CSS.

category	The number of	The label
Partition Class (added in H5)	nine	`<header>`.`<footer>`.`<nav>`.`<section>`.`<article>`.`<aside>`. `<dialog>`.`<details>`.`<summary>`
The form class	three	`<thead>`.`<tbody>`.`<tfoot>`
The phrase class	eight	`<em>`.`<strong>`.`<code>`.`<var>`.`<kbd>`.`<cite>`.`<dfn>`.`<samp>`

4 TAB Browser compatibility description

4.1 Common Browser cores

The kernel	platform	Browser representation
Gecko	cross-platform	Firefox
Trident	Windows	IE
KHTML	Linux	Konqueror
WebKit	Cross-platform, based onKHTML	Safari
Chromium	Cross-platform, based onWebKit	Edge
Blink	Cross-platform, based onWebKit2	Chrome.Opera

Tips:

Three main browser kernels:WebKit(Including Chromium, Blink),Trident.Gecko.

The corresponding browser represents:Chrome.IE.Firefox.

4.2 Share of common Browsers in the global platform market

Source: StatCounter

Statistical time: 2020.8-2021.8

The browser	Global total platform share
Chrome	64.92%
Safari	18.77%
Edge	3.56%
Firefox	3.54%
Samsung Internet	3.06%
Opera	2.17%
UC Browser	1.45%
IE	0.73%

4.3 Compatibility Priorities and Handling Principles

Compatibility priority: Chrome, Firefox, Internet Explorer.

Handling principle: Chrome is compatible first. If there is a special need, mozilla Firefox, Internet Explorer and other browsers are compatible.

Tips:

In addition to HTML, other browser compatibility considerations include CSS, JavaScript, etc.

In addition to considerBrowser typesIn addition to compatibility, there are considerationsBrowser versionThe problem.

For lower-version browsers, you can use syntax converters to convert higher-version syntax into lower-version syntax that lower-version browsers can run, including the JavaScript Babel compiler, and so on.

5 Layout Mode

5.1 HTML Layout (Implementation direction)

HTML layout methods include: DIV + CSS layout, H5 semantic elements + CSS layout, Table + CSS layout, etc.

5.2 Web Layout (Design Direction)

Refill when you need it.

6 Global attribute resolution (86 in total, including 58 new ones for H5)

Global attributes: Attributes that can be used with all HTML tags, also known as elements.

The global attributes include 16 general global attributes and 70 global event attributes.

6.1 General global Attributes (16, including 8 new ones for H5)

General global properties include:

Common 8: lang, title, ID, class, style, tabIndex, AccessKey, dir

H5 added 8:hidden.contenteditable.spellcheck.data-*.draggableDropzone, contextMenu, translate

6.1.1 Function Overview

attribute	function
General:
lang	Declares the ownership of the label contentlanguage
id	Set labelA unique id
class	Set labelThe name of the class
title	Set the label to hover overTooltip text
style	Set labelInline style
tabindex	Sets the TAB key for the labelOrder of focus control
accesskey	Set labelFocus shortcut
dir	Set the label contentThe text direction
H5 feature:
hidden	Not to takeHide the label
`data-*`	User-defined attributes of the label
contenteditable	Tag content can beeditorial
spellcheck	Label content should be in EnglishSpelling and grammar check
draggable dropzone	Of the labelDrag operation
contextmenu	labeledRight-click menu item`<menu>`The id of the
translate	Whether to allow browsersTranslation labelThe content of the

6.1.2 General global Attributes

General:

Global properties	role	Browser compatibility	Attribute values	The sample	Application scenarios	instructions
lang	Declares the ownership of the label contentlanguage	All	1. The attribute value is ISO 639-1 Language Code: it is a collection of abbreviations defined for various languages. format:The language code 或 Language code – country code 2. Common values: en-US: English (US) zh-CN: Simplified Chinese (China) zh-HK: Traditional Chinese (Hong Kong) zh-TW: Traditional Chinese (Taiwan) 3. Other language codes, please refer toISO 639-1 Language Code.	`<html lang="zh-CN">` `</html>`	1. Used in`<html>`Tags: A. Chrome will follow langAttribute values 和 The local languageMake a comparison to determine whether display is requiredWeb page translationThe warning. B. toSearch engineMore friendly.	There is no
id	Set labelA unique id	All	Id name.	There is no	1. Used forThe style is set.Js script control. 2. Cooperate withOther tag attributes are used together, such as: A. Link anchor:`<a>`Of the labelThe href value 为 # + Id value“, it indicates the jump to theidThe corresponding label. b. contextmenuGlobally attributivevalueis`<menu>`Of the labelId value. All browsers do not currently support the ContextMenu global property, see contextMenu for more information6.1.2.1 Right-click Menu Properties and Labels. C. To be supplemented.	There is no
class	Sets one or more labelsThe name of the class	All	The name of the class. Note: 1. In addition to the IEThe class name cannot start withdigitalAt the beginning. 2. You can set multiple class attribute values for the tagThe blank spaceSeparated.	There is no	1. Used forThe style is set.Js script control.	There is no
title	Set the label to hover overTooltip text	All	text	`<abbr` `title="People's Republic of China"` `>` `PRC` `</abbr>` `was founded in 1949.` Effect: PRC was founded in 1949.	1. `title`Properties in`<a>`The label,Form seriesTags used to provide information aboutThe link target.Input format“Is displayed.	1. This information is usually found inMove the mouse over the labelIs displayedTooltip text. 2. At bestThere is no obvious captionOn the label, addtitleProperties. 3. It is`<abbr>` 和 `<acronym>`(H5 not supported), twoabbreviationsOf the labelRequired attribute.
style	Set labelInline style	All	Style property of thevalueIs written in the format: 1. One or more semicolons are used;Delimited by CSSattribute 和 valueConsisting of aKey/value pairA string. 2. attribute 和 valueUse a colon:Separated.	`<p` `style="color: red;` `text-align: center"` `>` `This is a paragraph.` `</p>`	1. Used as aInline styleRarely used.	1. The style attribute, as an inline style, takes precedence after`! important`. It will coveranyGlobal style Settings, including`<style>`Of the labelInline styleAnd in the`<link />`Specified in the external style sheetOutreach style. 2. jsdynamicChanging the label style“Is actually changestyleProperty value.
tabindex	Set labelTAB key Focus control sequence	Safari is not supported	number 1. 1 indicates the first one.	`<a` `href="javascript:void(0)" onclick="js_method()" tabindex="1"` `>` `W3School` `</a>` Effect: W3School	1. The controlThe Tab keyforThe focus of 的 Move the order. 2. Desktop sites may use it.	There is no
accesskey	Settings can make labelsGet focus 的 shortcuts	Opera is not supported	character	`<a` `href="#"` `accesskey="h"` `>` `HTML` `</a>`	1. You are not advised to use the Accesskey attribute because different browsers have different implementation effects. A. Activation behavior in Chrome appears as a click event and supports activation of hidden tabs. B. In Internet Explorer and Firefox, focus is used and activation of hidden tabs is not supported.	1. Need to useAlt + accessKeyTo activate theWith the specified shortcut key label.
dir	Inside the Settings TABDirection of text	All	ltr: Default, from left to right. rtl: From right to left.	`<p dir="rtl">` `Write this text right-to-left !` `</p>` Effect: The test is invalid and the text orientation is not completely changed. Write this text right-to-left !	1. Basically unavailable.	There is no

H5 feature:

Global properties	role	Browser compatibility	Attribute values	The sample	Application scenarios	instructions
hidden	Hide the label.Do not take a position	All	itselfOr,omit: Indicates hiding. Hidden property does not write: indicates not to hide.	`<p hidden>` `This paragraph should be hidden.` `</p>`	1. The formHiding data delivery. 2. Tags are not placeholder hidden. Such as: a. Prevents users from viewing certain labels: Until some condition is matched (such as a checkbox is selected), then you can use JS to remove the hidden property and make the label visible.	There is no
`data-*`	Set labelCustom attributes, can be used for storagePrivate data	All	1. The property name: for`data-`Form, and should not contain any uppercase letters, and in the prefixdata-It must be followed by at least one character. 2. Attribute values*: Can be`Arbitrary string`.	See the sample6.1.2.2 Custom Attributes.	1. CustomizeTag attributes, store some labelsPrivate dataTo reduce database access.	1. The user agentWill completely ignore the prefixdata-Custom property of. 2. `data-`Property is given, and we embed it on all the HTML tagsPrivate dataAbility. 3. Private data*Can be pageJs readTo create a better user experience, such as: A. Do not make Ajax calls. B. You do not need to access the database on the server.
contenteditable	Setting label ContentEditable or not	All	False: the default value cannot be edited. True: editable.	`<p contenteditable="true">` `This is an editable paragraph.` `</p>`	1. Make the content of the labeleditable.	1. If no label is setcontenteditableProperty, from which the tag will be drawnThe parent tagInherit the property.
spellcheck	Whether to set the label contentSpelling and grammarcheck	IE9 and earlier are not supported	True: indicates the default value for spelling and grammar check. False: No check is performed.	`<p contenteditable="true" spellcheck="true">` `This is a paragraph.` `</p>`	1. The main target isEnglish.	1. You can perform the following operationsspellingCheck: a. `<input />`The text value in the tag (not the password). b. `<textarea>`The text in the tag. c. editableThe text in the tag. 2. For words with spelling or grammatical errors, will appearRed is squiggly, to remind.
draggable	Set up the labelDraggable or not	IE8 and earlier are not supported	Auto: indicates the default behavior of the browser. True: Can be dragged. False: Cannot be dragged.	1. Draggable is H5Drag theNew features. 2. Drag effect needs to be coordinatedRelated mouse event propertiesImplementation, see related examples6.2.2.3.2.1 Drag Related.	1. Implement some of the webDrag the effect.	1. link 和 imageThe default is draggable.
dropzone	Sets whether to drag a labelmobile.copyOr,linkDragged labeldata	All browsers do not support it	Move: Drags data to be draggedmobileTo a new location. Copy: Dragging data generates dragged dataA copy of the. Link: Dragging data produces a pointer to the original datalink.	`<div draggable="true" dropzone="move">` `</div>`	Because 1.Browser not supportedWith support, yesSimplify the dragRelated implementation of.	There is no
contextmenu	The specifiedOf the labelContext menu`<menu>` 的 id	All browsers do not support it	Property values are to be turned on`<menu>`Of the label`id`.	See the sample6.1.2.1 Right-click Menu Properties and Labels.	All browsers do not currently support the ContextMenu property.	1. Set the labelRight-click to display menu options. 2. `<menu>`The tag needs to contain`<menuitem>`To set the context menuentry. 3. You can also use the new H5 label`<command>`Instead of`<menuitem>`For now, it is supported only by IE9`<command>`.
translate	Setting whether or notTranslate label content	All browsers do not support it	Yes: The label content should be translated by default. No: Do not translate the label content.	`<p translate="no">` `Please do not translate this paragraph.` `</p>`	All browsers do not support translate.	1. In the process of page translation, Google Browser carries out selective translation as required.

6.1.2.1 Right-click menu related properties and labels

The ContextMenu global property is not currently supported by all browsers, but may be in the future.

Right mouse button menu involves:

Property: ContextMenu (new in H5).

Tags:<menu>.<menuitem>.<command>(H5 added).

Example:

<! -- HTML test -->

<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
<title>HTML test</title>
<base href="" target="_top" />
<meta name="description" content="Summary of HTML tests" />
<meta name="keywords" content="Keywords about HTML tests" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, user - scalable = no, minimal - UI" />
<meta http-equiv="content-type" content="text/html, charset=UTF-8" />

<link rel="shortcut icon" href="" type="image/vnd.microsoft.icon">
<link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16">
</head>

<body>
<span contextmenu="menu-id">Right-click menu</span>
<menu id="menu-id" type="context">
    <menuitem onclick="">Option 1</menuitem>
    <menuitem onclick="">Option 2</menuitem>
</menu>
</body>
</html>
Copy the code

6.1.2.2 Custom Attribute Correlation

Right mouse button menu involves:

Properties:data-*(H5 added).

Example:

<! -- HTML test -->

<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
<title>HTML test</title>
<base href="" target="_top" />
<meta name="description" content="Summary of HTML tests" />
<meta name="keywords" content="Keywords about HTML tests" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, user - scalable = no, minimal - UI" />
<meta http-equiv="content-type" content="text/html, charset=UTF-8" />

<link rel="shortcut icon" href="" type="image/vnd.microsoft.icon">
<link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16">
</head>

<body>
<span data-animal-type="Birds" onclick="showDetails(this)">The magpies</span>

<script type="text/javascript">
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.textContent + "It's a kind of + animalType + ".");
}
</script>
</body>
</html>
Copy the code

6.2 Global Event Attributes (70, of which 50 are added for H5)

HTML 4 adds the ability to trigger script actions in the browser using event attributes.

The attribute values of the global event attribute are used to define action events in JavaScript scripts.

Only global event attributes in HTML are generalized here. For more information about JavaScript scripting, see JavaScript in Detail.

Global event attributes fall into five categories:

Window event properties 17A:

Common two: onLoad, onunload

H5 added 15: Onresize, onbeforePrint, onAfterPrint, onstorage, onPagesHow, onPageHide, onOnline, onOffline, onbeforeUnload, onError, Onhaschange, onPopState, onMessage, onundo, onredo

Form Event property of the Form 11A:

Common 6: onblur, onfocus, onchange, onSubmit, onSelect, onreset

H5 added 5: onContextMenu, onInput, onInvalid, onForMinput, onFormChange

Mouse Indicates the event property of the Mouse 16A:

Common 7: onMouseDown, onMouseUp, onclick, ondblClick, onMousemove, onMouseOver, onMouseout

H5 adds 9 new ones: onDragStart, onDrag, onDragEnter, onDragOver, onDragLeave, onDrop, onDragend, onMouseWheel, onScroll

Keyboard Indicates the Keyboard event property 3A:

Common three: onKeyDown, onKeyPress, and onKeyUp

Media Media event attributes 23A:

Common two: onabort, onwaiting

H5 added 21: Onpause, onPlay, onPlaying, onTimeUpdate, onratechange, onVolumechange, onended, ondurationchange, onreadyStatechange, onemptied, Onseeking, onseeked, onCanplay, oncanplaythrough, onloadStart, onprogress, ondrift, onsuspend, onloadedmetadata, onLoadeddata, onerror

6.2.1 Function Overview

Window event attributes:

attribute	function
General:
onload onunload	The document is loadedRelevant action
H5 feature:
onresize	Window adjustmentRelevant action
onbeforeprint onafterprint	Document printingRelevant action
onstorage	Storage updateRelevant action
onpageshow onpagehide	Show hidden windowRelevant action
ononline onoffline	Document on/offlineRelevant action
onbeforeunload	Document uninstallRelevant action
onerror	Document errorRelevant action
onhaschange	The document changesRelevant action
onpopstate	Window history changedRelevant action
onmessage	Message triggeredRelevant action
onundo	Document undo cancelRelevant action
onredo	The document performs a redo undoRelevant action

Form event attributes:

attribute	function
General:
onblur onfocus	The labelFocus changesRelevant action
onchange	The labelValues changeRelevant action
onsubmit	The formWhen submittingRelevant action
onselect	The labelText is selectedRelevant action
onreset	The formresetRelevant action
H5 feature:
oncontextmenu	The labelRight clickRelevant action
oninput	The labelWhen you get inputRelevant action
oninvalid	The labelinvalidRelevant action
onforminput	The formWhen you get inputRelevant action
onformchange	The formWhen the changeRelevant action

Mouse event properties:

attribute	function
General:
onmousedown	Left center, right clickPress the
onmouseup	Left center, right clickThe release of
onclick / oncontextmenu	Left center/right clickClick on the
ondblclick	Left the keyDouble click on the
onmousemove	Move to the
onmouseover	Keep moving
onmouseout	Removed from the
H5 feature:
ondragstart	Press the left button,Ready to drag
ondrag	Continue to drag
ondragend	Drag the end
ondragenter	Enter the area
ondragover	Keep dragging within the region
ondragleave	Leave the area
ondrop	Release the left key in the region,Put down the
onmousewheel	Listening to theThe mouse wheel
onscroll	Listening to theThe scroll bar

Keyboard Keyboard event properties:

attribute	function
General:
onkeydown onkeypress	Press theThe keyboard
onkeyup	The release ofThe keyboard

Media Event attributes:

attribute	function
General:
onabort	exit
onwaiting	suspended
H5 feature:
Frequently used events for media playback:
onpause	suspended
onplay	Have been ready, can start playing
onplaying	Already playing
ontimeupdate	Play position change
onratechange	Rate of change
onvolumechange	The volume change
onended	Has to end
ondurationchange	Medium lengthchange
onreadystatechange	The ready statechange
onemptied	failureThe file is suddenly unavailable
onseeking onseeked	Locate relevant
Cache related:
oncanplay	Buffered partial data, but can start playing
oncanplaythrough	Fully buffered
Media data acquisition related:
onloadstart	fileStart loading 前
onprogress	The browserAccess to media data 时
onstalled	The browserCan’tMedia data is obtained
onsuspend	The browserTermination ofAccess to media data
onloadedmetadata	Metadata is loaded 时
onloadeddata	mediumData loading completed
onerror	During the loadingAn error occurred

6.2.2 Description of Global Event Attributes

6.2.2.1 Window event properties

The event triggered by the window object, commonly used in the tag.

General:

Event attributes	The trigger condition	Browser compatibility	The sample	Application scenarios	instructions
onload	The documentEnd of full loadafter	All	`<body onload="load()">`	1. Often used inThe page is fully loadedAfter the operation.	1. Onload is often used in`<body>`Once all content (including images,The script file, CSS files, etc.), execute the corresponding script.
onunload	1. The documentBefore loading(includingFirst load.The refreshEtc.) 2. Leave the pagePrevious (including the jump action of clicking a link, submitting a form, andClose the Browser windowEtc.)	All browsers do not support it	`<body onunload="goodbye()">`	There is no	There is no

H5 feature:

Event attributes	The trigger condition	Browser compatibility	The sample	Application scenarios	instructions
onresize	windowThe size is adjusted 时	All	`<body onresize="showMsg()">`	1. MonitorWindow size changes.	There is no
onbeforeprint	Document printingDialog box appearsbefore	All	`<body onbeforeprint="printmsg()">`	1. Print a dialog boxbeforetheThe information that.	1. onbeforeprintAttributes are often associated withonafterprintAttributes are used together.
onafterprint	Document printingDialog box Endafter (IE, effect and`onbeforeprint`The same)	All	There is no	1. Print a dialog boxAfter the end of 的 The information that.	There is no
onstorage	The Web Storage area is updated	Documentation not stated	There is no	There is no	1. Storage is H5The local storeNew features. 2. For related principles and examples, please refer to the followingH5 new featuresChapter.
onpageshow	When the window becomes visible	Documentation not stated	There is no	There is no	There is no
onpagehide	Window hidden	Documentation not stated	There is no	There is no	There is no
ononline	When the document goes live	Documentation not stated	There is no	There is no	There is no
onoffline	When the document is offline	Documentation not stated	There is no	There is no	There is no
onbeforeunload	Before document uninstallation	Documentation not stated	There is no	There is no	There is no
onerror	When an error occurs in the document	Documentation not stated	There is no	There is no	There is no
onhaschange	When the document changes	Documentation not stated	There is no	There is no	There is no
onpopstate	When the window history changes	Documentation not stated	There is no	There is no	There is no
onmessage	When the message is triggered	Documentation not stated	There is no	There is no	There is no
onundo	When the document performs undo	Documentation not stated	There is no	There is no	There is no
onredo	When a document performs a redo	Documentation not stated	There is no	There is no	There is no

6.2.2.2 Form Event attribute

An event triggered by an action within an HTML form, commonly used in form series tags.

General:

The event	The trigger condition	Browser compatibility	The sample	Application scenarios	instructions
onblur	The labelLose focus 时	All	`<input type="text" name="fname" onblur="upperCase()" />`	1. onblurCommonly used inForm validationCode (such as actions triggered when the user leaves a form field).	There is no
onfocus	The labelGet focus 时	All	`<input type="text" id="fname" onfocus="setStyle(this.id)" />`	There is no	There is no
onchange	Of the labelValue is changed 时	All	`<input type="text" name="text" value="Hello" onchange="checkField(this.value)" />`	There is no	There is no
onsubmit	Submit the form 时	All	`<form action="demo_form.asp" onsubmit="return checkForm()">`	1. Often used to execute at commit timeForm validationFunction. 2. Onsubmit Event property valueReturn totrue, the form will be submitted.	1. The onSubmit event attribute is available only in the`<form>`The use of.
onselect	In the labelText is selected 后	All	There is no	1. Used when text is selected.	There is no
onreset	The reset button is clicked 时	Documentation not stated	There is no	There is no	1. It’s not supported in HTML5.

H5 feature:

The event	The trigger condition	Browser compatibility	The sample	Application scenarios	instructions
oncontextmenu	When the label is mouthedRight clickClick to display the context menu	Documentation not stated	There is no	There is no	1. ToRight mouse click 的 Related eventsOrder of execution: onmousedown: Hold down the mouse onmouseup: Mouse release oncontextmenu: Right click at the end
oninput	When the tag gets user input	Documentation not stated	There is no	There is no	There is no
oninvalid	When the label is invalid	Documentation not stated	There is no	There is no	There is no
onforminput	whenThe formGet user input	Documentation not stated	There is no	There is no	There is no
onformchange	whenThe formWhen the change	Documentation not stated	There is no	There is no	There is no

6.2.2.3 Mouse Event Properties

An event triggered by a mouse or similar user action.

6.2.2.3.1 Common: Click and move

The mouse to click(Left/key) Event execution order:onmousedown.onmouseup.onclick.ondblclick

The mouse to click(Right click) Event execution order:onmousedown.onmouseupThe oncontextmenu

The mouse movesEvent execution order:onmousemove.onmouseover.onmouseout

General:

The event	The trigger condition	Browser compatibility	The sample	Application scenarios	instructions
onmousedown	Press theMouse button	All	`<p onmousedown="mouseDown()"> Please click on this text! </p>`	Press theThe event	There is no
onmouseup	The release ofMouse button	All	There is no	The release ofThe event	There is no
onclick	The mouseLeft/middle click 时	All	There is no	Click on theThe event	There is no
ondblclick	The mouseDouble left/middle click 时	All	There is no	Double click on theThe event	There is no
oncontextmenu Is the Form event attribute	The mouseRight click on theAt the end of the	All	There is no	Click on theThe event	There is no
onmousemove	The mouse pointerMove to theOn the label when	All	`<img onmousemove="bigImg(this)" src="smiley.gif" alt="Smiley" />`	moveThe event	There is no
onmouseover	The mouse pointer is on the labelKeep moving 时	All	There is no	In the mobileThe event	There is no
onmouseout	The mouse pointerRemoved from theWhen the label	All	There is no	Removed from theThe event	There is no

6.2.2.3.2 H5 Added Drag and scroll bar

Add 7 mouse event attributes related to drag and 2 mouse event attributes related to scroll bar.

H5 feature:

The event	The trigger condition	Browser compatibility	instructions	Application scenarios	The sample
ondragstart Dragged labelThe response	The label 在 Drag the start 时	Documentation not stated	There is no	There is no	There is no
ondrag The dragged label responds	The label 在 When being dragged(Continue to take effect)	Documentation not stated	There is no	There is no	There is no
ondragend The dragged label responds	The label 在 Drag the end 时	Documentation not stated	There is no	There is no	There is no
ondragenter Region label response	Being dragged into theeffectivearea 时	Documentation not stated	There is no	There is no	There is no
ondragover Regional labelsThe response	In the effectivearea 上 When the drag(withondragalternateTo take effect) (Continue to take effect)	Documentation not stated	There is no	There is no	There is no
ondragleave Region label response	leaveeffectivearea 时	Documentation not stated	There is no	There is no	There is no
ondrop Regional labelsThe response	In the effectivearea 被 Drag down 后	Documentation not stated	There is no	There is no	There is no
onmousewheel	The mouserollerWhile being rolled	Documentation not stated	There is no	There is no	There is no
onscroll	The scroll barWhen they were rolling	Documentation not stated	Can berollerScroll, or it could beDrag the mouse to scroll barThe rolling	There is no	There is no

6.2.2.3.2.1 Drag Related

Includes two bodies: the dragged label and the region label.

Drag event propertyThe profile: 3Dragged labelRelated, 4Regional labelsRelated:

Dragged TAB:

Ondragstart (Click start, drag tag response)

Ondrag (Moving, dragging tag response)

Ondragend (drop end, drag tag response)

Area label:

Ondragenter (enter region, region label response)

Ondragover (region move, region tag response)

Ondragleave (leave region, region tag response)

Ondrop (region drop, region tag response)

Drag event properties in order of execution:

byDragged labelResponse trigger:

Ondragstart (click Start),

Ondrag (moving, ongoing)

byRegional labelsResponse trigger:

Ondragenter (enter region),

Ondragover (moving within a region, continuing, alternating with onDrag),

Ondragleave,

Ondrop (drop in zone)

byDragged labelResponse trigger:

Ondragend (drop end)

There are three commonly used methods for dragging:

Ondragstart: Pre-set some data needed for the drag area, such as the ID of the tag being dragged. This data can be temporarily set in event.datatransfer.

Ondragover: Prepares the drag area when the label is moved over it. Such as telling the Web browser not to perform default actions associated with an event (e.g., the browser default
tag cannot be dragged; Default data/elements cannot be placed in other elements, etc.).

Ondrop: Drags the area when the label is dropped in the area. For example, to move a dragged label based on its previous ID.

Drag sample code:

<! -- HTML test -->

<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
<title>HTML test</title>
<base href="" target="_top" />
<meta name="description" content="Summary of HTML tests" />
<meta name="keywords" content="Keywords about HTML tests" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, user - scalable = no, minimal - UI" />
<meta http-equiv="content-type" content="text/html, charset=UTF-8" />

<link rel="shortcut icon" href="" type="image/vnd.microsoft.icon">
<link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16">

<style type="text/css">
#area-div {
    width: 300px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
}
</style>
</head>

<body onload="load()">
<p id="drag-p" draggable="true" ondragstart="dragstart()">This is a moving passage. Drag the paragraph into the rectangle below.</p>
<div id="area-div" ondragover="dragover()" ondrop="drop()"></div>


<script type="text/javascript">
function dragstart() {
    event.dataTransfer.setData("id", event.target.id);
}
function dragover() {
    event.preventDefault();
}
function drop() {
    let id = event.dataTransfer.getData('id');
    event.target.appendChild(document.getElementById(id));
}
</script>
</body>
</html>
Copy the code

6.2.2.3.2.2 about window. Event. DataTransfer (involving the JS, stay)

The current understanding is that dataTransfer objects can hold data that is shared among all event objects.

Data storage method is: the event. The dataTransfer. SetData (” id “, the event. The target. The id) event. The dataTransfer. GetData (” id “).

6.2.2.3.2.3 Solution to the Conflict between a Double-click event and a Click Event

Analysis:

The click event is executed in sequence: mousedown, mouseup, and click before it is triggered.

The double click event dblclick is executed successively before it is triggered: mousedown, mouseup, click, mousedown, mouseup, click, dblclick.

Here click, double – click refers to the left key.

Conflict: Two click events are triggered before a double click event is triggered, causing event conflict.

Solution:

Add a timer to the click event, delay execution, and at the beginning of the last timer, to ensure the uniqueness of the click event timer.

Then in the double click event, remove the unique click event timer to prevent the trigger of the click event.

Sample code:

<! -- HTML test -->

<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
<title>HTML test</title>
<base href="" target="_top" />
<meta name="description" content="Summary of HTML tests" />
<meta name="keywords" content="Keywords about HTML tests" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, user - scalable = no, minimal - UI" />
<meta http-equiv="content-type" content="text/html, charset=UTF-8" />

<link rel="shortcut icon" href="" type="image/vnd.microsoft.icon">
<link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16">
</head>

<body>
<span id="click-span">Single-hit and double-hit event conflict test</span>



<script type="text/javascript">
var delay = null;   // A timer variable that resolves conflicts between single-strike and double-strike events
var clickSpan = document.getElementById("click-span");

clickSpan.addEventListener('click'.function(){
  if (delay) { clearTimeout(delay); }
  delay = setTimeout(function(){
	    // Handle the click event...
      alert("Click!");
  }, 300); // More than 300 milliseconds
});

clickSpan.addEventListener('dblclick'.function(){
  if (delay) { clearTimeout(delay); }
  // Handle double click events...
  alert("Double click!");
});
</script>
</body>
</html>
Copy the code

6.2.2.4 Keyboard Keyboard event properties

Binds a Keyboard event to a label to monitor Keyboard actions. There are two main events: press and release.

General:

The event	The trigger condition	Browser compatibility	The sample	Application scenarios	instructions
onkeydown	Press theWhen the button	All	There is no	1. Determine the key code of a key and respond accordingly.	There is no
onkeypress	When you press a button	All	There is no	There is no	1. Will not be triggeredKey: Alt, Ctrl, Shift, ESC.
onkeyup	The release ofWhen the button	All	There is no	There is no	There is no

6.2.2.4.1 Sequence of keyboard events

Onkeydown (down)

Onkeypress (press, some keys do not trigger)

Onkeyup (release)

6.2.2.4.2 Keyboard Listening Example

Listening target: We can listen locally for a tag, or globally for or document.

Keyboard listening example code: press the keyboard, display the corresponding key and key code

<! -- HTML test -->

<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
<title>HTML test</title>
<base href="" target="_top" />
<meta name="description" content="Summary of HTML tests" />
<meta name="keywords" content="Keywords about HTML tests" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, user - scalable = no, minimal - UI" />
<meta http-equiv="content-type" content="text/html, charset=UTF-8" />

<link rel="shortcut icon" href="" type="image/vnd.microsoft.icon">
<link rel="icon" href="" type="image/vnd.microsoft.icon" sizes="16x16">
</head>

<body>
<span>Keyboard event test, please press any key:</span><br /><br />
<span>Key code:</span><span id="keycode-span"></span><br />
<span>TAB:</span><span id="keychar-span"></span>



<script type="text/javascript">
document.onkeydown = function() {
    // Get the key code
    let keyCode = event.keyCode;
    // convert to a key
    let keyChar = String.fromCharCode(keyCode);

    // Get the label object for display
    let keyCodeSpan = document.getElementById("keycode-span");
    let keyCharSpan = document.getElementById("keychar-span");
    // Display the results to the page
    keyCodeSpan.innerHTML = keyCode;
    keyCharSpan.innerHTML = keyChar;
}
</script>
</body>
</html>
Copy the code

6.2.2.5 Media Media Event Attributes

Events triggered by media such as images, audio, and video.

Common in media tags, such as<img />,<object>,<audio>,<video>,<embed />.

General:

The event	The trigger condition	Browser compatibility	The sample	Application scenarios	instructions
onabort	inexit 时	Documentation not stated	There is no	There is no	There is no
onwaiting	inSuspend the cache 时	Documentation not stated	There is no	There is no	There is no

H5 feature:

The event	The trigger condition	Browser compatibility	The sample	Application scenarios	instructions
Frequently used events for media playback:
onpause	By a user or programsuspendedwhen	Documentation not stated	There is no	There is no	There is no
onplay	hasreadycanStart playingwhen	Documentation not stated	There is no	There is no	There is no
onplaying	Already playingwhen	Documentation not stated	There is no	There is no	There is no
ontimeupdate	Play position changewhen	Documentation not stated	There is no	1. Like being a userFast forwardTo a different position in the medium	There is no
onratechange	Rate of changewhen	Documentation not stated	There is no	1. For example, when the user switches toQuick play 或 The slow playMode.	There is no
onvolumechange	The volume changewhen	Documentation not stated	There is no	1. Mute the volume.	There is no
onended	The media has beenReach the endwhen	Documentation not stated	There is no	1. Send messages like “Thanks for watching.”	There is no
ondurationchange	Medium length changewhen	Documentation not stated	There is no	There is no	There is no
onreadystatechange	The mediaThe ready stateWhen the change	Documentation not stated	There is no	There is no	There is no
onemptied	failureandThe file suddenly became unavailablewhen	Documentation not stated	There is no	1. Such asUnexpected disconnectionInternet and all that.	There is no
onseeking	When seeking property is set to true (indicatespositioningIs active)	Documentation not stated	There is no	There is no	There is no
onseeked	When seeking property is set to false (indicatespositioningHas ended)	Documentation not stated	There is no	There is no	There is no
Buffer type events:
oncanplay	fileThe buffer partBut can start playing when	Documentation not stated	There is no	There is no	There is no
oncanplaythrough	fileCompletely buffer, you can start playingUntil the endwhen	Documentation not stated	There is no	There is no	There is no
Get events of data type:
onloadstart	fileReady to load 前	Documentation not stated	There is no	There is no	There is no
onprogress	The browserObtaining media datawhen	Documentation not stated	There is no	There is no	There is no
onstalled	Browser for whatever reasonMedia data could not be retrieved 时	Documentation not stated	There is no	There is no	There is no
onsuspend	Media data is fully loaded for whatever reasonAbort the retrieval of media data 时	Documentation not stated	There is no	There is no	There is no
onloadedmetadata	metadata(such as resolution and duration) byloadingwhen	Documentation not stated	There is no	There is no	There is no
onloadeddata	mediumData loadedwhen	Documentation not stated	There is no	There is no	There is no
onerror	loadingDuring the period ofAn error occurredwhen	Documentation not stated	There is no	There is no	There is no

7 Tag parsing (110 tags in total, of which 30 are added for H5)

7.1 Basic Labels (7 labels)

Basic tags include:
,
,

, ,

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<! DOCTYPE>`	defineThe document type	All	There is no	1. H5Document declaration: `<! DOCTYPE html>` 2. Other types ofThe documentation states: Not often, omitted. Others please refer to: HTML Document Types	1. `<! DOCTYPE>`The declaration must be an HTML documentThe first line. 2. `<! DOCTYPE>`The statement did notThe end tag. 3. `<! DOCTYPE>`The statement ofcaseIs not sensitive. 4. `<! DOCTYPE>`Statement is notHTML tags. It is an instruction that tells the Web browser which VERSION of HTML to use to parse a document.
`<! --`.`-->`	defineannotation	All	There is no	1. `<! --`This is a note`-->` 2. Hide inline scripts: `<script type="text/javascript">` `<! --` `document.write("Hello World!" )` `//-->` `</script>` 3. Conditional note: IE 5+ can be recognized `<! --[if lt IE 8]>` HTML executed by IE earlier than version 8 `<! [endif]-->` `<! --[if gt IE 8]>` HTML executed by IE higher than version 8 `<! [endif]-->` `<! --[if !IE]>` HTML executed by a browser other than IE `<! [endif]-->`	1. Comments are not displayed in the browser. 2. You can use comment tags`<! --`.`-->`tohiddenBrowsers don’t need itInline script code, so that the script is not displayed as plain text. Remember to use`//`To comment out`-->`To avoid JS execution`->`. (`//`Js comment symbol) 3. SupportIdentify the IE5 + 的 Conditional comments.
`<html>`	defineThe document content	All	1. Common global properties:lang, the XML: lang. 2. XMLNS: Defines the XML namespace attribute, which the browser will useThe namespaceApplies to everything within the element in which the attribute is located. itsvalueFixed:`http://www.w3.org/1999/xhtml` H5 new attribute: Manifest: Defines a URL that describes the document’s cache rule information. Value: url. Compatibility: This document is not specified.	1. Example: `<html lang="zh-CN">` `<head></head>` `<body></body>` `</html>`	1. `<html>` 与 `</html>`The tag defines the document’sThe starting point 和 The end point. 2. Between them are documentsThe head 和 The main body. 3. By head`<head>`The tag is defined, and the body is defined`<body>`The label. 4. Even if`<html>`Tags are documentThe root element, it also does not contain`<! DOCTYPE>`The label.`<! DOCTYPE>`Tags must be located`<html>`The label`before`. 5. xmlnsAttributes are required in XHTML, but not in HTML. Because its value is zerofixed, so it will be added automatically even if it is not used.
`<head>`	Defining documentThe head	All	Reserved attributes: Not in use yet 1.profile: a whitespace delimited list of urls that contain information about the pagemetadataInformation. value: url. Related instructions: A. The header of a document often contains some`<meta />`Tag that tells the browser additional information about the document. In the future, creators may usePre-defined 的 Standard document 的 Meta information configuration file(Metadata profile) to better describe them. B. The profile property provides a comparison withThe current documentThe associatedThe configuration file 的 URL. C. Of the configuration fileformatAnd browsers that use themwayAre alsoIt’s not defined, this property is mainly forFuture development 而 Reserved placeholders.	`<head>` The label inside the header `</head>`	1. In the headIncluded labels: `<title>`: the title, `<base />`: Base address and default target, `<meta />`: meta information, `<link />`: External resources (often used for linksExternal style sheets), `<style>`:Inline style information. `<script>`:Inline script codeOr a linkExternal script files. 2. `<title>` 是 `<head>` 中 The only necessaryThe label. 3. `<head>`The tag must be in`<body>` 或 `<frameset>`The labelbefore.
`<title>`	Defining documentThe title	All	There is no	`<title> The title of the document </title>`	1. `<title>`The content will appear in: A. Title of the browser window. B. Bookmark titles. C. The title displayed in the search engine results list. 2. `<title>`The head ofThere must beThe label.
`<base />`	Defines all links in the pageBase address 和 The default target	All	1. href(Must attribute) : Specifies all of the pagesRelative URL 的 Base URL. (Valid only for relative paths, not absolute paths) value: url. 2. target: specify thewhereOpen all the links on the page. value: _self: Default, same framework _top: In the entire window _blank: New window _parent: The parent frame is concentrated framename: in the specified frame	`<base` `href="https://www.baidu.com/s"` `target="_top"` `/>`	1. Generally, browsers will rely onThe URL of the current documentTo supplement the pageRelative URLIn. 2. When using`<base />`The TAB will be used by the browserThe base URL specifiedTo supplement all of thatRelative URL.
`<body>`	Defining documentThe main body	All	1. Common global Window event attributes:onload.	`<body onload="load()">` `</body>`	1. Within the bodyThe labels included are:The text,hyperlinks,image,The list of,form,The form,Audio and video,The script,The frameworkSuch as containingThe documentAll the content of.

7.2 Meta Information Labels (One)

Meta information tag:
.

Application Background:

The serversendThe responseSet up theResponse header information, can be used on the page<meta />The tag can also be in the responseThrough the codeSettings.

The browser sends a request. The request header is set by the browser and transparent to users. In the case of the calling interface, you can set the relevant request header information in Ajax.

There are many extensions. For details, see “HTML Details – Meta Information Related”.

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<meta />`	Defines an HTML documentMeta information	All	key: 1. name:Search engine 或 The browserSome of the fields provided. But the documentation doesn’t specify itvalue, you need toThe custom. Commonly used keys:description.keywords.viewportAnd so on. The corresponding content value: the user’sThe customText orconventionalThe value of the. 2. http-equiv: defines the serverThe responseMedium, headKey/value pairThe content. Common keys/values: seeHTML Details – Meta information RelatedIn theThe induction of the message header. Note: the key and value of the header areGood documentation. 3. Scheme: Used to specify the scheme to be used to translate the content property value. This scheme should be implemented by`<head>`Is defined in the profile file, which contains metadata information, specified by the profile attribute of the tag. Documentation not stated. value: 3. content(Must be) : Defines matches the name or http-equiv key attributeThe value of information.	1. The name key: A. toSearch engineProvide information about the page: `<! -- Summary of search engine list display -->` `<meta name="description" content="" />` `<! -- Search engine oriented keywords -->` `<meta name="keywords" content="" />` B. inResponsive development, modify the layout viewport: `<meta` `name="viewport"` `content="` `width=device-width,` `Initial - scale = 1.0,` `user-scalable=no,` `minimal-ui"` `/>` 2. HTTP – equiv keys: The response ofHeader informationSettings: `<! -- Document type and encoding Settings -->` `<meta` `http-equiv="content-type"` `content="text/html, charset=UTF-8"` `/>`	1. Meta-information is actually composed of a groupKey/value pairsComposition. 2. Key attributesThere are two:name 和 http-equiv. If not providednameProperty, then will be usedhttp-equivProperty to replace. 3. Key properties: a. nameKey: Ⅰ. OfferSearch engineConvention information to facilitate their retrieval to your web page. Ⅱ. Reactive setting: Controls the mobile browserLayout viewportIs the width of the device (that is, the mobile deviceIdeal viewport) b. http-equivKey: Set up theThe header information for the response.Used to control the behavior of the browser. Like telling the browser that it’s going to receive a document,type.encodingAnd so on. 4. Value properties:content, it isThere must be.

7.3 Styles, Script Labels (4)

,

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<link />`	Define the relationship between documents and external resources	All	1. rel: Specifies the relationship between the current document and the linked document. Common values:stylesheet(External style sheets) 2. type: Specifies the MIME type of the linked document. The most common MIME type istext/css, the type descriptionThe stylesheet. and`<style>`The type attribute of the tag is the same. 3. href: Specifies the location of the linked document. If the link is lastIs not a file, it isfolderIf so, add it at the endA forward slash. Otherwise the server will addA forward slashGo to this address and create a new request, which makes two requests. Such as: `href="http://www.w3school.com.cn/html/"` 4. media: specifies the device on which the linked document will be displayed. Attribute values: screen(Computer screen, default) print(Print preview mode) all(Suitable for all equipment) handheldHandheld devices, small screens, limited bandwidthHandheld is supported only by Opera) etc. 5. New property of SIZES H5: Specifies the size of the linked resource. Only works with rel=”icon” (site title icon). 6. hreflang: Specifies the language of the Chinese text of the linked document.Few major browsers support the Hreflang attribute.	`<head>` `<link rel="stylesheet" type="text/css" href="theme.css" />` `<link rel="icon" href="/i/demo_icon.ico" type="image/vnd.microsoft.icon" sizes="16x16" />` `</head>`	1. Used forExternal style sheetsWhen,`<link />`Tags are supported by almost all browsers. But few browsers support other uses. 2. `<link />`The label isEmpty elements. 3. `<link />`Tags can only exist in`<head>`But it can occur any number of times.
`<script>`	defineAn inline scriptOr a linkOutreach script	All	1. type: Specifies the MIME type of the script. Common values: MIME types of JavaScript:type=”text/javascript” 2. src: Specifies the URL of the external script file. 3. defer:Outreach scriptLazy loading is performed after the page is loaded. Property value is omitted, or is itself. 4. Async H5 New property: Specifies asynchronous executionOutreach script. Property value is omitted, or is itself. 5. charset: Specifies the character encoding to use in external script files.The default character encoding is ISO-8859-1. If the character encoding in the external file is different from the encoding in the main file, the charset attribute is used. The charset attribute, used with the SRC attribute, tells the browser the character set used to encode the javascript program. 6. XML :space: specifies whether to keep white space in code. The documentation is not specified.	`<script type="text/javascript">` `document.write("Hello World!" )` `</script>`	1. If the script does not change the content of the document, run thedeferAttribute added to`<script>`Tag to speed up processing of documents. This applies only to external scripts. 2. A frameset`<frameset>`The script after the tag is ignored.
`<noscript>`	Defines when client-side scripts are not supportedPrompt information	All	There is no	`<noscript>Your browser does not support JavaScript! </noscript>`	There is no
`<style>`	defineInline CSS styles	All	1. Type (required): Specifies the MIME type of the stylesheet.The only value: text/CSS. 2. media: Specifies different media types for stylesheets. Common values: screen(Computer screen, default) print(Print preview mode) all(Suitable for all equipment) handheldHandheld devices, small screens, limited bandwidthHandheld is supported only by Opera) etc.	`<style type="text/css" media="screen, print">` `h1 {color:red}` `p {color:blue}` `</style>`	1. `<style>`The label is located in the`<head>`Tag. 2. typeProperty is required to define the file type. And the only possible value is “text/ CSS “.

7.4 Labels such as Title and Partition (15 labels)

Headings, partition labels include:

General title, partition label 6:<div>.<h1>.<p>.<span>.<br />.<hr />

H5 Added 9 semantic partition labels:<header>.<footer>.<nav>.<section>.<article>.<aside>.<dialog>.<details>.<summary>

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<div>`	Define divisions/sections in a document. Structured markup with no semantics.	All	There is no	There is no	1. `<div>`Is a block-level element, and the browser places a line break before and after the div element. 2. Use`<div>`Element to combine block-level elements.
`<h1>`.`<h6>`	Defining HTML headings	All	There is no	There is no	1. `<h1>`Define the largest title.`<h6>`Define the minimum heading.
`<p>`	Define the paragraph	All	There is no	There is no	1. The browser automatically opens`<p>`Create some white space before and after, which you can also specify in the stylesheet.
`<span>`	Define divisions/sections in a document. Structured markup with no semantics.	All	There is no	There is no	1. If not`span`Apply styles so that the text in the SPAN element is visually indistinguishable from any other text. 2. Use`<span>`To combine inline elements.
`<br />`	Define a simple line break	All	There is no	There is no	1. `<br />`The label is an empty label. 2. Please use`<br />`Enter blank lines instead of split paragraphs. 3. `<br />`Tags simply start a new line, as opposed to when the browser encounters them`<p>`When you label, you usually insert some vertical spacing between adjacent paragraphs.
`<hr />`	Define horizontal line	All	There is no	There is no	There is no

H5 feature:

The label	role	Browser compatibility	attribute	The sample	instructions
`<header>`	Defines the header of a section or page	IE 8 and earlier versions are not supported	There is no	There is no	There is no
`<footer>`	Defines the footer of a section or page	IE 8 and earlier versions are not supported	There is no	`<footer>` `<p>Posted by: W3School</p>` `<p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>` `</footer>`	1. The footer usually contains the author of the document, copyright information, links to terms of use, contact information, and so on.
`<nav>`	Defining navigation links	IE 8 and earlier versions are not supported	There is no	`<nav>` `<a href="index.asp">Home</a>` `<a href="html5_meter.asp">Previous</a>` `<a href="html5_noscript.asp">Next</a>` `</nav>`	1. Nav is a semantic label. 2. If there is a “before and after” button in the document, it should be placed in`<nav>`Element.
`<section>`	Define sections, such as sections, headers, footers, or other parts of a document	All	`cite`: the URL of the section, if the section is from the Web.	There is no	1. `<section>`Commonly used containers, such as chapters, should contain headings, etc. And 2.`<div>`Is a label that is used exclusively as a container.
`<article>`	Define articles from forum posts, newspaper articles, blog entries, user reviews, etc.	IE 8 and earlier versions are not supported	There is no	There is no	1. An article should have meaning in its own right, and it should be possible to distribute it independently of the rest of the site.
`<aside>`	Define content beyond the content of the page	IE 8 and earlier versions are not supported	There is no	There is no	1. Aside should be related to nearby content. 2. `<aside>`Can be used as a sidebar to the article.
`<dialog>`	Define a dialog box or window	All	open: Defines whether to display a window.	`<dialog open>`The contents of the dialog window`</dialog>`	1. After testing, the dialog box is suspended above the page, and has no impact on the original page. 2. Add some input boxes and buttons to the dialog to create the dialog.
`<details>`	Define the details of a document or part of a document	All	open: Defines whether the details are expanded. Not expanded by default.	`<details open>` `<summary>Copyright 2011.</summary>` `<p>All pages and graphics on this web site are the property of W3School.</p>` `</details>`	There is no
`<summary>`	for`<details>`The element defines the visible title	All	There is no	There is no	1. The “summary” element should belong to the “Details” element`The first one`Child elements.

7.5 Image Labels (6)

Image labels include:

Common image labels 3:<img />.<map>.<area />

H5 Added 3 image labels:<canvas>.<figure>.<figcaption>

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<img />`	Define the image	All	1. SRC (must): Specifies the URL to display the image. 2. Alt (must): Specifies the alternative text for the image. 3. height: Defines the height of the image. 4. width: Sets the width of the image. 5. usemap: defines the image asThe customer is endImage mapping. An image map is an image with a clickable region. Attribute values for: #mapname or #mapid. Need to cooperate`<map>`.`<area>`Tags are used together. 6. ismap: defines the image asThe server sideImage mapping. When a server-side image map is clicked, the clicked coordinates are sent to the server as a URL query string. 7. Longdesc: Specifies the URL pointing to the image description page. No browser supports this property.	1. Client image mapping: `<img src="planets.gif" alt="Planets" usemap="#planetmap" />` `<map name="planetmap">` `<area shape="circle" coords="180,139,14" href =" vende.html "Alt ="Venus" />` `<area shape="circle" coords="129,161,10" href ="mercur.html" Alt ="Mercury" />` `<area shape="rect" coords="0,0,110,260" href ="sun.html" Alt ="sun "/>` `</map>` 2. Server-side image mapping: `<a href="demo_form.asp">` `<img src="tulip.gif" ismap />` `</a>`	1. usemapProperties and`<map>`Element with the name or ID attribute to establish`<img />` 与 `<map>`The relationship between. Eliminates server-side processing of mouse coordinates and the resulting network latency. 2. Only when`<img />`The element belongs to one with a valid href attribute`<a>`Descendants of the element are only allowedismapProperties. 3. `<img />`It is an empty label.
`<map>`	Define client image maps	All	1. Id (required attribute): Defines a unique name for the map label. 2. name: the corresponding`<img />`Value of the USEMAP attribute.	There is no	1. `<img />`The USEMAP property in is referable`<map>`In the id or name attribute (depending on the browser), so we should both`<map>`Add the ID and name attributes.
`<area />`	Defining graphic maps (`<map>`) the inner region	All	1. Alt (must): Defines the replacement text for this area. 2. shape: Defines the shape of the region. 3. coords: Defines the coordinates of clickable regions (mouse-sensitive regions). 4. href: Defines the destination URL for this zone. If there is no target, the noherf attribute is defined. 5. nohref: Indicates that there is no related link in this area. Attribute values foritself. 6. target: Specifies where to open the target URL specified by the href attribute. The value of the commonly used: _self: Default, same framework _top: In the entire window _blank: New window _parent: The parent frame is concentrated framename: in the specified frame Related instructions: shape 和 coordsMatching format: 1. circular: shape =”circle“, coords =”x,y,r“ 2. rectangular: shape =”rect“, coords =”x1,y1,x2,y2“, (x1,y1) and (x2,y2) are the coordinates of the two diagonal vertices of the rectangle respectively 3. polygon: shape =”poly“, coords =”x1,y1,x2,y2,x3,y3,…”	There is no	1. `<area />`Always nested in`<map>`Internal. 2. `<area />`It is an empty label.

H5 feature:

The label	role	Browser compatibility	attribute	The sample	instructions
`<canvas>`	Define graphics, such as charts and other images.	IE 8 and earlier versions are not supported	1. height: Sets the canvas height. The default is 150. 2. width: Sets the canvas width. Default: 300.	Draw a simple red rectangle: `<canvas id="myCanvas"></canvas>` `<script type="text/javascript">` `var canvas = document.getElementById('myCanvas');` `var ctx = canvas.getContext('2d');` `ctx.fillStyle = '#FF0000';` `,0,80,100 CTX. FillRect (0);` `</script>`	1. `<canvas>`Labels are just graphical containers and must be usedJavaScriptTo draw a graph. 2. `<canvas>`It has no behavior of its own, but presents a drawing API to the client JavaScript so that the script can draw everything it wants to draw onto a canvas. 3. Differences between Canvas, SVG and VML:`<canvas>`There is a javasjavascript based drawing API, whereas SVG and VML use an XML document to describe drawing. SVG drawings are easy to edit by simply removing elements from their description. But from one of the same shapes`<canvas>`Removing an element from a tag often requires erasing the drawing and redrawing it. 4. The drawing method: Most Canvas drawing apis are not defined in`<canvas>`The element itself, but the definition is passedCanvas object 的 getContext(‘2d’)Method“Drawing Environment”objectCanvasRenderingContext2DOn. Then use various attributes of the drawing environment, such asfillStyleAnd so on. Mozilla provides:Canvas Tutorial (Chinese) Canvas technology details:HTML Details – Canvas Detailspost 5. Canvas API does not drawThe textProvide any support. You want to add text to one`<canvas>`Graph, or draw it yourself and use it againBitmap imagesMerge it, or in`<canvas>`Use CSS positioning at the top to overlay THE HTML text. 6. For performance reasons, it is not recommended to use it too much.
`<figure>`	Define separate stream content (images, charts, photos, code, and so on)	IE 8 and earlier versions are not supported	There is no	`<figure>` `</ figure Caption >` `<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />` `</figure>`	1. Note:`<figure>`The content of the tag should be related to the main content, but if it is deleted, thenDocument flow should not be affected. 2. `<figure>`There will be margins around the label, generatedShow surprise effect. 3. Please use`<figcaption>` 为 `<figure>`Add a title.
`<figcaption>`	define`<figure>`Tag title	IE 8 and earlier versions are not supported	There is no	There is no	1. `<figcaption>`Tags should be placed`<figure>`In the labelThe first one 或 The last oneThe position of the child element.

7.6 Link Label (one)

Link tag:

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<a>`	Defining hyperlinks	All	1. `href`: Specifies the URL of the page to which the link is directed. Attribute values include`Fragment identifier` 和 `JavaScript code`. 2. `target`: Specifies where to open linked documents. Common values: _self: Default, same framework _top: In the entire window _blank: New window _parent: The parent frame is concentrated framename: in the specified frame 3. `rel`: Specifies the relationship between the current document and the linked document. Not much. 4. `Download H5 new properties, focus`: Specifies the destination of the hyperlink being downloaded. Sets a value to specify which file to download`The name of the`. There is no limit to the value allowed, and the browser will automatically detect the correct file extension and add it to the file. `Only Firefox and Chrome support the Download attribute.` 5. `Media H5 New properties`: Specifies which media/device the linked document is optimized for. Attribute values: `screen`(Computer screen, default) `print`(Print preview mode) `all`(Suitable for all equipment) `handheld`Handheld devices, small screens, limited bandwidth`Handheld is supported only by Opera`) etc. 6. `Type H5 new property`: Specifies the MIME type of the linked document. 7. `hreflang`: Specifies the language of the Chinese text of the linked document.`Few major browsers support the Hreflang attribute.` 8. Global properties:`title`And so on.	Image links: `<a href="http://www.w3school.com.cn/index.html">` `<img src="/i/w3school_logo_white.gif" />` `</a>` Links to download: `<a href="/images/myw3schoolimage.jpg" download="w3logo">` Email link: `<a href="mailto:xxx@yyy">` Media attribute: `<a href="att_a_media.asp? output=print" media="print">` The Media property page for printing is displayed `</a>`	1. On all browsers, the default appearance of links is: `Unvisited links`: underlined and yes`blue`. `Links that have been visited`: underlined and yes`purple`. `Active (mouse over) links`: underlined and yes`red`. `You can modify the default styles using CSS`. 2. If not used`href`Attribute, the following attributes cannot be used:`target`.`download`.`media`As well as`type`Such attributes. 3. In HTML 4.01,`<a>`The tag can be`hyperlinks` 或 `anchor`. in`H5`,`<a>`Tags are always hyperlinks. 4. About href attribute value: a.If the href attribute is not set or the attribute value is`javascript:void(0)`, is only hyperlinked`A placeholder`, no effect. Through the global event attribute`onclick`To add click events. b.If the href property value is`empty`, it means`The refresh`. c.If the property value is`#`, it means`Back to top of page`.

7.7 List, Menu Labels (9)

The list of menu labels includes:

General list, 8 menu labels:<ul>.<ol>.<li>.<dl>.<dt>.<dd>.<menu>.<menuitem>

H5 Add 1 menu label:<command>

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<ul>`	A disorderly`The list of`	All	There is no	There is no	There is no
`<ol>`	The orderly`The list of`	All	1. `type`: Specifies the type of markup to use in the list. The attribute values are: 1, A, A, I, I. 2. `start`: Specifies the starting value of an ordered list. 3. `Reversed H5 new property`: In descending order. Only Chrome and Safari 6 support it.	There is no	There is no
`<li>`	A list of`project`	All	There is no	There is no	There is no
`<dl>`	The custom`The list of`	All	There is no	There is no	There is no
`<dt>`	To customize multiple items in the list`Group name`	All	There is no	There is no	There is no
`<dd>`	In the custom list`project`	All	There is no	There is no	There is no
`<menu>`	defineThe commandThe list orRight-click menu	It is not currently supported by all major browsers (test`Firefox`Support the definitionRight-click menu)	1. `Type H5 new property`: Specifies the menu type.`It is not currently supported by all major browsers.` Attribute values: list: the default. Specify list menus. A list of commands (li elements) that a user can execute or activate. context: Specifies the context menu. The menu must be activated before the user can interact with the command. toolbar: Specifies the toolbar menu. Active commands that allow users to interact with commands immediately. 2. `Label New attribute of H5`: Specifies the visible label of the menu.`It is not currently supported by all major browsers.`	There is no	Deprecated in HTML 4.01`<menu>`Element, redefined in HTML5`<menu>`Elements. 2. Right-click menu needs to cooperate with global properties”contextmenu”.
`<menuitem>`	Define right-click menu items	1. Rely on`<menu>` Only 2.Firefox 8.0 and laterSupport.	1. Global time attributes`onclick`: can be used to define click events for menu items. `H5 new attribute`(The document does not elaborate) : 2. `type`: Specifies the type of command/menu item. Values are`command`(Default),`checkbox`.`radio`. 3. `radiogroup`: Specifies the command group name. This parameter is used only when the type is radio. 4. `checked`: Defines whether to select. Only for radio or checkbox types. 5. `disabled`: Defines whether it is available. 6. `icon`: Specifies the URL of the command/menu item icon. 7. `label`Required: Specifies the name of the command/menu item to display to the user. 8. `default`: Sets the command/menu item as the default command. 9. `open`: Defines whether the Details are visible.	There is no	1.`<menuitem>`These new properties are supposed to simplify native coding for components such as checkboxes and checkboxes.

H5 feature:

The label	role	Browser compatibility	attribute	The sample	instructions
`<command>`	Defines a command button that can be used instead`<menuitem>`	1. Rely on`<menu>`. 2. The documentation says only`IE9`Support.	1. Global time attributes`onclick`: can be used to define command click events. 2. `type`: Defines the type of the command`command`(Default),`checkbox`.`radio`. 3. `radiogroup`: Defines the name of the group to which command belongs. This parameter is used only when the type is radio. 4. `checked`: Defines whether to select. Only for radio or checkbox types. 5. `disabled`: Defines whether command is available. 6. `icon`: Defines the URL of the image to display as command. 7. `label`: Defines the visible label, the text content to display, for command.	There is no	1. `<command>`Is supposed to simplify checkboxes, checkboxes, etc`component`Native code writing.

7.8 Form Labels (10)

Form labels include:

General form labels 7:<table>.<caption>.<tr>.<th>.<td>.<col />.<colgroup>

Semantic table labels 3:<thead>.<tbody>.<tfoot>

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<table>`	Define the form	All	For practical purposes, the following six properties are best replaced with CSS styles: 1. `border`: Specifies the width of the table border. 2. `width`: Specifies the table width. If the width property is not set, the table takes up as much space as it needs to display the table data. 3. `cellpadding`: Specifies the space between the edge of a cell and its contents. 4. `cellspacing`: Specifies the space between cells. 5. `rules`: Specifies which part of the inner border is visible. Attribute value is slight, poor compatibility and inconsistent display effect. 6. `frame`: Specifies which part of the outer border is visible. Attribute value is omitted,`IE does not support`. `Consider screen readers that can take advantage of this property:` 7. `summary`: Summary of specified forms.	`<table border="1">` `<tr>` `<th>Month</th>` `<th>Savings</th>` `</tr>` `<tr>` `<td>January</td>` `<td>$100</td>` `</tr>` `</table>`	1. `simple`The HTML table consists of one or more table elements as well`tr`,`th` 或 `td`Element composition. 2. `complex`HTML tables may also be included`caption`Elements.
`<caption>`	Defining table titles	All	There is no	There is no	1. Caption tag must follow table tag. You can define only one title per table. Usually this heading will be centered above the table.
`<tr>`	line	All	1. `align`: Defines the alignment of table rows. Common attribute values: Right, left, center, justify, char. Pay attention to: a.IE does not properly process “justify” values and does so in the middle. b.No browser supports recognizing the “char” value. 2. `char`The: property specifies how to align the contents of a table row with respect to a character. The char attribute can only be used when the align attribute is set to “char”.`Few browsers support the char attribute.` 3. `valign`: Specifies the vertical alignment of the contents of the table rows. Common attribute values: top, middle, bottom, baseline 4. `charoff`: Specifies the offset of the first aligned character.`Few browsers support the charoff attribute.`	There is no	There is no
`<th>`	In the line`Table header cell`	All	1. `colspan`: Number of merged columns. 2. `rowspan`: Number of merged rows. Align, Valign, et al.	There is no	There is no
`<td>`	In the line`Standard cell`	All	1. `colspan`: Number of merged columns. 2. `rowspan`: Number of merged rows. Align, Valign, et al.	There is no	There is no
`<col />`	Define one or more of the tables`column`The attribute value	All	1. Including`<th>`.`<td>`Can be set uniformly. 2. `span`: rules`<col />`The number of columns that should span. The default value is 1.	There is no	1. Please`<col />`Tag adds the class attribute. This allows you to use CSS to take care of alignment, width, color, and so on. 2. If you want to stay`<colgroup>`Use this element when internally specifying different attribute values for each column. If there is no`<col />`, can from the column`<colgroup>`That’s where all the property values are inherited. 3. After testing, browsers do not support Settings`align`Properties.
`<colgroup>`	Defines what is in the table for formatting`Column group`	All	1. Including`<th>`.`<tr>`Can be set uniformly. 2. `span`: rules`<colgroup >`The number of columns that should span.	There is no	with`<col />`
`<thead>`	Define the table`Content of the header`	All browsers`Part of the`support	Align, Valign, etc.	There is no	1. Semantic preference:`thead`,`tfoot`As well as`tbody`Element allows you to`Have the ability to`Group the rows in the table. When you create a table, you might want to have a header row, some rows with data, and a total row at the bottom. This partitioning gives the browser the ability to support scrolling of the body of the table independent of the table title and footer. When a long table is printed, the table header and footer of the table can be printed on each page containing table data. 2. `<thead>`,`<tbody>`As well as`<tfoot>`Rarely used because of poor browser support.
`<tbody>`	Define the table`The main content`	All browsers`Part of the`support	Align, Valign, etc.	There is no	with`<thead>`
`<tfoot>`	Define the table`Table Note Content (footnote)`	All browsers`Part of the`support	Align, Valign, etc.	There is no	with`<thead>`

7.9 Form Labels (13)

Form tags include:

10 common form labels:<form>.<fieldset>.<legend>.<label>.<input />.<textarea>.<select>.<optgroup>.<option>.<button>

H5 Added 3 form labels:<datalist>.<output>.<keygen>

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<form>`	Defines an HTML form for user input to transfer data to the server	All	1. `action`: Destination URL for data submission. 2. `method`: Specifies the HTTP method used to send form-data. Commonly used values include GET and POST. 3. `name`: specifies the name of the form and provides a way to reference the form in a script. 4. `target`: Specifies where to open the action URL. `This applies to all links or jumps in the page.` Common values: _self: Default, same framework _top: In the entire window _blank: New window _parent: The parent frame is concentrated framename: in the specified frame 5. `enctype`: specifies how to encode form data before sending it. Possible values: a. `application/x-www-form-urlencoded`: Encodes all characters before sending (default) b. `multipart/form-data`: Does not encode characters.`You must use this value when using forms that contain file upload controls`. c. `text/plain`: Spaces are converted to “+” plus signs, but no special character encoding. 6. `accept-charset`: Specifies the form data character set that the server can process. To specify more than one character set, separate the character sets with commas. Common values: `UTF-8`: Unicode character code `ISO-8859-1`: Character code of the Latin alphabet 7. `Autocomplete H5 new property`: Specifies whether to enable auto-complete for forms. Property values include: on (enabled by default), off. 8. `Novalidate H5 new attribute`: If this property is used, the form is submitted without validation. The value of “novalidate”.	There is no	1. The following`<input>`Type: text, search, URL, telephone, email, password, datepickers, Range and color, properties`formaction`. `formmethod`.`formtarget`.`formenctype`. `formnovalidate`You can override`<form>` 中 Corresponding properties. 2. The form element is`Block-level elements`, there will be folds before and after.
`<fieldset>`	The definition is used around the border of the element in the form, including the Legend element	All	There is no	There is no	1. There will be special styles.
`<legend>`	Define the title of the Fieldset element	All	There is no	There is no	1. Not required in fieldSet.
`<label>`	Defines an annotation for an input element that activates the input control	All	1. `for`: specifies which form element label is bound to`id`. 2. `Form H5 new property`: specifies one or more forms to which the label field belongs`id`.	There is no	There is no
`<input />`	Defining input controls	All	The properties are summarized in the following section.	There is no	There is no
`<textarea>`	Defines a multi-line text input control	All	1. `cols`: Specifies the visible width of the text area`Number of characters`Meter). 2. `rows`: Specifies the height of visibility in the text area`The number of rows`Meter). 3. `name`: Specifies the name of the text area. Used to reference form data after the form is submitted. Or to reference elements in JavaScript. 4. `readonly`: Specifies that the text area is read-only. 5. `disabled`: Disables the text area. H5 new attribute: 6. `wrap`: Specifies when in the form`submit`How the text in the text area is wrapped. Attribute values include: a. `soft`Text in a textarea is not wrapped when submitted in a form. The default value. b. `hard`: Text wrap. When “hard” is used, it must be specified`cols`Properties. 7. `placeholder`: Default prompt for filling in an input field. `IE 9 and earlier versions are not supported.` 8. `maxlength`: Specifies the maximum number of characters in a text area. `IE 9 and earlier versions are not supported.` 9. `required`: Specifies that the text field is mandatory. `Internet Explorer and Safari are not supported.` 10. `autofocus`: The text area automatically gets focus after the page loads. `IE 9 and earlier versions are not supported.` 11. `form`: Specifies one or more forms to which a text area belongs. Attribute value is the ID of the form. `Internet Explorer does not support it.`	There is no	1. A text area can hold an unlimited amount of text, and the default font for the text is a monospaced font (usually Courier). 2. You can specify the size of a textarea using the COLs and Rows attributes, but it is better to use the CSS height and width attributes. 3. In the text input area between the lines, use “%0D%0A” (enter/line feed, here is`URL character encoding`) to separate.
`<select>`	Defining a selection list	All	1. `multiple`: Specifies that multiple options can be selected. Default option. 2. `name`: Specifies the name of the drop-down list. 3. `disabled`: Disables the drop-down list. 4. `size`: Controls the number of options visible in the foreground. Default is 1. 5. `New autofocus H5 properties`: Specifies that the text area automatically gets focus after the page loads. 6. `Required H5 new property`: Stipulation is mandatory. 7. `Form H5 new property`: Specifies one or more forms to which a text area belongs. Attribute value is the ID of the form.	`<select>` `<optgroup label="Swedish Cars">` `<option value ="volvo" se>Volvo</option>` `<option value ="saab" selected="selected">Saab</option>` `</optgroup>` `</select>`	There is no
`<optgroup>`	Group options in the selection list	All	1. `Label Indicates a required attribute`: Option group description.	There is no	There is no
`<option>`	Option, used in datalist, Select, optGroup, etc	All	1. `value`: Defines the option value to be sent to the server or the text to be displayed in the datalist drop-down. 2. `label`: Displays the text of the project.`However, you usually place text directly inside the tag`. Only IE 7 or later is supported. 3. `selected`: Specifies that the option is selected when it is first loaded. `similar` inputRadio of type checkbox`checked`Properties. 4. `disabled`: specifies that this option should be disabled at first load.	There is no	1. `<option>`The label`not`Empty elements.
`<button>`	Define the button	All	slightly	There is no	1. `It is recommended to use input elements to create buttons`.

H5 feature:

The label	role	Browser compatibility	attribute	The sample	instructions
`<datalist>`	Defines the input history drop-down list to use with input and option	Not currently supported except for IE and Safari (test,`The latest IE`Support datalist tag)	`id`: Bind the datalist ID with the list attribute of the input element.	`<input id="myCar" list="cars" />` `<datalist id="cars">` `<option value="BMW"></option>` `<option value="Ford"></option>` `<option value="Volvo"></option>` `</datalist>`	1. If the form auto-completes properties`autocomplete`Not closed, then in`IE`In, the history will be replaced by the datalist content. in`chrome`In, the history content is placed separately after the datalist content. 2. As with select list,`datalist`And its`options`Not at the front desk`directly`It is simply a list of valid input values.
`<output>`	Define different types of output, such as the output of scripts. Cooperate with`<input>`Tag is used with the onInput event attribute of the form. See an example	IE8 and previous versions are currently available`Does not support`	1. `name`: Defines the unique name of the object (used for form submission). 2. `for`: specifies the list of elements to be used in the calculation result. Attribute value is a list of ids of one or more elements. Separated by Spaces. 3. `form`: Defines one or more forms to which input fields belong. Attribute value is the ID of the form.	`<form oninput="x.value=` `parseInt(a.value)+parseInt(b.value)">` `0<input type="range" id="a" value="50">100` `+<input type="number" id="b" value="50">` `=<output id="x" for="a b" ></output>` `</form>`	There is no
`<keygen>`	Specified for use on forms`The key to`Generator field. `When the form is submitted, the private key is stored locally and the public key is sent to the server.`	IE and Safari for now`Does not support`	1. `name`: Defines the unique name of the keygen element. Used to collect the value of the field when submitting the form. 2. `keytype`: Defines the encryption type. Property values are”rsa“And so on. 3. `challenge`: If used, the value of keygen is set to be queried at commit time. The property value is “challenge”. 4. `autofocus`: Gets focus when loading. 5. `disabled`: Disables the KeyTag field. 6. `form`: Defines one or more forms to which the KeyGen field belongs.	There is no	Use it to generalize.

7.9.1 Input Label Attributes (29)

Input tag attributes include:

Ordinary input tag attributes 11:type.value.name.size.maxlength.readonly.disabled.checked.src.alt.accept

H5 Added 18 input tag attributes:autocomplete.autofocus.list.placeholder.required.step.min.max.multiple.pattern.height.width.form.formaction.formmethod.formtarget.formenctype.formnovalidate

Normal INPUT tag attributes:

attribute	role	Attribute values	instructions	The sample
1.`type`	Specifies the type of the input element	`text`: a single-line text box.	1. The default width is 20 characters.	There is no
	`password`: Single-line password box.	1. The characters in the field are deletedmask.	There is no
	`hidden`: Hidden input field.	1. Hidden fields usually store a default value, and their value can also be modified by JavaScript.	`<input type="hidden" name="country" value="China" />`
	`button`: Clickable button.	1. In most cases, used to launch scripts through JavaScript.	`<input type="button" value="Click me" onclick="msg()" />`
	`submit`: Submit button.	There is no	There is no
	`reset`: Reset button.	There is no	There is no
	`image`: submit button in image form.	1. Must have`src`Properties and`alt`Properties and`<input type="image">`Use in combination.	`<input type="image" src="/i/eg_submit.jpg" alt="Submit" />`
	`file`: File browse button.	1. Upload files.	`<input type="file" name="pic" accept="image/gif" />`
	`radio`: Radio button	There is no	There is no
	`checkbox`: Check button.	1. `The radio button` 或 `Check button`The same group`name`The attributes must be the same.	`<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />` `<input type="checkbox" name="vehicle" value="Car" /> I have a car<br />` `<input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane<br />`
	Other H5 input types include: `number`.`range`.`color`. `email`.`search`.`tel`. `url`.`month`.`week`. `date`.`time`.`datetime`. `datetime-local`.	1. Input types that are not supported by older Web browsers are regarded as input types`text`.	Numbers (provides quick up and down controls) : `<input type="number" name="points" min="0" max="100" step="10" value="30">` Digital selection slider: `<input type="range" name="points" min="0" max="10">` Color: `<input type="color" name="favcolor">` Email: `<input type="email" name="email">` Search: `<input type="search" name="googlesearch">` Telephone No. : `<input type="tel" name="usrtel">` Url: `<input type="url" name="homepage">` Month: `<input type="month" name="bdaymonth">` Weeks and years: `<input type="week" name="week_year">` Date: `<input type="date" name="bday" min="2000-01-02">` Time: `<input type="time" name="usr_time">` Date and time (sometimes) : `<input type="datetime" name="bdaytime">` Date time (no time zone) : `<input type="datetime-local" name="bdaytime">`
2.`value`	Specifies the value of the input element	for`text`.`password`.`hidden`: Defines the initial value of the input field.	1. The value attribute can be used differently for different input types. 2. The value attribute cannot be matched`<input type="file">`Use together.	There is no
	for`button`.`submit`.`reset`: Defines the text to display on the button.	There is no	There is no
	for`radio`.`checkbox`.`image`: Defines the text associated with the button.	There is no	There is no
3.`name`	Define the name of the input element	The text	1. : a.Used to identify form data after submission to the server. b.Reference form data via JavaScript on the client side. 2. Only form elements with the name attribute can pass their value when submitting the form.	There is no
4.`size`	Define the width of the input field	for`text`.`password`: What is defined is visible`Number of characters`.	1. Since the size attribute is a`Visual design properties`, we recommend that you use CSS instead.	There is no
	For other types: Is defined by`pixel`Is the unit of input`The field width`.	There is no	There is no
5.`maxlength`	In the specified input field`The maximum number of characters`	digital	There is no	1. The maxLength attribute and`<input type="text">` 或 `<input type="password">`Use together.
6.`readonly`	Specifies that the input field is read-only	“Readonly”	1. The readonly property prevents the user from modifying the value until certain conditions (such as a check box being selected) are met. You then need to use JavaScript to remove the readonly value and switch the input field to an editable state. 2. The readonly property is available`<input type="text">` 或 `<input type="password">`Use together.	`<input readonly="readonly">`
7.`disabled`	Disable the input element when it loads	“disabled”	1. The disabled input element is neither available nor clickable. You can set the Disabled property until some other condition is met (such as selecting a check box, and so on). You then need to use JavaScript to remove the disabled value and switch the value of the input element to available. 2. The disabled attribute cannot be matched`<input type="hidden">`Use together.	`<input disabled="disabled">`
8.`checked`	Specifies that this input element should be selected when it is first loaded	“checked”	1. The checked properties can also be set by JavaScript code after the page loads. 2. I checked my name`<input type="radio">` 或 `<input type="checkbox">`Use together.	`<input checked="checked">`
9.`src`	Defines the URL of the image to display as a submit button	URL	1. The SRC attribute can be used only with`<input type="image">`Use together.	There is no
10.`alt`	Defines alternative text for image input	The text	1. The Alt attribute can be used only with`<input type="image">`Use together. It specifies alternative text for image input.	There is no
11.`accept`	Specifies the type of document to be submitted via file transfer.	MIME_type:`image/gif`.`image/jpeg`And so on. If the format of the image is not restricted, it can be written as:`accept="image/*"`.	1. `Avoid using this property. File uploads should be verified on the server side.` 2. The Accept attribute can only be matched with`<input type="file">`Use together. It specifies the types of files that can be submitted through file uploads.	`<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />`

H5 Added input tag attributes:

attribute	role	Attribute values	instructions	The sample
1.`autocomplete`	Specifies whether to use auto-complete for input fields. `It can also be configured in a form`	On (enabled by default), off	There is no	`<input type="email" name="email" autocomplete="off" />`
2.`autofocus`	Specifies whether the input field gets focus when the page loads	“autofocus”	1. Does not apply to type=”hidden”.	`<input type="text" name="fname" autofocus="autofocus" />`
3.`list`	Reference to a predefined option that contains an input field`<datalist>`	`<datalist>`The id of the	1. See above`<datalist>`The label.	There is no
4.`placeholder`	Default prompt for filling in input fields	The text	1. The prompt will be displayed when the input field is empty and will disappear when the field gains focus.	`<input type="search" name="user_search" placeholder="Search W3School" />`
5.`required`	Indicates that the value of the input field is required	“required”	There is no	`<input type="text" name="usr_name" required="required" />`
6.`step`	`Digital input control`And set the interval	number	1. The step attribute can be used in conjunction with the Max and min attributes to create a range of valid values. 2. `step`.`max` 和 `min`Attributes apply to the following input types: Number, range, date, datetime, datetime-local, month, time, week.	`<input type="number" name="points" step="3" />`
7.`min`	Specifies the minimum value for an input number, date, etc	The number or the date	1. The min attribute is used together with the Max attribute to create a valid value range.	`<input type="number" name="points" min="0" max="10" />`
8.`max`	Specifies the maximum value for input numbers, dates, etc
9.`multiple`	If used, file and email are allowed to have more than one value	“multiple”	1. Multiple attributes are used with the following input types: email and File.	`<input type="file" name="img" multiple="multiple" />`
10.`pattern`	The value of the field`Regular expression`formatting	For example,`pattern="[0-9]"`Indicates that the input value must be a number between 0 and 9.	1. The pattern attribute applies to the following input types: Text, search, URL, telephone, email, password. 2. `Use the standard "title" attribute to describe the schema`.	`<input type="text" name="country_code" pattern="[a-z]{3}" title=" 3-letter country code" />`
11.`height`	Define the height of type=”image”	In pixels or percentages	1. The height attribute only applies`<input type="image">`, which specifies the height of the image input.	`<input type="image" src="img_submit.gif" alt="Submit" width="128" height="128"/>`
12.`width`	Define the width of type=”image”	In pixels or percentages
13.`form`	Specifies one or more forms to which an input field belongs	The value of the form attribute must be that of the form to which it belongs`id`.	`<input type="text" name="lname" form="idform1,idform2" />`
14.`formaction`	Override the action property of the form	URL	1. Apply to submit button: Type = “submit” and type = “image” 2. It overrides the action property in the form.	`<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />`
15.`formmethod`	Overrides the method property of the form	The get and post	1. Apply to submit button: Type = “submit” and type = “image” 2. It overrides the Method property in the form.	`<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />`
16.`formtarget`	Overrides the target attribute of the form	Common values: _self: Default, same framework _top: In the entire window _blank: New window _parent: The parent frame is concentrated framename: in the specified frame	1. Apply to submit button: Type = “submit” and type = “image”	There is no
17.`formenctype`	Overrides the encType property of the form	The property values are shown in the encType property in the form above	1. Apply to submit button: Type = “submit” and type = “image” 2. It overrides the encType property in the form.	`<input type="submit" formenctype="multipart/form-data" value="Submit" />`
18.`formnovalidate`	Specifies whether validation is performed. Overrides the form’s novalidate attribute	“formnovalidate”	1. Applies to the following types of input: Text, search, URL, telephone, email, password, date Pickers, range, color. 2. It overwrites some or all of the forms`global`Novalidate properties. 3. If this property is used, the validation process will not be performed for the item or all of it when the form is submitted.	Verification button: `<input type="submit" value="Submit" />` Do not verify button: `<input type="submit" formnovalidate="formnovalidate" value="Submit" />`

7.9.2 Studies on Regular Expressions (to be added)

Involves setting the input pattern property value.

7.9.3 Research on RSA Encryption and decryption (to be added)

Involves the use of the form class tag .

7.10 Object Embedded Labels (Three)

Object embedded tags include:

Common object embedded label 2:<object>.<param />

H5 Add one object embedded label:<embed />

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<object>`	Define embedded objects to add multimedia to HTML pages	All major browsers`Part of the`Support.	Here the image is used`<img>`, audio and video with H5 audio and video labels, other resources to use`<embed />`Instead. The object tag is not deeply understood.	`<object height="400" width="800" data="/i/horse.mp3"></object>`	1. `<object>`Tags are used to contain objects such as images, audio, video, Java Applets, ActiveX, PDF, and Flash. Originally intended to replace img and applet elements. This didn’t happen due to bugs and a lack of browser support. 2. Browser object support depends on object types. Unfortunately, the major browsers all use different code to load the same object types. Fortunately, object provides a solution. If the object element is not displayed, the location is executed`<object>` 和 `</object>`Between the code. In this way, we can nest multiple Object elements (each corresponding to a browser).
`<param />`	define`<object>`Object	All	slightly	There is no	There is no

H5 feature:

The label	role	Browser compatibility	attribute	The sample	instructions
`<embed />`	Define containers for external applications (non-HTML). Such as plug-in	1. `src`: The URL of the embedded content. 2. `type`: Defines the type of embedded content. Attribute values are: [MIME type]. 3. `width`: Sets the width of the embedded content. 4. `height`: Sets the height of the embedded content.	`<embed height="400" width="800" src="song.mp3" />` `<embed src="/i/helloworld.swf" />` or `<embed src="helloworld.swf" type="application/x-shockwave-flash" />`	1. To replace`<object>`The label.

7.11 Audio and Video Labels (Four H5 Labels added)

Audio and video tags include:

H5 feature:

The label	role	Browser compatibility	attribute	The sample	instructions
`<audio>`	Defining sound content	IE 8 and earlier versions are not supported	1. `src`: The URL of the audio to play. 2. `controls`: Displays the control. 3. `autoplay`: Sets auto play. 4. `loop`: Sets the playback loop. 5. `preload`: Preloading. If “autoplay” is used, this property is ignored. 6. `muted`: Mute the start of playback.	`<audio controls muted>` `<source src="/i/horse.ogg" type="audio/ogg">` `<source src="/i/horse.mp3" type="audio/mpeg">` `Your browser does not support the audio element.` `</audio>`	1. You can place text between the start tag and the end tag so that older browsers can display information that does not support the tag.
`<video>`	Define the video	IE 8 and earlier versions are not supported	In addition to the audio attributes, there are: 1. `poster`: Image URL of the first frame. 2. `width`: Sets the width of the video player. 3. `height`: Sets the height of the video player.	`<video controls muted>` `<source src="movie.mp4" type="video/mp4">` `<source src="movie.ogg" type="video/ogg">` `Your browser does not support the video tag.` `</video>`	There is no
`<source />`	Define media sources. provisions`Replaceable video/audio files`For the browser to view according to it`The media type`or`codecs`Support to select.	IE 8 and earlier versions are not supported	1. `src`: Specifies the URL of the media file. 2. `type`: Specifies the MIME type of the media resource. Attribute values include: Audio: `audio/ogg` `audio/mpeg` Video: `video/ogg` `video/mp4`	There is no	1. `<source />`The role is to providealternativeVideo/audio files of.
`<track>`	Define the video text track	`None of the major browsers support it yet`	There is no	There is no	There is no

7.12 Frame Labels (Four)

Frame tags include: , ,

General:

The label	role	Browser compatibility	attribute	The sample
`<frameset>`	Defining a frameset	1. `cols`: The number of columns in the frameset or the percentage of each column (separated by commas). 2. `rows`: Number of rows in the frame set or percentage of each row (separated by commas).	There is no	1. Not with`<frameset></frameset>`Tag together`<body></body>`The label. However, if you need to add one for browsers that don’t support frames`<noframes>`Label, be sure to place this label in the`<body></body>`In the label.
`<frame>`	The window that defines the frameset	1. `src`: Specifies the URL of the document to display in the frame. 2. `name`: Specifies the name of the framework. Name can be linked`target`Property value. 3. `scrolling`: The scroll bar is displayed in the frame. Attribute value auto, yes, no. 4. `frameborder`: Specifies whether to display the border around the frame. Attribute value 0,1. 5. `marginwidth`: Defines the distance between the frame content and the left and right sides of the frame. 6. `marginheight`: Defines the distance between the frame contents and the upper and lower borders of the frame. 7. `noresize`: Specifies that the frame cannot be resized. Property value “noresize”.	There is no	There is no
`<noframes>`	Define alternative content for users who do not support frameworks	There is no	There is no	There is no
`<iframe>`	Define inline frames	1. `src`: Specifies the URL of the document to display in iframe. 2. `name`: Specifies the name of an IFrame. Name can be linked`target`Property value. 3. `scrolling`: The scroll bar is displayed in the frame. Attribute value auto, yes, no. 4. `frameborder`: Specifies whether to display the border around the frame. Attribute value 0,1. 5. `marginwidth`: Defines the distance between the frame content and the left and right sides of the frame. 6. `marginheight`: Defines the distance between the frame contents and the upper and lower borders of the frame. 7. `width`: Defines the width of the iframe. 8. `height`: Defines the height of iframe. `H5 new attribute`: 9. `srcdoc`: The HTML content written in the iframe is displayed.`Internet Explorer does not support it.` 10. `seamless`: It does`<iframe>`Looks like it contains part of the document (no borders or scroll bars).`Internet Explorer and Firefox are not supported.` 11. `sandbox`: Enables a series of pairs`<iframe>`Additional restrictions on content in. Attribute values:Multiple are separated by Spaces a. `""`: Apply all of the following restrictions unless specified to remove them. b. `allow-same-origin`: allows iframe content to be treated as having the same source as the contained document. c. `allow-top-navigation`: allows iframe content to navigate (load) content from the include document. d. `allow-forms`: Allows form submission. e. `allow-scripts`: Allows script execution.	There is no	1. You can place the required text in the`<iframe>` 和 `</iframe>`This allows you to deal with browsers that don’t understand iframes.

7.12.1 Differences between Frame and IFrame

Frames cannot be used independently of frameset. Iframe can be detached or nested.

A frame cannot be placed in a body. Nested iframes must be placed in the body.

An iframe used alone can be placed arbitrarily.

The height of the frame can only be controlled by the frameset. Iframe can be controlled by itself, not by frameset.

Summary:

Frame is the frame of the entire page, and iframe is the embedded page element, which is more flexible.

7.13 Format Labels (33)

Format labels include:

11 common format labels:<abbr>.<acronym>.<address>.<blockquote>.<q>.<del>.<ins>.<sup>.<sub>.<pre>.<bdo>

H5 Added 9 format labels:<mark>.<meter>.<progress>.<wbr>.<bdi>.<ruby>.<rt>.<rp>.<time>

Semantic phrase format tag 8:<em>.<strong>.<code>.<var>.<kbd>.<cite>.<dfn>.<samp>

Font style format label 5:<b>.<i>.<big>.<small>.<tt>

General:

The label	role	Browser compatibility	attribute	The sample	instructions
`<abbr>`	Define abbreviations	All	1. `title`: Specifies the complete and full name of the abbreviation.	`The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`	There is no
`<acronym>`	Define abbreviations	All	There is no	There is no	1. H5 is not supported`<abbr>`Tag instead.
`<address>`	Define the contact information of the author of a document or article	All	There is no	`<address>` `Written by <a href="mailto:[email protected]">Donald Duck</a>.<br>` `Visit us at:<br>` `Example.com<br>` `Box 564, Disneyland<br>` `USA` `</address>`	1. Text is usually rendered in italics. Most browsers add a fold before and after the Address element. 2. `<address>`Elements are usually included with other information`<footer>`Element.
`<blockquote>`	Defining long references	All	There is no	There is no	1. All text is separated from regular text, often with indentation (increased margins) on the left and right, and sometimes italics. That is, block references have their own space.
`<q>`	Define short references	All	There is no	There is no	1. `<q>`The tag is used for short in-line references. Use if you need to separate long sections (usually shown as indented blocks) from the surrounding content`<blockquote>`The label.
`<del>`	Deleted text	All	There is no	There is no	1. The text is displayed with a hyphen. 2. Please contact`<ins>`Tags are used in conjunction to describe corrections and updates in the document.
`<ins>`	Insert text	All	There is no	There is no	1. Text is underlined.
`<sup>`	Superscript text	All	There is no	There is no	There is no
`<sub>`	The subscript text	All	There is no	There is no	There is no
`<pre>`	Defines preformatted text	All	There is no	There is no	1. Text usually contains Spaces and newlines. Text is rendered in a monospaced font.
`<bdo>`	Override default`The text direction`	All	1. `dir`: Specifies the text direction of the text within the BDI element. The attribute values are: `ltr`(Left to right) `rtl`(Right to left)	There is no	There is no

H5 feature:

The label	role	Browser compatibility	attribute	The sample	instructions
`<mark>`	Marked text	IE 8 and earlier versions are not supported	There is no	There is no	1. The text is displayed on a yellow background.
`<meter>`	Of the measures within the specified range`graphical`	Internet Explorer is not supported	There is no	`<meter value="3" min="0" max="10">3/10</meter>` `The < meter value = "0.6" > 60% < / meter >`	1. If the Meter tag is not supported, the text inside will be displayed.
`<progress>`	task-schedule`graphical`	IE9 and earlier versions are not supported	1. `value`: How many tasks have been completed. 2. `max`: How much work will it take?	`<progress value="22" max="100"></progress>`	1. If no attributes are added, the default style is a jiggle effect. 2. `<progress>`Labels are not suitable for measurements (for example, disk space usage or query results). To indicate weights and measures, use`<meter>`Tag instead.
`<wbr>`	Text or words included by WBR are not broken on line breaks.	IE does not support	There is no	There is no	1. Association, different from`<textarea>`H5 new property WBR in (specifies how the text in the text area should wrap when the form is submitted)
`<bdi>`	Sets a paragraph of text so that`Detach from its parent`. You can also set the text direction	Only Firefox and Chrome support it	1. `dir`: Specifies the text direction of the text within the BDI element. The attribute values are: a. `auto`(the default) b. `ltr`(Left to right) c.`rtl`(Right to left)	There is no	There is no
`<ruby>`	Define Ruby annotations.	There is no	There is no	`<ruby>` `Han < rt > ㄏㄢ, go < / rt >` `</ruby>`	There is no
`<rt>`	An explanation for defining Ruby comments appears at the top of the comments.	There is no	There is no	There is no	There is no
`<rp>`	Defines what to display if the browser does not support Ruby elements.	There is no	There is no	There is no	There is no
`<time>`	Define the date/time	It is not currently supported by all major browsers	There is no	`<p> We open at <time>9:00</time> every morning. </p>` `<p> I have an appointment on <time datetime="2008-02-14"> Valentine's Day. </p>`	1. `<time>`The tag does not render any special effects in any browser.

Semantic phrase format tags:

Phrase elements	define	According to the effect
`<em>`	Let’s define the text as`Emphasis on`The content of the	`italics`
`<strong>`	Define text as mood`Stronger emphasis`The content of the	`The bold`
`<code>`	define`Computer code`The text	`Monospaced font`
`<var>`	define`variable`. You can associate this label with`<pre>` 及 `<code>`Combination of labels	`italics`
`<kbd>`	define`Keyboard text`	`Monospaced font`
`<cite>`	define`reference`	`italics`
`<dfn>`	Mark those pairs`Special terms` 或 `The phrase`The definition of	`italics`
`<samp>`	define`Sample text`	`The normal display`

Font style format tag:

Font style element	According to the effect
`<b>`	`The bold`
`<i>`	`italics`
`<big>`	`large`
`<small>`	`The trumpet`
`<tt>`	`width`

Responsive Web design

Responsive Web design: RWD, Responsive Web Design

The characteristics of: Ability to transfer web pages in variable size. Essential for tablets and mobile devices.

8.1 Various terms related to pixels in mobile terminal development

noun	introduce
`pixel`	Also known as picture elements, is the basic unit of image display. Translation of English`pixel`Pix is an English word`image`The common abbreviation for “picture” with English words`The element`Element, you get Pixel. So “pixel” means “image element”), sometimes called “pixel”`pel`(Picture Element). `Pixels are the foundation of web layout`. A pixel is the smallest area that a computer can display a particular color. When devices are the same size but more densely populated with pixels, the transitions on the screen are more detailed and websites look brighter.
`Equipment pixel`	Also known as the`Physical pixel`. Indicates that the device can control the display`Minimum physical unit`“Refers to the points on a display, the pixels of the device on it from the day the screen is manufactured in a factoryfixed. A device pixel is 1pt`pt`.When DPR = 1, 1px = 1pt. Every CSS declaration and almost all javascript properties are usedCSS pixelSo you never actually use itEquipment pixel. The only exception is`Js properties window.screen.width/height`: Obtains the device pixel, that is, the device’sThe resolution of the.
`Device independent pixel`	DIP.device independent pixel, also known as the`Density-independent pixel` 或 `Logic pixel`. Is for`Web developers`Created, you can think of it as a point in a computer coordinate system that represents a point that can be used by a program`Virtual pixel`, such as`CSS pixel`. This point has no fixed size, the smaller the clearer, and then converted by the relevant system to`Physical pixel`.
`CSS pixel`	Also called`Virtual pixel`, belong to`Device independent pixel`. Refers to the CSS style code used in`Logic pixel`. In the CSS specification, units of length fall into two categories,`Absolute unit`And (absolute)`Relative unit`(relative).`px`Is a`Relative unit`, as opposed to`Equipment pixel`.
`DPR`	Device pixel ratio, also known as pixel zoom ratio. Device pixel ratio = Device pixel/device independent pixel.`Js property window.devicepixelRatio`. whenDPR = 1When (non-retina screen), 1 device-independent pixel equals 1 device pixel, which is simply known as CSS virtual pixel`px`Relative to the screen`Physical pixel`Is a one-to-one relationship.DPR on the desktop is 1. whenDPR = 2For retina display, 1 device-independent pixel equals 2 device pixels, which is simply 1 CSS virtual pixel`1px`I’m going to use both of the screens`Physical pixel`To show that it’s a 1:2 relationship. UI designers follow the phone`Physical pixel`Design draft, cut the diagram is based on it`Device pixel ratio`To conversion`Device independent pixel`(the CSS pixels given to us). For example, the physical pixel of iPhone6 with retina is 750px×1334px. Since the pixel ratio of the device is 2, it is correct to divide all sizes of the design draft by 2 when cutting CSS images`CSS pixel values`.On the mobile end, due to the screen size limitation, the general DPR = 2.
`Retina screen`	The reason why it is called retina screen is that if the PPI/DPI (screen pixel density) is too high on a screen of the same size with the same CSS pixel size design, the retina will not be able to distinguish the pixels on the screen and the picture displayed will be very small. At this point, you must use two physical pixels to represent one CSS pixelamplification, that is, DPR = 2 to achieve the best display effect.`So DPR can also be called pixel scaling ratio.` `Retinal screen`(`DPR high`) The benefit: When you look closely at the screen, the less grainy it is, the finer it looks.`The same goes for screen pixel density PPI/DPI.` `Retina screens are now standard on flagship phones, and Apple is not alone. The 90 HZ refresh rate will also be common in the future.`
`The resolution of the`	Refers to the`The width of the`And on the`highly`The maximum value that can be displayed on`Physical pixels`The number of. Movie knowledge: P is Progressive, which stands for Progressive scan. The picture is scanned line by line from left to right. In general, in a 24-bit BMP original color map,`1 pixel equals 3 bytes (B)`However, a frame in the movie may not be the original color picture of BMP, and the size is uncertain. Resolution in movies: 192 x 144(That’s 144P, or about 30,000 pixels per frame) 320 x 240(240P, or about 80,000 pixels per frame) 480 x 360(That’s 360P, or about 170,000 pixels per frame) 640 x 480(that is, 480 p,`Standard definition`, about 300,000 pixels per frame) 1280 x 720(that is, 720 p,`hd`, about 920,000 pixels per frame) 1920 x 1080(that is, 1080 p,`Full hd`, about 2.1 million pixels per frame) 2560 x 1440(i.e., 2 k,`Ultra-high resolution`, about 3.7 million pixels per frame)) 3840 x 2160(i.e., 4 k,`Close to blu-ray original disk`, about 8.3 million pixels per frame)
`PPI`	Pixels Per InchPixel density refers to the number of pixels a screen has in one inch`Equipment pixel`The unit is`ppi`.`The screen size` 和 `distance`Determines the size of the PPI, and the size of the PPI determines`The resolution of the`The high and low.
`DPI`	dots per inchUsed in the printing field in the vertical or horizontal direction per inch units containedpoint, the unit is`dpi`. and`PPI`The difference is,`PPI`Refers to the pixel density, and`DPI`It refers to resolution, vertical resolution, horizontal resolution.
`The screen size`	This is the diagonal length of the screen. 1 inch = 2.54 cm.
`distance`	Distance between device pixels and device pixels.
`BPP`	`Bits per pixel`, also known as`Color resolution`Or,`Bit depth of the palette`Represents the number of bits per pixel of the picture.

8.2 Viewport in mobile terminal development

Viewport is the area of the browser’s screen where the content of the page is displayed.

The mobile terminal 和 PCViewport differences: On mobile phones,Layout viewportWill not be automatically scaled, but will be on PC (because of PC’sLayout viewport 和 Visual viewportIt’s the same size).

viewport	introduce
`Layout viewport`	Layout ViewPort, a default setting for mobile browsers`<meta />`The viewportViewport element labelDefine a virtualLayout viewportTo solve the early web page display problems on mobile phones. Android, iOS basically set this viewport resolution to`960px`So web pages on a PC can be rendered on a phone, but`The element looks small`Generally, the system can pass by default`Manual zoom`A web page.
Visual viewport	Visual ViewPort, the area of the web site that the user is seeing. The manual scaling operation isVisual viewportBut it will not affectLayout viewport. The scale DPR is inversely related to the size of the visual port: the larger the scale, the fewer CSS pixels are displayed and the smaller the visual port. In general, visual viewports are not that important to developers, until then, if there is a need to see what area the user is looking at, it can be retrieved with JS.
`Ideal viewport` ooooooooo	Ideal viewport for equipment, yes`Ideal viewport size`. By default, mobile devicesDefault layout width 为 `From 768 to 1024 px`While this keeps desktop sites from getting squashed, it’s not ideal, especially for users with small screens, because small sites are better suited on small screens.`Simply put, the default width of the layout viewport is not an ideal width`. 1. The site displayed in the ideal viewport has the ideal width, no need to zoom. 2. However, only use the ideal viewport if the site is a phone (or tablet).

So, the following viewport tag tells the browser that I want to use the ideal viewport. Make the layout viewport width the same as the ideal viewport device-width:

Meta tag added minimal UI attributes to hide the address bar at the top and the navigation bar at the bottom when loading (IOS).

8.3 Obtaining Window Properties using JS

To be added.

8.4 Responsive design scheme

8.4.1 Use CSS float properties directly to make elements automatically adapt

This is the original solution, and it’s a bit of a hassle.

Use the Bootstrap 8.4.2

Bootstrap is a simple, intuitive and powerful front-end development framework that makes Web development faster and easier.

Is an HTML, CSS, and JS framework for developing responsive Web sites that look great on any size, including monitors, laptops, tablets, or mobile phones.

Use it and summarize it.

9 the H5 related

9.1 New Features

HTML5 has new semantic, graphical, and multimedia elements. New elements and new apis are provided to simplify the setup of Web applications.

New semantic elements.

New form controls, such as numbers, dates, times, calendars, and sliders.

Strong graphics support (by<canvas> 和 <svg>)

Powerful multimedia support (by<video> 和 <audio>)

Powerful new APIS, such as theThe local storeReplace the cookie.

9.2 Helping Older Browsers process H5

All modern browsers support HTML5.

All browsers, old and new, automatically treat unrecognized elements asInline elementsTo deal with.Two treatments can be combined:
H5 defines eight new semantic HTML elements, all of them block-level elements. You can set the CSS display property to block to ensure correct behavior in older browsers.
header.section.footer.aside.nav.main.article.figure {
	display: block; 
}
Copy the code
IE 8 and earlier did not allow styling unknown elements. Fortunately, Sjoerd Visscher has created “HTML5 Enabling JavaScript” to introduce SHIv script files.
Shiv script introductions must be in the tag, because IE needs to recognize all new elements before reading them. html

Styling HTML5

9.3 H5 Code Conventions

Naming rules:

useLowercase tag name.Lowercase attribute name.

id 和 classIs also namedlowercase, between multiple wordsA hyphen, you can use a hyphen-Space.

useLowercase file name. Most Web servers (Apache, Unix) are case-sensitive to file names.

Space, indent, comment rules:

Attribute equals sign “=” both sidesDon't add Spaces.

Please use theTwo SpacesIndent. Do not useTab. Because different editors don’t always interpret tabs the same way.

Please use theA blank lineTo separate large or logical blocks of code.

The short comment should be inA singleIn, and in<! --After adding1A space, in-->Before the increase1A blank space.

Long comments, spanningMultiple linesIn the<! -- 和 -->Should be indentedTwo SpacesEasier to observe.

Programming habits and guidelines:

Attribute values are quoted in double quotes.

Close all HTML tags, includingAn empty tag.

Add the required attributes.

Avoid long lines of code.

metadata: To ensure proper interpretation, as well as the correct search engine index, in the documentlanguage 和 A character encodingThe earlier you define, the better.

The stylesheetThe: type attribute is not required.

Short rules can be compressed to 1 line. Long rules should be broken into multiple lines.

The script:The type attribute is not required.

Placing the script at the bottom of the element improves display speed because script compilation slows down the display.

9.4 H5 Canvas，SVG

See the Html – Canvas blog for more details.

9.5 the H5 media

9.5.1 Various media formats

9.5.1.1 Image Format

format	type	instructions
`BMP`	Uncompressed pixel format	1. When stored in a file, there is file header first, then image header, then pixel data, stored upside down. 2. Use Windows Mspaint to save the BMP format. There are four types of BMP to choose from: a. `1 bit/monochrome`: A pixel occupies only one bit, either 0 or 1, so only black and white information can be stored. b. `4/16 colors`Bitmap: 4 bits per pixel, available in 16 colors. c. `8/256 colors`Bitmap: 8 bits per pixel, 256 colors available. d. `24`Bitmap: 24 bits per pixel, with 2^24 colors to choose from, is more than enough for the human eye. Here,`digits`Also known asBits per pixelOr,Color resolutionOr,Bit depth of the palette. 3. Calculate the size:A 5000 x 5000 original 24-bitmap occupies a file size of 71.5MB by 5000 x 5000 x 3 bytes.
`JPEG / JPG`	Lossy compression format	1. Joint Photograhic Experts Group, extension namejpg. 2. Save the pixel information as a file in JPEG and read it out. Some pixel values will change a little.`No transparency`. When saving, there is a quality parameter that can be selected between [0,100]. The larger the parameter, the more fidelity the image will be, but the larger the image will be. In general, 70 or 80 is enough. 3. JPEG is suitable for storing photos taken by the camera. The volume of such images compressed by JPEG is relatively small.
`PNG`	Lossless compression format	1. Can have transparent effect. 2. PNG is suitable for vector and geometric images. Smaller than jpeg. 3. Jpeg and PNG files are to images what ZIP and RAR formats are to ordinary files (compress ordinary files with ZIP and RAR formats). 4. `jpeg`More suitable for storage`Color "clutter"`Photographs taken by,`png`More suitable for storage`Strong geometric feature`Graphics type pictures.
`GIF`	More photos	1. BMP, JPEG, PNG images mentioned above are only availableA frameGIF can be savedMore framesThe image. 2. GIF has a parameter that controls how fast the image changes. You can use this parameter in your program, or you can define one yourself. That’s why GIF images change at different rates when viewed in different programs.
`webp`	A lossy compression format developed by Google	1. Can have transparent effect. 2. Jpeg and PNG equivalent`fit`Google claims it can reduce image sizes by 40 percent.

9.5.1.2 Audio Format

format	file	describe
MP3	`.mp3`.`.mpga`	MP3 files are actually`The MPEG file`The sound section. The MPEG format was originally developed by the Moving Images Expert Group. MP3 is one of the most popular sound formats for music.
OGG (sound)	`.ogg`	It is a new audio compression format, similar to existing music formats such as MP3. But with one difference, it is`Completely free and open` 和 `No patent restrictions`. OGG Vobis has a very outstanding feature, is to support multi-channel.
MIDI	`.mid`.`.midi`	MIDI (Musical Instrument Digital Interface) is a format for electronic music devices such as synthesizers and sound cards. MIDI files do not contain sound, but contain digital music commands that can be played by electronic devices such as sound cards. Because MIDI format only contains instructions, so`MIDI files are extremely small`. The example above is only 23K in size, but it plays for nearly five minutes. MIDI is supported by a wide range of software on a wide range of platforms.`Most popular web browsers support MIDI`.
RealAudio (sound)	`.rm`.`.ram`	The RealAudio format was developed by Real Media for the Internet.`The format also supports video`. This format allows low bandwidth audio streaming (online music, network music). Because it is low bandwidth first, quality often degrades.
Wave	`.wav`	The Wave (Waveform) format was developed by IBM and Microsoft. All computers running Windows and all Web browsers (`In addition to Google Chrome`) all support it.
WMA	`.wma`	WMA format (Windows Media Audio), better quality than MP3, compatible with most players,`In addition to the iPod`. WMA files can be transmitted as a continuous stream of data, making it useful for Internet radio or online music.

Use strategies:

MP3 is the latest compressed recorded music format. The term MP3 has become synonymous with digital music. If your url is engaged in recording music, then MP3 is an option.

Wave is the most popular uncompressed sound format on the Internet and is supported by all popular browsers. If you need uncompressed sound (music or speech), you should use WAVE.

9.5.1.3 Video Format

MP4 format is a new Internet video format that will be popularized soon. HTML5, Flash Player and video sites like Youku all support it.

format	file	describe
Mpeg-4	`.mp4`	Mpeg-4 (with H.264 video compression) is a new format for the Internet. In fact, YouTube recommends using MP4. YouTube accepts multiple formats and then converts them all to.flv or.mp4 for distribution. More and more video publishers are switching to MP4 as a means of using it`Flash player` 和 `HTML5`In the Internet`Sharing format`.
WEBM	`.webm`	Created by Google, is an open, free media file format.
OGG (sound)	`.ogg`	Ogg can be video or audio.Ogg is recommended as an audio file.
Flash	`.swf`.`.flv`	Flash (Shockwave) format was developed by Macromedia. The Shockwave format is required`Additional components`To play. But the component does`pre-installed`Go to a browser like Firefox or Internet Explorer.
MPEG	`.mpg`.`.mpeg`	MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is a`cross-platform`Supported by all the most popular browsers.
RealVideo (sound)	`.rm`.`.ram`	RealVideo format is made up ofReal MediaDeveloped for the Internet. The format allows video streaming under low bandwidth conditions (online video, Internet TV). Because it is`Low bandwidth`Priority, quality is often degraded.
AVI	`.avi`	AVI (Audio Video Interleave) format was developed by Microsoft. All computers running Windows support the AVI format. It’s a very common format on the Internet, but`Non-windows computers are not always able to play`.
WMV	`.wmv`	The Windows Media format was developed by Microsoft. Windows Media is common on the Internet, but if`Windows Media movies cannot be played without an additional (free) component installed`. Some late Windows Media movies won’t play on all non-Windows computers because the proper player isn’t available.
QuickTime	`.mov`	The QuickTime format was developed by Apple. QuickTime is a common format on the Internet, but QuickTime movies are not available on`No additional (free) components are installed on Windows computers for playback`.

9.5.2 Lists of audio and video formats supported by major browsers

Audio: To maximize support for the browsers mentioned below, it is recommended that developers use both MP3 and Ogg Vorbis/Wave formats. Video: To maximize support for the browsers mentioned below, it is recommended to use both MP4 and WebM Video files as source elements.

The browser	List of support for audio	List of supported videos
`Chrome`	`MP3`Ogg Vorbis, WAV, AAC	`MP4`Ogg Theora, WEBM
`IE 9+`	`MP3`, AAC	`MP4`And WEBM (plug-in required)
`Safari`	`MP3`, AAC	`MP4`
`IOS`	`MP3`, AAC	`MP4`
`Android`	`MP3`, AAC	`MP4`And WEBM (Android version 2.3 and above)
`Firefox`	`Ogg Vorbis`, WAVE	`WEBM`, Ogg Theora
`Opera`	`Ogg Vorbis`, WAVE	`WEBM`, Ogg Theora

9.5.3 Best solution for audio and video

When object is used alone, Internet Explorer and FireFox display blank, Chrome and Safari display normal. All displays normal when embed is nested.

9.5.3.1 audio

The following example uses an MP3 file so that it works in IE, Chrome, and Safari. To make the audio work equally well in Firefox and Opera, a file of type OGG has been added. If this fails, the code falls back on the attemptedelement. If it fails, an error message is displayed.

<audio controls="controls" height="100" width="100">
	<source src="song.mp3" type="audio/mp3" />
	<source src="song.ogg" type="audio/ogg" />
	  
	<! -- Object requires Flash support, considered when IE8-
	<object data="movie.mp3" width="320" height="240">
		<! Embed embed requires Flash support, considered when IE8 does not support object.
		<embed src="song.mp3" width="100" height="100" />
	</object>
</audio>
Copy the code

Option 2: Use Yahoo Media Player:

Yahoo Media Player offers your users a small play button rather than a full player. However, when you click the button, the full player pops up.

Note that the player is always parked at the bottom of the window frame. Just click on it and slide it out.

Use of Yahoo Player is free. To use it, you need to insert this JavaScript at the bottom of the page:

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Copy the code

9.5.3.2 video

The H5 video TAB should include at least three video formats, MP4, WebM and OGG, if it is to cover major browsers.

<object width="425" height="344">
	<param name="movie" 
	   	   value="http://player.youku.com/player.php/Type/Folder/Fid/19188186/Ob/1/sid/XNTQ3NDQyMTY4/v.swf"/>
	<param name="allowFullScreen" value="true" />
	<param name="allowScirptaccess" value="always" />

	<embed src="http://player.youku.com/player.php/Type/Folder/Fid/19188186/Ob/1/sid/XNTQ3NDQyMTY4/v.swf"
		   quality="high" width="480" height="400" align="middle" allowScriptAccess="always" 
		   allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash" />
</object>
Copy the code

2. Use video,

<video width="320" height="240" controls="controls">
	<source src="movie.mp4" type="video/mp4" />
	<source src="movie.webm" type="video/webm" />
	<source src="movie.ogg" type="video/ogg" />
	  
	<! -- Object requires Flash support, considered when IE8-
	<object data="movie.mp4" width="320" height="240">
		<! Embed embed requires Flash support, considered when IE8 does not support object.
		<embed src="movie.swf" width="320" height="240" />
	</object>
</video>
Copy the code

Plan three: Youku player

You can upload the video to youku and other video websites, and then insert HTML code into your web page to play the video:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
	   type="application/x-shockwave-flash"
	   width="480" height="400" />
Copy the code

9.6 the H5 drag

See H5 Drag event properties.

9.7 H5 Web storage, application cache, geolocation, Web Workers, SSE

H5 Web storage, application cache, geolocation, Web Workers, SSE these five new features, involving JS content, summarized in the “JavaScript details” blog.

HTML,

1 Reference Materials

2 brief introduction

3 Label Classification

3.1 Single and Double Labels

3.2 Inline labels, block-level labels, and inline block labels

3.3 Semantic Labels (20 in total, 9 of which are added for H5)

4 TAB Browser compatibility description

4.1 Common Browser cores

4.2 Share of common Browsers in the global platform market

4.3 Compatibility Priorities and Handling Principles

5 Layout Mode

5.1 HTML Layout (Implementation direction)

5.2 Web Layout (Design Direction)

6 Global attribute resolution (86 in total, including 58 new ones for H5)

6.1 General global Attributes (16, including 8 new ones for H5)

6.1.1 Function Overview

6.1.2 General global Attributes

6.1.2.1 Right-click menu related properties and labels

6.1.2.2 Custom Attribute Correlation

6.2 Global Event Attributes (70, of which 50 are added for H5)

6.2.1 Function Overview

6.2.2 Description of Global Event Attributes

6.2.2.1 Window event properties

6.2.2.2 Form Event attribute

6.2.2.3 Mouse Event Properties

6.2.2.3.1 Common: Click and move

6.2.2.3.2 H5 Added Drag and scroll bar

6.2.2.3.2.1 Drag Related

6.2.2.3.2.2 about window. Event. DataTransfer (involving the JS, stay)

6.2.2.3.2.3 Solution to the Conflict between a Double-click event and a Click Event

6.2.2.4 Keyboard Keyboard event properties

6.2.2.4.1 Sequence of keyboard events

6.2.2.4.2 Keyboard Listening Example

6.2.2.5 Media Media Event Attributes

7 Tag parsing (110 tags in total, of which 30 are added for H5)

7.1 Basic Labels (7 labels)

7.2 Meta Information Labels (One)

7.3 Styles, Script Labels (4)

7.4 Labels such as Title and Partition (15 labels)

7.5 Image Labels (6)

7.6 Link Label (one)

7.7 List, Menu Labels (9)

7.8 Form Labels (10)

7.9 Form Labels (13)

7.9.1 Input Label Attributes (29)

7.9.2 Studies on Regular Expressions (to be added)

7.9.3 Research on RSA Encryption and decryption (to be added)

7.10 Object Embedded Labels (Three)

7.11 Audio and Video Labels (Four H5 Labels added)

7.12 Frame Labels (Four)

7.12.1 Differences between Frame and IFrame

7.13 Format Labels (33)

Responsive Web design

8.1 Various terms related to pixels in mobile terminal development

8.2 Viewport in mobile terminal development

8.3 Obtaining Window Properties using JS

8.4 Responsive design scheme

8.4.1 Use CSS float properties directly to make elements automatically adapt

Use the Bootstrap 8.4.2

9 the H5 related

9.1 New Features

9.2 Helping Older Browsers process H5

9.3 H5 Code Conventions

9.4 H5 Canvas，SVG

9.5 the H5 media

9.5.1 Various media formats

9.5.1.1 Image Format

9.5.1.2 Audio Format

9.5.1.3 Video Format

9.5.2 Lists of audio and video formats supported by major browsers

9.5.3 Best solution for audio and video

9.5.3.1 audio

9.5.3.2 video

9.6 the H5 drag

9.7 H5 Web storage, application cache, geolocation, Web Workers, SSE

Related Posts

Basic skills — Know Git and Github

2020- My Technology Path: R&D effectiveness and Technology empowerment in Startups

MySQL — Join statement optimization tips