Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )
Foreword
What is the global property?
Global attributes can be applied to any html element
Global attributes and common attributes What is the difference?
Common attributes can be applied to certain html elements, but any elements can be used for global attributes.
Before H5 Global Properties What?
| Attributes | description |
|---|---|
| accesskey | Shortcuts provisions of activation elements |
| class | Specify one or more elements of the class name (class reference to the style sheet) |
| id | The only element of id specified |
| to you | Provisions direction of the text element content |
| only | Language requirements of element content |
| style | Inline CSS styles defined elements |
| tabindex | the tab order specified elements |
| title | Additional information about the elements specified |
These properties are very simple and very common, so will not repeat them.
H5 New Global Properties
| Attributes | description |
|---|---|
| contenteditable | Whether the provisions of element content editable |
| contextmenu | The provisions of the elements of the context menu (context menu displayed when the user clicks on the element) |
| data-* | Private data is used to store custom page or application |
| draggable | Whether the provisions of draggable element |
| dropzone | Specifies whether to copy, move, or link the data being dragged while dragging |
| hidden | Or no longer relevant provisions of the elements yet |
| spellcheck | Whether the provisions of the spelling and grammar checking elements |
| translate | Whether provisions should be translated element content |
(1) contenteditable
This property has two values, true / false, true editable, false and vice versa.
When the true / false is not set, the state is determined inheritance, if the parent element of the element is editable (to true), then the element may also be edited.
Note: This element must be the focus of the mouse can get html element, otherwise it can not be edited.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>contenteditable演示</title>
</head>
<body>
<!-- 创建一个可编辑按钮【可配合JavaScript】 -->
<button contenteditable="true">点击修改</button>
</body>
</html>
(2) contextmenu
predetermined elements context menu when the user right-clicks element defines a menu display.
contextmenu attribute value is the id of the need to open the menu elements.
Note: poor compatibility, only Firefox support.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>contenteditable演示</title>
</head>
<body>
<!-- 创建一个触发元素【可配合JavaScript】-->
<section contextmenu="demo">右键弹出菜单</section>
<!-- 创建菜单(指定id绑定到section元素)-->
<menu type="context" id="demo">
<menuitem label="我是菜单——one"></menuitem>
<menuitem label="我是菜单——two"></menuitem>
<!-- 二级菜单(menu嵌套)-->
<menu label="展开二级菜单">
<menuitem label="我是二级菜单"></menuitem>
</menu>
</menu>
</body>
</html>
