【基础学习-html】3.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/
版权声明: 转载请注明出处!