HTML基础及进阶

目录

一、HTML基础

1.什么是HTML

2.常用标签

（1）标题标签：h1-h6数字越小文字会越大，这个标签会占一整行

（2）加粗标签：

（3）换行标签：

（4）段落标签：这个标签既有换行的功能，又有对行距调整的功能

（5）倾斜标签：将标签中的内容倾斜

（6）水平线：显示一条水平线

（7）标签的嵌套

（8）HTML的注释：

3.HTML标准格式

4.标签扩展

（1）meta标签：

（2）font标签：

（3）em标签：将标签内的内容倾斜，带有语义，也就是当读这个标签中的内容的时候，会带有语气

（4）strong标签：将标签内的内容加粗，带有语义，也就是当读这个标签中的内容的时候，会带有语气

（5）img标签：图片标签

（6）a标签：链接标签

二、HTML进阶

1.列表标签

2.分层标签

3.音频标签

4.视频标签

5.表格标签

6.表格的嵌套

7.表单标签

8. 框架标签

一、HTML基础

1.什么是HTML

（1）HTML全称为超文本标记语言，是一种标记语言，它是由一堆标签组成的。

（2）超文本：就是超越文本的一些东西，如：图片，音频，视频等等。

（3）标记语言：通过一组标签来对内容进行描述。

  • 标签分为：
    • 成对出现的标签：<关键字></关键字>
    • 单个出现的标签：<关键字/>
    • 注意：成对出现的标签中间可以写文字或媒体信息，但是单个出现的标签不可以

2.常用标签

（1）标题标签：h1-h6数字越小文字会越大，这个标签会占一整行

  • 格式：<h3>文本信息</h3>
  • <h3>横渠四句</h3>

（2）加粗标签：<b></b>

<b>--张载</b>

（3）换行标签：<br/>

为天地立心，为生民立命，为往圣继绝学，为万世开太平。<br/>

（4）段落标签：这个标签既有换行的功能，又有对行距调整的功能

  • 格式：<p></p>
  • <p>为天地立心，为生民立命，为往圣继绝学，为万世开太平。</p>

（5）倾斜标签：将标签中的内容倾斜

  • 格式：<i></i>
  • <i>--张载</i>

（6）水平线：显示一条水平线

  • 格式：<hr/>
  • 为天地立心，为生民立命，为往圣继绝学，为万世开太平。
<hr/>
为天地立心，为生民立命，为往圣继绝学，为万世开太平。

（7）标签的嵌套

<b><i>--张载</i></b>

（8）HTML的注释：<!--要注释的内容-->

<meta charset="utf-8" /> <!-- 用来描述网页的属性：当前网页的编码格式 -->

3.HTML标准格式

（1）<!DOCTYPE html>：文档的描述，代表此文档使用的是html5技术

（2）<html></html>：根标签

（3）<head></head>：头标签，这里放的是对网页的一些描述信息及外连接

  • head里面的标签有：meta，js，link

（4）<body></body>：体标签，这里放到东西都会在网页上显示

  • body里面的标签有：b，p，h3，img等等
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

4.标签扩展

（1）meta标签：

  • 格式：<meta/>
  • 属性：
    • <meta name="keywords"/>：keywords代表关键字，用于浏览器的分类，也就是用来解释这个网站是干什么的，帮助在搜索引擎中分类收录的
    • <meta name="keywords" content="新浪,新浪网,SINA,sina,sina.com.cn,新浪首页,门户,资讯" />
    • <meta name="description"/>：description用来描述当前网页的主体内容涉及范围，帮助在搜索引擎中分类收录的
    • <meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等，设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道，同时开设博客、视频、论坛等自由互动交流空间。" />

（2）font标签：

  • 格式：<font></font>
  • 属性：
    • <font color="red"></font>：color用来改变字体颜色
    • <font color="red">产品、服务、运营、集成能力</font>

