HTML5主体结构元素

来源：互联网发布：乐亭阿里巴巴农村淘宝编辑：程序博客网时间：2024/05/17 07:02

在HTML5中，定义了少量对所有元素都有效的属性。

1.Contenteditable：

<pcontenteditable="true">我是一个段落，但是我可以编辑</p>//可以被编辑的
<pcontenteditable="false">我是一个段落，但是我可以编辑</p>//不可以被编辑的
<pcontenteditable >我是一个段落，没有设置contenteditable的值</p>//可以被编辑的

contenteditable=true属性之后，可以直接在页面上进行编辑。编辑之后，元素的宽高自动适应

contenteditable=true说明这个标签不能被编辑

注意：（1）如果只是设置了contenteditable，其默认的值得true

（2）contenteditable属性可以被继承，需要考虑“就近原则”

<divclass="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>
<divstyle="display:none">我想隐藏起来，让你找不到</div>
<divclass="box">1</div>
<divstyle="visibility:hidden">我想隐藏起来，让你找不到</div>
<divclass="box">2</div>
<divhidden>我想隐藏起来，让你找不到</div>
<divclass="box">3</div>
</body>

hidden：看不见，不占位置

visibility: hidden;看不见占位置

display：none，看不见，不占位置

4. spellcheck 拼写检测

输入Apple试试看


<inputtype="url"spellcheck="true"/>
<textareaspellcheck="true"></textarea>

Spellcheck属性是HTML5专门为input和textarea标签提供新属性。他的功能是对用户输入的内容进行拼写和语法检查，如果拼写出错了，文字下面有一个波浪线

Spellcheck=false 取消语法和拼写检测

Spellcheck=true 开启语法和拼写检测

5. tabindex

Tabindex=“正整数”；按键盘tab键可以选中（获取焦点）这里选择的标签可以是input输入框，input按钮，a标签等等，同时按tap键选择的顺序和设置的tabindex属性一致tabindex值越大，越后面选中。建议不使用tabindex = 0；

Tabindex=-1；按tap不选中

阅读全文

0 0