HTML基础讲解（三）

最新推荐文章于 2023-06-18 09:29:34 发布

大雷哥～

最新推荐文章于 2023-06-18 09:29:34 发布

阅读量199

点赞数

分类专栏： HTML Java 文章标签： HTML Java Web前端

本文链接：https://blog.csdn.net/jjjkjj/article/details/93043311

版权

Java 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

HTML属性

contentEditable属性
desigenMode属性
hidden属性
spellcheck属性
tabindex属性

contentEditable属性（编辑文本属性）

<body>
    <h2>可编辑列表</h2>
        <ul contenteditable="true">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
</body>

在这里插入图片描述

designMode属性

用来指定整个页面是否可被编辑，当页面可编辑时，整个页面中任何支持上下文所属的contentEditable属性都变为可编辑状态，designMode属性
只能在JS脚本被修改编辑。属性值为on和off。

hidden属性

spellcheck属性

功能是对用户输入的文本内容进行拼写和语法检查。

<input type="text" spellcheck="">

tabindex属性

在连续敲击table键时会按设定顺序优先选择

<body>
    <a href="#" tabindex="1">我爱你</a>
    <a href="$" tabindex="3">你呢</a>
    <a href="……" tabindex="2">我也爱你</a>
<!--只能对连接以及表单可以使用tabindex，如果想对其他使用功能，如下-->
    <ul tabindex="-4"><!--但如果开发是是不想通过table获取到焦点，但针对开发来说还必须增加一个index属性就可以吧tabindex属性值变为-1-->
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>

在这里插入图片描述

新增的主体元素

article元素
section元素
nav元素
aside元素
time元素与微格式

article元素

<body>
<!--article标签里面可以承载许多内容，比如头部内容、脚部内容以及中间区域-->
    <article>
        <header>
            <h1>大型秀恩爱现场</h1>
            <p>Hello ，欢迎来到大型秀恩爱现场</p>

        </header>
        <article>
            <header>
                男主人公：雷
            </header>
            <p>女主人公：莹</p>
            <footer>
                <p>想陪你：</p>
                <p>烹雪煮茶；</p>
                <p>白手天涯：</p>
                <p>万家灯火：</p>
                <p>夜落归家。</p>
            </footer>
        </article>
        <footer>
            <p>秀恩爱环节结束</p>
        </footer>
    </article>
    <article>
        <h1>这是一个内嵌页面</h1>
        <object>
            <embed src="#" width="600" height="400">
        </object>

    </article>

</body>

在这里插入图片描述

section元素

在这里插入图片描述
作用是对文章进行分块，或者对内容进行分段

总结

不要将section元素作为设置页面样式的容器，那是div的工作
如果article元素aside元素或nav元素更符合条件，就不要使用section元素
不要为没有标题的区域块使用section元素
article可以看成是特殊的section，即section强调分段或分块，爱人提了更强调独立

nav元素

在这里插入图片描述

<body>
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#>">开发文档</a></li>
        </ul>
    </nav>
<article>
    <header>
        <h1>HTML5和css3的历史</h1>
        <nav>
            <ul>
                <ui>
                    <li><a href="#">HTML5的历史</a></li>
                    <li><a href="#">css3的历史></a></li>
                </ui>
            </ul>
        </nav>
    </header>
    <section>
        <h1>HTML5的历史</h1>
        <p>.....</p>
    </section>
    <section>
        <h1>CSS3的历史</h1>
        <p>.....</p>
    </section>
    <footer>
        <a href="#">删除、修改等</a>
    </footer>
</article>
<footer>
    <p><small>版权声明：</small></p>
</footer>
</body>

在这里插入图片描述

aside元素

aside元素用来表示当前页面或文章的附属信息部分，他可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别与主要内容的部分

有两种用法：
第一种是包含在article中，作为主要内容部分的附属信息

<body>
    <header>
        <h1>我爱你</h1>
    </header>
<article >
    <h1>就爱你</h1>
    <p>没道理</p>
    <!--aside就是针对article的名词解释-->
    <aside>
        <h1>你管我</h1>
        <p>我爱你没道理</p>
    </aside>
</article>
</body>

在这里插入图片描述
第二种用法：在article元素之外使用，作为页面或站点全局的附属信息部分，典型形式还是侧边栏

<aside>
    <nav>
        <h2>
          评论
        </h2>
        <ul>
            <ui>

                <li><a href="#">好</a></li>
                <li><a href="#">嗯</a></li>
            </ui>
        </ul>

    </nav>
</aside>

在这里插入图片描述

time元素与微格式

微格式：利用HTML的class属性赌王也添加附属信息的方法

<body>
    <article>
        <header>
            <h1>苹果</h1>
            <p>发布日期</p>
            <time datetime="2015-10-10">2015-10-10</time>
            <p>舞会事件 <time datetime="2015-10-12">2015-10-12</time> </p>
        </header>
    </article>
</body>

在这里插入图片描述

大雷哥～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础讲解（三）

HTML属性contentEditable属性desigenMode属性hidden属性spellcheck属性tabindex属性contentEditable属性（编辑文本属性）<body> <h2>可编辑列表</h2> <ul contenteditable="true"> &l...
复制链接

扫一扫