前端基础——HTML傻瓜式入门(2)

该文章Github地址:https://github.com/AntonyCheng/html-notes

在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址:https://blog.csdn.net/AntonyCheng/article/details/136555245),该模板集成了最常见的开发组件,同时基于修改配置文件实现组件的装载,除了这些,模板中还有非常丰富的整合示例,同时单体架构也非常适合SpringBoot框架入门,如果觉得有意义或者有帮助,欢迎Star & Issues & PR!

上一章:前端基础——HTML傻瓜式入门(1)

15、图片标签 <img>

15.1.<img>标签

  • <img>标签用来在网页中插入图片。
<img src="images/pic.jpg">

img是image(图片)缩写,src是source(来源)缩写,.jpg是图片存储目录和完整文件名。

  • 图片必须复制到项目文件夹中。

一定要注意,图片必须复制到项目文件夹中,一般将图片保存到项目文件夹中的images子文件夹中。

  • 图片路径必须正确。
<img src="images/pic.jpg">

images/ 表示images文件夹,且不能为中文;pic.jpg 表示图片完整名字。

  • 图片只是引入到了网页中。

所以将来要将图片也一起上传到服务器上,将图片复制到项目文件中,即可整体上传。

  • 例子

下面展示深圳的一张图片,名字为 11.jpg 。

<div><h1>深圳</h1><img src="images/11.jpg">
</div>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

15.1.1.<img>标签的alt属性

  • alt属性是alternate“替代品”的缩写,它是对图像文本的描述,不是强制性的,例如下:
<div><h1>深圳</h1><img src="images/11.jpg" alt="深圳夜景">
</div>

打印效果如下:(alt属性是不会显示出来的)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 如果因为某种原因无法加载图像,浏览器会在页面上显示alt属性中的备用文本。

我们将图片来源文件夹改一个名字(将images改为image),看看效果:

<div><h1>深圳</h1><img src="image/11.jpg" alt="深圳夜景">
</div>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 供视力不方便的朋友使用网页朗读器时作为图片描述的参照。

15.1.2.<img>标签的width,height属性

  • width和height分别是设置宽度和高度,单位时像素,但是不需要写单位。
  • 若只设置了其中的一个,那么图片就会按照原始比例缩放.

例如下:

<div><h1>深圳</h1><img src="images/11.jpg" alt="深圳夜景" width="200">
</div>
<div><h1>深圳</h1><img src="images/11.jpg" alt="深圳夜景" width="200" height="300">
</div>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

15.2.网页上支持的图片格式

格式说明
.bmpwindows画图软件默认保存的格式,位图
.gif支持动图(比如说表情包)
.jpeg(.jpg)有损压缩图片,用于照片
.png便携式网络图像,用于logo,背景图形等,支持透明和半透明
.svg矢量图片
.webp最新的压缩算法,非常优秀的图片格式

15.3.相对路径

  • 描述从网页出发,如何找到图片,比如"前面路口左转,直走100米后右转就到了".
<img src="images/pic.jpg">

这就是一个相对路径

  • 随着网页和图片的位置关系不同,插入图片代码随之改变.
  • 如果需要退回层级,使用"…/"这样的写法.
  • 如果退回层级不止一层,就需要用多个"…/"描述.例如 “…/…/…/…/pic.jpg”

如果要编辑的网页和图片文件夹并不同级,那么此时就需要使用"…/"这样的写法.

<h2>此时该文件和images文件夹不在同一级,需要采用路径退级的写法引用图片</h2>
<div><p><b>深圳</b></p><img src="../images/11.jpg">
</div>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

15.4.绝对路径

  • 描述图片的精准地址:“哈尔滨市松北区学海街一号哈尔滨商业大学”。

例如下:

<img src="https://www.webname.com/programname/images/pic.png">
  • 不管网页在哪,绝对路径都是不需要改变的。

  • 本质来讲就是插入一个网页中的图片,路径就是网址路径。

16.超级链接 <a>

16.1.超级链接定义

超级链接是将网页和网页连接到一起的方法,是互联网成“网“的原因。

16.2.<a>标签

使用<a>标签制作超级链接,例如下:

<a href="xx.html">xx超级链接</a>

