🤵 Author ：Horizon Max
✨ 编程技巧篇：各种操作小结
🎇 机器视觉篇：会变魔术 OpenCV
💥 深度学习篇：简单入门 PyTorch
🏆 神经网络篇：经典网络模型
💻 算法篇：再忙也别忘了 LeetCode
Web 前端基础操作小结
🚀 HTML
🎨 HTML 认知
🚩 排版标签
- 🔱 标题：
<h6> </h6>标题
- 🔱 段落：
<p> </p>段落
- 🔱 换行：
<br>
- 🔱 水平线：
<hr>
🚩 文本格式化标签
- 🔱 加粗：
<b> </b>、<strong> </strong>加粗 - 🔱 倾斜：
<i> </i>、<em> </em>倾斜 - 🔱 下划线：
<u> </u>、<ins> </ins>下划线 - 🔱 删除线：
<s> </s>、<del> </del>删除线
🚩 媒体标签
- 🔱 图片：
<img src=" " alt=" " title=" " width=" " height=" "> - 🔱 路径：
" "同级、"./ "下级、"../ "上级 - 🔱 音频：
<audio src=" " controls autoplay loop></audio> - 🔱 视频：
<video src=" " controls autoplay loop></video>
🚩 链接标签
- 🔱 超链接：
<a href="#" target="_blank"> </a>
🎨 HTML 基础
🚩 列表标签
- 🔱 无序列表：
<ul>
<li> </li>
</ul>
- 无序列表
- 🔱 有序列表：
<ol>
<li> </li>
</ol>
- 无序列表
- 🔱 自定义列表：
<dl>
<dt> </dt>
<dd> </dd>
</dl>
-
自定义列表表头
- 自定义列表内容
注：
去掉列表符号：list-style: none;
🚩 表格标签
- 🔱 表格基础：
<table border=" " " width=" " height=" ">
<caption></caption>
<tr>
<th> </th>
<tr>
<tr>
<td> </td>
<tr>
</table>
| 表头 |
|---|
| 表格内容 |
-
🔱 结构标签：
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot> -
🔱 合并单元格：
<td rowspan=" "> </td>跨行合并
<td colspan=" "> </td>跨列合并
🚩 表单标签
-
🔱 imput 标签：
<input type=" ">
<form action=" ">
<input type=" ">
</form>
文本框：<input type="text" placeholder="占位符(提示信息)">
密码框：<input type="password" placeholder="占位符(提示信息)">
单选框：<input type="radio" name="分组组别" checked>
多选框：<input type="checkbox" checked>
文件选择：<input type="file" multiple>
提交按钮：<input type="submit" value=" ">
重置按钮：<input type="reset">
普通按钮：<input type="button" value="按钮内容"> -
🔱 button 标签：
<button type=" "> </button>
提交按钮：<button type="submit"> </button>
重置按钮：<button type="reset"> </button>
普通按钮：<button type="button"> </button> -
🔱 select 标签：
<select>
<option selected> </option>
<option> </option>
</select> -
🔱 textarea 标签：
<textarea cols=" " rows=" "> </textarea> -
🔱 label 标签：
<label for=" "> </label>
<input type="radio" id="111"> <label for="111">标签</label>
<label><input type="radio">标签</label>
🚩 语义化标签
-
🔱 无语义标签：
<div> </div>单行
<span> </span>多行 -
🔱 有语义标签：
<header> </header>网页头部
<nav> </nav>网页导航
<footer> </footer>网页底部
<aside> </aside>网页侧边栏
<section> </section>网页区块
<article> </article>网页文章
🚩 字符实体
- 🔱 空格：
 
