一些容易忽略掉的HTML | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

一些input用法

    <input list="countries" />
    <datalist id="countries">
        <option>Greece</option>
        <option>United Kingdom</option>
        <option>United States</option>
    </datalist>

• 代码显示出来的还是一个input输入框
  
• 与普通input的不同点：使用了datalist绑定了该输入框
  
• 作用：在输入时可以快捷输入datalist里有的内容，优化用户体验，同时也可以输入datalist里没有的。本质上它还是一个input输入框

三种常用引用方式

    <blockquote cite="http://t.cn/RfjKO0F">
        <p>天才并不是自生自长在深林荒野里的怪物，是由可以是天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
    </blockquote>

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

    <p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

    <p><code>const</code>声明创建一个只读的常量</p>

blockquote

• 长引用或块级引用
• 一般用于引用一段话
• cite属性内表明内容来源于哪

cite标签

• 短引用
• 一般用于引用他人的作品或者章节

q标签

• 短引用
• 一般用于引用具体的内容
• 比如在一篇文章中，前文已有提及，后文需在此引用该前文的内容，则可以使用q标签

<strong>与<em>

• <strong>更多的用于强调语义上的重要性
• <em>更多的用于语气上的重音强调

语义化是什么

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化） 。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

• 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
• 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

开发中应该遵循语义来编写HTML

• 有序列表用ol；无序列表用ul
• lang属性表示内容所使用的语言
• 使用语义化标签进行开发