button鼠标离开样式修改_HTML标签、全局属性、默认样式

最新推荐文章于 2022-09-24 20:39:15 发布

SME情报员

最新推荐文章于 2022-09-24 20:39:15 发布

阅读量217

点赞数

文章标签： button鼠标离开样式修改

本文链接：https://blog.csdn.net/weixin_29066781/article/details/112313901

版权

章节标签

表示文章书的层级

标题 h1~h6
章节 section
文章 article
段落 p
头部 header
脚部 footer
主要内容 main
旁支内容 aside
划分 div

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <header>顶部广告</header>
    <div>
      <main>
        <h1>文章标题</h1>

        <section>
          <h2>第一章</h2>
          <p>
            这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话
          </p>

          <section>
            <h3>1.1 节</h3>
            <p>一段话</p>
          </section>

          <section>
            <h3>1.2 节</h3>
            <p>一段话</p>
          </section>
        </section>
      </main>
      <aside>
        参考资料 1 2 3 4 5
      </aside>
    </div>
    <footer>&copy;xxx版权</footer>
  </body>
</html>

内容标签

ol+li 有顺序的列表

<ol>
  <li>吃饭</li>
  <li>学前端</li>
  <li>睡觉</li>
</ol>

ul+li 无顺序的列表

<ul>
  <li>吃饭</li>
  <li>学前端</li>
  <li>睡觉</li>
</ul>

br、hr

 让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。

<hr>用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。

<p>第一个主题</p>
<hr>
<p>第二个主题</p>

strong、em

是一个行内元素，表示它包含的内容具有很强的重要性，浏览器会以粗体显示内容。

<p>开会时间是<strong>下午两点</strong>。</p>

是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。

<p>我们<em>已经</em>讨论过这件事情了。</p>

q、blockquote

<q>是一个行内标签，也表示引用。它与<blockquote>的区别，就是它不会产生换行。

<p>
  莎士比亚的《哈姆雷特》有一句著名的台词：
  <q cite="https://quote.example.com">活着还是死亡，这是一个问题。</q>
</p>

<blockquote>是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。

<blockquote cite="https://quote.example.com">
  <p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>

pre、code

<code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。

<code>alert()</code>的作用是让网页弹出一个提示框。

如果要表示多行代码，<code>标签必须放在<pre>内部。<code>本身仅表示一行代码。

<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>

全局属性

lang

lang属性指定网页元素使用的语言。

<p lang="en">hello</p>
<p lang="zh">你好</p>

上面代码中，第一个的lang属性，表示使用英语，第二个的lang属性，表示使用中文。

lang属性的值，必须符合 BCP47 的标准。下面是一些常见的语言代码。

zh：中文
zh-Hans：简体中文
zh-Hant：繁体中文
en：英语
en-US：美国英语
en-GB：英国英语
es：西班牙语
fr：法语

class

class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。

<p class="para"></p>
<p></p>
<p class="para"></p>

第一个和第三个是一类，因为它们的class属性相同。

元素可以同时具有多个 class，它们之间使用空格分隔。

<p class="p1 p2 p3"></p>

上面的p元素同时具有p1、p2、p3三个 class。

id属性是元素在网页内的唯一标识符。比如，网页可能包含多个标签，id属性可以指定每个标签的唯一标识符。

<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

上面代码中，三个标签具有不同的id属性，因此可以区分。

id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格。

id属性的值还可以在最前面加上#，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址https://foo.com/index.html#bar的时候，浏览器会自动将页面滚动到bar的位置，让用户第一眼就看到这部分内容。

title

title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

<div title="版权说明">
  <p>本站内容使用创意共享许可证，可以自由使用。</p>
</div>

上面代码中，title属性解释了这一块内容的目的。鼠标悬停在上面时，浏览器会显示一个浮动提示。一旦鼠标移开，提示就会消失。

hidden

hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。

<p hidden>本句不会显示在页面上。</p>

上面代码中，这个p元素不会出现在网页上。

CSS 的可见性设置高于hidden属性。如果 CSS 设为该元素可见，hidden属性将无效。

contenteditable

HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。它有两个可能的值。

true或空字符串：内容可以编辑
false：不可以编辑

<p contenteditable="true">
鼠标点击，本句内容可修改。
</p>

上面代码中，鼠标单击句子，就可以进入编辑状态，用户可以改变句子的内容。当然，除非提交到服务器，否则刷新页面还是显示原来的内容。

该属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。

tabindex

网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。

HTML 提供了tabindex属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。

tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。

负整数：该元素可以获得焦点（比如使用 JavaScript 的focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。
0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。
正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。

<p tabindex="0">这段文字可以获得焦点。</p>

上面代码中，标签的tabindex为0，意味着该元素可以获得焦点，并且也可以被 Tab 键遍历，顺序由其在源码里面的位置决定。

一般来说，tabindex属性最好都设成0，按照自然顺序进行遍历，这样比较符合用户的预期，除非网页有特殊布局。如果网页所有元素都没有设置tabindex，那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历，顺序由其在源码的位置决定。因此实际上，只有那些无法获得焦点的元素（比如、<div>）需要参与遍历，才有必要设置tabindex属性。

style

style属性用来指定当前元素的 CSS 样式。

<p style="color: red;">hello</p>

上面代码指定文字颜色为红色。

默认样式

怎么看默认样式

chrome开发者工具

Elements ->styles -> user agent stylesheet

user agent就是浏览器
为什么有默认样式

因为HTML发明的时候没有CSS

css reset

一般我们写页面的时候是不需要默认样式的，而是用css代码覆盖它，常用的css reset代码如下：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  *::before,
  *::after {
    box-sizing: border-box;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  input,
  button {
    font-family: inherit;
  }
  ol,
  ul {
    list-style: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

学习资料

HTML 教程wangdoc.com

SME情报员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
button鼠标离开样式修改_HTML标签、全局属性、默认样式

章节标签表示文章书的层级标题 h1~h6章节 section文章 article段落 p头部 header脚部 footer主要内容 main旁支内容 aside划分 div代码示例：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> &...
复制链接

扫一扫