跟着MDN重新过一次HTML并归纳了一些知识点

写在前面

平时开发都是div、span，不然就是UI组件库，最近开发任务不是很多，便跟着MDN web开发过了一次关于HTML的知识，并把一些自己遗忘的、不知道但又有用的记录了下来。

头部元素

指定包含关于页面内容的关键字能让页面在搜索引擎的相关的搜索出现得更多 （即 SEO.）
<meta name="description" content="xxxx">

添加网页图标
<link rel="icon" href="xxx">

满足某种媒体条件样式才能被加载
<link rel="stylesheet" href="xxx" media="xxx">
eg: 只有在屏幕的宽度 < 600px时，才会加载test.css，可以通过调节浏览器可视区域来验证
<linkrel="stylesheet" href="./test.css"media="screen and (max-width: 600px)">

告诉浏览器预加载该资源
<link rel="preload" href="xxx">

列表

1. 有序列表(ol)
2. 无序列表(ul)

有序列表和无序列表可以相互嵌套

<ol>
  <li>先买水果</li>
  <li>再买饺子</li>
  <ul>
    <li>如果没有饺子的话就买汤圆</li>
    <li>如果没有汤圆的话就买抄手</li>
  </ul>
</ol>

效果图

3. 描述列表(dl)

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

效果图

语意标签

引用

块引用-blockquote

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用<blockquote>元素包裹起来表示，并且在cite属性里用URL来指向引用的资源。
浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符

行内引用-q

浏览器默认将其作为普通文本放入引号内表示引用

<q>我想大抵是累了</q>

引文

cite属性内容不会被浏览器显示、屏幕阅读器阅读,如果想要确保引用的来源在页面上是可显示的,可以使用cite元素附上链接

<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a>曰：
<blockquote cite="https://zh.wikipedia.org/zh-hans/孔子">
  <p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p>
</blockquote> 

缩略语-abbr

它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>

标记联系方式-adress

<address>Chris Mills, Manchester, The Grim North, UK</address>

上标和下标

二氧化碳化学方程式：CO<sub>2</sub>
<br>
2<sup>2</sup> = 4

展示计算机代码

• <code>: 标记计算机通用代码
• <pre>: 保留空白字符（实际上就是设置css为white-space: pre)
• <var>: 标记具体变量名
• <kbd>: 标记输入电脑的键盘输入

<code>code</code>
<pre>我T   
       M</pre>
<var>obj</var>
<br>
<kbd>Ctrl</kbd> + <kbd>A</kbd>

标记时间和日期-time

将时间和日期标记为可供机器识别的格式,datetime标记为可供计算机识别的日期，元素内为显示日期

<time datetime="2016-01-20">2016年1月20日</time>
<time datetime="2016-01-20">20 janvier 2016</time>

详细信息展现元素-detail

创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。

<details>
  <summary>Q1. 你认识cxk吗？</summary>
  答：是打篮球那个吗？
</details>