实例如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们从第三个网页跳去第一个网页和第二个网页:

<ul><li><b><a href="第一个网页(排版格式,列表).html">第一个网页</a></b></li><li><b><a href="第二个网页(图片).html">第二个网页</a></b></li>
</ul>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

16.3.href属性支持相对路径和绝对路径

  • 上例就是一个相对路径的插入实例。
  • 下例是一个绝对路径的插入实例:
<h2>我现在想去哔哩哔哩看看视频</h2>
<p><b><a href="https://www.bilibili.com/">bilibili</a></b></p>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 注意:绝对路径需要加上http://

16.4.<a>标签的title属性

  • <a>标签的title属性用于设置鼠标的悬停文本:

还是按照上例bilibili举例:

<p><b><a href="https://www.bilibili.com/" title="还不学习?">bilibili</a></b></p>

打印如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

16.5.在新窗口中打开网页

  • 将<a>标签的target属性设置为blank,即可在新标签页中打开网页:

还是以上例bilibili举例:

<p><b><a href="https://www.bilibili.com/" title="还不学习?" target="blank">bilibili</a></b></p>

打印结果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 在HTML4中,blank之前有一个下划线。

16.6.给图片设置超级链接

基本格式如下:

<a href="www.webname.com" target="blank"><img src="pic.png"></a>

例如下:

<h2>我们还可以给图片设置超级链接</h2>
<p><b>我们将一张深圳的图片超链接到哔哩哔哩里面去</b></p>
<a href="http://bilibili.com" target="blank"><img src="images/11.jpg"></a>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

16.7.页面内锚点

  • 较长的页面,可以适当的给 h 系列标签添加 id 属性,他将成为页面的“锚点”:

格式如下:

<h1 id="XX">XXXX</h1>

只要我们在该网页的网址后面添加 #XX ,页面就会自动滚动到锚点所在位置,即:XXXX

  • 实例如下:
<h1>我们现在来尝试锚点的使用</h1>
<h2 id="shenzheng">深圳夜景</h2>

此时,当我们在这个网页后加上 #shenzheng 的时候,页面将自动滚动到锚点所在的位置。

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 其他页面的超级链接,可以连接到指定锚点:

格式如下:

<a href="webname#XX">XXXX</a>
  • 我们可以做一个类似于回到顶部的按钮。
<h1 id="yongfa">我想在这里练习一下超链接的用法</h1>
<!--我们在中间多加一点内容-->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!--我们在这里设置一个回到顶部-->
<a href="webname#XX">回到顶部</a>

此处意会吧,多打代码。

16.8.下载链接

  • 指向exe、zip、rar等文件格式的链接,将自动成为下载链接:
<a href="flie.zip">download</a>

16.9.邮件链接、电话链接

  • 有 mailto: 前缀的链接是邮件链接,系统将自动打开Email相关软件:
<a href="mailto:wuchengcheng's@gmail.com">给伍程成发邮件</a>
  • 有 tel: 前缀的链接是电话链接,系统将自动打开拨号盘:
<a href="tel:19999999999">打电话给伍程成</a>

17.音频和视频 <audio>/<video>

17.1.音频

  • 在浏览器中插入音频需要使用 <audio> 标签,兼容到 IE9

格式如下:

<h1>我们在这里练习一下音频和视频的插入</h1>
<audio controls src="audio/柳爽 - 漠河舞厅.mp3" autoplay loop>抱歉,您的浏览器不支持audio标签,请升级浏览器
</audio>

controls:显示效果控件;autoplay:自动播放;loop:循环播放;删一项就少一项。

标签对中是对不兼容audio标签的浏览器的显示文字。

打印如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 浏览器常见的音频文件

常用音频文件有:.MP4 .OGG .wav

17.1.1.autoplay属性

  • 声明autoplay属性,音频会自动播放。
  • 常用浏览器为了不打扰用户,可能会不允许自动播放音乐,必须让用户手动点击之后才能播放。

17.1.2.loop属性

  • 让歌曲循环播放。

17.2.视频(属性和音频相同)

  • 在浏览器中插入视频需要使用<video>标签,兼容到IE9。

