这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
2022.1.15前端学习
内容：HTML相关
学习内容参考网站：developer.mozilla.org/zh-CN/docs/…
1. 主根元素与文档元数据
以上图为例，
- 第一行代码< !DOCTYPE html>用于告诉浏览器渲染类型，用于保证文档的正常读取。
- < html >元素包含整个页面的所有内容，也称作根元素，所有其他元素必须是他的子元素。
- < head>元素用于灌顶文档相关的配置信息，包含面向搜索引擎的关键字，样式表CSS，脚本script，字符编码声明等。
< meta>元素定义的元数据的类型包含以下几种：
-
如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。 -
如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。 -
如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。 -
如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。 -
全局属性 name 在 < meta > 元素中具有特殊的语义；另外，在同一个 <meta> 标签中，name, http-equiv 或者 charset 三者中任何一个属性存在时，itemprop 属性不能被使用。 - < title > 元素 定义文档的标题，显示在Browser的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。
2.内容分区，文本内容和内联文本
这部分在mdn上有详尽具体的说明，本文不再赘述仅谈谈个人在观看视频和使用时的想法和感悟。
常用标签:
-
article元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目 -
< section> 元素表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。 -
< nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
代码
运行结果：
上图为在听课时所记录的代码以及运行结果，里面用了大量的P标签以区分各个功能块，类似于在运行模块外面套了层盒子以便区分。在实际操作过程中，完成input list时若在datalist的option中将value属性以缺省的状态放在代码块中无法达到想要的提示效果，在阅读value的定义
表明这个值是在提交给表单时所需要的，而当这个值为空时便直接从文本中获取。在这里的应用就是作为选择文本的注释，但浏览器在渲染时发现value为空，可能浏览器的渲染策略是不会显示内容为空的文本，这样也就不会显示我们所需要文本。结果对比如下：
结果更像是value为所需展示的值并且加粗显示。这时问题又出现了，上方选项表为什么可以无视value正产显示呢？
两相对比我猜测与datalist有关或者是input标签的问题。容我再去读读mdn文档再回头看看。
