这是我参与「第四届青训营 」笔记创作活动的的第1天
一、前端应该关注哪些方面？
课上老师讲了有：
美观，兼容，功能，性能，安全，体验，无障碍。
我的理解：
1.美观：
好的界面设计和排版，不仅给人耳目一新，而且用户更愿意停留使用。
以上两个网站的设计风格，体现了简洁和美观，清晰明了，不会出现用户找不到焦点的情况。
两者均采用了页头放于头部的策略，以及左图标又用户的布局。
2.兼容
能够在不同的浏览器下，无论是PC还是Android、iOS，都能正常打开并且很好的展示内容。
3.功能
比如飞桨社区就集合了
数据集，课程，比赛，项目运行等功能。
4.安全
网站的安全性关乎着用户信息的安全，以及网站的稳定性。
5.无障碍
在edge浏览器中，右键单击可打开朗读模式。这个模式对盲人相当友好，另外，文档很长眼睛看的不舒服也可以用朗读，听就行了。
二、开发环境
1.编辑器
我推荐 VSCode，因为它有着及其丰富的插件库。那我就给大家讲讲我用的几个插件吧！
（1）Chinese (Simplified) Language Pack for Visual Studio Code
中文语言包
（2）Markdown Preview Enhanced
在 VSCode 里编写 Markdown，支持预览
（3）Auto Rename Tag
自动重命名 HTML或XML 标签
（4）LeetCode
刷题利器
（5）jupyter
数据科学和机器学习的最爱^_^
三、HTML
1.html是啥？
-
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag)
-
HTML 使用标记标签来描述网页
2.HTML元素
主根元素
| 元素 | 描述 |
|---|---|
HTML <html> 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。 |
文档元数据
| 元素 | 描述 |
|---|---|
| HTML 元素 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 元素。 | |
| HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。 | |
HTML 外部资源链接元素 ( <link> ) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标和移动设备上用以显示在主屏幕的图标) 。 | |
HTML <meta> 元素表示那些不能由其它 HTML 元相关（meta-related）元素（(base、link, script、style 或 title）之一表示的任何Metadata信息。 | |
HTML 的 <style> 元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。 | |
HTML <title> 元素 定义文档的标题，显示在Browser的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。 |
分区根元素
| 元素 | 描述 |
|---|---|
HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。 |
内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉（header）、页脚（footer）、导航（nav）和标题（h1~h6）等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。
| 元素 | 描述 |
|---|---|
HTML <address> 元素 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。 | |
HTML <article> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。 | |
HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。 | |
| HTML 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。 | |
HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。 | |
HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。 | |
HTML <main> 元素呈现了文档的 body 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。 | |
HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。 | |
| HTML 元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。 |
文本内容
使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。
