前端（htmlcss）
前端页面
Web页面
PC端程序页面
移动端APP页面
...
HTML页面
HTML超文本标记页面
超文本：文本，声音，图片，视频，表格，链接
标记：由许多标签组成
HTML页面运行到浏览器上面
vscode便捷插件使用
vscode运行
自动刷新页面
<!DOCTYPE html>//指定当前html版本5
<html lang="en">//指定当前页面内容为英文<head><meta charset="UTF-8">//浏览器解码规则<meta http-equiv="X-UA-Compatible" content="IE=edge">//IE浏览器渲染效果按照IE浏览器最高版本展示<meta name="viewport" content="width=device-width, initial-scale=1.0">//移动端适配<title>hello</title>
</head><body>hello world
</body></html>html：html文件根标签
head：编写页面相关的属性
title：页面标题
body：页面内容展示信息
head和body是兄弟标签
head和title是父子标签
html
标签&标题&段落&换行&注释
注释
<!-- 这是注释 -->//ctrl+/标题标签
<h1></h1>
<h2></h2>
...
<h6></h6>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4><h5>这是h5标签</h5><h6>这是h6标签</h6>
</body></html>
段落标签
<p></p>每行存在可察的间隙
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触Bonsai CSS的新手来说，建议按照官方文档中的指导逐步操作，确保所有依赖项都已正确安装，并验证工具链是否正常工作1。</p><p>使用CSS Hooks管理样式表,CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的CSS布局原理,理解CSS布局的核心在于掌握如何定义元素尺寸（宽度/高度）及其定位方式（浮动、绝对定位等）。</p>
</body></html>
换行标签
<br>或者</br>实现段落换行，间隙小于段落间隙
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触Bonsai CSS的新手来说，建议按照官方文档中的指导逐步操作，确保所有依赖项都已正确安装，并验证工具链是否正常工作1。</p><p>使用CSS Hooks管理样式表,,<br>CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细<br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的CSS布局原理,理解CSS布局的核心在于掌握如何定义元素尺寸（宽度/高度）及其定位方式（浮动、绝对定位等）。</p>
</body></html>
标签（加粗&倾斜&删除线&下划线）
加粗：strong ，b
倾斜：em ，i
删除线：del ，s
下划线：ins ，u
（前者起强调作用）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触<strong>Bonsai</strong>CSS的新手来说，<b>建议按照<s>官方文档</s>中的指导逐步操作</b>，确保所有<ins>依赖项</ins>都已正确安装，并验证工具链是否<u>正常</u>工作1。</p><br>使用CSS Hooks管理样式表,,</br>CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细<br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的<em>CSS布局原理</em>,理解CSS布局的核心在于<i>掌握如何定义元素尺寸</i>（宽度/高度）及<del>其定位方式（浮动、绝对定位等）</del>。</p>
</body></html>
图像 （src&title&alt&height/weight&border）
img标签_src属性
<img src="./baidu.png">
img标签必须搭配src使用（指定图片路径）
绝对路径
图片路径
网络上的图片资源
相对路径
./xxx.png（当前路径）
./img/xxx.png（某个文件夹下）
../xxx.png（上一层路径）
本地图片插入
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触<strong>Bonsai</strong>CSS的新手来说，<b>建议按照<s>官方文档</s>中的指<img src="./baidu.png"></b>，确保所有<ins>依赖项</ins>都已正确安装，并验证工具链是否<u>正常</u>工作1。</p><br>使用CSS Hooks管理样式表,,</br>CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细<br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的<em>CSS布局原理</em>,理解CSS布局的核心在于<i>掌握如何定义元素尺寸</i>（宽度/高度）及<del>其定位方式（浮动、绝对定位等）</del>。</p>
</body></html>
网络图片插入
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触<strong>Bonsai</strong>CSS的新手来说，<b>建议按照<s>官方文档</s>中的指<img src="./baidu.png"></b>，确保所有<ins>依赖项</ins>都已正确安装，并验证工具链是否<u>正常</u>工作1。</p><br>使用CSS Hooks管理样式表,,</br>CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时，应仔细<br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的<em>CSS布局原理</em>,理解<imgsrc="https://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpg"><i>掌握如何定义元素尺寸</i>（宽度/高度）及<del>其定位方式（浮动、绝对定位等）</del>。</p>
</body></html>
img标签_alt属性
<img src=" " alt="图片加载失败..." border="1px" width="100px" height="100px">
alt：替换文本，当文本不能正确显示时，会显示一个替换的文字
title：提示文本，鼠标放到图片上，就会有提示
width/height：控制宽度高度，高度和宽度一般该一个就行，另外一个会等比例缩放，否则图片会失衡
border：边框，参数是宽度的像素，但是一般使用css设定
超链接标签
a_herf&a_target
<a href=" " target=" "></a>
href：必须具备，表示点击会跳转到哪个页面
target：打开方式，默认是_self. 如果是_blank 则用新的标签打开
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="https://www.baidu.com/">跳转到百度</a><a href="20241225.html">跳转到html页面</a><a href="#">在当前页面</a><a href="https://www.baidu.com/"><img src="baidu.png" alt="" title="跳转到百度"></a>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是页面标签</title>
</head><body><p>对于初次接触<strong>Bonsai</strong>CSS的新手来说，<b>建议按照<s>官方文档</s>中的指<img src="./baidu.png" title="这是一张百度图片"border="2px"></b>，确保所有<ins>依赖项</ins>都已正确安装，并验证工具链是否<u>正常</u>工作1。</p><br>使用CSS Hooks管理样式表,,</br>CSS Hooks提供了<ahref="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=39042058_26_oem_dg&wd=%E7%99%BE%E5%BA%A6&oq=%25E6%25AD%25B9%25E6%25AF%2592&rsv_pq=c049e1db002d548f&rsv_t=d34dAccK%2BMxkf%2Bu6RAUck6LsIGwU3XAhvhXOF0K3mxNmrBu7Z6jtUQdO4SYLYJD%2BbePlATiDQ6EL&rqlang=cn&rsv_dl=tb&rsv_sug3=8&rsv_enter=1&rsv_sug1=6&rsv_sug7=100&rsv_sug2=0&rsv_btype=t&inputT=1164&rsv_sug4=2928"target="https://www.baidu.com/">简化的方式去管理和增强</a><br>检查Node.js版本以及npm包管理器的状态，确认它们满足最低要求后再继续其他步骤2。</p><p>掌握基本的<em>CSS布局原理</em>,理解<img src="https://www.keaitupian.cn/cjpic/fombd/2/253/1659552792/3869332496.jpg"alt="图片加载失败..."><i>掌握如何定义元素尺寸</i>（宽度/高度）及<del>其定位方式（浮动、绝对定位等）</del>。</p>
</body></html>
表格（table&tr&td&th&thead）（&align&border&cellpadding&cellspacing&width/height）
table：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗
thead：表格的头部区域（注意和th区分，范围是比th要大的）
（thead里面的内容居中+加粗显示）
align：十单元格相对于周围元素的对齐方式. align="center"（不是内部元素的对齐方式）
border：表示边框，1表示有边框（数字越大，边框越粗），" "表示没边框
cellpadding：内容距离边框的距离，默认1像素
cellspacing：单元格之间的距离，默认是2像素
width/height：设置尺寸
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><tr align="center"><td>姓名</td><td>性别</td><td>年龄</td></tr><tr align="center"><td>张三</td><td>男</td><td>3</td></tr><tr align="center"><td>李四</td><td>男</td><td>4</td></tr><tr align="center"><td>王五</td><td>女</td><td>5</td></tr></table>
</body></html> 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><thead><tr align="center"><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tr align="center"><td>张三</td><td>男</td><td>3</td></tr><tr align="center"><td>李四</td><td>男</td><td>4</td></tr><tr align="center"><td>王五</td><td>女</td><td>5</td></tr></table>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><thead><tr align="center"><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tr align="center"><td>姓名</td><td>性别</td><td>年龄</td></tr><tr align="center"><td>张三</td><td>男</td><td>3</td></tr><tr align="center"><td>李四</td><td>男</td><td>4</td></tr><tr align="center"><td>王五</td><td>女</td><td>5</td></tr></table>
</body></html>
格式书写
<thead></thead>
<tbody></tbody>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><thead><tr align="center"><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr align="center"><td>张三</td><td>男</td><td>3</td></tr><tr align="center"><td>李四</td><td>男</td><td>4</td></tr><tr align="center"><td>王五</td><td>女</td><td>5</td></tr></tbody></table>
</body></html>合并单元格（水平/竖直）
rowspan=" "（竖直方向上）
colspan=" "（水平方向）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500px" height="300px" cellspacing="0"><thead><tr align="center"><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr align="center"><td>姓名</td><td>性别</td><td>年龄</td></tr><tr align="center"><td>张三</td><td rowspan="2">男</td><td>3</td></tr><tr align="center"><td>李四</td><!-- <td>男</td> --><td>4</td></tr><tr align="center"><td colspan="2">王五/女</td><!-- <td>女</td> --><td>5</td></tr></tbody></table>
</body></html>
列表
无序列表（ul&li）
type属性
disc：实心圆（浏览器默认展示方式）
square：实心方块
circle：空心圆
快捷键
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>这是一个无序列表</h1><ul><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>这是一个无序列表</h1><ul type="circle"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul>
</body></html> 
有序列表（ol&li）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>这是一个无序列表</h1><ul type="circle"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul><h1>这是一个有序列表</h1><ol><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li><li>这是有序列表4</li></ol>
</body></html>
type&start属性
type=" "
start=" "
<h1>这是一个有序列表</h1><ol type="A" start="3"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li><li>这是有序列表4</li></ol>
自定义列表（dl&dt&dd）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>这是一个无序列表</h1><ul type="circle"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul><h1>这是一个有序列表</h1><ol type="A" start="3"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li><li>这是有序列表4</li></ol><h1>这是一个自定义列表</h1><dl><dt>自定义列表显示内容<dd>自定义列表内容1</dd><dd>自定义列表内容2</dd><dd>自定义列表内容3</dd></dt></dl>
</body></html>
表单（input&form&label&select）
表单标签完成服务器的一次交互
表单域：包含表单元素的区域，重点是form标签 <form action=""></form>
表单控件：输入框，提交按钮，重点是input标签（必须搭配表单域完成）
可以通过对type进行对应的取值，来控制input类型
input
文本框<input type="text"> 单行输入
密码框<input type="password">
单选框<input type="radio" name="sex" checked="checked">（name相同时只能点中一个）（checked="checked"标记性别默认为该值）
复选框<input type="checkbox">
普通按钮<input type="button" value="我是个按钮" οnclick="alert('hello')">（onclick表示点击出现什么反应）
提交按钮<input type="submit">
清空按钮<input type="reset">
提交文件<input type="file">
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="">姓名：<input type="text"><br>密码：<input type="password"><br>性别：<input type="radio" name="sex">男<input type="radio" name="sex" checked="checked">女<br>爱好：<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">玩游戏<br><input type="button" value="我是个按钮" onclick="alert('hello')"><input type="submit"><input type="reset"><input type="file"></form>
</body></html>
提交
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="https://www.baidu.com/">课程：<input type="text" name="course"><input type="submit"></form>
</body></html>
label
<label for="male">男</label>
<input type="radio" name="sex" id="male">
<body><input type="radio" name="sex">男<input type="radio" name="sex">女//点击按钮才能选中
</body>
<body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female">//点击文字也可选中
</body>
select（默认展示第一个）
<select name="" id="">
<option value="" selected="selected"></option>
</select>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female"><select name="" id=""><option value="">---请选择年份---</option><option value="">---1991---</option><option value="">---1992---</option><option value="">---1993---</option><option value="">---1994---</option></select>
</body></html>
<select name="" id=""><option value="">---请选择年份---</option><option value="" selected="selected">---1991---</option>//展示该选项<option value="">---1992---</option><option value="">---1993---</option><option value="">---1994---</option></select>
textarea（内容框）
<textarea name="" id="" cols="30" rows="10"></textarea>
无语义标签（div&span）
没有固定的用途
div 是独占一行的，是一个大盒子
span 不占一行，是一个小盒子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div><div><span>吃饭</span><span>睡觉</span><span>玩游戏</span></div><div><div>吃饭</div><div>睡觉</div><div>玩游戏</div></div></div>
</body></html>
特殊字符
有些特殊的字符在html文件不能直接表示
空格： 
小于号：<
大于号：>
按位与：&
实践项目---简历书写
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>某某某</h1><div><h2>基本信息</h2><img src="yy.jpg" alt="" width="200" height="200"><span><p>求职意向:Java开发</p></span><span><p>联系电话:xxx-xxx-xxx</p></span><span><p>个人邮箱:xxx-xxx@163.com</p></span><span><p><a href="https://gitee.com/">我的Gitee</a></p></span><span><p><a href="https://csdnnews.blog.csdn.net/article/details/130333678?spm=1000.2115.3001.5927">我的博客</a></p></span></div><div><h2>教育背景</h2><ol><li>小学</li><li>初中</li><li>高中</li><li>大学</li></ol></div><div><h2>专业技能</h2><ul><li>掌握Java编程</li><li>掌握数据结构</li><li>掌握前端相关技能,html,css,JavaScript</li></ul></div><div><h2>个人项目</h2><ol><h3><li>留言墙</li></h3><p>开发时间:2023年4月1日~2023年4月28日</p><p>功能介绍</p><ul><li>支持留言发布</li><li>支持匿名留言</li></ul></ol><ol><h3><li>学习小助手</li></h3><p>开发时间:2023年5月1日~2023年5月28日</p><p>功能介绍</p><ul><li>错词检测</li><li>支持同学探讨</li></ul></ol></div><div><h2>个人评价</h2><p>热爱生活,热爱编程</p></div>
</body></html>个人简历页面填写
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table><thead><h2>请填写简历信息</h2></thead><tbody><tr><td>姓名</td><td><input type="text"></td></tr><tr><td>性别</td><td><input type="radio" id="male" name="sex"><label for="male">男</label><input type="radio" id="female" name="sex"><label for="female">女</label></td></tr><tr><td>出生日期</td><td><select name="" id=""><option value="" selected="selected">---请选择年份---</option><option value="">---2004---</option><option value="">---2005---</option><option value="">---2006---</option><option value="">---2007---</option></select><select name="" id=""><option value="">---请选择月份---</option><option value="">---1月---</option><option value="">---2月---</option><option value="">---3月---</option><option value="">---4月---</option><option value="">---5月---</option><option value="">---7月---</option><option value="">---8月---</option><option value="">---9月---</option><option value="">---10月---</option><option value="">---11月---</option><option value="">---12月---</option></select><select name="" id=""><option value="">---请选择日期---</option><option value="">---1号---</option><option value="">---2号---</option><option value="">---3号---</option><option value="">---4号---</option><option value="">---5号---</option><option value="">---6号---</option></select></td></tr><tr><td>就读学校</td><td><input type="text"></td></tr><tr><td>应聘岗位</td><td><input type="checkbox">前端开发<input type="checkbox">后端开发<input type="checkbox">测试开发<input type="checkbox">运维开发</td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td>项目经历</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox">我已仔细阅读过公司的招牌要求</td></tr><tr><td></td><td><a href="https://www.baidu.com/">查看我的状态</a></td></tr><tr><td></td><td><h3>请应聘者确认：</h3></td></tr><tr><td></td><td><ul><li>以上信息真实有效</li><li>能够尽早去公司实习</li><li>能接受公司的加班文化</li></ul></td></tr></tbody></table>
</body></html>css
控制页面的展示样式
基本语法规范
选择器+{一条/N条声明}
选择器决定针对谁修改（找谁）
声明决定修改啥（干啥）
声明的属性是键值对，使用；区分键值对，使用：区分键值和值
引入方式
内部样式表
将css嵌套到html页面中（通过style标签嵌套）
优点：做到样式和页面分离
缺点：分离不够彻底，尤其是css内容多的时候
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;font-size: 30px;}</style>
</head><body><p>hello world</p>
</body></html>行内样式表
<p style=color:blue;font-size:40px;>hello</p>
行内样式表优先级高于内部样式表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;font-size: 30px;}</style>
</head><body><p>hello world</p><p style=color:blue;font-size:40px;>hello</p>
</body></html> 
外部样式
1.创建一个css文件
2.使用link标签引入css
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo01.css">//rel="stylesheet"表示引入的是样式表//href="./demo01.css"表示样式表当前路径
</head><body><p>hello css</p>
</body></html> 
选择器种类
1.基础选择器：单个选择器构成
标签选择器
类选择器
id选择器
通配符选择器
2.复合选择器：把多种基础选择器综合运用起来
后代选择器
子选择器
并集选择器
伪类选择器
基础选择器
标签选择器
//demo01.html<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo01.css">
</head><body><p>hello css</p><p>hello javascript</p><h2>hello</h2>
</body></html>//demo01.cssp {color: red;font-size: 80px;
}类选择器
<p class="eat">吃饭</p>
.eat {
color: red;
}
//demo01.html<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo02.css">
</head><body><p class="eat">吃饭</p><p class="sleep">睡觉</p><p class="game">玩游戏</p>
</body></html>//demo02.css.eat {color: red;
}.sleep {color: blue;
}.game {color: brown;
}样式叠加
//demo02.html<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo02.css">
</head><body><p class="eat">吃饭</p><p class="sleep">睡觉</p><p class="play game">玩游戏</p>//样式叠加
</body></html>//demo02.css.eat {color: red;
}.sleep {color: blue;
}.game {color: brown;
}.play {font-size: 30px;
}
id选择器
css中使用#开头表示id选择器
id选择器的值和html中某个元素的id值相同
html元素的id不必带#号
id是唯一的，不能被多个标签使用（是和类选择器最大的区别）
<p id="fe">hello id</p>
#fe {
color: red;
font-size: 30px;
}
//demo03.html<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo03.css">
</head><body><p id="fe">hello id</p><p id="de">hello my life</p>
</body></html>//demo03.css#fe {color: red;font-size: 30px;
}#de {color: blue;font-size: 80px;
}通配符选择器
使用 * 的定义，选取所有的标签
在实际应用开发中针对页面所有的元素默认样式进行消除，主要用来消除边距
* {
color:red;
}
页面所有内容都会被改为红色
不需要被页面结构调用
//demo03.html<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo03.css">
</head><body><p id="fe">hello id</p><p id="de">hello my life</p>
</body></html>//demo03.css#fe {color: red;font-size: 30px;
}#de {color: blue;font-size: 80px;
}* {background-color: pink;
}复合选择器
将之前学习的基础选择器的组合
后代选择器
元素1 元素2 {样式说明}
元素1和元素2要使用空格分割
元素1是父级，元素2是子级，只选择元素2，不影响元素1
ol li {
color: red;
}
<ol>
<li>吃饭</li>
<li>吃饭</li>
<li>
<a href="#">吃饭</a>
</li>
</ol>
选择某个父元素中的某个子元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ol li {color: red;}ul li {color: blue;}ol a {color: purple;}</style>
</head><body><ul><li>吃饭</li><li>吃饭</li><li>吃饭</li></ul><ol><li>吃饭</li><li>吃饭</li><li><a href="#">吃饭</a></li></ol>
</body></html>伪类选择器
链接伪类选择器
实现鼠标在文字上悬停时文字的变化
a：link 选择未被访问过的链接
a：visited 选择已经被访问过的链接
a：hover 选择鼠标指针悬停上的链接
a：active 选择活动链接（鼠标按下了但是未弹起）
input {
color: red;
}
input:hover {
color: blue;
}
input:active {
color: palegreen;
}
<input type="button" value="按钮">
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {color: black;}a:hover {color: blue;}a:active {color: pink;font-size: 80px;}input {color: red;}input:hover {color: blue;}input:active {color: palegreen;}</style>
</head><body><a href="#">不跳转</a><br><input type="button" value="按钮">
</body></html>字体属性
字体样式
font-family: '宋体';
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-family: '宋体';}</style>
</head><body><div>这是宋体</div>
</body></html>字体大小
font-size: 80px;
字体颜色
三原色：红色，绿色，蓝色
color：red；
color：#ff0000；//ff红色像素点，这个数字越大，红色越深；00绿色像素点；00蓝色像素点
color：rgb（255,0,0）；//红绿蓝
字体粗细
font-weight：bold；
可以用数字表示粗细
700==bold，400是不变粗，==normal
取值范围 100->900
文字样式
font-style: oblique;
文本对齐
text-align：[值]
控制文字水平方向的对齐
不光是文本对齐，还能控制照片等元素居中或者靠右
center：居中对齐
left：左对齐
right：右对齐
文本缩进
text-indent：[值]；
单位可以使用px或者em
使用em作为单位更好，1个em就是当前元素的文字大小
锁紧可以是负的，表示左缩进（会导致文字就冒出去了）
文本装饰
text-decoration：[值]
underline 下划线.[常用]
none 啥也没有. 可以给a标签去掉下划线
overline 上划线.[不常用]
line-through 删除线 [不常用]
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {text-align: left;}h2 {text-align: center;}h3 {text-align: right;}p {text-indent: 2em;text-decoration: underline;}</style>
</head><body><h1>靠左</h1><h2>居中</h2><h3>靠右</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda, essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae sit ad iste ratione assumenda,essesimilique fugiat deleniti! Eius, perspiciatis. Hic dignissimos nostrum vel perferendis quidem ipsa temporeveritatis!</p>
</body></html>行高
line-height：[值]
顶线
中线
基线（相当于英语四线格的倒数第二条线）
底线
内容区：底线和顶线包裹的区域
行高=上边距+下边距+字体大小
背景属性
背景颜色
background-color: pink;
背景图片
background-image: url(...);
url不要遗漏
url可以是绝对路径，也可以是相对路径
url上可以加引号，也可以不加
背景平铺
background-repeat: [平铺方式];
repeat：平铺
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺
默认是repeat
背景位置
background-position: x y;
background-position: right;
参数有三种风格：
1.方位名词：（top，left，right，bottom）
2.精确名词：坐标或者百分比（以左上角为原点）
3.混合单位：同时包含方位名词和精确单位
如果参数的两个值都是方位名词，则前后顺序无关（top left和left top等效）
如果只指定了一个方位名词，则第二个默认居中（left则意味着水平居中，top意味着垂直居中）
如果参数是精确值，则第一个肯定是x，第二个肯定是y（100 200意味着x为100，y为200）
如果参数是精确值，且只给了一个数值，则该数值一定是x坐标，另一个默认垂直居中
如果参数是混合单位，则第一个值一定是x，第二个值一定是y坐标（100 center 表示横坐标位100，垂直居中）
背景尺寸
background-size: length|percentage|cover|contain;
可以填具体的数值：如40px X 60px
可以填百分比：按照父元素的尺寸设置
cover：把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在北京定位区域中
把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
cover
contain
圆角矩形
border-radius:length;//length表示内切圆的半径，数值越大，弧线越强烈
生成圆形（盒子宽高相同，半径为高度的一半或者写成50%）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;border: 2px green solid;border-radius: 100px;}</style>
</head><body><div></div>
</body></html> 
展开写法---对四个角分别设置等价于(按照顺时针排列)
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;
等价于(按照顺时针排列)
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;border: 2px green solid;border-radius: 100px;border-top-left-radius: 2em;border-top-right-radius: 2em;border-bottom-right-radius: 2em;border-bottom-left-radius: 2em;}</style>
</head><body><div></div>
</body></html>元素的显示模式
块级元素（占据一行）
h1 - h6
p
div
ul
ol
li
...
独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素.
文字类的元素内不能使用块级元素
p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div
行内元素/内联元素（不占据一行）
a
strong
b
em
i
del
s
ins
u
span
...
不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容 行内元素只能容纳文本和其他行内元素, 不能放块级元素
a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做).
a 标签里可以放块级元素, 但是更建议先把 a 转换成块级元素.
行内元素和块级元素的区别
块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.
改变显示模式
使用 display 属性可以修改元素的显示模式.
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素
修改前：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><a href="#">第一个链接</a><a href="#">第二个链接</a>
</body></html>修改后：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {display: block;}</style>
</head><body><a href="#">第一个链接</a><a href="#">第二个链接</a>
</body></html>盒模型
边框 border
内容 content
内边距 padding
外边距 margin
边框
基础属性
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
支持简写, 没有顺序要求 //border: 1px solid red;
border-top/bottom/left/right（可以改四个方向的任意边框. ）
边框会撑大盒子
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.
* {
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 100px;border-color: black;border: solid;border-width: 10px;}* {box-sizing: border-box;}</style>
</head><body><div></div>
</body></html>内边距（padding 设置内容和边框之间的距离. ）
默认内容是顶着边框来放置的.
用 padding 来控制这个距离
可以给四个方向都加上边距
padding-top
padding-bottom
padding-left
padding-right
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 400px;padding-left: 5px;padding-top: 5px;padding-right: 5px;padding-bottom: 5px;}</style>
</head><body><div>这是一个div</div>
</body></html>复合写法
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
外边距
控制盒子和盒子之间的距离.
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right
外边距默认为0
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>div {border: solid green 5px;}</style>
</head><body><div></div><div></div><div></div>
</body></html>加了外边距之后
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>div {border: solid green 5px;margin-top: 5px;margin-bottom: 5px;margin-right: 5px;margin-left: 5px;}</style>
</head><body><div></div><div></div><div></div>
</body></html>块级元素水平居中
前提:
指定宽度(如果不指定宽度, 默认和父元素一致)
把水平 margin 设为 auto
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>div {border: solid green 5px;width: 20px;height: 30px;}</style>
</head><body><div></div><div></div><div></div>
</body></html> 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>div {border: solid green 5px;width: 20px;height: 30px;margin: auto;}</style>
</head><body><div></div><div></div><div></div>
</body></html>这个水平居中的方式和 text-align 不一样.
margin: auto 是给块级元素用得到.
text-align: center 是让行内元素或者行内块元素居中的.
另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.
去除浏览器默认样式
* {
marign: 0;
padding: 0;
}
弹性布局
页面布局效果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div><span>1</span><span>2</span><span>3</span></div><style>div {height: 700px;width: 700px;background-color: green;}div span {height: 100px;width: 100px;background-color: red;}</style>
</body></html>display：flex；
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div><span>1</span><span>2</span><span>3</span></div><style>div {height: 700px;width: 700px;background-color: green;display: flex}div span {height: 100px;width: 100px;background-color: red;}</style>
</body></html>flex 布局基本概念
flex 是 flexible box 的缩写. 意思为 "弹性盒子".
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex item flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
justify-content: center;
justify-content: start;（默认格式）
justify-content: end;
justify-content: center;
justify-content: end;
justify-content: space-between;
align-items: start;
align-items: center;
align-items: end;
广告牌
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 308px;height: 204px;border: #d8dad8 solid 2px;background-color: #fcfffc;}.title {height: 40px;padding-left: 20px;font-size: 18px;color: #9e9d9a;border-bottom: 2px dotted #e8ebe8;}.item {font-size: 16px;flood-color: #898b76;padding-left: 25px;line-height: 28px;padding-top: 10px;}</style>
</head><body><div class="box"><div class="title">广告板</div><div class="content"><div class="item">赔钱清仓甩卖，全场一律八折优惠</div><div class="item">赔钱清仓甩卖，全场一律八折优惠</div><div class="item">赔钱清仓甩卖，全场一律八折优惠</div><div class="item">赔钱清仓甩卖，全场一律八折优惠</div></div>
</body></html>相关文章：
前端（htmlcss）
前端页面 Web页面 PC端程序页面 移动端APP页面 ... HTML页面 HTML超文本标记页面 超文本：文本，声音，图片，视频，表格，链接 标记：由许多标签组成 HTML页面运行到浏览器上面 vscode便捷插件使用 vs…...
py打包工具
pyinstaller 安装 大佬文档参考 pip install pyinstallerpyinstaller 参数 -i 给应用程序添加图标 -F 只生成一个exe格式的文件 -D 创建一个目录，包含exe文件，但会依赖很多文件（默认选项） -c 有黑窗口 -w 去掉黑窗口pyinstalle…...
华为OD E卷（100分）39-最长子字符串的长度（二）
前言 工作了十几年，从普通的研发工程师一路成长为研发经理、研发总监。临近40岁，本想辞职后换一个相对稳定的工作环境一直干到老, 没想到离职后三个多月了还没找到工作，愁肠百结。为了让自己有点事情做，也算提高一下自己的编程能力…...
Selenium+Java（21）：Jenkins发送邮件报错Not sent to the following valid addresses解决方案
问题现象 小月妹妹近期在做RobotFrameWork自动化测试，并且使用Jenkins发送测试邮件的时候，发现报错Not sent to the following valid addresses，明明各个配置项看起来都没有问题，但是一到邮件发送环节，就是发送不出去，而且还不提示太多有用的信息，急的妹妹脸都红了，于…...
JSON结构快捷转XML结构API集成指南
JSON结构快捷转XML结构API集成指南 引言 在当今的软件开发世界中，数据交换格式的选择对于系统的互操作性和效率至关重要。JSON（JavaScript Object Notation）和XML（eXtensible Markup Language）是两种广泛使用的数据表…...
【视觉惯性SLAM：四、相机成像模型】
相机成像模型介绍 相机成像模型是计算机视觉和图像处理中的核心内容，它描述了真实三维世界如何通过相机映射到二维图像平面。相机成像模型通常包括针孔相机的基本成像原理、数学模型，以及在实际应用中如何处理相机的各种畸变现象。 一、针孔相机成像原…...
网络编程：TCP和UDP通信基础
TCP 简易服务器： #include<myhead.h>int main(int argc, const char *argv[]) {int oldfd socket(AF_INET,SOCK_STREAM,0);if(oldfd -1){perror("socket");return -1;}//绑定要绑定的结构体struct sockaddr_in server {.sin_family AF_INET,.…...
声波配网原理及使用python简单的示例
将自定义的信息内容（如Wi-Fi配置、数字数据）转换为音波是一种音频调制与解调技术，广泛应用于声波配网、数据传输和近场通信中。这项技术的实现涉及将数字信息编码为音频信号，并通过解码还原信息。 实现方法 1. 数字数据编码 将原…...
深度学习任务中的 `ulimit` 设置优化指南
深度学习任务中的 ulimit 设置优化指南 1. 什么是 ulimit？2. 深度学习任务中的关键 ulimit 设置2.1 max locked memory（-l）2.2 open files（-n）2.3 core file size（-c）2.4 stack size（…...
【学生管理系统】权限管理
目录 6.4 权限管理（菜单管理） 6.4.1 查询所有（含孩子） 6.4.2 添加权限 6.4.3 核心3：查询登录用户的权限，并绘制菜单 6.4 权限管理（菜单管理） 6.4.1 查询所有（含孩子…...
Java编程题_面向对象和常用API01_B级
Java编程题_面向对象和常用API01_B级 第1题 面向对象、异常、集合、IO 题干: 请编写程序，完成键盘录入学生信息，并计算总分将学生信息与总分一同写入文本文件 需求：键盘录入3个学生信息(姓名,语文成绩,数学成绩) 求出每个学生的总分 ,并…...
JUC并发工具---线程协作
信号量能被FixedThreadPool代替吗 Semaphore信号量 控制需要限制访问量的资源，没有获取到信号量的线程会被阻塞 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent.Semaphore;public class Sem…...
Excel for Finance 08 `XNPV`和`XIRR` 函数
Excel 的 XNPV 函数用于计算基于特定日期的净现值（Net Present Value, NPV）。与标准的 NPV 函数相比，XNPV 更灵活，可以考虑不规则的现金流间隔，而不仅限于等间隔的期数。 语法： XNPV(rate, values, dates)…...
嵌入式入门Day35
网络编程 Day2 套接字socket基于TCP通信的流程服务器端客户端TCP通信API 基于UDP通信的流程服务器端客户端 作业 套接字socket socket套接字本质是一个特殊的文件，在原始的Linux中，它和管道，消息队列，共享内存，信号等…...
AE/PR/达芬奇模板：自动光标打字机文字标题移动效果动画模板预设
适用于AE/PR/达芬奇的 Typewriter Pro 该模板包括专业的打字机文本动画，并包含很酷的功能，以及帮助文档和分步画外音视频教程。 主要特点 轻松的持续时间控制您可以通过在持续时间控件中输入 start 和 end duration（开始和结束持续时间&…...
RCE漏洞
一、课程知识点 1、远程代码执行漏洞原理与利用 2、常见的代码执行函数 3、常见的命令执行函数 4、常见的绕过姿势 5、命令执行漏洞防范 二、技术目标 1、掌握命令执行漏洞的原理 2、掌握 PHP 命令执行和代码执行的相关函数 3、掌握常见的绕过姿势 4、掌握代码执行漏洞防御措施…...
在开发嵌入式系统时，尤其是处理大数时，会遇到取值范围的问题。51单片机通常没有内建大整数支持，因此我们需要采用不同的方法来解决这一问题
00 两种可行方法分别是： 使用数组存储每一位数据并进行进位运算：通过将大数按位拆分成数组，然后实现逐位加法、进位等操作。使用符号变量进行计算：将数值分成低位和高位，分别用符号变量进行计算。 01：使用…...
【Compose multiplatform教程20】在应用程序中使用多平台资源
为项目设置资源后，生成项目以生成提供资源访问权限的特殊类。要重新生成类和所有资源访问器，请再次生成项目或在 IDE 中重新导入项目。ResRes 之后，您可以使用生成的类从您的代码或外部库访问配置的多平台资源。 自定义访问器类生成 您可以使…...
深入浅出：从入门到精通大模型Prompt、SFT、RAG、Infer、Deploy、Agent
阅读原文 渐入佳境 我们都知道，通过编写一个提示词（prompt），我们可以引导大模型生成回答，从而开启愉快的人工智能对话，比如让模型介绍一下卡皮巴拉。上边简图描述了这个过程，我们拆成两部分 pr…...
紫光同创-盘古200pro+开发板
本原创文章由深圳市小眼睛科技有限公司创作，版权归本公司所有，如需转载，需授权并注明出处（www.meyesemi.com) 一、开发系统介绍 开发系统概述 MES2L676-200HP 开发板采用紫光同创 logos2 系列 FPGA，型号：…...
PyTorch 入门学习笔记
一、简介 PyTorch 是由 Meta（原 Facebook） 开源的深度学习框架。其前身 Torch 是一个基于 LuaJIT 的科学计算框架，核心功能是提供高效的张量（Tensor）操作和神经网络支持。由于 Lua 语言的生态限制，Torch 逐…...
麦克风和电脑内播放声音实时识别转文字软件FunASR整合包V5下载
我基于FunASR制作的实时语音识别转文字软件当前更新到V5版本。软件可以实时识别麦克风声音和电脑内播放声音转为文字。 FunASR软件介绍 FunASR 是一款基础语音识别工具包和开源 SOTA 预训练模型，支持语音识别、语音活动检测、文本后处理等。 我使用FunASR制作了一…...
Redis部署架构详解：原理、场景与最佳实践
Redis部署架构详解：原理、场景与最佳实践 Redis作为一种高性能的内存数据库，在现代应用架构中扮演着至关重要的角色。随着业务规模的扩大和系统复杂度的提升，选择合适的Redis部署架构变得尤为重要。本文将详细介绍Redis的各种部署架构模式&a…...
常见ADB指令
目录 1. 设备连接与管理 2. 应用管理 3. 文件操作 4. 日志与调试 5. 屏幕与输入控制 6. 高级操作（需Root权限） 7. 无线调试（无需USB线） 常用组合示例 注意事项 以下是一些常用的 ADB（Android Debug Bridge&a…...
NLP学习路线图（十四）：词袋模型（Bag of Words）
在自然语言处理（NLP）的广阔天地中，词袋模型（Bag of Words, BoW） 宛如一块历经岁月沉淀的基石。它虽非当今最耀眼的明星，却为整个领域奠定了至关重要的基础，深刻影响了我们让计算机“理解”文本的…...
PostgreSQL优化实践：从查询到架构的性能提升指南
## 引言 PostgreSQL作为先进的开源关系型数据库，在复杂查询处理与高并发场景中表现卓越，但不当的使用仍会导致性能瓶颈。本文系统性梳理优化路径，覆盖SQL编写、索引策略、参数调优等关键环节，配合代码示例与量化建议，…...
针对 Harmony-Cordova 性能优化，涵盖原生插件开发、线程管理和资源加载等关键场景
1. 原生图片处理插件（Java） package com.example.plugin; import ohos.media.image.ImageSource; import ohos.media.image.PixelMap; import ohos.app.Context; public class ImageProcessor { private final Context context; public ImagePro…...
Rust Mock 工具
Rust Mock 工具 Mock（模拟）是测试中不可或缺的工具，用来替代复杂或不可控的依赖，比如数据库、网络服务等，帮助我们写出高质量、健壮的测试代码。Rust 社区中，mockall 和 mockito 是两款主流且强大的 Mock …...
【2025最新】Java图书借阅管理系统：从课程作业到实战应用的完整解决方案
【2025最新】Java图书借阅管理系统：从课程作业到实战应用的完整解决方案 目录 【2025最新】Java图书借阅管理系统：从课程作业到实战应用的完整解决方案**系统概述** **核心功能模块详解****1. 系统登录与权限控制****2. 借阅管理模块****3. 用户角色管理…...
Appium+python自动化（七）- 认识Appium- 上
简介 经过前边的各项准备工作，终于才把appium搞定。 一、appium自我介绍 appium是一款开源的自动化测试工具，可以支持iOS和安卓平台上的原生的，基于移动浏览器的，混合的应用（APP）。 1、 使用appium进…...