HTML标签

`<input>`标签的 `list` 属性。

用户可以在输入框中输入任意字符，但提供给用户若干选项可供快捷地选择。

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

关于引用的标签

长引用 blockquote

<blockquote> 标签代表其中的文字是引用内容。

通常在渲染时，这部分的内容会有一定的缩进，若要修改被引用内容的缩进距离，可以使用 margin属性。

若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 属性上。

<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>

短引用 cite

<cite> 标签表示一个作品或作品章节的引用。

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

行内引用 q

<q> 标签表示一个封闭的并且是短的行内引用的文本。

有 cite 属性，值为 URL，意在指出被引用的文本的源文档或者源信息。

<q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
  Oh my God, you/they killed Kenny!
</q>

关于代码

代码的字体样式和正常的字体样式有所区别。代码使用特殊的短宽字体来展示。

引用短代码

使用 <code> 标签呈现一段计算机代码。

<p>Regular text. <code>This is code.</code> Regular text.</p>

引用多行代码

使用 <code> 和 <pre> 标签可以实现引用多行代码。

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

表示强调

strong

突出重要、紧急。

em

更多的表示语气上的强调。

语义化

如何做到语义化

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码。

总结

通过此次课程，查漏补缺了一些HTML标签，加深了对语义化的理解。

前端与HTML | 青训营笔记