（3）em标签：将标签内的内容倾斜，带有语义，也就是当读这个标签中的内容的时候，会带有语气

  • 格式：<em></em>
  • <em>新业务</em>

（4）strong标签：将标签内的内容加粗，带有语义，也就是当读这个标签中的内容的时候，会带有语气

  • 格式：<strong></strong>
  • <strong>集成能力</strong>

（5）img标签：图片标签

  • 格式：<img/>
  • 属性：
    • width：图片的宽度
    • height：图片的高度
    • src：图片的所在路径
      • ./代表当前目录，这个./可以省略不写
      • ../代表上一层目录
      • <img src="../img/bb/3.png" />
      • ../../代表上上一层目录
      • <img src="../../img/1.png" />
    • alt：加载图片失败时提示的内容
    • 注意：width和height如果只写一个，那么另一个会按图片的宽高比自动缩放
  • 案例：
  • <img src="img/1.png" width="500px" height="500px" alt="图片不存在" />  <!-- px代表像素 -->

（6）a标签：链接标签

  • 格式：<a></a>
  • 属性：
    • href：存放链接地址，也就是URL
    • <a href="http://www.baidu.com" >百度</a>
    • target：限制点击链接后网页出现的形式
      • _blank：在新的窗口打开链接
      • <a href="http://www.baidu.com" target="_blank">百度</a>
      • _self：在当前窗口打开链接（默认）
      • <a href="http://www.sina.com.cn" target="_self">新浪</a>
      • _parent：在当前页面的父窗口打开
      • <a href="http://www.taobao.com" target="_parent">淘宝</a>
  • 图片链接：就是在a标签中嵌套一个img标签
  • <a href="https://www.autohome.com.cn" target="_blank"><img src="./img/1.png" width="100px" alt="图片加载中" />
</a>

二、HTML进阶

1.列表标签

（1）无序列表

  • 格式：\<ul>\<li>\</li>\</ul>
  • 其中ul是外层标签，li是内层子标签，一个ul标签中可以有多个li标签
  • 快捷方式：
    • 如创建2个：ul>li*2，写完之后按tab键
  • 案例：
  • <ul><li>内蒙古</li><li>杭州</li><li>苏州</li>
</ul>

（2）有序列表

  • 格式：\<ol>\<li>\</li>\</ol>
  • 其中ol是外层标签，li是内层子标签，一个ol标签中可以有多个li标签
  • 快捷方式：
    • 如创建3个：ol>li*3，写完之后按tab键
  • 案例：
  • <ol><li>北京</li><li>上海</li><li>广州</li><li>深圳</li>
</ol>
  • 列表超链接：就是在子标签中放入一个超链接
  • <ol><li><a href="http://www.baidu.com">百度</a></li><li><a href="http://www.taobao.com">淘宝</a></li><li><a href="http://www.qq.com">腾讯</a></li><li><a href="http://www.jd.com">京东</a></li>
</ol>

2.分层标签

（1）格式：<dt><dl></dl><dd></dd><dd></dd></dt>

（2）其中dt是外层标签，dl是内层父标签，dd是内层子标签；在一个dt标签中，一个dl父标签会对应多个dd子标签，可以有多个dl标签和dd标签的对应关系

（3）案例：

<dt><dl>水果</dl><dd>香蕉</dd><dd>草莓</dd><dd>葡萄</dd><dl>技能</dl><dd>Java</dd><dd>HTML</dd>
</dt>

3.音频标签

（1）方法一：使用embed标签

  • 格式：<embed></embed>
  • 属性：
    • 音频地址：src="url"
    • 音频播放器的高度：height="100px"
    • 音频播放器的宽度：width="100px"
  • 案例：
  • <!-- 引入音频播放器 -->
<embed src="audio/白月光和朱砂痣.mp3" height="100px" width="500px"></embed>

