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

一、重点内容

• HTML常用元素
• HTML常用属性
• HTML语义化

二、详细知识点介绍

HTML元素

• <title></>标题，显示在浏览器的标签页或标题栏。
• <a></> 通过href属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
• <address></> 处理联系信息。虽然只是有一些加粗斜体的效果，用i或em也行，但是因为有特殊语义，方便别人看懂代码。
• <article></>
• <section></>文档或页面等独立结构，方便维护或复用。 表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。
• <aside></> 侧边栏或标注栏。
• <base></>指定用于一个文档中包含的所有相对 URL 的根 URL，得在所有URL前面。一份文档中只能有一个，若多个则第一个起效。
• <blockquote></>/<cite></> 区块引用用前者，小范围引用用后者。
• <button></>按钮。
• <br>换行。
• <div></> 块级元素，用来表示一块，通过使用类或ID来表示这一块div内有什么共同。
• <span></> 同上div用处差不多，不过span是行内元素。
• <canvas></> 矢量图，可利用javascript进行绘制。
• <img> 简单的插入图片信息。
• <figure></> 元素代表一段独立的内容，可能包含figcaption元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。
• <table></> 表格,里面包含thead,tbody,tr,td。
• <datalist></> 下面包含了option，为一组可供选择的表单控件。（可以是下拉框选项）
• <select></>下拉框选项。 -<optgroup></>下拉框选项的分组。 -<option></>定义在上面列举的三个元素中包含的项。<option> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。(目前一般用在select下）
• <dl><dt>（或者下面加上<dd>）
• <ul></><ol></>(下面加上<li>) 有序列表/无序列表。
• <form></> 表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。 -<footer></> 页脚，一般例如网页的logo联系方式等。
• <hr> 主题的的转换，在形式上表现为一条分割线。
• <ifram></> 内联框架，可以引入别的HTML等。
• <input> 用来收集用户的选择，有超级多类型和控件可供使用，例如复选框、按钮、日期选择等。 -<textarea></>用户输入长段文字。
• <lable></> 一般将一个 label 和一个input元素相关联： 1.标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。 2.你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。 3.要匹配在一起，需要给 input 一个 id 属性。而 lablel 需要一个for属性，其值和 input的 id 一样。 4.也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在。
  栗子：
  
• <mark></>引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
• <main></> 在文档中，main元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。
• <meter></>``<progress></>用计量器来表示（看起来像进度条）。
• <nav></>导航栏。
• <object></>嵌入对象元素。表示引入一个外部资源，可以是图片，小页面或是提供的资源。
• <s>表示删去/已用过。
• <small></>將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。
• <source></> 为picture、video、audio元素指定多个资源。
• <track></>当作vedio/audio的子元素，可以用来加载字幕。
• <sub></><sup></>下标/上标。
• <details></>收缩挂件，可展开。
• <summary></>detail元素的子元素，来表示内容的摘要、标题或图例。

HTML全局属性

• contenteditable="true/false"元素是否可编辑。
• dir="rtl/ltr/auto"文字方向右到左/左到右/根据文本智能自动选择
• hidden="true/false"元素不再相关或者尚未相关，它不会被显示。（有一些要注意的点：例如如果在css中设置了display：flex，即使被隐藏了也会显示。隐藏元素不应与非隐藏元素链接，但你也可以将一个带有 hidden 标签的 canvas 元素作为屏幕外的缓存区域，或者在表单控件中引用一个已经隐藏的表单。）
• tabindex 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航，因常用tab键切换聚焦而命名。
• title如果省略了这个属性，就意味着这个元素的最近祖先的标题仍然是相关的（并且可以用作元素的提示信息）。如果这个属性设为空字符串，它就明确意味着，它的最近祖先的标题是不相关的（并且不应用于这个元素的提示信息）。

HTML语义化

• HTML语义化的好处：方便自己对代码进行修改维护，也方便后来接手代码的人看懂。
• 浏览器显示页面时会根据标签来一块块进行加载。也便于和css等进行更精准的绑定。
• 方便搜索引擎爬取，例如标题的优先级大于其他文字。
• 屏幕阅读器为盲人阅读的时候要能够通过HTML结构来更好的读。或者是平时生活中我们需要时，例如有的标签会允许一个范围内的框选，而不是仅仅只能点击复选框那一个框框，更加便利。

三、实践练习例子

简单做了一个网页页面，包含侧边栏、滚动、页脚等。

四、课后个人总结

• 其实自己之前就已经学过HTML了，但是并没有把标签、属性文档通读一遍，想的是当用到了再去查就行了。借着这次写笔记的机会把文档通读了一遍，发现其实在实际用到时只是知道哪个能用，但并没有注意到哪个更适合，而通读了一遍之后，虽然也不会全部记住，但至少都有了个印象，下次使用时也能有个印象“是不是有哪个更加适合来着”，然后具体的去查文档，会更高效规范一些。
• 之前其实虽然知道HTML主要是定内容，但是在使用中还是会有时候图方便因为想要某些样式就修改他的HTML属性，听老师讲课反思理解了写HTML时语义化的重要性，不只是为了后来的维护，像是对于一些特殊应用场景，语义化更是为了机器能看懂来服务的。
• 希望下一篇笔记将CSS的文档也通读一遍，做出自己满意的网页效果。

五、引用参考

MDN官方HTML文档