这是我参与「第四届青训营 」笔记创作活动的第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> //长文本 ·····
效果如下: 代码片段
结语
肝了两小时写下的笔记,多少有点成就感。最爽的就是付出后的那一份满足感和认同感。虽然基础、简单,但是把一件简单的事情做好也是很满足的。