HTML知识补充

最新推荐文章于 2022-04-03 14:10:00 发布

咖木

最新推荐文章于 2022-04-03 14:10:00 发布

阅读量135

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/dongdaxiaopenyou/article/details/79337247

版权

前端学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

以下程序在Chrome浏览器中运行,

一、accesskey和tabindex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>
        <input accesskey="i" placeholder="Press Alt+I">
    </p>
    <p>
        <a href="http://www.baidu.com" accesskey="a" target="_toblank">Press <kbd>Alt+A</kbd></a>
        <br/>
        <strong>不要指定E为快捷键，因为Alt+E是浏览器默认打开“查看”的快捷键</strong><br/>
        <strong>发生冲突时浏览器不会改变默认行为，仍然打开“查看”栏</strong>
    </p>
</body>

</html>

加tabindex="-1"表示tab会跳过这个元素

二、contenteditable和spellcheck

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div contenteditable="true" spellcheck="true">
        <h2>这些内容都是可以编辑的，包括这个标题</h2>
        <p>
            今天天气：晴天
        </p>
    </div>
</body>

</html>

三、lang和dir

指定语言和书写顺序，dir就是direction，比如古代人习惯从右到左阅读，应该设置dir=“rtl”

四、title

title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。

五、hidden

六、扩展HTML

1、meta

2.data-*

比如说要存一些数据，然后属性可以使用data-xxx，xxx可以任意取，可以用这种方式存储自定义的数据，比如这里的data-id就可以通过JS获取到

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function showDetails(animal) {
            alert(animal.innerHTML + "是一种" + animal.getAttribute("data-animal-type") + "！");
        }
    </script>
</head>

<body>
    <h1>点击下列动物获取其详细信息</h1>
    <ul>
        <li οnclick="showDetails(this)" id="tuna" data-animal-type="鱼类">金枪鱼</li>
        <li οnclick="showDetails(this)" id="Ape" data-animal-type="哺乳动物">猿猴</li>
        <li οnclick="showDetails(this)" id="Jellyfish" data-animal-type="软体动物">水母</li>
    </ul>
</body>

</html>

咖木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML知识补充

以下程序在Chrome浏览器中运行, 一、accesskey和tabindex&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-wid
复制链接

扫一扫

专栏目录