您的位置：首页 > Web前端 > HTML5

HTML5主体结构元素

2017-09-11 21:21 323 查看

在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="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不选中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航