在HTML5中,定义了少量对所有元素都有效的属性。
1.Contenteditable:
<p contenteditable="true" >我是一个段落,但是我可以编辑</p>//可以被编辑的
<p contenteditable="false" >我是一个段落,但是我可以编辑</p>//不可以被编辑的
<p contenteditable >我是一个段落,没有设置contenteditable的值</p>//可以被编辑的
contenteditable=true属性之后,可以直接在页面上进行编辑。编辑之后,元素的宽高自动适应
contenteditable=true说明这个标签不能被编辑
注意:(1)如果只是设置了contenteditable,其默认的值得true
(2)contenteditable属性可以被继承,需要考虑“就近原则”
<div class="box"contenteditable="false">
<p contenteditable="true">我是一个段落,但是</p>//就近原则
<p >我是一个段落,但是</p>
<p >我是一个段落,我</p>
</div>
2. designMode:
用来指定整个页面是否可以编辑,当designMode设置为“on”时候,相当于页面上所有的元素都设置contenteditable=true
</div>
<div>我是一个div</div>
</body>
<script>
document.designMode = "on"
</script>
,当designMode设置为“off”时候,相当于页面上所有的元素都设置contenteditable=false
注意:(1)如果同时设置了designMode和contenteditable属性,最终是否可以编辑,采用“就近原则”。
(2)该属性在ie8以下的浏览器无效。--》以兼容IE6、7、8为耻
Hidden属性可以实现对元素的隐藏,隐藏的元素不会被显示,同时不会占原有的位置。类似display:none。
注意:hidden属性默认值是“hidden”,所以呢,设置该属性的时候,只需要些属性名就可以了
<style >
div{
/*display: none;*/
/*visibility: hidden;*/
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div style="display: none" >我想隐藏起来,让你找不到</div>
<div class="box">1</div>
<div style="visibility:hidden" >我想隐藏起来,让你找不到</div>
<div class="box">2</div>
<div hidden>我想隐藏起来,让你找不到</div>
<div class="box">3</div>
</body>
hidden:看不见,不占位置
visibility: hidden;看不见占位置
display:none,看不见,不占位置
4. spellcheck 拼写检测
输入Apple试试看
<!--<input type="text"spellcheck="true"/>-->
<!--<input type="text"spellcheck="false"/>-->
<input type="url"spellcheck="true"/>
<textarea spellcheck="true"></textarea>
Spellcheck属性是HTML5专门为input和textarea标签提供新属性。他的功能是对用户输入的内容进行拼写和语法检查 ,如果拼写出错了,文字下面有一个波浪线
Spellcheck=false 取消语法和拼写检测
Spellcheck=true 开启语法和拼写检测
5. tabindex
<style>
div{
background-color: gainsboro;
height: 30px;
}
</style>
</head>
<body>
<div>
<label >名字</label><input type="text"tabindex="1"/>
</div>
<div>
<label >省份</label><input type="text"tabindex="4"/>
</div>
<div>
<label >性别</label><input type="text"/>
</div>
<div>
<label >年龄</label><input type="text"tabindex="3"/>
</div>
<div>
<label >电话</label><input type="text"/>
<div>
<input type="button"value="提交"tabindex="5"/>
</div>
<div>
<a href="http://www.anedu.com"tabindex="6">华点学院</a>
<a href="http://www.baidu.com">百度</a>
</div>
</div>
</body>
</html>
Tabindex=“正整数”;按键盘tab键可以选中(获取焦点)这里选择的标签可以是input输入框,input按钮,a标签等等,同时 按tap键选择的顺序和设置的tabindex属性一致tabindex值越大,越后面选中。建议不使用tabindex = 0;
Tabindex=-1;按tap不选中