day1
前端与 HTML | 青训营笔记
这是我参与「第五届青训营 」笔记创作活动的第1天。
一、本节课重点内容:
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML作用分析
- HTML语义化
二、详细知识点介绍:
1. 什么是前端
前端由和HTML、CSS、JavaScript三部分构成,分别负责网页的内容、样式和行为,在网络协议的联系下,上传至服务器端
2. 前端要关注的方面
包括但不限于功能、安全、无障碍、体验、性能、美观、兼容等方面
3. 前端的边界
node、Electron、React Nation、WebRTC、WebGL、WebASSEMBLY等
4. 开发环境
- 浏览器:IE/Edge、Chrome、Firefox、Safari等
- 编辑器:VSCode、Vim、WebStorm等
5. HTML是什么
HTML包括
HyperText(包括图片、标题、链接、表格等多种形式)
Markup Language(一种专门用来标记的语言)
6. DOM树
7. HTML语法
- 标签和属性不区分大小写,推荐小写
- 空标签可以不闭合,比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略,比如required、readonly
8. 常用标签
- 无序标签
1 | <ul> |
没有先后顺序,具体样式同笔记中的实心圆点
- 有序标签
1 | <ol> |
有先后顺序,具体样式同笔记中的空心圆点
- 其他标签
1 | <dl> |
<dd>
标签的内容会空一个tab键的位置再显示内容,一个<dt></dt>
标签可以有多个<dd></dd>
标签
9. 输入
input即表单类型,可以有多种类型,也有多种属性
常见的类型有:text、number、email、date、password、range、radio等
常见的属性有:value、alt、checked、placeholder、name、list等
10. 语义化
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表ol;无序列表用ul
- lang属性表示内容所使用的语言
- 好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
- 怎样做
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
11. 面向对象
- 开发者-修改、维护页面
- 浏览器- 展示页面
- 搜索引擎-提取关键字、排序
- 屏幕阅读器
==传达的是内容,而不是样式==
三、实践练习例子:
1 | <audio src="/assets/music.ogg" controls></audio> |
1 | <input placehoder="请输入用户名"> |
1 | <input list="countries"/> |
四、课后个人总结:
前端的知识主要用于网页内容的呈现,包含许多标签,属性,选择器等内容,只有熟练掌握并且灵活应用,才能加上CSS和JavaScript的内容之后有更好的页面效果
五、引用参考:
关于GUI的介绍:https://baike.baidu.com/item/GUI/479966
web开发技术栈总结:https://blog.csdn.net/dreamstone_xiaoqw/article/details/89741263
超文本链接:https://www.w3school.com.cn/tags/tag_term_hypertext.asp
标记语言Markup Language:https://cloud.tencent.com/developer/article/1597638