例如下:

	<video controls src="video/Lewis Capaldi - Someone You Loved.mp4" >抱歉,您的浏览器不支持video标签,请升级浏览器</video>

打印结果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 常见视频格式

常见格式有:.MP4 .OGV .WEBM .AVI

18.大纲标签

18.1.div标签实现文档区块分隔

过去一段时间,div标签是文档区块分隔的唯一手段,为了区分每个div的功能,程序员会借助div标签的class属性。

例如下:

<body><div class="header"><div class="logo"></div><div class="nav"></div></div><div class="banner"></div><div class="comtent"><div class="aside"></div><div class="main"></div></div>        <div class="footer"></div>
</body>

18.2.HTML5区块标签

区块标签说明
<section>文档的区域,语义比div大
<article>文档的核心文章内容,会被搜索引擎主要抓取
<aside>文档的非必要相关内容,比如广告等
<nav>导航条
<hearder>页头
<main>网页核心部分
<footer>页脚

19.语义化标签

19.1.<span>标签

  • <span>标签是文本中的”区块“标签,本身没有任何特殊的显示效果,可以结合CSS来丰富样式。

例如下:

<p><span>四川</span>的省会是<span>成都</span></p>
<p><span>福建</span>的省会是<span>福州</span></p>

打印效果如下:

四川的省会是成都

福建的省会是福州

19.2.<b>、<u>、<i>标签

<b>、<u>、<i>标签充满浓浓的”样式“意味,已经被CSS替代,但是在网页中也可以表示需要强调的文本。

标签说明
<b>加粗文字
<u>加下划线
<i>文字斜体

如下例:

<p><b>HRBCE</b>&nbsp;<u>HRBCU</u>&nbsp;<i>HRBCU</i>
</p>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

19.3.<strong>、<em>、<mark>标签

标签说明
<strong>代表特别重要的文字
<em>代表强调文字
<mark>代表一段需要被高亮的文字

如下例:

<p>哈尔滨<strong>商业</strong>大学
</p>
<p>哈尔滨<em>商业</em>大学
</p>
<p>哈尔滨<mark>商业</mark>大学
</p>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

19.4.<figure>、<figcaption>标签

  • <figure>元素代表一段独立的内容,与说明<figcaption>配合使用,他是一个独立的引用单元,比如建议读者拓展视野的图片等,当这部分转移到附录中或者其他页面时不会影响主体。

就一个了解内容,可有可无的一个标签,格式如下例:

<figure><img src="images/9.jpg"><figcaption>description1</figcaption>
</figure>
<figure><video src="video/Lewis Capaldi - Someone You Loved.mp4" controls>你的浏览器不支持video输入</video><figcaption>description2</figcaption>
</figure>
<figure><audio src="audio/Daoko,米津玄師 - 打上花火.mp3" controls>你的浏览器不支持audio输入</audio><figcaption>description3</figcaption>
</figure>

打印结果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.表单标签 <form><input></input></form>

20.1.表单的创建

  • 基本格式
<form ation="" method="post/get">
</form>

action属性表示表单要提交到后台的网址;method属性表示表单提交的方式。

20.2.单行文本框 type=“text”

  • 使用type属性值被设置为text的<input>元素可以创建一个单行文本框,他是一个单表签。

基本格式如下:

<input type="text">

text表示文本格式。

  • value属性值表示已经填好的值。

  • placeholder属性值表示提示文本,将以浅色文字写在文本框中,并不是文本框中的值。

  • disabled属性值表示用户不能与元素交互,即“锁死”。

例如下:

<form action="save.php" method="post"><p>请输入你的姓名:<input type="text"></p><p>请输入你的学号:<input type="text" value="2020"></p><p>请输入你的高中:<input type="text" placeholder="请输入真实院校"></p><p>请输入你的大学:<input type="text" value="哈尔滨商业大学" disabled></p>
</form>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.3.单选按钮 type=“radio”

基本格式:

<input type="radio">
  • 使用type属性值被设置为radio的<input>元素可以创建单选按钮。

例如下:

<p>性别:<input type="radio" value="">&nbsp;<input type="radio" value="">&nbsp;</p>

打印效果如下:(所有选项点一遍)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 互斥的单选按钮应该设置它们的name为相同值。

