该文章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>标签用来在网页中插入图片。
html
<img src="images/pic.jpg">img是image（图片）缩写，src是source（来源）缩写，.jpg是图片存储目录和完整文件名。
- 图片必须复制到项目文件夹中。
一定要注意，图片必须复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中。
- 图片路径必须正确。
html
<img src="images/pic.jpg">images/ 表示images文件夹，且不能为中文；pic.jpg 表示图片完整名字。
- 图片只是引入到了网页中。
所以将来要将图片也一起上传到服务器上，将图片复制到项目文件中，即可整体上传。
- 例子
下面展示深圳的一张图片，名字为 11.jpg 。
html
<div>
<h1>深圳</h1>
<img src="images/11.jpg">
</div>打印效果如下：
15.1.1.<img>标签的alt属性
- alt属性是alternate"替代品"的缩写，它是对图像文本的描述，不是强制性的，例如下：
html
<div>
<h1>深圳</h1>
<img src="images/11.jpg" alt="深圳夜景">
</div>打印效果如下：（alt属性是不会显示出来的）
- 如果因为某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本。
我们将图片来源文件夹改一个名字(将images改为image)，看看效果：
html
<div>
<h1>深圳</h1>
<img src="image/11.jpg" alt="深圳夜景">
</div>打印效果如下:
- 供视力不方便的朋友使用网页朗读器时作为图片描述的参照。
15.1.2.<img>标签的width,height属性
- width和height分别是设置宽度和高度,单位时像素,但是不需要写单位。
- 若只设置了其中的一个,那么图片就会按照原始比例缩放.
例如下:
html
<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米后右转就到了".
html
<img src="images/pic.jpg">这就是一个相对路径
- 随着网页和图片的位置关系不同,插入图片代码随之改变.
- 如果需要退回层级,使用".../"这样的写法.
- 如果退回层级不止一层,就需要用多个".../"描述.例如 ".../.../.../.../pic.jpg"
如果要编辑的网页和图片文件夹并不同级,那么此时就需要使用".../"这样的写法.
html
<h2>此时该文件和images文件夹不在同一级，需要采用路径退级的写法引用图片</h2>
<div>
<p><b>深圳</b></p>
<img src="../images/11.jpg">
</div>打印效果如下:
15.4.绝对路径
- 描述图片的精准地址："哈尔滨市松北区学海街一号哈尔滨商业大学"。
例如下：
html
<img src="https://www.webname.com/programname/images/pic.png">-
不管网页在哪，绝对路径都是不需要改变的。
-
本质来讲就是插入一个网页中的图片，路径就是网址路径。
16.超级链接 <a>
16.1.超级链接定义
超级链接是将网页和网页连接到一起的方法，是互联网成"网"的原因。
16.2.<a>标签
使用<a>标签制作超级链接，例如下：
html
<a href="xx.html">xx超级链接</a>实例如下：
我们从第三个网页跳去第一个网页和第二个网页：
html
<ul>
<li><b><a href="第一个网页（排版格式，列表）.html">第一个网页</a></b></li>
<li><b><a href="第二个网页（图片）.html">第二个网页</a></b></li>
</ul>打印效果如下：
16.3.href属性支持相对路径和绝对路径
- 上例就是一个相对路径的插入实例。
- 下例是一个绝对路径的插入实例：
html
<h2>我现在想去哔哩哔哩看看视频</h2>
<p><b><a href="https://www.bilibili.com/">bilibili</a></b></p>打印效果如下：
- 注意：绝对路径需要加上http://
16.4.<a>标签的title属性
- <a>标签的title属性用于设置鼠标的悬停文本：
还是按照上例bilibili举例：
html
<p><b><a href="https://www.bilibili.com/" title="还不学习？">bilibili</a></b></p>打印如下：
16.5.在新窗口中打开网页
- 将<a>标签的target属性设置为blank，即可在新标签页中打开网页：
还是以上例bilibili举例：
html
<p><b><a href="https://www.bilibili.com/" title="还不学习？" target="blank">bilibili</a></b></p>打印结果如下：
- 在HTML4中，blank之前有一个下划线。
16.6.给图片设置超级链接
基本格式如下：
html
<a href="www.webname.com" target="blank"><img src="pic.png"></a>例如下：
html
<h2>我们还可以给图片设置超级链接</h2>
<p><b>我们将一张深圳的图片超链接到哔哩哔哩里面去</b></p>
<a href="http://bilibili.com" target="blank"><img src="images/11.jpg"></a>打印效果如下：
16.7.页面内锚点
- 较长的页面，可以适当的给 h 系列标签添加 id 属性，他将成为页面的"锚点"：
格式如下：
html
<h1 id="XX">XXXX</h1>只要我们在该网页的网址后面添加 #XX ，页面就会自动滚动到锚点所在位置，即：XXXX
- 实例如下：
html
<h1>我们现在来尝试锚点的使用</h1>
<h2 id="shenzheng">深圳夜景</h2>此时，当我们在这个网页后加上 #shenzheng 的时候，页面将自动滚动到锚点所在的位置。
打印效果如下：
- 其他页面的超级链接，可以连接到指定锚点：
格式如下：
html
<a href="webname#XX">XXXX</a>- 我们可以做一个类似于回到顶部的按钮。
html
<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等文件格式的链接，将自动成为下载链接：
html
<a href="flie.zip">download</a>16.9.邮件链接、电话链接
- 有 mailto: 前缀的链接是邮件链接，系统将自动打开Email相关软件：
html
<a href="mailto:wuchengcheng's@gmail.com">给伍程成发邮件</a>- 有 tel: 前缀的链接是电话链接，系统将自动打开拨号盘：
html
<a href="tel:19999999999">打电话给伍程成</a>17.音频和视频 <audio>/<video>
17.1.音频
- 在浏览器中插入音频需要使用 <audio> 标签，兼容到 IE9
格式如下：
html
<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。
例如下：
html
<video controls src="video/Lewis Capaldi - Someone You Loved.mp4" >
抱歉，您的浏览器不支持video标签，请升级浏览器
</video>打印结果如下：
常见视频格式
常见格式有：.MP4 .OGV .WEBM .AVI
18.大纲标签
18.1.div标签实现文档区块分隔
过去一段时间，div标签是文档区块分隔的唯一手段，为了区分每个div的功能，程序员会借助div标签的class属性。
例如下：
html
<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来丰富样式。
例如下：
html
<p><span>四川</span>的省会是<span>成都</span></p>
<p><span>福建</span>的省会是<span>福州</span></p>打印效果如下：
四川的省会是成都
福建的省会是福州
19.2.<b>、<u>、<i>标签
<b>、<u>、<i>标签充满浓浓的"样式"意味，已经被CSS替代，但是在网页中也可以表示需要强调的文本。
| 标签 | 说明 |
|---|---|
| <b> | 加粗文字 |
| <u> | 加下划线 |
| <i> | 文字斜体 |
如下例：
html
<p>
<b>HRBCE</b> <u>HRBCU</u> <i>HRBCU</i>
</p>打印效果如下：
19.3.<strong>、<em>、<mark>标签
| 标签 | 说明 |
|---|---|
| <strong> | 代表特别重要的文字 |
| <em> | 代表强调文字 |
| <mark> | 代表一段需要被高亮的文字 |
如下例：
html
<p>
哈尔滨<strong>商业</strong>大学
</p>
<p>
哈尔滨<em>商业</em>大学
</p>
<p>
哈尔滨<mark>商业</mark>大学
</p>打印效果如下：
19.4.<figure>、<figcaption>标签
- <figure>元素代表一段独立的内容，与说明<figcaption>配合使用，他是一个独立的引用单元，比如建议读者拓展视野的图片等，当这部分转移到附录中或者其他页面时不会影响主体。
就一个了解内容，可有可无的一个标签，格式如下例：
html
<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.表单的创建
- 基本格式
html
<form ation="" method="post/get">
</form>action属性表示表单要提交到后台的网址；method属性表示表单提交的方式。
20.2.单行文本框 type="text"
- 使用type属性值被设置为text的<input>元素可以创建一个单行文本框，他是一个单表签。
基本格式如下：
html
<input type="text">text表示文本格式。
-
value属性值表示已经填好的值。
-
placeholder属性值表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值。
-
disabled属性值表示用户不能与元素交互，即"锁死"。
例如下：
html
<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"
基本格式：
html
<input type="radio">- 使用type属性值被设置为radio的<input>元素可以创建单选按钮。
例如下：
html
<p>
性别：
<input type="radio" value=""> 男
<input type="radio" value=""> 女
</p>打印效果如下：（所有选项点一遍）
- 互斥的单选按钮应该设置它们的name为相同值。
例如下：
html
<p>
性别：
<input type="radio" name="sex" value=""> 男
<input type="radio" name="sex" value=""> 女
</p>打印效果如下：（所有选项点一遍）
- 单选按钮要有value属性值，向服务器提交的就是value值。
- 单选按钮如果加上checked属性，表示默认被选中。
例如下：
html
<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标签用来将文字和单选那妞进行绑定，用户单击文字的时候，也视为点击了单选按钮。
例如下：
html
<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>元素可以创建复选框。
基本格式：
html
<form action="">
<input type="checkbox">
</form>例如下：
html
<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>元素可以创建密码框。
基本格式：
html
<input type="password">例如下：
html
<p>
请输入密码：
<input type="password">
</p>打印效果如下：（输入密码123456）
20.7.下拉菜单 <select><option></option></select>
- <select>标签表示下拉菜单，<option>是它内部的选项。
基本格式：
html
<form action="" method="post">
<select>
<option value=""></option>
</select>
</form>例如下：
html
<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属性，用于定义多行文本框的行数和列数，其数值没有单位
例如下：
html
<p>
请留言:
<textarea name="" id="" cols="100" rows="1"></textarea>
</p>打印效果如下：
20.9.三种按钮
- 表单中常见的三种按钮，他们也是用input标签输入，type属性值不同：
| type属性值 | 按钮种类 |
|---|---|
| button | 普通按钮，可以简写为<button></botton> |
| submit | 提交按钮 |
| reset | 重置按钮 |
- button按钮：
html
<p>
<button>你按我试试？</button>
<input type="button" value="你按我试试？">
</p>打印效果如下：
- submit按钮：
html
<p>
<input type="submit">
<input type="submit" value="点我提交">
</p>打印效果如下：
- reset按钮：
html
<p>
<input type="reset">
<input type="reset" value="点我重置">
</p>打印效果如下：
只要reset按钮被放在了一个<form>标签中，那么点击它就能够重置该表单里的所有选项。
例如下：
html
<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 | 网址输入控件 |
例如下：
html
<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++属性。
例如：
html
<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>控件可以为输入框提供一些备选项，当用户输入的备选项文字相同时，将会显示智能感应。
基本格式：
html
<input type="input_albe" list="id_name">
<datalist id="id_name">
<option value="备选项">
</datalist>例如下：
html
<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，表格数据
基本格式：
html
<table>
<tr> <!-- 第一行 -->
<td></td> <!-- 第一行第一列 -->
<td></td> <!-- 第一行第二列 -->
</tr>
<tr> <!-- 第二行 -->
<td></td> <!-- 第二行第一列 -->
<td></td> <!-- 第二行第二列 -->
</tr>
</table>
<!-- 每一行的列数应该是相同的 -->21.2.<table>的border属性
- 为了让表格能够显示边框，<table>标签通常又border属性。
如下例：
html
<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>的第一个子元素出现。
基本格式：
html
<table>
<caption></caption>
<tr>
<td></td>
</tr>
</table>例如下：
html
<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>的作用，表示表格小格。
例如下：
html
<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的列跨度（列宽）。
例如下：
html
<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的行跨度
例如下：
html
<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的混用
例如下：
html
<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>打印效果如下：
