1day-HTML常用标签

常用标签

标题标签 h

通过 h1 ～ h6 表示，一共六级标题，h1 是最大的一级标题，h6 是最小的六级标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

如果写 h7 会这么样？
将不会有任何效果，会直接变成普通文字

注意事项

• 我们在个文章定义标题时字体较大，想减小，尽量不要使用较小号的标题去替代，可以使用 font-size 更改文字大小
• 避免滥用 h1 标签，他会向搜索引擎强调该文档中的重要内容，任何情况下，一个页面只能存在一个 h1 标签

段落标签 p

<h1>文章的标题</h1>
<h2>文章的副标题</h2>
<p>这是文章的内容</p>
<p>今天的天气真不错</p>
今天天气真不错，适合出去散步或者户外活动。

段落标签是一个块级标签
块级标签：它会独占一行，并且会在前后添加换行符

文本标签 span

<span>今天天气真不错</span> <span>适合出去散步或者户外活动</span>

在这里会发现，两个 span 标签和两个 p 标签效果有很大不同，这就是块级元素和內联元素（行内元素）的特性造成的

换行符标签 br

<span>今天天气真不错</span><br />
<span>适合出去散步或者户外活动</span>

在 HTML 标签中分为两种形式的标签，即双标签和单标签
双标签：我们开发中使用的大多都是一个开始标签一个结束标签的形式
单标签：也叫做闭标签、空标签，即用一个标签符号就可以完整描述某个功能的标签。

水平线标签 hr

在 HTML 页面创建一条水平线，可以用来分割上下的部分内容

<h1>文章的标题</h1>
<h2>文章的副标题</h2>
<p>这是文章的内容</p>
<p>今天的天气真不错</p>
<hr />
<span>今天天气真不错</span><br />
<span>适合出去散步或者户外活动</span>

容器标签 div

div 标签是一个块级标签，可以用来组合其他的 HTML 元素的容器，他在语意上不代表任何特定类型，但是它可以将某些内容按照一些需要来进行分组
简单理解：他没什么特别的作用，可以将它看作一个盒子，里面可以装任何元素，可以用它来将页面上的元素进行分组，然后组合到一起，构成一个页面。
比如我们的页面有头部、主体、尾部，我们就可以用 div 把他们分为三块。我们将内容写入到这三块中 最后拼合在一起构成页面。

图像标签 img

img 标签标识一个图像，可以将本地或者外部的图像资源显示字啊当前页面中

<img src="../images/01.png" alt="这是一个图片" />

img 标签常用的五个属性

• src：图片资源地址，可以写相对路径和绝对路径，包括引用网上的图片资源
• alt：图片加载不成功时，显示的提示内容
• title：鼠标悬停时显示的内容
• width：图片的宽度
• height：图片的高度

链接标签 a

HTML 使用超链接与网络上另一个文档进行相连，点击该链接，可以跳转到设定的网络地址或本地地址。超链接的内容，可以是一个字，一组词、一个段落或者一个图像

<a href="./index2.html" target="_blank">点我去到百度</a>

a 标签的属性

• href：超链接指向的 URl 地址，也可以指向某个锚点
• target：超链接打开的方式
  • _self:默认值，在当前页面加载超链接的内容
  • _blank:从新窗口打开超链接

a 链接的应用—锚点

利用 id 属性，创建一个 HTML 文档中唯一的书签标记（这个标记对于用户来说不可见），然后通过 a 链接到该 id 进行跳转

实现步骤

1. 在需要跳转到的标签中插入 id

<h2 id="tag">第一章</h2>

2. 在文档中创建一个链接到 id=tag 的书签标记

<a href="#tag">点我跳转到第一章</a>

除了用 id 属性作为锚点之外，还可以利用 a 标签的 name 属性作为锚点

<a href="#tag">点我跳转到第一章</a>

// 锚点
<a name="tag">第一章</a>

还可以用来发送邮件、打电话、发短信

