该文章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.网页上支持的图片格式
格式 | 说明 |
---|---|
.bmp | windows画图软件默认保存的格式,位图 |
.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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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> <u>HRBCU</u> <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=""> 男<input type="radio" value=""> 女
</p>
打印效果如下:(所有选项点一遍)
- 互斥的单选按钮应该设置它们的name为相同值。
例如下:
<p>性别:<input type="radio" name="sex" value=""> 男<input type="radio" name="sex" value=""> 女
</p>
打印效果如下:(所有选项点一遍)
- 单选按钮要有value属性值,向服务器提交的就是value值。
- 单选按钮如果加上checked属性,表示默认被选中。
例如下:
<p>血型:<input type="radio" name="bloodtype" checked> O型<input type="radio" name="bloodtype"> A型<input type="radio" name="bloodtype"> B型<input type="radio" name="bloodtype"> AB型
</p>
打印效果如下:(不进行任何操作)
20.4.label标签
- label标签用来将文字和单选那妞进行绑定,用户单击文字的时候,也视为点击了单选按钮。
例如下:
<form method="post" action=""><p>前端开发</p><p><label><input type="radio" name="web"> HTML</label><label ><input type="radio" name="web"> CSS</label><Label><input type="radio" name="web"> 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=""> 小龙虾</label><label><input type="checkbox" name="1" value=""> 螃蟹</label><label><input type="checkbox" name="1" value=""> 醋</label><label><input type="checkbox" name="1" value=""> 煎饼果子</label><label><input type="checkbox" name="1" value=""> 粗粮面</label><label><input type="checkbox" name="1" value=""> 半硬不软的桃</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">生菜 <input type="checkbox" name="vegetable">菠菜 <input type="checkbox" name="vegetable">土豆 <input type="checkbox" name="vegetable">藕 </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 | 日期,时间选择控件 |
电子邮件输入控件 | |
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"> <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> </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>
打印效果如下: