前端与HTML|青训营笔记
这是我参与「第五届青训营」伴学笔记创作活动的第1天。
一、本堂课重点内容
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML作用解析
- HTML语义化
二、详细知识点介绍：
1. 前端的定义（三要点）：简单来说，前端工程师就是使用Web技术栈来解决多端图形用户界面交互功能的工程师。
（1）解决GUI人机交互问题
（2）跨终端（使用的技术栈都是HTML、CSS、HTTP网络协议等
①PC/移动浏览器 ②客户端/小程序 ③VR/AR 等
（3）Web技术栈
2. 前端技术栈拆解与分析：主要分为三层，HTML，CSS，JS和网络协议构成了前端最基本的技术栈
HTML：最基础的是HTML，HTML负责页面、结构、内容
CSS：设置页面样式，比如大小颜色等
JS：定义网页的行为，比如说用户操作，网页反馈响应
3. 前端关注的方面：美观，性能，功能，安全，无障碍，兼容，（用户）体验
4. 前端常见边界：
（1）node.js:开发服务器端的应用
（2）ELECTRON/React Native:开发客户端应用
（3）WebRTC：进行P2P的在线传输，实现多人会议
（4）WebGL：开发流畅的3D游戏
（5）WebASSEMBLY:把各种语言编写的代码编译成浏览器中可运行的代码
5. HTML（HyperText Markup Language,超文本标记语言）定义：
6. DOM树：浏览器对HTML的解析，每个节点称为DOM节点
7. HTML语法：
8. 列表：(list)
html中的列表一共有三种：
（1）有序列表：使用ol标签来创建有序列表，使用li表示列表项
- 1
- 2
- 3
（2）无序列表：使用ul标签来创建无序列表，使用li表示列表项
- 1
- 3
- 2
（3）定义列表：使用dl标签来创建有序列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明
- 数字
- 1
- 其他
9. 语义化
三、实践练习例子
1.代码练习
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>页面的标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落</p>
</body>
</html>
（1）Doctype：标记当前使用的html版本,浏览器会以此决定使用哪种渲染模式，不写将导致浏览器以较为老式的渲染模式，从而页面展现出来的效果与实际不符。
html5的文档代码声明:!doctype html
（2）html:文档的根标签，其他标签都写在html标签内
（3）head:存放页面原数据，不需要呈现给用户的，比如页面标题和用的编码
（4）body：呈现给用户的内容
（5）标题h1-h6：标题字体大小从1到6自动缩小
2.链接
（1）href 指定跳转的目标路径 （2）Target=“blank” 在一个新的标签页中打开链接
（3）无target就是默认当前网页替换
<a href="https://www.bytedance.com/">字节跳动官网</a>
<a herf="https://www.bytedance.com/" target="_blank">字节跳动官网</a>
3.多媒体img（图片，音频，视频）
（1）src表示图片地址
（2）alt表示替代性文本，但原先的多媒体信息展示不出来时，显示alt内容
（3）Control表示浏览器默认播放控件
<img
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
alt="Metal movable type"
width="400"
/>
<audio
src=" /assets/music.ogg"
controls
></audio>
<video
src="/assets/video.mp4"
controls
></video>
4.输入
<input placeholder="请输入账号">
<input type="range">
<input type="number" min="1" max="5">
<input type="date" min="2000-01-01">
<textarea>Hello</textarea>
（1）placeholder表示占位符，未输入时的默认显示，输入后被覆盖
（2）Textarea输入的是多行的区域
5.选择
（1）多选 checkbox （2）单选 radio,通过name 这个属性实现互斥 （3）下拉选择select,每个选项 辅助快速输入，提供默认值，在用户输入时给予提示，但不限制用户输入其他值
四、课后个人总结：
本节课了解了前端的定义和要解决的基本问题以及HTML的定义等基础知识。
