【基础学习-html】3.html文档语义和结构

base, html

语义化html，对可访问性，SEO（搜索引擎优化）等非常重要

标题和段落

  • 标题使用h1-h6标签
  • 块级元素p可以区分段落

段落和标题可以使文本更加结构化和语义化

1
2
3
<h1>hello</h1>
<p>Hello, it's me</p>
<p>I was wondering if after all these years you'd like to meet</p>

列表

无序列表 (ul)

无序列表使用ul标签来包裹，li是每一项

1
2
3
4
5
6
<ul>
  <li>牛奶</li>
  <li>鸡蛋</li>
  <li>面包</li>
  <li>火腿</li>
</ul>

有序列表 (ol)

无序列表使用ol标签来包裹，li是每一项

1
2
3
4
5
6
<ol>
  <li>牛奶</li>
  <li>鸡蛋</li>
  <li>面包</li>
  <li>火腿</li>
</ol>

描述列表 (dl)

dt是标题，dd对标题的描述

1
2
3
4
5
6
7
8
<dl>
  <dt>天真</dt>
  <dd>吴邪是南派三叔的作品《盗墓笔记》中的主人公，是《盗墓笔记》的核心，铁三角的精神领袖。生于盗墓世家，长沙老九门狗五爷之孙，南派土夫子巨头吴三省的侄子，吴家现任当家。</dd>
  <dt>小哥</dt>
  <dd>张起灵，南派三叔作品《盗墓笔记》里面的灵魂人物，本书主角之一，铁三角的精神领袖。一出现就给所有人安全感与希望，几乎无所不能。</dd>
  <dt>胖子</dt>
  <dd>王胖子，南派三叔作品《盗墓笔记》中的人物，与吴邪、张起灵合称为“铁三角”。与二人相遇前似乎一直单干。自称是北派摸金校尉以及倒斗界肥王子，身手不凡，胆大心细，平时看着大大咧咧不靠谱，实际比较有分寸，关键时刻不掉链子。</dd>
</dl>

嵌套列表

在单独项下添加嵌套列表

1
2
3
4
5
6
7
8
9
10
11
12
<ol>
  <li>
    <p>牛奶<p>
    <ul>
      <li>伊利</li>
      <li>蒙牛</li>
    </ul>
  </li>
  <li>鸡蛋</li>
  <li>面包</li>
  <li>火腿</li>
</ol>

重点强调

强调

表示讽刺等，一些特殊意义。使用em标签

1
<p>你真是一个<em>好</em>人啊</p>

重要

使用strong标签来表示着重一句话中的某些字。

1
<p>我真的好喜欢你，<strong>嫁给我吧！</strong></p>

引用

块引用

块引用使用blockquote，默认会有一个缩进，在cite属性内标明被引用的资源，使用cite标签来包裹引用的文字，然后使用a标签来包裹cite，并连接向被引用的资源

1
2
3
4
5
<blockquote cite="https://baike.baidu.com/item/%E6%88%98%E7%95%A5%E4%B8%8A%E8%97%90%E8%A7%86%E6%95%8C%E4%BA%BA%EF%BC%8C%E6%88%98%E6%9C%AF%E4%B8%8A%E9%87%8D%E8%A7%86%E6%95%8C%E4%BA%BA/3800588">
    <a href="https://baike.baidu.com/item/%E6%88%98%E7%95%A5%E4%B8%8A%E8%97%90%E8%A7%86%E6%95%8C%E4%BA%BA%EF%BC%8C%E6%88%98%E6%9C%AF%E4%B8%8A%E9%87%8D%E8%A7%86%E6%95%8C%E4%BA%BA/3800588">
      <cite>毛主席说过：在战略上藐视敌人，在战术上重视敌人</cite>
    </a>
</blockquote>

行内引用

块引用使用q,默认会有双引号包裹文字，在cite属性内标明被引用的资源，使用cite标签来包裹引用的文字，然后使用a标签来包裹cite，并连接向被引用的资源

1
2
3
4
5
6
7
<p>
  <q cite="https://baike.baidu.com/item/%E6%88%98%E7%95%A5%E4%B8%8A%E8%97%90%E8%A7%86%E6%95%8C%E4%BA%BA%EF%BC%8C%E6%88%98%E6%9C%AF%E4%B8%8A%E9%87%8D%E8%A7%86%E6%95%8C%E4%BA%BA/3800588">
    <a href="https://baike.baidu.com/item/%E6%88%98%E7%95%A5%E4%B8%8A%E8%97%90%E8%A7%86%E6%95%8C%E4%BA%BA%EF%BC%8C%E6%88%98%E6%9C%AF%E4%B8%8A%E9%87%8D%E8%A7%86%E6%95%8C%E4%BA%BA/3800588">
      <cite>毛主席说过：在战略上藐视敌人，在战术上重视敌人</cite>
    </a>
  </q>
</p>

缩略语

abbr来表示一个缩略语，全拼放在title属性内。鼠标hover效果时会出现title内全拼

1
2
3
<p>
  <abbr title="Xi'an International University">XAIU</abbr>
</p>

标记联系方式

address来表示一个联系方式

1
2
3
<address>
  <p>中国，西安，雁塔区，南窑头国际</p>
</address>

上下标

sup表示上标，sub表示下标

例如，x的平方，和水的化学分子式。

1
2
<p>x<sup>2</sup></p>
<p>H<sub>2</sub>O</p>

日期和时间

datetime属性表示此元素的时间和日期，并且属性值必须是一个有效的日期格式

1
<time datetime="2018-10-21">2018年10月21日</time>

展示计算机代码

  • code用于标记计算机通用代码。
  • pre对保留的空格（通常是代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在pre标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
  • var用于标记具体变量名。
  • kbd用于标记输入电脑的键盘（或其他类型）输入。
  • samp用于标记计算机程序的输出。

例子:

1
2
3
4
5
6
7
8
9
10
11
12
<pre>
  <code>
var a = 1;
console.log(a);
  </code>
</pre>
<p>
  请问变量 <var>a</var> 是多少
</p>
<p>
  变量 <var>a</var> 是 <samp>1</samp>
</p>

html5重新定义的语义

  • i被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
  • b被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
  • u被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

本文作者： haise
本文地址： https://www.shifeng1993.com/2018/10/21/base_html3/
版权声明： 转载请注明出处！