例如下:

<p>性别:<input type="radio" name="sex" value="">&nbsp;<input type="radio" name="sex" value="">&nbsp;</p>

打印效果如下:(所有选项点一遍)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 单选按钮要有value属性值,向服务器提交的就是value值。
  • 单选按钮如果加上checked属性,表示默认被选中。

例如下:

<p>血型:<input type="radio" name="bloodtype" checked>&nbsp;O型<input type="radio" name="bloodtype">&nbsp;A型<input type="radio" name="bloodtype">&nbsp;B型<input type="radio" name="bloodtype">&nbsp;AB型
</p>

打印效果如下:(不进行任何操作)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.4.label标签

  • label标签用来将文字和单选那妞进行绑定,用户单击文字的时候,也视为点击了单选按钮。

例如下:

<form method="post" action=""><p>前端开发</p><p><label><input type="radio" name="web">&nbsp;HTML</label><label ><input type="radio" name="web">&nbsp;CSS</label><Label><input type="radio" name="web">&nbsp;JS</Label></p>
</form>

打印效果如下:(点击HTML,会选中其前面的选择空)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.5.复选框 type=“checkbox”

  • 使用type属性值被设置为checkbox的<input>元素可以创建复选框。

基本格式:

<form action=""><input type="checkbox">
</form>

例如下:

<p>选择爱吃的东西</p>
<p><label><input type="checkbox" name="1" value="">&nbsp;小龙虾</label><label><input type="checkbox" name="1" value="">&nbsp;螃蟹</label><label><input type="checkbox" name="1" value="">&nbsp;</label><label><input type="checkbox" name="1" value="">&nbsp;煎饼果子</label><label><input type="checkbox" name="1" value="">&nbsp;粗粮面</label><label><input type="checkbox" name="1" value="">&nbsp;半硬不软的桃</label>
</p>

打印效果如下:(全选)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.6.密码框 type=“password”

  • 使用type属性值被设置为password的<input>元素可以创建密码框。

基本格式:

<input type="password">

例如下:

<p>请输入密码:<input type="password">
</p>

打印效果如下:(输入密码123456)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.7.下拉菜单 <select><option></option></select>

  • <select>标签表示下拉菜单,<option>是它内部的选项。

基本格式:

<form action="" method="post"><select><option value=""></option></select>
</form>

例如下:

<form action="" method="post"><p>请选择一下你最喜欢的app<select><option value="QQ">QQ</option><option value="wechat">微信</option><option value="alipay">支付宝</option><option value="bank">网银</option></select></p>
</form>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.8.多行文本框 <textarea></textarea>

  • <textarea></textarea>表示多行文本框
  • rows和cols属性,用于定义多行文本框的行数和列数,其数值没有单位

例如下:

<p>请留言:<textarea name="" id="" cols="100" rows="1"></textarea>
</p>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.9.三种按钮

  • 表单中常见的三种按钮,他们也是用input标签输入,type属性值不同:
type属性值按钮种类
button普通按钮,可以简写为<button></botton>
submit提交按钮
reset重置按钮
  • button按钮:
<p><button>你按我试试?</button><input type="button" value="你按我试试?">
</p>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • submit按钮:
<p><input type="submit"><input type="submit" value="点我提交">
</p>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • reset按钮:
<p><input type="reset"><input type="reset" value="点我重置">
</p>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

只要reset按钮被放在了一个<form>标签中,那么点击它就能够重置该表单里的所有选项。

例如下:

<form action="" method="post"><p>要不你对我说一句:<input type="text" placeholder="请输入下你想输入的话"></p><p><p>再来选一个你喜欢的水果:</p><p><label><input type="radio" value="" name="fruit">苹果</label><label><input type="radio" value="" name="fruit">梨子</label><label><input type="radio" value="" name="fruit">葡萄</label><label><input type="radio" value="" name="fruit">西瓜</label><label><input type="radio" value="" name="fruit">柑橘</label><label><input type="radio" value="" name="fruit">菠萝</label></p></p><p><p>再选几个你喜欢吃的蔬菜:</p><input type="checkbox" name="vegetable">生菜&nbsp;<input type="checkbox" name="vegetable">菠菜&nbsp;<input type="checkbox" name="vegetable">土豆&nbsp;<input type="checkbox" name="vegetable">&nbsp;</p><p>再选一个你喜欢的动物:<select><option value="">大熊猫</option><option value="">老虎</option><option value="">孔雀</option><option value="">大象</option><option value="">浣熊</option></select></p><p><p>为你这些秘密设置一个密码呗!</p><input type="password" value=""></p><p><input type="button" value="这个按钮没有用的哦"><input type="reset" value="点我重置"><input type="submit" value="点我提交"></p>
</form>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.10.input类型总结

