html5添加的新属性,html5有新属性吗

怼烎@ 2022-10-06 09:47 180阅读 0赞

html5有新属性，例contextmenu、contentEditable、hidden、draggable、“data-\*”、placeholder、required、pattern、autofocus、autocomplete等等。

![f3bd2b91361d12fa236c6e5f2b9af38c.png][]

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

HTML5新增属性

1.1、contextmenu

contextmenu的作用是指定右键菜单。

运行效果：

![4c69b7907698c5925519a3468222445b.png][]

contextmenu 在Html5中，每个元素新增了一个属性：contextmenu, contextmenu 是上下文菜单，即鼠标右击元素会出现一个菜单。

menu 要实现鼠标右击元素会出现一个菜单，还必须了解HTML5里新增的另一个元素:menu 顾名思义menu是定义菜单的， menu 元素属性： type ：菜单类型属。 有三个值 1)context：上下文； 2)toolbar：工具栏；3)list：列表

内部可以嵌入一个一个菜单项，即。

menuitem 属性：

label：菜单项显示的名称

icon：在菜单项左侧显示的图标

onclick：点击菜单项触发的事件

1.2、contentEditable

规定是否可编辑元素的内容

属性值：

true -----可以编辑元素的内容

false -----无法编辑元素的内容

inherit -----继承父元素的contenteditable属性

当为空字符串时，效果和true一致。

当一个元素的contenteditable状态为true(contenteditable属性为空字符串，或为true，或为inherit且其父元素状态为true)时，意味着该元素是可编辑的。否则，该元素不可编辑。

document.body.contentEditable=true; 可以修改已发布网站

contentEditable属性

## contentEditable属性 ##

Hello contentEditable

![58caa52cdd5ead830d8c83ec2eceb3ba.png][]

1.3、hidden

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

2个布尔值

true 规定元素是可见。

false 规定元素是不可见。

Hello Hidden

为了兼容一些不支持该属性的浏览器(IE8)，可以在CSS中加如下样式：\*\[hidden\]\{

display: none;

\}var p1=document.querySelector("body \#p1");

p1.innerHTML+=" +++";

1.4、draggable

规定元素是否可拖拽

3个枚举值

true 规定元素是可拖动的。

false 规定元素是不可拖动的。

auto 使用浏览器的默认特性。

示例：

\#p1,

\#p3 \{

height: 200px;

width: 200px;

border: 1px solid \#00f;

margin-bottom: 10px;

\#p2 \{

height: 100px;

width: 100px;

background: yellow;

var p1, p2, p3, msg;

