这是我参与「第四届青训营」笔记创作活动的第1天

初识前端

在青训营的第一堂课，虽然有一点挫折，但是总体感觉还是很好的，更加系统、全面的了解了前端是一个怎么样的东西。

什么是前端？

最简单的讲，前端就是前端工程师开发设计的页面。比较专业的讲，它是 解决图形用户界面人机交互问题、跨终端 （无论是PC浏览器/移动浏览器、小程序、还是VR····）、使用web技术栈的产物。

web技术栈？

web技术栈主要有html、css、JavaScript，html负责内容、css负责样式、JavaScript负责其相关的行为。它们通过网络协议与服务端交互。网络协议主要有：HTTP/HTTPS/TCP/IP····

前端应该注意到的方面

功能：功能与需求是需要前后端共同开发的，也是最重要的，没有功能开发出来的页面也就没有意义。
美观：一个美观的页面有吸引用户，提升用户体验的
无障碍：可以在把不同的人群、不同的和环境中无障碍的使用
安全: web安全也是页面不可或缺的一项、保护用户的安全是至关重要的
性能：好的性能能够减少维护、运营成本和提升用户体验的
兼容性：不同的终端、不同的机型、不同的系统中都能适配
用户体验：能够让用户能够便捷地使用（比如图标是否具有代表性，经常使用的按钮多个页面是否一致等），这些我们在软件测试在一般采用黑盒测试。

前端的开发环境

前端的开发环境非常简单，不像服务端一样需要配置环境、使用控制台运行什么的，它只需要一个浏览器、一个能够编写文件的编辑器，就算是做笔记的一个软件都行（只需将写好的文件后缀改为html等···）。但是开发我们一般使用VS code（这是一个万能编辑器，只需要下载插件，啥语言都能写）、WebStorm、Vim···

HTML

什么是HTML

HTML的全名为：HyperText Markup Language

HyperText:图片、标题、链接、表格
Markup Language：标记语言。顾名思义，是通过标签来判断属性的，一般格式为: <标签属性=属性值></标签>，可缩写为：<标签属性=属性值 />

比如：这里写了一个a标签，意味着它是一个超链接，我们点击百度字样就可以跳转到百度的网页上

<a href="www.baidu.com">百度</a>

HTML框架

如图所示：

在html标签之上：

<!doctype html>：<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD。
 该解析来自：[W3C](https://www.w3school.com.cn/tags/tag_doctype.asp)

html标签：

 <html lang="en">:leng声明该页面主要语言为英文

在html标签中:除了，其余皆应该在html标签中

在head中标签：
<meta charset="UTF-8">：页面以UTF-8编码
<meta http-equiv="X-UA-Compatible" content="IE=edge">:文档兼容模式的定义。edge模式使IE以最高级模式渲染文档····
link：用来引用css样式
title：页面标题，不在页面中展示

在body中：
在页面展示的内容都应该在body中，标记这些内容的标签也在其中

其DOM树为：图片来自百度图片

HTML的内容标签（自己取名，不知道对不对）

标题标签

从H1~H6，H1为一级标题，以此类推···

效果如下：

列表标签

有序列表：<ol>
        <li></li>
        <li></li>
            </ol> 
无序列表：<ul>
            <li></li>
            <li></li>
                </ul>
键值对列表<dl>
            <dt>
             <dd></dd>
                </dt>
            <dt>
             <dd></dd>
                 </dt>
                     </dl>  // 键值对为 多对多的关系

效果如下：

链接

<a href=""> </a>   替换当前页面
<a href="" target="_blank"></a> 新建页面

多媒体

图片：<img src="" alt=""></img>  alt：当图片未加载出来则显示alt中的内容
音频：<audio src="" controls></audio> controls:浏览器默认播放组件
视频：<video src="" controls></video>

输入

<input placeholder="">  //placeholder:提示文本
<input type="range">    //滑动框
<input type="" min="" max=""> //type：类型 number类型可以使用min、max来控制最大、最小值
<textarea></textarea>  //长文本
·····

效果如下：

结语

肝了两小时写下的笔记，多少有点成就感。最爽的就是付出后的那一份满足感和认同感。虽然基础、简单，但是把一件简单的事情做好也是很满足的。

千字文初识前端和HTML | 青训营笔记