（2）方法二：使用audio标签

  • 格式：<audio></audio>
  • 属性：
    • 音频地址：src="url"
    • 音频控制器：controls="controls"
    • 自动播放：autoplay="autoplay"
    • 注意：audio标签中如果没有controls属性的话，就不会显示控制器，controls属性和autoplay属性的值都是固定的
  • 案例：
  • <audio src="audio/白月光和朱砂痣.mp3" controls="controls" autoplay="autoplay"></audio>

4.视频标签

（1）方法一：使用embed标签

  • 格式：\<embed>\</embed>
  • 属性：
    • 视频地址：src="url"
    • 视频播放器的高度：height="100px"
    • 视频播放器的宽度：width="100px"
  • 案例：
  • <embed src="video/歆甜-岁岁常欢愉，年年皆胜意(超清).mp4" height="100px" width="500px"></embed>

（2）方法二：使用video标签

  • 格式：<video></video>
  • 属性：
    • 宽度：width="100px"
    • 高度：height="100px"
    • 控制器：controls="controls"
  • 子标签source
    • 格式：<source></source>
    • 属性：
      • 文件地址：src="url"
      • 文件类型：type="video/mp4"
  • 案例：
  • <!-- 视频支持mp4/ogg/webm/swf格式 -->
<video height="400px" width="300px" controls="controls"><source src="video/画离弦.mp4" type="video/mp4"></source><source src="movie.ogg" type="video/ogg"></source><source src="movie.webm" type="video/webm"></source><!-- 下面是支持flash格式的视频 --><object data="movie.mp4" width="320" height="240"><embed src="movie.swf" width="320" height="240"></embed></object>
</video>

5.表格标签

（1）格式：<table><tr><td></td></tr></table>

（2）<table></table>标签是表格标签，属性如下：

  • 表格的高度：height
  • 表格的宽度：width
  • 表格的边界线条的宽度：border
  • 表格的背景颜色：bgcolor
  • 表格的背景图片：background
  • 表格的对齐方式：align

（3）<tr></tr>标签是行标签，属性如下：

  • 一行中每个单元格中的元素的对齐方式：align
  • 设置一行中每个单元的背景色：bgcolor

（4）<td></td>标签是列标签，属性如下：

  • 控制单个单元中的元素的对齐方式：align
  • 合并列单元格：colspan
    • 注意：
      • 在合并完单元格后要将被合并的单元格删除
      • 列合并是从左到右，不能反过来
  • 合并行单元格：rowspan
    • 注意：
      • 在合并完单元格后要将被合并的单元格删除
      • 行合并是从上到下，不能反过来
  • 设置单个单元格的背景色：bgcolor
  • 设置单个单元格的背景图片：background

（5）案例：

<table border="1px" height="200px" width="300px" align="center" background="img/1.png"><!-- 合并要求：1.行合并->从上到下2.列合并->从左到右 --><tr align="center" > <!-- 表格的行标签 --><td colspan="3" background="img/2.png">11</td> <!-- 表格的列标签 --><td rowspan="4">14</td></tr><tr align="center" bgcolor="red"> <!-- 表格的行标签 --><td colspan="2">21</td> <!-- 表格的列标签 --><td bgcolor="white">23</td></tr><tr align="center"> <!-- 表格的行标签 --><td>31</td> <!-- 表格的列标签 --><td>32</td><td rowspan="2">33</td></tr><tr align="center"> <!-- 表格的行标签 --><td>41</td> <!-- 表格的列标签 --><td><a href="http://www.baidu.com">百度</a></td></tr>
</table>

6.表格的嵌套

（1）案例：

<table border="1px" height="400px" width="500px" align="center"><tr><td>11</td><td>12</td><td>13</td><td>14</td></tr><tr><td>21</td><td rowspan="3" colspan="2"><!-- 表格中嵌套一个表格 --><table border="1px" width="100px" height="100px" align="center"><tr><td>6</td><td>6</td><td>6</td></tr><tr><td>6</td><td>6</td><td>6</td></tr><tr><td>6</td><td>6</td><td>6</td></tr></table></td><td>24</td></tr><tr><td>31</td><td>34</td></tr><tr><td>41</td><td>44</td></tr><tr><td>51</td><td>52</td><td>53</td><td>54</td></tr>
</table>

