这是我参与「第五届青训营 」笔记创作活动的第1天。
一、了解前端
1.前端技术栈：HTML、CSS、JS
- HTML（HyperText Markup Language）：标记语言。负责构建页面的总体框架
- CSS（Cascading Style Sheet）：样式表语言。负责控制页面的外观样式。
- JS（JavaScript）：脚本语言。负责页面的动态实现以及用户交互。
2.前端的用处
- 解决GUI人机交互问题
- 跨终端：解决网页在不同终端（PC/移动浏览器，客户端/小程序，VR/AR）上的屏幕尺寸、处理能力、软件兼容性等问题。
- Web技术栈
3.前端的边界
- Node.Js：是一个基于Chrome V8引擎的JavaScript运行环境，让JavaScript运行在服务端的开发平台。用于开发服务器端的一些应用。
- Electron：是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。用于开发客户端的一些应用。
- RN（React Native）：是一个跨平台移动应用开发框架，是JS框架React在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。用于开发客户端的一些应用。
- WebRTC(Web Real-Time Communications)：是一项实时通讯技术，实现视频流和（或）音频流或者其他任意数据的传输。用来实现基于网页的多人视频会议。
- WebGL：是一种3D绘图协议，可以为HTML5 Canvas提供硬件3D加速渲染，Web开发人员可以借助系统显卡在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。
- WebAssembly：是一种低级的类汇编语言，为C++等语言提供一个编译目标，把用这些语言编写的一些代码变成可以在Web上运行的代码。它也被设计为可以与JavaScript共存，允许两者一起工作。
4.开发环境
二、HTML基础学习（上）
（1）标签
- 是由一对<>括起来的关键词
- 单标签：
<br/>（此为换行标签） - 双标签：开始标签
<html>，结束标签</html>（此为页面根标签）
（2）属性
- 属性是标签的特性。每个标签都有不一样的属性。
- 一个标签可以拥有多个属性，需要写在标签名后面。
- 书写要求：属性名="属性值"。
- 属性之间没有顺序要求，只需以空格隔开。
（3）注意
- 标签和属性不区分大小写，推荐用小写。
- 空标签可以不闭合，比如input，meta。
- 某些属性值可以忽略，比如required，readonly。
1.基本结构标签
HTML页面也称为HTML文档。文档的后缀名必须是 .html 或 .htm 。
2.图像标签
基本语法格式：<img src="图像URL"/>
- src是图像标签的必备属性，它用于指定图像文件的路径和文件名。
- 其它属性
| 属性名 | 说明 |
|---|---|
| alt | 替换文本。当图像不能显示时，在整个图像位置显示的文字。 |
| title | 提示文本。当鼠标放到图像上时，显示的文字。 |
| width | 设置图像的宽度。 |
| height | 设置图像的高度。 |
| border | 设置图像的边框粗细。 |
- 注意：width 或 height 只需写其中一个，另一个将会进行等比例缩放。
3.标题标签
基本语法格式：<h1></h1> ~ <h6></h6>（双标签）
- 标题标签括起来的文字会加粗，并且大小会随字号而变化（1最大，6最小）
- 一个标题占一行
4.段落标签
基本语法格式：<p></p>（双标签）
5.列表标签（双标签）
（1）无序列表
- 基本语法格式
- 注意：ul里只能有li，但li里可以有其它标签。
（2）有序列表
- 基本语法格式
- 注意：ol里只能有li，但li里可以有其它标签。
（3）自定义列表
- 基本语法格式
- 注意：dt与dd的数量没有限制，一个dt可对应多个dd。dl里只能有dt与dd，但dt与dd里可以有其它标签。
6.链接标签
基本语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>（双标签）
| 属性 | 作用 | 取值 |
|---|---|---|
| href | 指定链接目标的url地址 | 1.外部链接：url地址为外部网页的链接。 2.内部链接：内部网页之间的相互链接。如href="xxx.html"。 3.空链接：没有确定的链接目标时使用。href="#"。 4.下载链接：url地址是一个文件或压缩包，点击打开时会下载。 5.网页元素链接：网页中的各种元素都可以添加链接。 6.锚点链接：在href中以“#名字”设置属性值，如href="#名字"，在目标位置标签设置属性值"id='名字'"，两处就能产生联系，从链接处跳转到目标处。 |
| target | 指定链接的页面打开方式 | _self：在当前页面打开 _blank：在新页面打开 |
三、参考及拓展资料
- Node.Js：www.runoob.com/nodejs/node…
- Electron：c.biancheng.net/view/7790.h…
- RN：www.reactnative.cn/docs/gettin…
- WebRTC：developer.mozilla.org/zh-CN/docs/…
- WebGL：developer.mozilla.org/zh-CN/docs/…
- WebAssembly：developer.mozilla.org/zh-CN/docs/…
- 图像标签拓展：(37条消息) 【图像标签】_Hey_Coder的博客-CSDN博客_图像标签