🚀 CSS
🎨 CSS 基础
-
内部链接：
<style>
选择器 {
属性值 ;
}
</style> -
外部链接：
<head>
<link rel="stylesheet" href="theme.css">
</head>
🚩 选择器
- 🔱 标签选择器：
标签名 {css属性名:属性值; } - 🔱 类选择器：
.类名 {css属性名:属性值; }+标签内 class="类名" - 🔱 id选择器：
#id属性值 {css属性名:属性值; }+标签内 id="id属性值" - 🔱 通配符选择器：
* {css属性名:属性值; }
🚩 字体和文本样式
-
🔱 字体样式：
font-size字体大小
font-weight字体粗细
font-style字体样式
font-family字体类型 -
🔱 文本样式：
text-indent文本缩进 2em
text-align内容水平对齐方式 left、center、right
text-decoration文本修饰 underline、line-through、overline、none -
🔱 行高：
line-height -
🔱 字体大小和行高连写：
font:size/line-height -
🔱 标签居中：
margin:0 auto;
🚩 Chrome 调试工具
- 🔱 快捷键：
F12orFn+F12
🎨 CSS 进阶
🚩 选择器
-
🔱 复合选择器：
后代选择器：选择器1 选择器2 {css}
子代选择器：选择器1>选择器2 {css} -
🔱 并集选择器：
选择器1, 选择器2 {css} -
🔱 交集选择器：
标签选择器 类选择器 {css}：p.box{css} -
🔱 hover伪类选择器：
选择器:hover {css}
🚩 背景属性
-
🔱 背景颜色：
background-color#orrgba() -
🔱 背景图片：
background-image: url(' '); -
🔱 背景平铺：
background-repeat: 值
repeat水平和垂直方向都平铺
no-repeat不平铺
repeat-x水平方向平铺
repeat-y垂直方向平铺 -
🔱 背景图片大小：
background-size: 10px 20px;
百分比盒子本身的大小
contain等比缩放，一边和盒子大小一样
cover等比缩放，完全覆盖盒子 -
🔱 背景位置：
background-position: 水平方向位置 垂直方向位置 -
🔱 背景相关属性连写：
background: color image repeat position
🚩 显示模式
- 🔱 块：
<div><p><h>系列等 - 🔱 行内：
<a><span>等 - 🔱 行内块：
<input><textarea><button>等 - 🔱 转换：
display: block转换成块级元素
display: inline-block转换成行内块元素
display: inline转换成行内元素
注：
<p> 不要嵌套 <div> <p> <h>系列
<a> 不要嵌套 <a>
🚩 CSS 特性
-
🔱 继承性：
文字属性 -
🔱 层叠性：
覆盖和叠加
🎨 CSS 盒子模型
🚩 优先级
- 🔱 基本优先级：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important - 🔱 叠加计算：
(行内，id，类，标签) 用于复合选择器，数量高优先级高
🚩 盒子模型
-
🔱 内容区域（content）：
height、width -
🔱 内边距区域（padding）：
上 右 下 左or上 左右 下or上下 左右单一方向：padding-right -
🔱 边框区域（border）：
border: 10px solid #000solid/dashed/dotted单一方向：border-right -
🔱 外边距区域（margin）：
上 右 下 左or上 左右 下or上下 左右单一方向：margin-right -
🔱 清除默认内外边距：
* {
padding: 0;
margin: 0;
} -
🔱 盒子阴影：
box-shadow: 5px 5px;
h-shadow水平偏移量
v-shadow垂直偏移量
blur模糊度（可选）
spread阴影扩大（可选）
color阴影颜色（可选）
inset内部阴影（可选）
注：
自动计算盒子尺寸(内减模式)：box-sizing: border-box;
🎨 CSS 浮动
🚩 结构伪类选择器
- 🔱 E元素中的第一个子元素：
E:first-child { } - 🔱 E元素中的最后一个子元素：
E:lasr-child { } - 🔱 E元素中的第n个子元素：
E:nth-child(n) { } - 🔱 E元素中的倒数第n个子元素：
E:nth-last-child(n) { }
注：
n 可以利用公式取值：2n 偶数；2n+1 奇数；-n+2 前2个；n+2 第2个至最后
🚩 伪元素
- 🔱 由 CSS 模拟出的标签效果（装饰性、不重要的内容）
- 🔱 父元素内容最前面添加：
::before {content: '内容'; } - 🔱 父元素内容最后面添加：
::after {content: '内容'; }
🚩 标准流
- 🔱 标签默认的标准排版规则
🚩 浮动
- 🔱 最左侧 浮动：
float: left; - 🔱 最右侧 浮动：
float: right;
注：
CSS 属性顺序：定位 —> 浮动/display —> 盒子模型 —> 文字样式
🚩 清除浮动
-
🔱 额外标签：
.clearfix {clear: both;}
<div class="clearfix"> </div> -
🔱 单伪元素：
.clearfix::after{
content: ' ';
display: block;
clear: both;
} -
🔱 双伪元素：
.clearfix::before,
.clearfix::after{
content: ' ';
display: table;
}
.clearfix::after{
clear: both;
} -
🔱 父元素种添加：
overflow: hidden;
🎨 CSS 定位装饰
🚩 定位
- 🔱 静态定位：
position: static; - 🔱 相对定位：
position: relative; - 🔱 绝对定位：
position: absolute; - 🔱 固定定位：
position: fixed; - 距离设定：
left: 10px
right: 10px
top: 10px
bottom: 10px
注：
水平居中：
left: 50%;
margin-left: -10px;
竖直居中：
top: 50%;
margin-top: -10px;
transform: translate(50%, 50%);
🚩 装饰
-
🔱 垂直对齐方式：
vertical-align: middle;
base
top
middle
bottom -
🔱 光标类型：
cursor: default;
default
pointer
text
move -
🔱 边框圆角：
border-radius: 10px; -
🔱 溢出部分显示效果：
overflow: visible;
visible
hidden
scroll
auto -
🔱 元素本身隐藏：
visibility: hidden;
display: none; -
🔱 透明属性：
opacity: 0.5; -
🔱 过渡：
transition: width 1s, background-color 1s;配合hover属性使用
transition: all 1s;全部属性
1728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