7.表单标签

（1）格式：<form><input /></form>

（2）form是表单标签，属性为：

  • 表单提交的地址：action
    • 表示表单提交的数据到的目的地
  • 表单提交的方式：method
    • get方式：get提交的数据会出现在地址栏中，一般针对没有安全要求的数据，提交的数据量是有限的，一般1M左右，默认的提交方式是get
    • post方式：post提交的数据不会出现在地址栏中，一般针对有一点安全要求的数据，数据会出现在请求体中，提交的数据量没有限制，可以是无限的，一般上传文件使用这种方式

（3）input是输入框标签，属性为：

  • 输入框的类型：type，下列为type的值
    • 文本类型：text
    • 提交按钮：submit
    • 密码类型：password
    • 单选类型：radio
      • 多个单选类型的标签中name属性的值必须一样；
      • 如果要将某个单选设置为默认，需要在这个单选所属的input标签中加入checked属性；
      • 因为单选是没办法输入内容的，所以需要将你要提交的内容放到value属性中；
    • 上传文件类型：file
    • 日期类型：date
    • 隐藏类型：hidden
      • 隐藏域中要提交的内容不会在网页上显示；
    • 多选类型：checkbox
      • 多个多选类型的标签中name属性的值必须一样；
      • 如果要将一个或多个多选选项设置为默认，需要在这个选项所属的input标签中加入checked属性；
      • 因为多选是没办法输入内容的，所以需要将你要提交的内容放到value属性中；
    • 按钮：
      • submit：提交按钮
      • button：普通按钮
        • 普通按钮是用来配合事件使用的
      • reset：重置按钮
      • 案例：
      • <form><input type="submit" value="提交" /> <!-- 提交按钮 --><input type="button" value="普通按钮" /><input type="reset" value="重置" />
</form>
  • 输入框的值：value
    • 注意：有些输入框类型是不需要写value的，比如：文本，密码等等；而有些输入框是需要写value的，比如：单选，多选等等；value是向表单中设置值的，如果将文本，密码这样输入类型的输入框写上value的话，会在输入框中显示一个默认值；
  • 输入框的key：name
    • 注意：通过name可以获取value中保存的数据，或者是输入框中输入的数据，如果没有这个name，那么就不会提交当前输入框中的数据；
  • 输入框内显示提示信息：placeholder
  • 将某个单选设置为默认：checked="checked"
    • 注意：checked的值是固定的

（4）select是下拉列表标签：

  • 格式：<form><select><option></option></select></form>
  • select标签的属性：
    • name：通过name属性的值可以获取到option子标签的value属性中保存的值，name代表select标签的key
  • option是select标签的子标签，代表下拉列表中的选项
  • option子标签的属性：
    • value：代表这个子标签要提交的值

（5）案例：