window.onload = function() \{

p1 = document.getElementById("p1");

p2 = document.getElementById("p2");

p3 = document.getElementById("p3");

msg = document.getElementById("msg");

p2.οndragstart=function()\{

msg.innerHTML+="p2开始拖动了  
";

p2.οndrag=function()\{

msg.innerHTML+="拖动中  
";

p2.οndragend=function()\{

msg.innerHTML+="拖动结束  
";

p1.ondragover = function(e) \{

e.preventDefault();

p1.ondrop = function(e) \{

p1.appendChild(p2);

p3.ondragover = function(e) \{

e.preventDefault();

p3.ondrop = function(e) \{

p3.appendChild(p2);

$("\#p1").data("name","电池");

alert($("\#p1").data("name"));

p1.setAttribute("data-order-price",998.7);

alert(p1.getAttribute("data-order-price"));

###  ###

运行结果：

![4e6ce42ff647425a01caa038d2624ef3.png][]

Document

![x.png][]

![tv.png][x.png]

var target; function ondragstartEvent(e)\{

target=e.target; //记住当前被拖动的对象 console.log(e.target);

\} function ondropEvent(e)\{

e.preventDefault();

e.target.appendChild(target);

\} function ondragoverEvent(e)\{

e.preventDefault();

![6da75af2d0502cb39975f4df0b078b67.png][]

1.5、data-\*

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

取值：

getAttribute('data-order-amount')

dataset.orderAmount

jQuery中的data()方法同样可以访问

使用jQuery与javascript添加与获取data属性示例：

data-\*

## data-\* ##

添加数据

获取数据

var p1=document.getElementById("p1"); function addData()

\{ //给p1添加属性data-student-name，值为rose p1.setAttribute("data-student-name","Rose");

$("\#p1").data("stu-mark","99分");

\} function getData()

\{ //原生JavaScript

//alert(p1.getAttribute("data-student-name"));

//jQuery alert($("\#p1").data("student-name"));

alert($("\#p1").data("stu").a);

alert($("\#p1").data("stu-mark"));

var x="\{a:1\}";

alert(eval("("+x+")").a);

运行效果：

![db3978739b4b91e383c9b986a72a1f29.png][]

1.6、placeholder占位属性

这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,除了Firefox,其他标准浏览器都能很好的支持

邮箱：

![f75d2924c754fec5bbfd0f38eb6650d1.png][]

1.7、required必填属性

约束表单元在提交前必须输入值。

博客：

![986420b6743ededa47f11eb364a6adff.png][]

1.8、pattern正则属性

约束用户输入的值必须与正则表达式匹配。

帐号：

请输入a-zA-Z0-9且长度6-16位的字符

![21e310e09f0052e57ca71e4cd9312b95.png][]

1.9、autofocus自动聚焦属性

博客：

让指定的表单元素获得焦点。

![c9b9a9d96a0bf65eda18fdce31bccfea.png][]

1.10、autocomplete自动补全属性

当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入。

![3da4a83f18581b5468e7097f40f7db3f.png][]

该属性默认是打开的。

1.11、novalidate不验证属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

提交

1.12、multiple多选属性

multiple 属性规定输入域中可选择多个内容，如：email 和 file

![de8a515fd7d156ed0cf09f8a0f7c03dc.png][]

HTML5新的表单元素

## HTML5新的表单元素 ##

姓名：

相片：

帐号：

请输入a-zA-Z0-9且长度6-16位的字符

邮箱：

博客：

生日：

身高：

肤色：

体重：

提交

function showValue(val)\{

document.getElementById("rangeValue").innerHTML=val;

推荐教程：html视频教程

[f3bd2b91361d12fa236c6e5f2b9af38c.png]: /images/20221005/de3a8ac3b1cb4171bcac209de0d0d2bd.png
[4c69b7907698c5925519a3468222445b.png]: /images/20221005/b15c18590d844fcc9cc51982d6c7e03d.png
[58caa52cdd5ead830d8c83ec2eceb3ba.png]: /images/20221005/cb5330f0a9e3435bafca2b80d018dfa0.png
[4e6ce42ff647425a01caa038d2624ef3.png]: /images/20221005/5e7d6965309d409195371cb431a18a65.png
[x.png]: 
[6da75af2d0502cb39975f4df0b078b67.png]: /images/20221005/ef7ea1802b484eae9c304fbef8dd14e3.png
[db3978739b4b91e383c9b986a72a1f29.png]: /images/20221005/77be68541e5544dfbe3448df7d49f6e2.png
[f75d2924c754fec5bbfd0f38eb6650d1.png]: /images/20221005/b9f113ab9fb74f318b337cda9eb3aea3.png
[986420b6743ededa47f11eb364a6adff.png]: /images/20221005/98bc05f1a3f5461fb08d46b50c042152.png
[21e310e09f0052e57ca71e4cd9312b95.png]: /images/20221005/01b6a5bd3f534613aaedfe2bff1e1b98.png
[c9b9a9d96a0bf65eda18fdce31bccfea.png]: /images/20221005/699b38fc553d42c7bf954411b1b102cf.png
[3da4a83f18581b5468e7097f40f7db3f.png]: /images/20221005/bfd81745461f41ffae547c8d1e38d854.png
[de8a515fd7d156ed0cf09f8a0f7c03dc.png]: /images/20221005/a825b24a96184de483bcd5c237416da4.png