type属性值控件
text单行文本框
radio单选按钮
checkbox多选按钮
password密码框
button普通按钮
reset重置按钮
submit提交按钮

20.11.HTML5中新增的表单控件

type属性值控件
color颜色选择控件
date、time日期,时间选择控件
email电子邮件输入控件
file文件选择控件
number数字输入控件
range拖拽条
search搜索框
url网址输入控件

例如下:

<form action="" method="post"><h1>我们来试试HTML5中表单控件</h1><p><b>颜色选择控件:</b><input type="color"></p><p><b>日期,时间选择控件:</b><input type="date">&nbsp;<input type="time"></p><p><b>电子邮箱输入控件:</b><input type="email"></p><p><b>文件选择控件:</b><input type="file"></p><p><b>数字输入控件:</b><input type="number" min="" max=""></p><p><b>拖拽条:</b><input type="range" min="" max=""></p><p><b>搜索框:</b><input type="search"></p><p><b>网页输入控件:</b><input type="url"></p>
</form>

效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 其中电子邮件和网页需要<input type=“submit”>才能看出效果。

  • 如果需要把一个输入型框设置为必填,则需要添加上required属性。

例如:

<form action="" method="post"><p>账号:<input type="text" required></p><p>密码:<input type="password" required></p><input type="submit">
</form>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

20.11.1<datalist>控件(备选项)

  • <datalist>控件可以为输入框提供一些备选项,当用户输入的备选项文字相同时,将会显示智能感应。

基本格式:

<input type="input_albe" list="id_name">
<datalist id="id_name"><option value="备选项">
</datalist>

例如下:

<form action="" method="post"><input type="text" list="shengfen"><datalist id="shengfen"><option value="山西"><option value="山东"><option value="广西"><option value="广东">      <option value="湖南"><option value="湖北"><option value="河南"><option value="河北">      </datalist>
</form>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

21.表格标签

21.1.<table>、<tr>和<td>标签

  • table是表格的意思
  • tr表示table row,表格行
  • td表示table data,表格数据

基本格式:

<table><tr>			<!-- 第一行 --><td></td>	<!-- 第一行第一列 --><td></td>	<!-- 第一行第二列 --></tr><tr>			<!-- 第二行 --><td></td>	<!-- 第二行第一列 --><td></td>	<!-- 第二行第二列 --></tr>
</table>
<!-- 每一行的列数应该是相同的 -->

21.2.<table>的border属性

  • 为了让表格能够显示边框,<table>标签通常又border属性。

如下例:

<table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>
<table border="1px"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

21.3.<table>的caption属性

  • <caption>是表格的标题,它常常作为<table>的第一个子元素出现。

基本格式:

<table><caption></caption><tr><td></td></tr>
</table>

例如下:

<table border="1px"><caption>数字</caption><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

21.4.<th>标签

  • th表示table header,表示”标题小格“,可以替代<td>的作用,表示表格小格。

例如下:

<table border="1px"><caption>公司年度财务报表</caption><caption style="font-size:smaller;">单位:万元</caption><tr><th>&nbsp;</th><th>第一季度</th><th>第二季度</th><th>第三季度</th><th>第四季度</th></tr><tr><td>工程部</td><td>198</td><td>332</td><td>233</td><td>232</td></tr><tr><td>人事部</td><td>45</td><td>78</td><td>47</td><td>66</td></tr><tr><td>财务处</td><td>1020</td><td>897</td><td>987</td><td>1003</td></tr><tr><td>公关部</td><td>564</td><td>543</td><td>755</td><td>342</td></tr><tr><td>宣传部</td><td>212</td><td>342</td><td>321</td><td>342</td></tr>
</table>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

