这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是前端
-
解决GUI(图形用户界面)人机交互问题
-
跨终端
- PC/浏览器
- 客户端/小程序
- VR/AR
- 一句话
-
web 技术栈
一句话，就是前端工程师使用web技术栈，解决多端图形用户交互界面问题的工程师
前端技术栈
HTML(内容)
CSS(样式)
JavaScript (行为)
前端应该关注那些方面
功能、美观、兼容、性能、安全、体验、无障碍 一个好的产品是包含很多方面，我们要先学习的有很多
前端的边界
入门简单，要持续学习，值得深耕的领域有很多
开发环境
HTML是什么
HTML 即 HyperText Markup Language 简称：HTML 是一种用于创建网页的标准标记语言
head 标签用于定义文档头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
可以使用F12 打开浏览器调试工具查看 这样的树形结构
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
标题 h1-h6
列表标签 ul无序列表 ol有序列表 dl自定义列表
链接 a
图片 img 音频 audio 视频 video
输入 input
label 标签实现 单选radio 多选checkbox select 标签 用来创建下拉列表
内容划分
article 标签定义独立的内容
aside 标签定义 article 标签外的内容
nav 标签定义导航链接的部分
footer 标签定义文档或者文档的一部分区域的页脚
语义化是什么？
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol 无序列表用ul
- lang属性表示内容所使用的语言
谁在使用我们写的HTML
- 开发者修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器~给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
最后，建议多看MDN、W3C的文档，去学习、了解
个人总结
前端的东西很多要多学，多看，多练 要保持一种持续学习的心态的去认识
