这是我参与「第四届青训营 」笔记创作活动的的第1天
写在前面
大家好呀，这里是珂朵莉chtholly，今天是我进入青训营学习的第一天。我个人是不太喜欢用电脑做笔记的，更倾向于手写。之前我有做一个小博客想做笔记，但是因为我觉得打字太麻烦了所以就鸽掉了o(╥﹏╥)o。不过呢既然青训营有这个笔记打卡活动，我还是会好好记笔记的ヾ(✿ﾟ▽ﾟ)ノ。由于是第一次上课，讲的内容还是比较基础的，那我把这个笔记当做个人对HTML的复习啦
当然我很不熟练笔记写的没那么好看
什么是前端？
这对于这次参加青训营的同学来说是一个必须搞明白的问题。很早以前在我刚进入大学的时候，满怀信心加入学校的一个技术社团，里面也问了类似的问题。在你眼中什么是前端工程师？ 想想当时的回答还很纯真。
不过还是先梳理下老师所提到的内容
- 前端解决什么问题
-
- 解决GUI人机交互问题
- 前端的终端
-
- PC/移动浏览器
-
- 客户端/小程序
-
- VR/AR
- 前端的技术栈
-
- Web技术栈
总而言之前端工程师就是运用Web技术栈解决多端用户图形交互的工程师
前端网页的结构
网页由这三种语言描述并通过根据网络协议（HTTP）与服务器端通讯
前端应该关注哪些方面？
前端之前提到就是图形化下的人机交互，那么必然是要遵循人机交互的原则的。
如功能，美观，无障碍，性能，安全，兼容，体验......
以上都在前端工程师的考虑范围内
什么是HTML？
印象最深的可能是技术书上的那句超文本标记语言吧😂
这个描述说的不错，HTML就是HyperText Markup Language——标记语言
例如<img src=”photo.jpg” /> src是属性名 后面=内的是属性值
HTML最基础的例子
<html>
<head>
<meta charset=”UTF-8”>
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
不知道为啥<!doctype html>在最上面显示不出来，那就不管它了，我自己知道这个用来声明HTML版本就行
DOM树与HTML
HTML的语句结构就是一颗DOM树
这样我们将HTML结构分为一个根节点和多个节点。这个思路等让我们很快读懂冗长的HTML代码
HTML语法
- 标签和属性不区分大小写，建议小写
- 空标签可以不闭合(自结束标签)，input，meta
- 属性值推荐双引号包裹
- 某些属性值可以省略，required，readonly
HTML语义化编程
为什么要语义化？
HTML中的元素，属性及属性值在设计之处就拥有某些含义，例如<h1></h1>就是用来描述一级标题的，开发者应该遵循语义来编写HTML，不要用别的奇怪方式来实现与<h1></h1>同样的效果。
lang属性进行区分
语义化的好处
- 代码可读性
- 代码可维护性
- 搜索引擎优化
- 无障碍阅读
谁在使用我们的HTML
- 开发者
- 浏览器
- 搜索引擎
- 屏幕阅读器——特殊人群
如何做到语义化
- 了解标签和属性的含义
- 思考合适的标签来描述内容
- 不使用可视化工具来生产代码
具体的HTML标签（更新中）
-
h1-h6标题标签
h1标签展示的内容大小是HTML标题标签中最大的，其他的依次减小。这说明了在全文中的地位h1标签应该表现文章最重要的标题内容而h6标签则是最不重要的<hgroup></hgroup>可以给h标签进行分组，可以将相关标题组合起来，运用后成为块元素(block element) -
p标签
p标签的内容是一个段落，也是块元素，也可以用表示短引用做出“ ”的效果在
p标签中可以添加行内元素(inline element)，例如：<em></em>表示斜体强调<strong></strong>表示加粗强调 -
br标签
br标签是HTML中的换行符
它可以在语句中间添加来分隔文字，在不产生一个新段落的情况下进行换行，例如：<p>这个<br>段落<br>演示了分行的效果</p> -
块引用标签
<blockquote></blockquote>被我们称为块引用标签，其作用是将所有内联内容以文本形式显示，而不去处理其中的各种标签和换行什么的。
