# html快速入门
# 上班第一天 看文档
- 接口规范文档
- 命名规则文档
- 编码要求 1:3 1:2
WARNING
1:3 1:2 注意:是代码和注释比例
要求 2 行代码一行注释,或 3 行代码 1 行注释
看每个公司规范
# 什么是 HTML
HTML:HyperText Markup Language 超文本标记语言
超文本,有能力的普通文本就是超文本
语法,使用标记<>
包裹 <a href></a>
每一种标签都有自己独特的功能
# 文档类型
- html5
<!DOCTYPE html>
# 定义和用法
<!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 <!-- 特殊字符 -->
# 文本样式
<b></b> <strong></strong> 加粗
<i></i> <em></em> 斜体
<s></s> <del></del> 删除线
<!-- H5推荐使用有语义的标签 -->
<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标
# 元素的显示方式
------------------------- 待添加 ------------------------
# 图像和链接
<img src="图片路径/url">
<!-- url //统一资源定位符 肌肉记忆 代码 -->
图床 节省本地存储空间
缺点 不稳定
- 绝对路径
- 完整路径
- 使用任何网络资源的时候使用绝对路径
通信协议 / 主机名/ 文件目录结构/ 文件名称
优点 不占用本地存储空间
缺点 不稳定
使用本机资源使用绝对路径 项目中不许使用
<img src="c:\08.png">
# 相对路径 & 绝对路径
相对路径: 即相对于当前文件的路径,前端开发中比较常用的路径表示方法
绝对路径: 即主页文件或者目录在硬盘上真正的路径。
- 符号表示
./ 代表目前所在的路径
../ 代表上一层路径
/ 开头,代码根目录
参照物 访问图片
1 兄弟关系 直接写文件名
2 子集目录
先进入兄弟文件夹 再引入图片 src="img/image/10.png"
3 父级目录 使用../返回父级目录 src="../../img/07.png"
- 优缺点分析
相对路径更方便更改,相对比较灵活,但是如果不慎易造成链接失效,并且容易被人抄袭。
绝对路径的话能避免这个问题,但是灵活性上相对较弱。
WARNING
如果设置的宽高比 不符合图片本身的宽高比 图片会发生失真
宽高只设置一个另外自适应
# 链接
<a href="..." target="_self/_blank"></a>
- 返回顶部
<a href="#"></a>
<!-- a 标签执行JS -->
<a> href="javascript:show()"></a>
# 锚点
锚点是什么
页面生做的一个记号
通过 a
标签 跳转到这个记号
# 定义锚点 & 连接到锚点
<a href="#hz">内容</a>
<a name="hz">跳转</a>
# 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
避免笛卡尔积 内联左联会产生笛卡尔积 发生便是致命
乘法 基站崩溃