21.5.colspan属性

  • colspan属性用来设置td或者th的列跨度(列宽)。

例如下:

<table border="1"><tr><td>a</td><td colspan="2">b</td></tr><tr><td colspan="2">c</td><td>d</td></tr><tr><td>e</td><td>f</td><td>g</td></tr>
</table>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

21.6.rowspan属性

  • rowspan属性用来设置td或者th的行跨度

例如下:

<table width="750px" border="1"><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr><tr><td>e</td><td rowspan="2">f</td><td>g</td><td rowspan="3">h</td></tr><tr><td>i</td><td>j</td></tr><tr><td>k</td><td>l</td><td>m</td></tr>
</table>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

21.7.colspan和rowspan的混用

例如下:

<table width="750" border="1"><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr><tr><td>E</td><td rowspan="2">F</td><td colspan="2" rowspan="3">G</td></tr><tr><td>H</td></tr><tr><td>I</td><td>J</td></tr>
</table>

打印效果如下:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

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

相关文章

C/C++程序设计实验报告3 | 数组实验

本文整理自博主本科大一《C/C程序设计》专业课的课内实验报告&#xff0c;适合C语言初学者们学习、练习。 编译器&#xff1a;gcc 10.3.0 ---- 注&#xff1a; 1.虽然课程名为C程序设计&#xff0c;但实际上当时校内该课的内容大部分其实都是C语言&#xff0c;C的元素最多可能只…

stm32学习——串口通信中的奇偶校验位

常用的校验算法有奇偶校验、校验和、CRC&#xff0c;还有LRC、BCC等不常用的校验算法。 以串口通讯中的奇校验为例&#xff0c;如果数据中1的个数为奇数&#xff0c;则奇校验位0&#xff0c;否则为1。 例如原始数据为&#xff1a;0001 0011&#xff0c;数据中1的个数&#xf…

HarmonyOS NEXT星河版——还是Android上套个壳吗?

这真的是我2024年听过最搞笑的话,就在前几天&#xff0c;居然还有人说鸿蒙OS就是安卓套个壳&#xff0c;简直无语&#xff01; 你敢相信&#xff1f;就在前几天&#xff0c;我还听到有人说&#xff1a;鸿蒙os就是安卓上套一个壳。唉&#xff0c;我真是无语了。 哎&#xff0c…

如何在Windows11上通过PHPStudy小皮面板快速大家MySQL环境

首先&#xff0c;下载小皮面板&#xff1a;https://www.xp.cn/ 点Windows版本&#xff1a; 开始下载&#xff1a; 或者直接从百度网盘下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1gcaiK54yW7DcrYld22V06A 提取码&#xff1a;4oj8 –来自百度网盘超级会员V9…

【力扣】141. 环形链表

题目描述 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&a…

Docker配置Nginx、tomcat、elasticsearch

配置nginx 需要先pull下来 #启动nginx -d 表示后台运行 -p 表示暴露端口&#xff0c;将80暴露为3344 [rootiZf8zhsqf64x47n1tpdy6oZ home]# docker run -d -p:3344:80 nginx 5dd62cea7681975d37d1a9867bc9776de0206519f624b461346ac83025656642 [rootiZf8zhsqf64x47n1tpdy6oZ…

Spark-Transformation以及Action开发实战

文章目录 创建RDDTransformation以及ActionTransformation开发Action开发RDD持久化共享变量创建RDD RDD是Spark的编程核心,在进行Spark编程是,首要任务就是创建一个初始的RDDSpark提供三种创建RDD方式:集合、本地文件、HDFS文件 集合:主要用于本地测试,在实际部署到集群运…

51-31 VastGaussian,3D高斯大型场景重建

2024 年 2 月&#xff0c;清华大学、华为和中科院联合发布的 VastGaussian 模型&#xff0c;实现了基于 3D Gaussian Splatting 进行大型场景高保真重建和实时渲染。 Abstract 现有基于NeRF大型场景重建方法&#xff0c;往往在视觉质量和渲染速度方面存在局限性。虽然最近 3D…

