<div id="div1" style="height:900px; background: lightgreen;" contextmenu="menuShare"></div>
<menu id="menuShare"  type="context">
    <menuitem label="分享到QQ空间" onclick="alert('QQ');"></menuitem>
    <menuitem label="分享到朋友圈" onclick="alert('朋友圈');"></menuitem>
    <menuitem label="分享到微博"   onclick="alert('微博');"></menuitem>
</menu>

menu 元素属性：

type ：菜单类型属。有三个值
context ：上下文；
toolbar ：工具栏；
list ：列表

menuitem 属性：

label ：菜单项显示的名称
icon ：在菜单项左侧显示的图标
onclick：点击菜单项触发的事件

2、contentEditable：规定是否可编辑元素的内容

<div contenteditable="true">
    Hello contentEditable
</div>

属性值：

true -----可以编辑元素的内容
false -----无法编辑元素的内容
inherit -----继承父元素的contenteditable属性

3、hidden：属性用于隐藏该元素。一旦使用了此属性，则该元素就不会在浏览器中被显示

<div hidden="hidden">
    Hello Hidden
</div>

为了兼容一些不支持该属性的浏览器（IE8），可以在CSS中加如下样式：

*[hidden]{
    display: none;
}

/*除了hidden属性总共还有3种方法：*/
<span style="visibility: hidden;">span1</span>  /*占位*/
<span style="display: none;">     span2</span>  /*不占位*/
<span hidden="hidden">            span5</span>  /*不占位*/

4、draggable：规定元素是否可拖拽

属性：
auto ： 使用浏览器的默认特性。
true ： 规定元素是可拖动的。
false： 规定元素是不可拖动的。

5、data-*：属性能让用户自定义属性的方式来存储数据

<div id="div1" data-stu-age="100"  data-student='{"name":"tome","age":19}'>学生：Tom</div>
<button onclick="addData()">添加数据</button>
<button onclick="getData()">获取数据</button>

```
<script type="text/javascript">
    var div1=document.getElementById("div1");
    function addData() {
        div1.setAttribute("data-stu-age",101);  //方法1
        div1.dataset.stuAge=102;                //方法2
        $("#div1").data("stuAge",103);          //方法3
    }
    function getData() {
        console.log(div1.getAttribute("data-stu-age"));     //方法1
        console.log(div1.dataset);                          //方法2
        console.log(JSON.parse(div1.dataset.student).age);
        console.log(div1.dataset.stuAge); 
        console.log($("#div1").data("stuAge"));             //方法3
     }
</script>
```

6、form表单

1、表单结构更*：在HTML5中表单完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的id值，即可关联起来。

姓名：<input type="text" name="realname" form="form1"/>
<form id="form1" method="get">
    <button>提交</button>
</form>

2、表单重写属性：（form override attributes）允许您重写 form 元素的某些属性设定。

表单重写属性有

名称	作用	例
formaction	重写表单的 action 属性	按钮可以自定义传输页面【formaction="d01.html"】
formenctype	重写表单的 enctype 属性
formmethod	重写表单的 method 属性	按钮可以自定义传输方法【formmethod="get/post"】
formnovalidate	重写表单的 novalidate 属性
formtarget	重写表单的 target 属性

姓名：<input type="text" name="realname" form="form1"/>
<form id="form1" method="get">
    <button formmethod="get"  formaction="d01.html">get提交给d01.html</button>
    <button formmethod="post" formaction="d02.html">post提交d02.html</button>
</form>

提示属性：title="鼠标悬停时提升的文字"（鼠标悬停时提升的文字）关联属性：for="别的控件中定义ID的名称" (输入需要关联的标签ID名称)

占位属性：placeholder="请输入用户名" （在输入框里面显示提示内容）

必填属性：required （文本框必须填值、否则不可提交）

正则属性：pattern="正则表达式" （pattern="^[0-9a-zA-Z]{6,16}$"）

自动聚焦属性：autofocus

自动补全属性：autocomplete：on/off

禁用属性：disabled

只读属性：readonly(只读文本框)： true false

长度属性：size="初始长度"

选中属性：selected(默认选中项) 【列表】

选中属性：checked (单选按钮选中状态)【单选、复选】

输入的最大字符数：maxlength:type为text或password时，

指定按钮是否被选中：checked:type为radio或checkbox时，

光标定位：autofocus

多选属性：multiple

不验证属性：novalidate、formnovalidate

<form action="demo_form.asp" method="get" novalidate="true">
<button formnovalidate="formnovalidate" >提交</button>

2、contentEditable：规定是否可编辑元素的内容

3、hidden：属性用于隐藏该元素。一旦使用了此属性，则该元素就不会在浏览器中被显示

4、draggable：规定元素是否可拖拽

5、data-*：属性能让用户自定义属性的方式来存储数据

6、form表单

相关推荐