HTML 标签的学习
1.HTML 的结构
前端三剑客: HTML + CSS + JS,本章我们学习的是HTML
HTML => 超文本标记语言
HTML代码是由"标签"构成的.
形如
<body>hello</body>
- 标签名 (body) 放到 < > 中
- 大部分标签成对出现. 为开始标签, 为结束标签.
- 少数标签只有开始标签, 称为 “单标签”.
- 开始标签和结束标签之间, 写的是标签的内容. (hello)
- 开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).
1.HTML 文件基本结构
<html><head><title>第一个页面</title></head><body>hello world</body>
</html>
- html 标签是整个 html 文件的根标签(最顶层标签)
- head 标签中写页面的属性.
- body 标签中写的是页面上显示的内容
- title 标签中写的是页面的标题.
我们写个最简单的HTML页面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>我的第一个html页面</title></head><body>hello,world!</body>
</html>
2.标签的层次结构
- 父子关系
- 兄弟关系
<html><head><title>第一个页面</title></head><body>hello world</body>
</html>
- head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
- title 是 head 的子标签. head 是 title 的父标签.
- head 和 body 之间是兄弟关系.
游览器一般要使用:Edge和Google
F12 或者右键审查元素, 开启开发者工具, 切换到 Elements 标签, 就可以看到页面结构细节
标签之间的结构关系, 构成了一个 DOM 树
DOM 是 Document Object Mode (文档对象模型) 的缩写
2.HTML 的常见标签
1.注释标签
注释不会显示在界面上. 目的是提高代码的可读性.
!-- 我是注释 -->
ctrl + / 快捷键可以快速进行注释/取消注释.
注释的原则
- 要和代码逻辑一致.
- 尽量使用中文.
- 不要传递负能量.
2.标题标签
有六个, 从 h1 - h6. 数字越大, 则字体越小.
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
3.段落标签
把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>css中的1px并不等于设备的1px
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
</body>
</html>
- p 标签表示一个段落.
<p>这是一个段落</p>
p 标签改进上述代码, 每个段落放到 p 标签中.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>css中的1px并不等于设备的1px</p>
<p>在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</p>
<p>还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。
</p>
<p>在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
</p>
</body>
</html>
4.换行标签
br 是 break 的缩写. 表示换行.
- br 是一个单标签(不需要结束标签)
- br 标签不像 p 标签那样带有一个很大的空隙.
- < br/ >是规范写法. 不建议写成 < br >
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>在css中我们一般使用px作为单位，<br/>在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</p>
</body>
</html>
5.格式化标签
- 加粗: strong 标签 和 b 标签
- 倾斜: em 标签 和 i 标签
- 删除线: del 标签 和 s 标签
- 下划线: ins 标签 和 u 标签
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
6.图片标签
img 标签必须带有 src 属性. 表示图片的路径.
<img src="html.jpg">
此时要把 html.jpg 这个图片文件放到和 html 中的同级目录中.
img 标签的其他属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="html2.jpg" alt="html" title="这是html的图片" width="500px" height="500px"border="5px">>
</body>
</html>-
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
-
-
title: 提示文本. 鼠标放到图片上, 就会有提示.
-
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
-
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
注意:
- 属性可以有多个, 不能写到标签之前
- 属性之间用空格分割, 可以是多个空格, 也可以是换行.
- 属性之间不分先后顺序
- 属性使用 “键值对” 的格式来表示.
关于目录结构:
对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.
- 相对路径: 以 html 所在位置为基准, 找到图片的位置.
- 同级路径: 直接写文件名即可 (或者 ./)
- 下一级路径: image/1.jpg
- 上一级路径: …/image/1.jpg
- 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如
- 磁盘路径 D:\rose.jpg
- 网络路径https://images0.cnblogs.com/blog/130623/201407/3009584707.png
- 使用相对路径: 创建一个 image 目录和 html 同级, 并放入一个 rose2.jpg
<img src="image/rose2.jpg" alt="">
- 使用相对路径2: 在 image 目录中创建一个 html, 并访问上级目录rose.jpg
<img src="../rose.jpg" alt="">
- 使用绝对路径1: 最好使用 / , 不要使用 \
<img src="D:/rose.jpg" alt="">
- 使用绝对路径2: 使用网络路径
<img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
alt="">
7.超链接标签
- href: 必须具备, 表示点击后会跳转到哪个页面.
- target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
<a href="http://www.baidu.com">百度</a>
点击后
<a href="http://www.baidu.com" target="_blank">百度</a>
点击后
链接的几种形式
- 外部链接: href 引用其他网站的地址
<a href="http://www.baidu.com">百度</a>
- 内部链接: 网站内部页面之间的链接. 写相对路径即可.
在一个目录中, 先创建一个 1.html, 再创建一个 2.html
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>
- 空链接: 使用 # 在 href 中占位.
<a href="#">空链接</a>
点击后不会有反应
- 下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="html.jpg">下载文件</a>
点击后会进行下载
- 网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="http://www.sogou.com"><img src="html.jpg" alt="">
</a>
点击后会跳转到相关页面
- 锚点链接: 可以快速定位到页面中的某个位置.
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">第一集剧情 <br>第一集剧情 <br>...
</p>
<p id="two">第二集剧情 <br>第二集剧情 <br>...
</p>
<p id="three">第三集剧情 <br>第三集剧情 <br>...
</p>
注意：禁止 a 标签跳转: < a href=“javascript:void(0);” > 或者 < a href=“javascript:;” >
8.表格标签
基本使用
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td 或者 th.
表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.
align是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素 width / height: 设置尺寸.
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr>
</table>
合并单元格
- 跨行合并:
rowspan="n" - 跨列合并:
colspan="n"
步骤
- 先确定跨行还是跨列
- 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
- 删除的多余的单元格
<table align="center" border="10" cellpadding="20" cellspacing="0" width="500" height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td colspan="2">男</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table align="center" border="10" cellpadding="20" cellspacing="0" width="500"height="500"><tr> <td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td rowspan="2">18</td></tr><tr><td>李四</td><td>女</td></tr>
</table>
</body>
</html>
9.列表标签
主要使用来布局的. 整齐好看.
- 无序列表[重要] ul li , .
- 有序列表[用的不多] ol li
- 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.
注意
元素之间是并列关系
ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd
li 中可以放其他标签.
列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h3>无序列表</h3>
<ul><li>数据结构</li><li>算法分析</li><li>网络编程</li>
</ul>
<h3>有序列表</h3>
<ol><li>数据结构</li><li>算法分析</li><li>网络编程</li>
</ol>
<h3>自定义列表</h3>
<dl><dt>我的专业课</dt><dd>数据结构</dd><dd>算法分析</dd><dd>网络编程</dd>
</dl></body>
</html>
10.表单标签
表单是让用户输入信息的重要途径.
分成两个部分:
- 表单域: 包含表单元素的区域. 重点是 form 标签.
- 表单控件: 输入框, 提交按钮等. 重点是 input 标签.
form 标签
<form action="Test.html">... [form 的内容]
</form>
input 标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
- type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
- name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
- value: input 中的默认值.
- checked: 默认被选中. (用于单选按钮和多选按钮)
- maxlength: 设定最大长度.
- 文本框
<input type="text">
- 密码框
<input type="password">
- 单选框
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果.
- 复选框
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏
- 普通按钮
当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究).
< input type=“button” value=“我是个按钮” οnclick=“alert(‘hello’)”>
- 提交按钮
<form action="Test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
- 清空按钮
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</form>
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.
- 选择文件
<input type="file">
点击选择文件, 会弹出对话框, 选择文件.
label 标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
- for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男</label> <input id="male" type="radio" name="sex">
<label for="male">女</label> <input id="female" type="radio" name="sex">
select 标签
下拉菜单
- option 中定义 selected=“selected” 表示默认选中.
<select><option>北京</option><option selected="selected">上海</option>
</select>
注意! 可以给的第一个选项, 作为默认选项
<select><option>--请选择年份--</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option>
</select>
textarea 标签
<textarea rows="3" cols="50">
</textarea>
文本域中的内容, 就是默认内容, 注意, 空格也会有影响. rows 和 cols 也都不会直接使用, 都是用 css 来改的.
11.无语义标签
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒子. 用于网页布局
- div 是独占一行的, 是一个大盒子.
- span 不独占一行, 是一个小盒子.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><span>数据结构</span><span>数据结构</span><span>数据结构</span>
</div>
<div><span>算法分析</span><span>算法分析</span><span>算法分析</span>
</div>
<div><span>网页编程</span><span>网页编程</span><span>网页编程</span>
</div></body>
</html>
3.HTML 特殊字符
有些特殊的字符在 html 文件中是不能直接表示的, 例如:
空格: & nbsp;
小于号: & lt;
大于号: & gt;
按位与: & amp;
4.综合案例:填写简历信息,展示简历信息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table width="500px" cellspacing="0"><thead><h3>请填写简历信息</h3></thead><tbody><tr><td><label for="name">姓名</label></td><td><input type="text" id="name"></td><tr><td>性别</td><td><input type="radio" name="sex" id="male" checked="checked"><!-- img 要放到 label 内部, 保证点击图标也能选中单选框 --><!-- 还需要把 width 加上, 否则图片太大了 --><label for="male"><img src="./image/男.png" alt="" width="20px">男</label><input type="radio" name="sex" id="female"><label for="female"><img src="./image/女.png" alt=""width="20px">女</label></td></tr><tr><td>出生日期</td><td><select><option>--请选择年份--</option><option>1998</option><option>1999</option><option>2000</option><option>2001</option></select><select><option>--请选择月份--</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><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><option>--请选择日期--</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><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option><option value="">13</option><option value="">14</option><option value="">15</option><option value="">16</option><option value="">17</option><option value="">18</option><option value="">19</option><option value="">20</option><option value="">21</option><option value="">22</option><option value="">23</option><option value="">24</option><option value="">25</option><option value="">26</option><option value="">27</option><option value="">28</option><option value="">29</option><option value="">30</option><option value="">31</option></select></td></tr><tr><td>就读学校</td><td><input type="text"></td></tr><tr><td>应聘岗位</td><td><input type="checkbox" id="frontend"><label for="frontend">前端开发</label><input type="checkbox" id="backend"><label for="backend">后端开发</label><input type="checkbox" id="qa"><label for="qa">测试开发</label><input type="checkbox" id="op"><label for="op">运维开发</label></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" id="lisence"><label for="lisence">我已仔细阅读过公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的状态</a></td></tr><tr><td></td><td><h3>请应聘者确认: </h3><ul><li>以上信息真实有效</li><li>能够尽早去公司实习</li><li>能接受公司的加班文化</li></ul></td></tr>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>某某某</h1>
<!-- 基本信息 -->
<div><h2>基本信息</h2><img src="html.jpg"><p><span>求职意向：</span>Java 开发工程师</p><p><span>联系电话：</span>XXX-XXX-XXXX</p><p><span>邮箱：</span>xxx@foxmail.com</p><p><a href="https://github.com">我的 github</a></p><p><a href="https://csdn.com">我的 博客</a></p>
</div>
<!-- 教育背景 -->
<div><h2>教育背景</h2><ol><li>1990 - 1996 小葵花幼儿园 幼儿园</li><li>1996 - 2002 小葵花小学 小学</li><li>2002 - 2005 小葵花中学 初中</li><li>2005 - 2008 小葵花中学 高中</li><li>2008 - 2012 小葵花大学 计算机专业 本科</li></ol>
</div>
<!-- 专业技能 -->
<div><h2>专业技能</h2><ul><li>Java 基础语法扎实，已经刷了 800 道 Leetcode 题；</li><li>常见数据结构都可以独立实现并熟练应用；</li><li>熟知计算机网络理论，并且可以独立排查常见问题；</li><li>掌握 Web 开发能力，并且独立开发了学校的留言墙功能。</li></ul>
</div>
<!-- 项目 -->
<div><h2>我的项目</h2><ol><li><h3>留言墙</h3><p>开发时间：2008年9月 到 2008年12月</p><p>功能介绍：<ul><li>支持留言发布</li><li>支持匿名留言</li></ul></p></li><li><h3>学习小助手</h3><p>开发时间：2008年9月 到 2008年12月</p><p>功能介绍：<ul><li>支持错题检索</li><li>支持同学探讨</li></ul></p></li></ol>
</div>
<!-- 其他信息 -->
<div><h2>个人评价</h2><p>在校期间，学习成绩优良，多次获得奖学金。</p>
</div></body>
</html>相关文章：
HTML 标签的学习
1.HTML 的结构 前端三剑客: HTML CSS JS,本章我们学习的是HTML HTML > 超文本标记语言 HTML代码是由"标签"构成的. 形如 <body>hello</body>标签名 (body) 放到 < > 中大部分标签成对出现. 为开始标签, 为结束标签.少数标签只有开始标签…...
计算耗时为微秒的方法(包含：时/分/秒/毫秒/微秒/纳秒)
计算耗时为微秒的方法1 #include<stdio.h> #include <windows.h> int main() {int a[10002];int i 0;double run_time;_LARGE_INTEGER time_start; //开始时间_LARGE_INTEGER time_over; //结束时间double dqFreq; //计时器频率LARGE_INTEGER f; //计时器频率Qu…...
通过 Python 封装关键词搜索阿里巴巴商品api接口
以下是使用 Python 封装关键词搜索阿里巴巴商品列表数据的步骤： 使用 requests 库向阿里巴巴搜索接口发送 HTTP 请求，可以使用 GET 或 POST 方法，请求参数中应包含搜索关键词、每页展示数量、当前页码等信息。 解析返回的 response 中的 HTM…...
分布式光伏消纳的微电网群共享储能配置策略研究（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
C语言写网络爬虫总体思路
使用C语言编写爬虫可以实现网络数据的快速获取和处理，适用于需要高效处理海量数据的场景。与其他编程语言相比，C语言具有较高的性能和灵活性，可以进行底层操作和内存管理，适合处理较复杂的网络请求和数据处理任务。 但是…...
机器学习实战六步法之训练模型、优化模型、部署模型（七）
要落地一个机器学习的项目，是有章可循的，通过这六个步骤，小白也能搞定机器学习。 看我闪电六连鞭！🤣 训练模型 当确定好机器学习算法之后，就可以通过训练数据集中的特征和标签，根据样本数据的…...
《C++高级编程》读书笔记（七：内存管理）
1、参考引用 C高级编程（第4版，C17标准）马克葛瑞格尔 2、建议先看《21天学通C》 这本书入门，笔记链接如下 21天学通C读书笔记（文章链接汇总） 1. 使用动态内存 1.1 如何描绘内存 在本书中，内存单…...
Scrum团队的三个角色
Scrum团队中包括三个角色，他们分别是产品负责人、开发团队和 Scrum Master。 Scrum 团队是自组织、跨职能的完整团队。自组织团队决定如何最好地完成他们的工作,而不是由团队外的其他人来指挥他 们。 跨职能的团队拥有完成工作所需要的全部技能,不需要依赖团队外部…...
python环境中使用 requirement.txt 安装依赖
在 Python 项目中，我们通常使用 requirement.txt 文件记录项目所依赖的第三方库，以便在其他机器上部署项目时更方便地安装这些依赖。在使用 requirement.txt 安装依赖时，可以按照以下步骤进行： 安装 pip 要使用 requirement.txt…...
UE5 材质常用大全
名称快捷方式类别计算方式/简介用法/说明Contant1+鼠标左键基础常量定义浮点数，与多通道运算时，自动影响多通道。各种基础参数Constant2Vector2+鼠标左键基础常量2维向量，2通道，影响2个通道。R/G,用于调整UVConstant3Vector3+鼠标左键基础常量3维向量，3通道，影响3个通道R…...
笔记本安装centos操作系统
一、下载centos镜像 centos官方历史版本：Index of / 常用的镜像文件类型介绍： DVD ISO：普通光盘完整安装版镜像，可离线安装到计算机硬盘上，包含大量的常用软件（一般选择这种jing）。 Everythi…...
Polarion工作流插件(自定义)
创建插件命名插件配置插件Condition&Function package com.polarion.capital.example.conditions;import com.polarion.alm.tracker.model.IWorkItem; import com.polarion.alm.tracker.workflow.IArguments; import com.polarion.alm.tracker.workflow.ICallContext; impo…...
JavaScript库：jQuery,简化编程
1. jQuery介绍 官方网站 : https://jquery.com jQuery 是一个 JavaScript 库 。极大地简化了 JavaScript 编程，例如 JS 原生代码几十行 实现的功 能， jQuery 可能一两行就可以实现，因此得到前端程序猿广泛应用。 发展至今࿰…...
[springboot]菜鸟学习- JdbcTemplate用法浅尝
JdbcTemplate 是 Spring Framework 提供的一个非常强大的 JDBC 工具类，它可以显著简化 JDBC 编程的代码量，并提供了许多便捷的方法来执行 SQL 查询、更新等操作。 使用 JdbcTemplate 的步骤如下： 1. 创建 JdbcTemplate 对象：可以…...
11.无监督学习之主成分分析
11.1 降维 降维的两种应用：一是数据压缩；二是可视化数据。 11.1.1 数据压缩 将相关性强的两个特征导致冗余，可以直接去掉其中一个特征，或者将两个特征进行某种转换，得到一个特征。 11.1.2 可视化数据 直接看数据可…...
「HTML和CSS入门指南」figcaption 标签详解
什么是 figcaption 标签？ 在 HTML 中，figcaption 标签用于为与 figure 元素相关的媒体内容提供说明性文本。通常用于包含图像、音频或视频等媒体元素的说明文本。 figcaption 标签的基本语法 以下是 figcaption 标签的基本语法： <figure><!-- 在这里放置您的媒体…...
电子企业实施数字化工厂建设之前，需要注意哪些
随着工业4.0时代的到来，数字化工厂建设已成为越来越多电子企业的重要议题。数字化工厂管理系统能够提高生产效率、降低成本、提高产品质量等多个方面的优势，对于企业的可持续发展具有重要意义。然而，在实施电子企业数字化工厂建设之前&#x…...
迅捷pdf实现多页插入
之前我们使用福昕阅读器实现了在每一页插入logo 这里我们用迅捷pdf再来一次，别问，问就是公司买了会员 首先声明，这里已经有会员了，所以不知道别人操作是不是需要会员，担心的话可以看看上一篇福昕阅读器版本 打开编辑…...
调用阿里云API实现证件照生成
目录 1. 作者介绍2. 算法介绍2.1 阿里云介绍2.2 证件照生成背景2.3 图像分割算法 3.调用阿里云API进行证件照生成实例3.1 准备工作3.2 实验代码3.3 实验结果与分析 参考（可供参考的链接和引用文献） 1. 作者介绍 王逸腾，男，西安工…...
PHP 转换 excel中读取的时间
首先，我们需要知道PHPExcel的时间和日期格式是以Excel内部的“1900年1月1日”为基础，以天为单位来计算的。即Excel日期与PHP时间戳之间存在一个时间偏移量。通过查阅PHPExcel的官方文档，我们可以得到以下的计算公式： // 读取exce…...
Cmake工具的简单使用
引言 本篇文章讲述如何简单的使用cmake工具构建一个项目，帮助入门的c新手学会如何使用cmake. 我们在Clion新创建一个项目时，会发现，除了main.cpp文件之外，还存在一个build-debug目录和一个CMakelists.txt文件，如图: …...
html选择器
基本选择器 基本选择器 : 标签选择器 , 类选择器 , ID选择器 标签选择器 代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEed…...
Leetcode 剑指 Offer II 030. 插入、删除和随机访问都是 O(1) 的容器
题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer（专项突击版）系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 设计一个支持在平均 时间复杂度 O(1) 下，执行以下操作…...
django实现读取数据导出生成excel表格
目录 一、简单示例： 1.创建文件对象： 2.添加工作表： 3.写入数据： 二、实践出真理 需要先安装xlwt模块 pip install -i https://pypi.douban.com/simple xlwt一、简单示例： import xlwt# 创建一个Excel文件对象 …...
DevOps系列文章之 Docker-compose
一，Docker-compose全集 1，Docker-compose简介 Docker-Compose项目是Docker官方的开源项目，负责实现对Docker容器集群的快速编排。 Docker-Compose将所管理的容器分为三层，分别是工程（project），…...
Vue Router入门：轻松构建单页应用程序
Vue.js是一种流行的前端JavaScript框架，可以让开发人员轻松构建动态用户界面。Vue.js的一个关键特性是其路由系统，它使得开发人员可以轻松创建具有多个视图和页面的单页应用程序（SPA）。在本文中，我们将探讨如何使用Vue Router在Vue.js中构建SPA。我们将介绍如何安装和配置…...
ITSM 如何帮助制造业企业
ITSM在现代制造业中的作用 在过去的几年中，制造业已经看到了快速的数字化，以智能制造技术改进生产技术。在工业4.0和工业5.0的推动下，制造商正在摆脱陈旧 以及利用物联网、人工智能、机器学习和大数据等先进技术的互联智能制造系统ÿ…...
leecode
leecode20，有效的括号，栈 class Solution:def isValid(self, s: str) -> bool:def check(ch1,ch2):if ch1 [ and ch2 ]:return Trueelif ch1 ( and ch2 ):return Trueelif ch1 { and ch2 }:return Trueelse:return Falsestack []for i in ran…...
2023-06-09 LeetCode每日一题（修改图中的边权）＜未来补全＞
2023-06-09每日一题 一、题目编号 2699. 修改图中的边权二、题目链接 点击跳转到题目位置 三、题目描述 给你一个 n 个节点的 无向带权连通 图，节点编号为 0 到 n - 1 ，再给你一个整数数组 edges ，其中 edges[i] [ai, bi, wi] 表示节点…...
Linux 应用程序信号量使用实战
背景 在项目实施过程中，有个机制需要做两个线程之间的同步。 具体需求如下： 首先，线程1需要把资源读取到缓存 其次，线程2才可以操作这块缓存 上述两个动作顺序交替重复。 思路 使用信号量解决思路，申请两个信号…...
开发公司没有资质有什么影响/慈溪seo
第二十届中国国际高新技术成果交易会于11月14日至18日在深圳会展中心举办，本届展会的主题为「坚持新发展理念，推动高品质发展」。开幕当天，SAP 全球高级副总裁、SAP 中国研究院院长李瑞成博士受邀出席「2018中国高新技术论坛」，探…...
wordpress简体切换/网站推广软文
展开全部大四学生32313133353236313431303231363533e58685e5aeb931333433653933，应该先考研还是工作后再考研？这两种选择，哪一个更实惠？作出选择之前，这3个问题一定要考虑清楚。考虑复习效果一般情况下，多数…...
佛山哪个做网站的好/广州白云区疫情实时动态
单例模式:必考 1 # 设计模式: 单例模式. 最简单的设计模式. 面试必考,默写.2 # 单例模式: 对一个类是能实例化一个对象.3 4 class A:5 __instance None6 def __new__(cls, *args, **kwargs):7 if A.__instance is None: #初次进入满足该条件8 obj…...
wordpress大前端破解/宁波seo网络推广推荐
Part 2 动画 我们通过set方法就可以快速的修改canvas上的图形的属性。但是，往往我们在开发网站的时候除了完成功能需求之外，也需要提高网页的美观。所以动画是一个必不可少的功能。 举个例子： rect.set(angle, 45);给这个变化属性添加动画…...
电子商务网站建设的问题/百度推广的渠道有哪些
点击蓝字关注我们今天给大家分享一个临床指南查询下载网站网站预览共有17790份中英文指南的原文4407份中英文指南的解读还会不断更新网站链接http://guidelines.mikecrm.com/NsOywVt也可点击最下方的阅读原文进入网站简易教程01点击“中英文原文指南”或“中英文指南解读”02输…...
沈阳做网站有名公司/热搜关键词查询
文章目录一、App应用配置总结1.app应用一、App应用配置 在每个应用目录中都包含了apps.py文件，用于保存该应用的相关信息。 在创建应用时，Django会向apps.py文件中写入一个该应用的配置类，如 from django.apps import AppConfigclass Book…...