这是我参与「第四届青训营 」笔记创作活动的的第1天
第一天的学习让我对前端是什么和HTML语法有了一个初步的了解。
一、什么是前端
前端包含三个要点：1.解决图形界面下的人机交互的问题；2.能够跨终端使用；3.使用Web技术栈， 概括来讲，前端是通过使用Web技术栈跨终端解决GUI人机交互问题。
二、前端技术栈
前端主要的技术分为三层，最基础的是HTML，HTML负责页面的结构和内容，页面中可以使用CSS设计页面的样式，如位置大小颜色等信息，使用JavaScript定义页面的行为，最后通过网络协议与服务器端连接。而这整个部分就构成了前端技术栈，其中HTML、CSS、JavaScript三个部分组成前端。
三、前端应该关注哪些方面
最重要也是首要的是做好功能方面，在保证功能的同时做到美观、安全、性能等等。
四、前端的边界
随着新的技术的不断发展，前端能做的已经超出了原先的范畴，目前前端技术可以通过一些平台实现很多操作：
- Node.JS 可开发服务器端的应用
- ELECTRON或React Native 可开发客户端应用
- Web RTC 可进行在线传输，多人会议
- WebGL 开发3D游戏
- WebASSEMBLY 可将C++等编写的代码编译成在浏览器中运行的代码
五、前端开发环境
六、HTML语法
6.1 什么是HTML
HTML是 HyperText Markup Language 的缩写，其中：
- HyperText 是指超文本，除文字外还包括图片、标签、链接、表格
- Markup Language 标记语言，例如：
<h1>文章标题</h1>
6.2 DOM树
结合课上一段具体代码：
其中，<!doctype html>标记了当前的HTML文件以及文件的HTML版本，避免浏览器以一种不恰当的方式对页面进行渲染；<html>···</html>是文档的根标签，其他标签都写在根标签中；<head>标签中是一些页面的元素，如页面的标题及编码；<body>中呈现的是具体的文档内容。
当浏览器得到这一代码时会进行解析并得到DOM树，其中每一个节点称为DOM节点。
6.3 HTML语法
HTML语法主要有以下几点注意点：
- 标签和属性不区分大小写，推荐小写。
- 空标签可以不闭合，例如：input、meta。
- 属性值推荐用双引号包裹。
- 某些属性值可以省略，例如：required、readonly。
6.4 常见的HTML标签
标题标签
<h1>~~<h6>:表示从一级标题到六级标题，字体依次减小；<p>:之后接一段文字等正文内容
列表标签
<ol>:有序列表，列表中元素按照先后之分有排列顺序<ul>：无序列表，列表中元素之间并无太大关系，没有排列顺序<dl>:定义列表，其中<dt>表示标题<dd>表示具体的值，可以是一对多的关系
链接
<a> 链接的常用标签，href 是<a>最重要的属性，是超链接的引用地址。
target="_blank"表示超链接打开时创建一个新的窗口，而不是更新原有的窗口。
多媒体
<img>: 图片标签<audio>: 音频标签<video>: 视频标签
输入
<input>: 输入标签
placeholder:占位符，当输入框没有内容时显示；type="range"显示滑动块并可调节值；type="number" min="1" max="10"表示在范围中输入值;<textarea> 表示可多行输入文本;
文本类标签
块级引用(长引用)：<blockquote>：直接引用一段较长的话，cite属性表示引用的这段话的来源；
短引用：<cite>：引用较短的几个字，如作品名称；
<q>:之前出现过的部分再次引用时使用；
代码引用：<code>：引用一部分代码，可长可短；
强调：<strong>:突出表示重要及严重；
<em>:更多表现在语气上的强调；
内容划分
七、语义化
7.1 语义化是什么
-
HTML中元素、属性及属性值都具有某些含义
-
开发者应该遵循语义来编写HTML
-
有序列表用
<ol>,无序列表用<ul> -
<lang>属性表示内容所使用的语言
7.2 语义化的好处
-
增加代码的可读性
-
方便后期维护
-
可以优化搜索引擎
-
提升无障碍性
7.3 如何做到语义化
-
了解每个标签的属性和含义
-
思考每个标签适合描述哪些内容
-
不建议使用可视化工具生成代码，自己把控所使用的标签
八、个人总结
今天是我在青训营学习的第1天，今天主要将讲解的内容是前端与HTML的介绍，详细讲解了什么是前端、前端应注意的方面，重点讲解了HTML语法，并强调开发者应尊循语义进行编写HTML，今天所学的知识比较基础，想要熟练运用还需要课下自主练习。
注意
HTML传达的是内容，而不是样式！