<h3>表单学习</h3> <hr />
<!-- 表单标签；method="get"：表单的提交方法，如果不写，默认是get
get提交数据的方式：get提交的数据会出现在地址栏中，一般针对没有安全要求的数据，提交的数据量是有限的，一般1M左右，数据量的大小是根据浏览器的类型决定的
post提交数据的方式：post提交的数据不会出现在地址栏中，一般针对有一点安全要求的数据，数据会出现在请求体中，提交的数据量没有限制，可以是无限的，一般上传文件使用这种方式
action：表示表单提交的数据到的目的地
-->
<form action="#" method="get">用户名：<input type="text" name="wd" placeholder="请输入不少于6个字符" /> <br /> <!-- 输入框标签
name属性中的值是表单提交指定的key，这个name属性一定要有，否则不会提交当前输入框中的数据
-->用户密码：<input type="password" name="pwd1" placeholder="请输入不少于8个字符" /> <br />确认密码：<input type="password" name="pwd2" placeholder="请输入不少于8个字符" /><br />性别：<br />男<input type="radio" name="sex" value="男" checked="checked" />女<input type="radio" name="sex" value="女"/><br /><select name="city"><option value="beijin">北京</option><option value="shanghai">上海</option></select> <br />上传文件：<input type="file" name="photo" /><br />出生年月日：<input type="date" name="birthday" /><br /><input type="hidden" name="abc" value="不可告人的数据" /> <!-- 只用来提交数据，不会显示在网页上 --><br />爱好：<br />足球<input type="checkbox" name="hobby" value="足球" checked="checked" />篮球<input type="checkbox" name="hobby" value="篮球" checked="checked" />乒乓球<input type="checkbox" name="hobby" value="乒乓球" /><br /><input type="submit" value="提交" /> <!-- 按钮 -->
</form>

8. 框架标签

（1）格式：<frameset><frame /></frameset>

  • 注意：
    • 使用了frameset就必须将body删掉，否则页面会有问题，也就是要用frameset去代替body；
    • frameset标签可以嵌套使用，如果分了多个区域，那么需要对这多个区域中的每个区域进行单独操作；如：分了2个区域之后，如果想要将这两个区分别再次分区，那么需要写两个frameset标签，如果只是想分其中一个，那么只要写一个frameset标签就可以了。frameset只是用来分区的，想要向分好的区域中放入内容，需要使用frame子标签；

（2）属性：

  • cols：分列，多个列使用逗号隔开，可以使用*来代替全部区域，如果前面已经使用了一些区域，那么*代替的就是剩余的全部区域；
    • 分列就是竖的分
  • rows：分行，多个行使用逗号隔开，可以使用*来代替全部区域，如果前面已经使用了一些区域，那么*代替的就是剩余的全部区域；
    • 分行就是横的分

（3）子标签frame

  • 格式：<frame />
    • frame标签是用来将一个写好的html文件放入到已经分好的区域中
  • 属性：
    • src：引入的html文件路径
    • name：指定框架的名称
    • target：跳转到页面

（4）案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>后台管理页面中</title></head><frameset cols="30%,*"><frameset rows="30%,*"><frame src="top.html" /><frame src="bottom.html" /></frameset><frame src="main.html" name="main" /></frameset>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/73815.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MSTP与链路聚合技术

MSTP与链路聚合技术

MSTP&#xff08;多生成树协议&#xff09; 简介 MSTP&#xff08;多生成树协议&#xff09;是Spanning Tree Protocol&#xff08;STP&#xff09;的改进版&#xff0c;支持网络中使用多条生成树&#xff0c;并根据用户需求限制生成树间的路径。MSTP将多个VLAN映射到一棵生成…
阅读更多...
ModuleNotFoundError: No module named ‘ml_logger.logbook‘

ModuleNotFoundError: No module named ‘ml_logger.logbook‘

问题 (legion) zhouy24RL-DSlab:~/zhouy24Files/legion/LEGION$ python main.py ML_LOGGER_USER is not set. This is required for online usage. Traceback (most recent call last): File “main.py”, line 7, in from mtrl.app.run import run File “/data/zhouy24File…
阅读更多...
c# ftp上传下载 帮助类

c# ftp上传下载 帮助类

工作中FTP的上传和下载还是很常用的。如下载打标数据，上传打标结果等。 这个类常用方法都有了：上传，下载，判断文件夹是否存在，创建文件夹，获取当前目录下文件列表(不包括文件夹) ，获取当前目录下文件列表(不包括文件夹) ，获取FTP文件列表(包括文件夹)， 获取当前目…
阅读更多...
PyTorch 分布式训练（Distributed Data Parallel, DDP）简介

