这是我参与「第四届青训营 」笔记创作活动的第1天
青训营的第一天，首先回顾了HTML的知识，该课程不仅包含html的基础部分，还有一定的深入，下面是课程的笔记和总结。
课程笔记
HTML（超文本标记语言——HyperText Markup Language）是网页的基本骨架，通过不同的标签组合而成。常用的标签包含<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>等。
HTML中的标签大部分都具有明确的含义，需要在合适的地方选用适合的标签。这实际上就是一种语义化。
<input>标签
<input>标签通过使用type属性指定不同的展现形式，主要包含的属性值包括search|submit|tel|text|url|week|hidden|month|number|password|range|research|color|date|datetimea|email|file|button|checkbox等，具体的含义工作方式可以参考MDN文档
<meta>标签
<meta>标签是文档级元数据元素，
meta元素定义的元数据的类型包括以下几种：
- 如果设置了
name属性，meta元素提供的是文档级别（document-level）的元数据，应用于整个页面。- 如果设置了
http-equiv属性，meta元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。- 如果设置了
charset属性，meta元素是一个字符集声明，告诉文档使用哪种字符编码。- 如果设置了
itemprop属性，meta元素提供用户定义的元数据。
常见属性:
这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的"utf-8"。
此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。
语义化
- 是什么？
- html中的元素、属性和属性值都有某种含义
- 为什么？
- 利于代码维护，利于SEO，自动翻译，屏幕阅读器
MDN文档的说明：developer.mozilla.org/zh-CN/docs/…
Some of the benefits from writing semantic markup are as follows:
- Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
- Screen readers can use it as a signpost to help visually impaired users navigate a page
- Finding blocks of meaningful code is significantly easier than searching though endless
divs with or without semantic or namespaced classes- Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming
- 如何做到语义化？
- 了解每个标签和属性的含义，思考什么标签最适合描述内容
- 广义的语义化还应该包括js，css变量名，以及前端框架的语义化
总结
通过青训营老师的讲解，对HTML有了更深入的了解，同时也复习了一些过去有些忘记的知识点，对标签尤其是标签的语义化有了更加清晰的认识。