C++第五弹---类与对象(二)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 类与对象 1、类对象模型 1.1、如何计算类对象的大小 1.2、类对象的存储方式猜测 1.3、结构体内存对齐规则 2、this指针 2.1、this指针的引出 2.2…

Cesium 获取 3dtileset的包围盒各顶点坐标

Cesium 获取 3dtileset的包围盒各顶点坐标 /*** 获取 3dtileset的包围盒各顶点坐标, z 方向取高度最低的位置* param {*} tileset* param {*} options* returns* ref https://blog.csdn.net/STANDBYF/article/details/135012273* ref https://community.cesium.com/t/accurate-…

双指针算法_移动零_

题目&#xff1a; 给定一个数组 num &#xff0c;编写一个函数将数组内部的数字0都移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序&#xff01; 同时不能通过复制数组&#xff0c;开辟新的数组空间的情况下原地对数组进行操作 示例&#xff1a; 本题的原理&#x…

【New Release】PostgreSQL小版本(16.2, 15.6, 14.11, 13.14,12.18) 发布了

前言 PostgreSQL遵循小版本的发布规律&#xff0c;这一个季度的小版本又发布了。可以算作是2024年第一个季度的版本发布。如果总结其规律&#xff1a;大概就是2月、5月、8月、11月的样子。通常因为11月配合大版本的发布&#xff0c;它是起点&#xff0c;也有可能就是终点。起点…

Docker 中 Nginx 反向代理

本文主角&#xff1a;Nginx Proxy Manager 。 使用docker安装Nginx Proxy Manager。 1、找到C:\Windows\System32\drivers\etc下的hosts文件&#xff0c;添加 “域名 IP"即可。 使用vscode编辑文件&#xff0c;保存时会提示用管理员权限保存即可。 2、Nginx Proxy Mana…

力扣大厂热门面试算法题 36-38

36. 有效的数独&#xff0c;37. 解数独&#xff0c;38. 外观数列&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.16 可通过leetcode所有测试用例。 目录 36. 有效的数独 解题思路 完整代码 Java Python 37. 解数独 解题思…

nmcli --help(nmcli -h)nmcli文档、nmcli手册

文章目录 nmcli --helpOPTION解释OBJECT解释1. g[eneral]&#xff1a;查看NetworkManager的状态2. n[etworking]&#xff1a;启用或禁用网络3. r[adio]&#xff1a;查看无线电状态&#xff08;例如&#xff0c;Wi-Fi&#xff09;4. c[onnection]&#xff1a;列出所有的网络连接…

【上海大学计算机组成原理实验报告】一、数据传送实验

一、实验目的 了解实验仪器数据总线的控制方式。掌握数据传送的基本原理。掌握各寄存器的结构、工作原理及其控制方法。 二、实验原理 根据实验指导书的相关内容&#xff0c;数据输入到寄存器的过程是先通过指令选择源和目标&#xff0c;再通过数据总线来传送数据&#xff0…

Midjourney绘图欣赏系列(九)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…

VS Code上,QT基于cmake,qmake的构建方法(非常详细)

VS Code上,QT基于cmake&#xff0c;qmake的构建方法 1 前言2 QT基于cmake的构建方法2.1 VS Code关键插件安装2.2 系统环境变量配置2.3 VS Code中&#xff0c;环境变量配置2.4 Cmake新建一个新的Porject 3 QT基于qmake的构建方法 1 前言 最近&#xff0c;由于认证了github的学生…

代码贴--动态顺序表--数据结构

本博客将记录操作系统中的动态顺序表的相关代码 头文件&#xff08;SeList.h&#xff09; #pragma once #include<stdio.h> #include<string.h> #include<stdlib.h> #include<assert.h> typedef int SQDataType; //动态顺序表typedef struct SeqList…

2024年Vue3 面试题小总结

Vue3 面试题小总结 1. OptionsAPI 与 CompositionAPI 的区别&#xff1f; OptionsAPI&#xff1a; 选项式API&#xff0c;通过定义data、computed、watch、method等属性与方法&#xff0c;共同处理页面逻辑&#xff1b;缺点&#xff1a; 当组件变得复杂的时候&#xff0c;导致…