HTML5主体结构元素

最新推荐文章于 2022-07-14 17:05:32 发布

LDH-

最新推荐文章于 2022-07-14 17:05:32 发布

阅读量1.5k

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/weixin_38362146/article/details/77938043

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在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

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

Tabindex=-1；按tap不选中

LDH-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5主体结构元素

在HTML5中，定义了少量对所有元素都有效的属性。1.Contenteditable：pcontenteditable="true">我是一个段落，但是我可以编辑p>//可以被编辑的pcontenteditable="false">我是一个段落，但是我可以编辑p>//不可以被编辑的pcontenteditable >我是一个段落，没有设置contentedita
复制链接

扫一扫