这是我参与「第五届青训营 」笔记创作活动的的第1天，希望继续坚持。
前端
-
解决GUI人机交互问题
-
跨终端
- PC/移动浏览器
- 客户端小程序
- VR/UR等
-
Web技术栈
前端技术栈
- javascript(行为)
- css(样式)
- HTML(内容) 通过http协议, 与服务器交流
前端边界
node.js服务器
- electron 桌面应用
- react native app
- webrtc 在线传输
- WebGL 3d游戏
- webASSEMBLY
- ......
开发环境
-
浏览器
- IE/Edge
- Chrome
- FireFox
- Safari
-
编译器
- VSCode
- Vim
- WebStrom
HTML
什么是HTML
HTML=HyperText Markup Language=超文本 标记 语言
谁在用HTML
HTML代码不仅是用来显示的, 同时也有很多语义化作用!
- 开发者: 阅读代码
- 浏览器: 展示页面
- 搜搜引擎: 提取关键字, 便于SEO优化
- 屏幕阅读器: 为盲人读出内容
例如:
- 标题应该使用
<H1>而不是<div> - 按钮也要使用
<button>或者<input type='button'>
简单的HTML
这样的HTML代码会在浏览器中被解析成一棵DOM树
HTML语法
- 标签何属性不区分大小写，推荐小写
- 空标签可以不闭合，例如input、meta
- 属性值用双引号包裹
- 某些属性的属性值可以省略，如disabled、required
更多HTML标签
标题 h1~h6
HTML 列表
文本
内容划分
语义化
什么是语义化
-
HTML中的元素、属性及属性值都拥有某些语义
-
开发者应该遵循这些语义来编写HTML
- 例如有序列表用ol；无序列表用ul；自定义列表用dl
- lang属性表示内容的语言；disabled属性表示禁用
为什么要语义化
- 代码可读性、可维护性
- 搜索引擎优化
- 提升无障碍性
怎么语义化
传达内容，而不是样式
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
前端要关注的问题
总结
这节课是第五届前端青训营第一节课，HTML是前端最基础的基本知识，主要价值在于构建前端知识体系。 了解了HTML相关背景与应用场景，复习了HTML的基本标签使用，例如基本标题的标签，表单制作的标签，学习了一些新的标签的含义与使用场景。
