1. html快速入门
1.1. 上班第一天 看文档
- 接口规范文档
- 命名规则文档
- 编码要求 1:3 1:2
:::warning
1:3 1:2 注意：是代码和注释比例
要求 2 行代码一行注释，或 3 行代码 1 行注释
看每个公司规范
:::
1.2. 什么是 HTML
HTML：HyperText Markup Language 超文本标记语言
超文本，有能力的普通文本就是超文本
语法，使用标记<>包裹 <a href></a>
每一种标签都有自己独特的功能
1.3. 文档类型
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
- meta
charset="utf8" <!-- 设置网页中文编码方式utf --> description <!-- 描述 --> keyword <!-- 关键词内容 --> <script></script> <!-- 定义或引用js文件 --> <style></style> <!-- 定义网页内部样式 --> <link> <!-- 引入外部样式 --> <pre></pre> <!-- 预格式化标记 --> <div></div> <!-- 用于页面布局 --> <span></span> <!-- 同一行文字使用不同样式 使用span --> © ® × X; sup sub <!-- 特殊字符 -->
1.5. 文本样式
<b></b> <strong></strong> 加粗
<i></i> <em></em> 斜体
<s></s> <del></del> 删除线
<!-- H5推荐使用有语义的标签 -->
<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标
1.6. 元素的显示方式
------------------------- 待添加 ------------------------
1.7. 图像和链接
<img src="图片路径/url">
<!-- url //统一资源定位符 肌肉记忆 代码 -->
图床 节省本地存储空间
缺点 不稳定
- 绝对路径
- 完整路径
- 使用任何网络资源的时候使用绝对路径
通信协议 / 主机名/ 文件目录结构/ 文件名称
优点 不占用本地存储空间
缺点 不稳定
使用本机资源使用绝对路径 项目中不许使用
<img src="c:\08.png">
1.8. 相对路径 & 绝对路径
相对路径: 即相对于当前文件的路径，前端开发中比较常用的路径表示方法
绝对路径: 即主页文件或者目录在硬盘上真正的路径。
- 符号表示 ``` ./ 代表目前所在的路径
../ 代表上一层路径
/ 开头，代码根目录
参照物 访问图片
1 兄弟关系 直接写文件名 2 子集目录 先进入兄弟文件夹 再引入图片 src="img/image/10.png" 3 父级目录 使用../返回父级目录 src="../../img/07.png"
- 优缺点分析
相对路径更方便更改，相对比较灵活，但是如果不慎易造成链接失效，并且容易被人抄袭。
绝对路径的话能避免这个问题，但是灵活性上相对较弱。
:::warning
如果设置的宽高比 不符合图片本身的宽高比 图片会发生失真
宽高只设置一个另外自适应
:::
## 链接
```html
<a href="..." target="_self/_blank"></a>
- 返回顶部
<a href="#"></a>
<!-- a 标签执行JS -->
<a> href="javascript:show()"></a>
1.9. 锚点
锚点是什么
页面生做的一个记号
通过 a 标签 跳转到这个记号
1.10. 定义锚点 & 连接到锚点
<a href="#hz">内容</a>
<a name="hz">跳转</a>
1.11. h5 写法 不浪费a标签
<!-- 连接到锚点 -->
<a href="#hz">hz</a>
<!-- 定义锚点 -->
<a id="hz"> </a>
前端开发概括
6800
VUE--angular --react 学好 12k
有效代码量
25k 40k 45k 50k 代码量保证薪资 8000
IT行业
涨薪速度 NO1 2年 6000*2.5
精致 互联网 6K 15K
封闭式开发 3个月 练人 14000
避免笛卡尔积 内联左联会产生笛卡尔积 发生便是致命
乘法 基站崩溃