<a href="mailto:邮箱地址">邮件链接</a>
<a href="tel:手机号码">一键拨打</a>
<a href="sms:手机号码">一键发送短信</a>

文本格式化标签

加重标签

加重标签有两个：b 标签和 string 标签

b 标签：目的只是显示的文本加粗
strong：是一种逻辑标记行为，目的是为了加强文本的重要性，不仅为了提醒读者意识到，也是为了让浏览器、搜索引擎更好的检索

在一些盲人阅读器上，在识别到 b 标签和 strong 标签时，会在 strong 标记到的文本上加重读音和语气，并且对于搜索引擎优化来说，用户可以更好的搜索到被 strong 的关键词。

<b>我是加重文字</b> <strong>我是加重文字</strong>

斜体标签

也有两个：i 标签和 em 标签
同加粗标签也有，表面上效果一样。但是意义也和加粗标签一样。
i 标签只是单纯的 italic（斜体），知识告诉浏览器这段文字要以斜体的形式展示
而 em 标签则是 emphasize（强调）

<i>我是i标签斜体</i> <em>我是em标签斜体</em>

删除标签和新增标签

删除标签：del：表示一些被文档中删除的文字内容，一般用于突出修改的差异性或修改记录。
新增标签：ins

<del>我是del标签删除的文字</del> <ins>我是ins标签新增的文字内容</ins>

下划线标签

下划线标签展示的形式与 ins 标签相同，但是在浏览器中的意义不同。
下划线标签：u

<u>我是u标签的下划线文字</u>

上下标标签

上下标标签定义一个文本区域，出于排版原因，与主要文本相比，应该展示比原本的位置有一定的偏差
sup：上标文字
sub：下标文字

<p>你好<sup>hello</sup></p>
<p>世界<sub>words</sub></p>

<p>2<sup>3</sup></p>
<p>H <sub>2</sub>O</p>

ruby 标签

ruby 标签，一般被用于展示东亚文字的注音或字符注释：

<ruby>
  <rb>汉字</rb>
  <rt>han zi</rt>
</ruby>

• rb：代表内容主体
• rt：代表上方注释内容

字符实体

在 HTML 中，有一些字符是已经预留好的。由于 HTML 中的标签是由<和>包裹起来的，所以当内容存在这些符号时，浏览器会误以为他们是标签。为了要正确的显示这些字符，实体字符就可以登场了。

列表标签

无序列表

无序列表顾名思义即无数值排序项的集合。
通过 ul 来表示，一般还需配合 li 标签使用

<ul>
  <li>1</li>
  <li>
    <ul>
      <li>2</li>
      <li>
        <ul>
          <li>3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

有序列表

通过 ol 标签标识多个有序表项，通常渲染为带有编号的列表

<ol type="A" start="3">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>
    <ol>
      <li>d</li>
      <li>
        <ul>
          <li>e</li>
        </ul>
      </li>
    </ol>
  </li>
</ol>

• type：指定编号的类型
  • ‘1’：表示数字编号（默认值）
  • ‘a’：表示小写字母编号
  • ‘A’：表示大写字母编号
  • ‘i’：表示小写的罗马数字编号
  • ‘I’：表示大写的罗马数字编号
• reversed：指定列表中的编号是否倒叙排列
• start：一个整数数值属性，指定列表编号的起始值。不管编号的类型是什么，这个值都用整数值表示。

自定义列表

dl 标签是一个包含术语定义预计描述的列表，通常用于展示词汇或者元数据（键-值对列表）

<dl>
  <dt>广东省</dt>
  <dd>广州市</dd>
  <dd>深圳市</dd>
  <dd>江门市</dd>
  <dt>江西省</dt>
  <dd>赣州市</dd>
  <dd>南昌市</dd>
</dl>

• dt：用于在一个自定义列表中声明一个术语，可以声明多个
• dd：用于指明一个自定义列表中术语的描述，前面必须有个 dt 元素