这篇笔记介绍了前端开发的基础知识，包括前端的定义、Web技术栈（HTML、CSS、JavaScript）以及前端应注意的功能、美观、无障碍、安全和性能等方面。详细阐述了HTML的结构、标签以及框架，并举例说明了各种内容标签的使用，如标题、列表、链接和多媒体元素。最后，提到了前端开发环境的简易性和HTML的成就感。
这是我参与「第四届青训营 」笔记创作活动的第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标签，意味着它是一个超链接，我们点击百度字样就可以跳转到百度的网页上 html <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为一级标题，以此类推··· - 效果如下： 
列表标签
html 有序列表：<ol> <li></li> <li></li> </ol> 无序列表：<ul> <li></li> <li></li> </ul> 键值对列表<dl> <dt> <dd></dd> </dt> <dt> <dd></dd> </dt> </dl> // 键值对为 多对多的关系 - 效果如下： 代码片段
链接
html <a href=""> </a> 替换当前页面 <a href="" target="_blank"></a> 新建页面
多媒体
hmtl 图片：<img src="" alt=""></img> alt：当图片未加载出来则显示alt中的内容 音频：<audio src="" controls></audio> controls:浏览器默认播放组件 视频：<video src="" controls></video>
输入
html <input placeholder=""> //placeholder:提示文本 <input type="range"> //滑动框 <input type="" min="" max=""> //type：类型 number类型可以使用min、max来控制最大、最小值 <textarea></textarea> //长文本 ····· 效果如下： 代码片段
结语
肝了两小时写下的笔记，多少有点成就感。最爽的就是付出后的那一份满足感和认同感。虽然基础、简单，但是把一件简单的事情做好也是很满足的。
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
