第二天的课程和第一天的课程相比比较轻松。可能第一天涉及到的没有接触的知识太多。接下来是关于第二天课程的整理。
前端
前端技术栈
主要分为三层HTML(内容）、CSS（样式、JS(行为，这些都是运行在浏览器里面的，浏览器可以通过网络协议和服务器进行通信。浏览器呢可以通过http协议把用户的一些行为数据提交到服务器端。
前端应该关注哪方面内容？
前端要解决人机交互的问题，所以前端不止要懂技术，也要懂其他，比如美观、功能、无障碍、安全、性能、兼容性、体验
前端的边界？ nodejis开发服务器端，electron，或reactnative进行客户端应用等等，webgl去开发流畅3D游戏，需要不断学习，跟上技术的发展
开发环境
门槛低，容易入门。 浏览器：ie、chrome、firefox、safari 编辑器：vscode、vim、webstorm
HTML
HTML是什么
HyperText Markup Language超文本标记语言 超文本，即图片、标题、链接、表格。
标记语言：用成对的标签来表示一段内容
可以在标签上设置属性src等，
<!doctype html>是非常重要的，它标记了我们当前使用的html文件是一个什么样的html版本，最终呢浏览器会根据这个决定要怎么渲染。
<html>是一个根标签。
<head>存放页面元数据，并不需要直接呈现给用户，比如说页面的标题是什么或者页面使用什么样的编码。
<body>标签存放给用户展现的真正内容。
浏览器拿到html代码会解析成一个DOM树，顾名思义就是一个树状的结构，里面的每一个节点称为DOM节点，包含文档的根节点。
HTML语法
- 标签和数学不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
标题h1~h6
六个级别的标题，一级标题最大，依次字体缩小
列表标签
有序列表展示出来会默认在前面加上123。无序列表，前后顺序没有太大关系，展示时前面会有一个小黑点。另一种列表是key value的表现形式，前面一个属性名，后面跟上属性值。这是定义或者叫做描述列表，dt是描述列表的标题，具体的描述放在dd里面，一个dt可以对应一个或多个dd
链接
是一个非常重要的元素，因为非常常用所以只保留了一个字母a，它最重要的属性就是href，它的值就是超链接的地址，另一个属性target指定跳转方式，当值为_blank时，是重新打开一个窗口跳转，默认是直接跳转
我们也可以在页面中插入一些多媒体元素，比如图片img，音频audio，视频video。 alt这个属性就是在用户显示不了给图片时，使用这个属性对应的值来代替显示，使用降级的方式来传达信息。 controls属性是默认显示浏览器默认的播放控件的，比如按钮和进度条。 html里面也提供一些控件让用户来选择输入一些值，这就是表单控件。
input标签里面有一个placeholder属性，表示占位符，用户如果没有输入的话，默认展示的是占位符属性对应的值。除了输入一些简单的值，用户还可以输入一些范围，比如说type="range"，界面会显示滑动条。
也可以指定用户输入的类型和最小值最大值type="number"，type="date"也可以输入日期格式的值，有些场景是需要用户输入较长的数据的，我们就可以使用到表单域textarea
除了输入之外，也可以让用户在已有的选项来进行选择，选择分为单选radio和多选checkbox，单选的互斥关系是通过name这个属性来达到的，多个选项的name应该是要一样的。如果选项比较多，在页面上直接展示出来，可能会比较臃肿，在这种情况下我们也可以使用应该下拉选择select，select里面有哪些选择我们可以写在option里面。但有些情况下，我们是希望用户可以自由的去输入一些值的，在输入的时候呢，可以给用户一些提示来辅助输入。这个时候我们可以给input指定应该list属性，在list的值里面进行一些提示。
引用标签我们经常会用到blockquote,来进行块级引用，块级引用有一个属性cite来表示引用的这段文字的来源 还有一个标签是cite标签，该标签是短引用，一般用短短几个字表示引用别人的作品和章节 还有一种引用是q，一般是前面提到的内容我们再来进行引用，q和cite是有区别的 除了引用之外我们还有其他的标签比如说code标签，顾名思义就是表示代码，当我们的页面中有代码我们可以用code标签，引用内容可长可短
我们也可以用文本标签来表示我们要强调的东西一个是strong另一个是em，但是这两者也有不同，strong更突出这个东西很重要很紧急，而em更多是在语气上的强调。 上面的更多的是在细节上的
内容划分也很重要，html也提供了一些相关的语义化标签比如header(放logo导航之类的东西）、nav（导航）、main、article、aside（和页面内容不是直接相关的），、footer（参考链接，版权信息，备案信息等等）
语义化是什么？
HTML中的元素、属性即属性值都拥有某些含义，开发者应该遵循语义来编写HTML，有序列表用ol；无序列表用ul；lang属性表示内容所使用的语言。 好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器、展示页面
- 搜索引擎-提取关键字、排序
- 屏幕阅读器-给盲人读页面内容
如何做到语义化？
- 了解每个标签和属性的含义（推荐MDN，W3C）
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码，没有办法去控制生成的标签是什么样子的