PyTorch 分布式训练（Distributed Data Parallel, DDP）简介

PyTorch 分布式训练&#xff08;Distributed Data Parallel, DDP&#xff09; 一、DDP 核心概念 torch.nn.parallel.DistributedDataParallel 1. DDP 是什么&#xff1f; Distributed Data Parallel (DDP) 是 PyTorch 提供的分布式训练接口&#xff0c;DistributedDataPara…
阅读更多...
策略模式_行为型_GOF23

策略模式_行为型_GOF23

策略模式 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;核心思想是将一组算法封装成独立对象&#xff0c;使它们可以相互替换&#xff0c;从而让算法的变化独立于使用它的客户端。这类似于游戏中的技能切换——玩家根据战况选择不同技能…
阅读更多...
【Python】天气数据可视化

【Python】天气数据可视化

1. Python进行数据可视化 在数据分析和科学计算领域&#xff0c;Python凭借其强大的库和简洁的语法&#xff0c;成为了众多开发者和科研人员的首选工具。数据可视化作为数据分析的重要环节&#xff0c;能够帮助我们更直观地理解数据背后的规律和趋势。本文将详细介绍如何使用P…
阅读更多...
深度学习4.4笔记

深度学习4.4笔记

《动手学深度学习》-4.4-笔记 验证数据集&#xff1a;通常是从训练集中划分出来的一部分数据&#xff0c;不要和训练数据混在一起&#xff0c;评估模型好坏的数据集 测试数据集&#xff1a;只用一次的数据集 k-折交叉验证&#xff08;k-Fold Cross-Validation&#xff09;是…
阅读更多...
vue 两种路由模式

vue 两种路由模式

一、两种模式比较 在vue.js中&#xff0c;路由模式分为两种&#xff1a;hash 模式和 history 模式。这两种模式决定了URL的结构和浏览器历史记录的管理方式。 1. hash 模式带 #&#xff0c;#后面的地址变化不会引起页面的刷新。换句话说&#xff0c;hash模式不会将#后面的地址…
阅读更多...
Android生态大变革，谷歌调整开源政策，核心开发不再公开

Android生态大变革，谷歌调整开源政策，核心开发不再公开

“开源”这个词曾经是Android的护城河&#xff0c;如今却成了谷歌的烫手山芋。最近谷歌宣布调整Android的开源政策&#xff0c;核心开发将全面转向私有分支。翻译成人话就是&#xff1a;以后Android的核心更新&#xff0c;不再公开共享了。 这操作不就是开源变节吗&#xff0c;…
阅读更多...
JavaScript中集合常用操作方法详解

JavaScript中集合常用操作方法详解

JavaScript中集合常用操作方法详解 JavaScript中的集合主要包括数组(Array)、集合(Set)和映射(Map)。下面我将详细介绍这些集合类型的常用操作方法。 数组(Array) 数组是JavaScript中最常用的集合类型&#xff0c;提供了丰富的操作方法。 创建数组 // 字面量创建 const ar…
阅读更多...
【HC-05】蓝牙串口通信模块调试与应用（1）

【HC-05】蓝牙串口通信模块调试与应用（1）

一、HC-05 基础学习视频 HC-05蓝牙串口通信模块调试与应用1 二、HC-05学习视频课件
阅读更多...
【学Rust写CAD】18 定点数2D仿射变换矩阵结构体（MatrixFixedPoint结构别名）

【学Rust写CAD】18 定点数2D仿射变换矩阵结构体（MatrixFixedPoint结构别名）

源码 // matrix/fixed.rs use crate::fixed::Fixed; use super::generic::Matrix;/// 定点数矩阵类型别名 pub type MatrixFixedPoint Matrix<Fixed, Fixed, Fixed, Fixed, Fixed, Fixed>;代码解析 这段代码定义了一个定点数矩阵的类型别名 MatrixFixedPoint&#xff…
阅读更多...
axios文件下载使用后端传递的名称

