HTML——7.html5 新属性与新标签

最新推荐文章于 2021-07-08 22:28:06 发布

only_tao

最新推荐文章于 2021-07-08 22:28:06 发布

阅读量278

点赞数

分类专栏： HTML 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/only_tao/article/details/104229731

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML5

New Property 新属性

contenteditable 内容可编辑的

直接写入即可，同样可加上值true（默认）

hidden 隐藏

hidden 属性是布尔属性。

如果设置该属性，它规定元素仍未或不再相关。

浏览器不应显示已规定 hidden 属性的元素。

hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，JavaScript 可以删除 hidden 属性，以使此元素可见

w3school对hidden的解释，偏向于JavaScript应用

designmode

目前本人不考虑其用处

title （不是html5新属性）

鼠标悬停在有title属性的标签上时，会显示关于元素的额外信息。

spellcheck 拼写检查

用于输入框中的单词拼写检查

tabindex 可用tab访问

使用了tabindex="1"属性后，原来不可以用tab选择到的东西现在也可以被选择到，比如超链接。

所以tabindex常用于<a>中

New Label 新标签

<article> <header> <footer> <nav> <aside> <time> <section> ----> 使得标签富有语义化

这些标签的出现避免了div的反复使用导致的一些文章排版、美观等的问题

其实就是代替了div的部分功能

比如我们这么用：

<nav> // (navigation)

<ul>

<li><a href="github.com">github</a></li>

</ul>

</nav>

</section>

</header>

</div>

</footer>

</article>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5新属性property</title>
</head>
<body>
    <ul ><!--默认true，可填入false-->
        <li contenteditable="">contenteditable—内容可编辑的</li>
        <li hidden>这是隐藏的</li>
        <li>hidden+designmode???</li>
        <li>title 规定关于元素的额外信息，hover show information</li>
        <li>spellcheck拼写检查</li>
        <form action="" >
            <input type="text" spellcheck="true">
        </form>
        <li tabindex="2">
            原来不可聚焦（即用tab访问），
            加上tabindex=“num”后可以
            将其他元素也加上tabindex
        </li>
    </ul>
    <h3 style="color:crimson;">article,header,footer元素，使得标签语义化</h3>
    <article><!--作为一个块,article可内嵌article-->
        <header>
            <h3>this is head</h3>
            <p>header也可作为页面头部、article head</p>
        </header>
        <p>paragraphs</p>
        <footer>the bottom</footer>
        <article>
            <h2>下面为一个内嵌页面</h2>
            <embed src="#" type="" width="500"><!--use # as 本页面-->
        </article><!--embed 内嵌页面-->

    </article>
    <section>
        <p>普通section 里的标签变化</p>
        <article>
            <p> 
                this is article in section 
                和布局有关<br/>
                section 不是一个专用来做容器的标签，专用的是 div<br/>
                section 里应该有 标题（h1~6），但文章中推荐用 article 来代替<br/>
                我们可以理解为一个非文章段落，<br/>
                有明确 id 的一个特殊模块容器（不是专用以包住块的容器）<br/>
            </p>
        </article>
    </section>
    <h3 style="color:crimson;">nav ->navigation导航</h3>
    <article>
      <header>
        <nav><!--link to other pages or parts within the pages-->
            <ul>
                <li><a href="#">index</a></li>
                <li>html1</li>
            </ul>
        </nav>
      </header>
    </article>
    <h3 style="color: crimson;">aside一些侧边栏等元素,define something except article</h3>
    <article>
    <p>Me and my family visited The Epcot center this summer.</p>
    </article>
    <aside>
    <h6>Epcot Center</h6>
    The Epcot Center is a theme park in Disney World, Florida.
    </aside>
    <h3 style="color: crimson;">time与pubdate ！语义！标签</h3>
    <time datetime="2020-2-7">2020-2-7</time>
    <br/>
    <time datetime="2020-2-7">2020-2-7</time>
    <p>pubdate属性指示time元素中的日期/时间是文档（或最近article 元素）的发布日期。</p>
    <article>
        <hgroup><!--delete-->
        </hgroup>
    </article>
    
</body>
</html>

only_tao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——7.html5 新属性与新标签

HTML5New Property 新属性contenteditable 内容可编辑的直接写入即可，同样可加上值true（默认）hidden 隐藏hidden 属性是布尔属性。如果设置该属性，它规定元素仍未或不再相关。浏览器不应显示已规定 hidden 属性的元素。hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，Ja...
复制链接

扫一扫