前端与HTML | 青训营笔记

69 阅读2分钟

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

该笔记关于前端与HTML,主要有3个部分,分别为前端,HTML和语义化

一.前端

什么是前端

解决GUI人机交互问题

跨终端

PC / 移动浏览器

客户端 / 小程序

VR / AR 等

Web技术栈

总结:前端工程师就是使用Web技术栈来解决多种终端图形用户界面下的人机交互问题的工程师

前端的技术栈

HTML(内容)

CSS(样式)

JavaScript(行为)\

IMG_20220724_210817.png

该图是不是生动形象
如pink老师所说,HTML为结构类似于身体,CSS为表现类似于外观装饰,JS为行为类似于动作

前端需要注意的东西

功能(核心)
美观
无障碍
安全
性能
兼容性
体验

前端的边界

Screenshot_20220724_211524.jpg

开发环境

Screenshot_20220724_211611.jpg

二.HTML

HTML语法

标签和属性不区分大小写,推荐小写
空标签可以不闭合,比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略,比如required、readonly

HTML标签

标题:h1~h6字体逐渐变小
列表:分为有序列表ul,无序列表ol,定义列表dl
链接:a,href输入超链接目标的URL
多媒体:图像img,音频audio,视频video
输入:input
强调:strong标签,em(语气上)

内容划分

Screenshot_20220724_221546.jpg HTML作为前端的基础,也是十分重要呢

三.语义化

HTML 中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML\

有序列表用ol;无序列表用ul\

lang属性表示内容所使用的语言

语义化的好处

提高代码可读性
提高可维护性
搜索引擎优化
提升无障碍性

如何做到语义化

了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码
(推荐W3C和MDN文档)