这是我参与[第五届青训营]伴学笔记创作活动的第一天
本堂课重点内容：
- 前端应该关注的问题是什么
- 语义化（是什么，为什么需要语义化， 常见的语义化标签，怎么使用语义化）
<!DOCTYPE html>的作用是什么
前端应该关注的问题是什么？
- 功能： 具体功能的实现，能够给用户提供丰富的功能，提高交互感。
- 美观： 给用户展现的界面是否能够抓住用户的审美，迷住用户。
- 性能： 怎么去减少用户每次进行交互操作时候所需要花费的时间，提高用户体验感。
- 无障碍：身体有缺陷的人怎么也能轻松的阅读。
- 安全：我们开发的产品能不能真正保护住用户的隐私，开发的产品能不能防御住各种攻击。
- 兼容：我们开发的产品能不能在比较老的浏览器中正常运行，能不能适配移动端，小程序等多端。
语义化
1. 语义化是什么
HTML中的元素，属性，属性值都有着其明确的意义
2. 我们写的HTML究竟是谁在“读”
- 开发者 --- 开发者们开发，维护相关HTML文件
- 搜索引擎 --- 进行SEO，爬取相关数据，进行排序
- 浏览器 --- 浏览器请求到HTML文件，并渲染到界面上
- 阅读器 --- 帮助残障人士读取我们的数据
3. 语义化的好处，我们为什么需要语义化
对机器友好：
- 便于搜索引擎的SEO
- 便于阅读器等设备正确获取相关数据
对开发者友好：
- 便于开发者开发，维护，真正的做到简明之意
4. 常见的语义化标签
<hn>：h1~h6，分级标题，<h1>与<title>协调有利于搜索引擎优化。<ul>：无序列表。<ol>：有序列表。<header>：整个页面，或者文章的头部。但一般用于页面的头部。<nav>：标记导航。一般只用于页面的导航栏。<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。<article>：定义外部的内容，其中的内容独立于文档的其余部分。<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<aside>：定义其主要内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。<footer>：整个页面，或者文章的页脚。通常只包含版权、来源信息、法律限制等等之类的文本或链接信息，其他的部分可以使用 div 代替。<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。<em>：将其中的文本表示为强调的内容，表现为斜体。<mark>：使用黄色突出显示部分文本。<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。<blockquote>：定义块引用，块引用拥有它们自己的空间。<q>：短的引述（跨浏览器问题，尽量避免使用）。<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。<abbr>：简称或缩写。<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。<del>：移除的内容。<ins>：添加的内容。<code>：标记代码。<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）<progress>：定义运行中的进度（进程）。
5. 使用语义化标签的相关操作
- 网页的头部使用header标签，导航栏使用nav标签， 主要内容使用main标签，文章使用article标签，侧边栏使用aside标签。 而不是全部都使用没有任何语义的div标签。
- 强调如果很紧急的话使用有语气上强调的strong标签，而不是没有语气上的强调的em标签
- 尽量少用纯样式标签 b、font、u，应当使用CSS代替这些标签
- 强调文本尽量使用 strong 和 em
- 对于表格，标题要用 caption，表头用 thead ，主体部分用 tbody 包围，尾部用 tfoot 包围
- 对于表格，行列头 th 应该与普通的单元格 td 分开
- 表单域使用 fieldset 标签包起来，并使用 legend 标签说明用处
- 每个 input 标签应当对应一个 label 标签，并在 input 设置 id，label 设置 for 。这样，每个表单项便会有对应的说明。
- 对于图片 img 元素，应当增加一个 alt 属性。这个属性包含一条对图像的文本描述。尽管不是强制的，但这对于使用阅读器的人士是十分便利的。
- 不要滥用 h1-h6 这样的标签。如果仅仅是想需要一个大的字号，请使用 CSS 代替。
<!DOCTYPE html>标签的作用
这是一个文档类型声明的标签，用于告诉浏览器本文档是HTML5文本，请浏览器使用标准模式来解析文档。
标准模式：
使用最新的HTML5标准来解析文本
怪异模式：
允许浏览器使用自己的向后兼容的模式来解析文本