axios文件下载使用后端传递的名称

java后端通过HttpServletResponse 返回文件流 在Content-Disposition中插入文件名 一定要设置Access-Control-Expose-Headers&#xff0c;代表跨域该Content-Disposition返回Header可读&#xff0c;如果没有&#xff0c;前端是取不到Content-Disposition的&#xff0c;可以在统…
阅读更多...
HarmonyOS之深入解析如何根据url下载pdf文件并且在本地显示和预览

HarmonyOS之深入解析如何根据url下载pdf文件并且在本地显示和预览

一、文件下载 ① 网络请求配置 下载在线文件&#xff0c;需要访问网络&#xff0c;因此需要在 config.json 中添加网络权限&#xff1a; {"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET","reason&qu…
阅读更多...
鸿蒙前后端项目源码-点餐v3.0-原创!原创!原创!

鸿蒙前后端项目源码-点餐v3.0-原创!原创!原创!

鸿蒙前后端点餐项目源码含文档ArkTS语言. 原创作品.我半个月写的原创作品&#xff0c;请尊重原创。 原创作品&#xff0c;盗版必究&#xff01;&#xff01;&#xff01;&#xff01; 原创作品&#xff0c;盗版必究&#xff01;&#xff01;&#xff01;&#xff01; 原创作…
阅读更多...
VUE3+TypeScript项目，使用html2Canvas+jspdf生成PDF并实现--分页--页眉--页尾

VUE3+TypeScript项目，使用html2Canvas+jspdf生成PDF并实现--分页--页眉--页尾

使用html2CanvasJsPDF生成pdf&#xff0c;并实现分页添加页眉页尾 1.封装方法htmlToPdfPage.ts /**path: src/utils/htmlToPdfPage.tsname: 导出页面为PDF格式 并添加页眉页尾 **/ /*** 封装思路* 1.将页面根据A4大小分隔边距&#xff0c;避免内容被中间截断* 所有元素层级不要…
阅读更多...
5.Excel：从网上获取数据

5.Excel：从网上获取数据

一 用 Excel 数据选项卡获取数据的方法 连接。 二 要求获取实时数据 每1分钟自动更新数据。 A股市场_同花顺行情中心_同花顺财经网 用上面方法将数据加载进工作表中。 在表格内任意区域右键&#xff0c;刷新。 自动刷新&#xff1a; 三 缺点 Excel 只能爬取网页上表格类型的…
阅读更多...
《深度剖析SQL之WHERE子句：数据过滤的艺术》

《深度剖析SQL之WHERE子句：数据过滤的艺术》

在当今数据驱动的时代&#xff0c;数据处理和分析能力已成为职场中至关重要的技能。SQL作为一种强大的结构化查询语言&#xff0c;在数据管理和分析领域占据着核心地位。而WHERE子句&#xff0c;作为SQL中用于数据过滤的关键组件&#xff0c;就像是一把精准的手术刀&#xff0c…
阅读更多...
华为eNSP-配置静态路由与静态路由备份

华为eNSP-配置静态路由与静态路由备份

一、静态路由介绍 静态路由是指用户或网络管理员手工配置的路由信息。当网络拓扑结构或者链路状态发生改变时&#xff0c;需要网络管理人员手工修改静态路由信息。相比于动态路由协议&#xff0c;静态路由无需频繁地交换各自的路由表&#xff0c;配置简单&#xff0c;比较适合…
阅读更多...
Docker 快速入门指南

Docker 快速入门指南

Docker 快速入门指南 1. Docker 常用指令 Docker 是一个轻量级的容器化平台&#xff0c;可以帮助开发者快速构建、测试和部署应用程序。以下是一些常用的 Docker 命令。 1.1 镜像管理 # 搜索镜像 docker search <image_name># 拉取镜像 docker pull <image_name>…
阅读更多...
最新文章

Copyright @ 2022~2023