HTML学习笔记_html img 没找到图片用其他替代-CSDN博客

本文链接：https://blog.csdn.net/m0_48804231/article/details/123140552

HTML学习笔记

初识HTMl

HTML—全名是 Hyper Text Markup Language—（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等。

HTML5的优势：

世界知名浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mozilla
市场的需求
跨平台

W3C标准：

W3C
- World Wide Web Consortium(万维网联盟)
- 成立与1994年，Web技术邻域最权威和具有影响力的国际中立性技术标准机构
- W3C国际网
- W3C中国区域网
- URL地址中以org结尾就表示开源的意思
W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript），DOM是文档对象模型！

创建第一个HTML文件：

首先在IDE工具中先建一个项目，可以就直接选择第一个的java项目，然后命名好后，打开其项目结构，其中默认生成的src包可以删去用不到它，在项目下自己创建一个html目录即可！

效果图：

在这里插入图片描述

、等成对的标签，分别叫** 开发标签**和** 闭合标签**

单独呈现的标签（空元素），如

;意为用 / 来关闭空元素，单个出现的标签称为** 自闭和标签**

点击右上角的响应浏览器查看效果：

在这里插入图片描述

网页基本信息

eg:

<!--HTML中的注释结构，在IDE中注释的快捷生成键是 CTRL + / -->
<!DOCTYPE html><!--DOCTYPE:文档类型，其作用就是: 告诉浏览器，我们要使用什么规范！浏览器默认的就是html规范！-->
<!--html中的所有代码必须都在<html></html>标签里面，在该标签外面写的东西不会被显示，只会被当成一段文本！-->
<html lang="en">
<!--head标签代表网页头部！
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
-->
<head>
<!--meta描述性标签，它用来描述我们网站的一些信息，一般用来做SEO（搜索引擎优化）。charset="UTF-8"表示字符编码是UTF-8格式！-->
    <meta charset="UTF-8">
<!--title网页标题！-->
    <title>IDE生成的第一个HTMl文件</title>
</head>
<!--body标签代表网页主体！-->
<body>
夏黄杰，你好！
</body>
</html>

网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

eg:

在写代码学习的过程中，如果碰到代码被默认加上白色横线的话，既代表该方法或者标签等被废弃或者淘汰了。虽然不影响使用，仍然会有效果，但是最好不要继续使用而是使用更好的方法来实现！注意：以后在企业开发中，不到万不得已一定不要使用这些被废弃掉的标签啊，如果一定要使用，一般情况下都是用来作为CSS的钩子来使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页基本标签学习</title>
</head>
<body>
<!--使用style属性设置文本居中-->
<h1 style = "text-align:center"> 网页基本标签学习</h1>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签,其快捷键是：写一个p 然后按一下tab便一键生成了，其他标签也可以类似这样快捷键生成！-->
<p>斯蒂芬·库里（Stephen Curry），全名沃德尔·斯蒂芬·库里二世（Wardell Stephen Curry II），1988年3月14日出生于美国俄亥俄州阿克伦（Akron, Ohio），美国职业篮球运动员，司职控球后卫，绰号“娃娃脸刺客（Baby-Faced Assassin）”，效力于NBA金州勇士队。 [1]  [332]</p>
<p>斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；2014-15、2016-17、2017-18赛季三次夺得NBA总冠军；两次荣膺常规赛MVP；2015-16、2020-21赛季两次当选NBA常规赛得分王； [308]  7次入选最佳阵容（4次一阵、2次二阵、1次三阵）； [311]  7次入选全明星西部首发阵容； [3-4]  2021年12月成为NBA历史三分王。 [345]</p>
<p>斯蒂芬·库里于2010年随美国队获土耳其世锦赛冠军，2014年随美国队获西班牙篮球世界杯冠军。2019福布斯100名人榜，斯蒂芬·库里排名第23位。</p>

<!--水平线标签  hr标签同样可以 hr + tab 一键生成<hr> 但最好习惯性地在后面加上/,养成良好的编码规范！-->
<hr/>

<!--换行标签 br + tab 可一键生成，默认生成换行标签<br>,属于自闭和标签，习惯性也加上/,但可加可不加，只是利于观看理解罢了！-->
斯蒂芬·库里（Stephen Curry），全名沃德尔·斯蒂芬·库里二世（Wardell Stephen Curry II），1988年3月14日出生于美国俄亥俄州阿克伦（Akron, Ohio），美国职业篮球运动员，司职控球后卫，绰号“娃娃脸刺客（Baby-Faced Assassin）”，效力于NBA金州勇士队。 [1]  [332]<br>
斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队，新秀赛季入选最佳新秀第一阵容；2014-15、2016-17、2017-18赛季三次夺得NBA总冠军；两次荣膺常规赛MVP；2015-16、2020-21赛季两次当选NBA常规赛得分王； [308]  7次入选最佳阵容（4次一阵、2次二阵、1次三阵）； [311]  7次入选全明星西部首发阵容； [3-4]  2021年12月成为NBA历史三分王。 [345]<br>
斯蒂芬·库里于2010年随美国队获土耳其世锦赛冠军，2014年随美国队获西班牙篮球世界杯冠军。2019福布斯100名人榜，斯蒂芬·库里排名第23位。<br>
<!--根据效果显示可以看出，段落标签所产生的效果比换行标签所产生的文本间距要大一些，仅是通过换行符后文本间距很小！这是它们俩之间一个小小的区别！-->

<hr/>

<!--字体样式标签，例如： 粗体、斜体-->

使用strong标签使字体加粗---粗体: <strong>夏黄杰</strong><br/>

使用b标签使字体加粗---粗体: <b>夏黄杰</b> <br/>

使用em标签使字体成为斜体---斜体: <em>夏黄杰</em> <br/>

使用i标签使字体成为斜体---斜体: <i>夏黄杰</i> <br/>
<!--在HTML中通过font标签设置文本字体、大小、颜色-->
<font face="SimHei" size="5" color="red">夏黄杰,黑体</font> <br/>
<!---->
<font face="SimHei" size="5" color="red"><b>夏黄杰,黑体,加粗</b></font> <br/>

<font face="LiSu" size="8" color="yellow">夏黄杰，隶书</font> <br/>

<font face="LiSu" size="8" color="yellow"><i>夏黄杰，隶书，斜体</i></font> <br/>
<!--当前font标签其实被废弃了，逐渐被淘汰，所以会被IDE默认加上白横线。虽然不影响使用，仍然会有效果。但最好不要使用，在以后企业开发中，更是不建议使用这些被淘汰的标签！-->
<!--虽然font标签被HTML废弃了，但可以使用style属性来设置字体、大小、颜色-->
<p style = "font-family:STXingkai;color:blue;font-size:50px;">夏黄杰</p>
<hr/>


<!--特殊符号-->

空格在HTML中也是一个特殊符号！<br/>
<!--在HTML中，编写代码时隔开很多空格在网页上是显示不了的！相比于正常的文字间距只会隔开一个位置！-->
空     格 <br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br/>
<!--通过&nbsp;来实现HTML中的多空格实现！！！，必须要记住比掌握，平时应用的较多！！！-->

<!--大于号、小于号-->

&gt;
<br/>

&lt;
<br/>

<!--&copy;版权符号-->
&copy;版权所有学@凡
<br/>

<!--$符号-->
&dollar;
<br/>

<!--¥符号-->
&yen;

<!--
特殊符号记忆方式:

&     ;

既&开头,;结尾!

写下一个&后再加上一个字母就可以看到HTML中所有以该字母开头的特殊符号，右侧是特殊符号的样式，左侧便是特殊符号对应的代码！！！


-->


</body>
</html>

图像标签

常见的图像格式：

JPG
GIF（动图形式）
PNG
BMP
…

在HTML中的图像标签用到的是img标签：

<img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">

src(必填项)表示的是图像地址,可以填图像的相对地址和绝对地址，…/ 表示上一级目录,推荐使用相对地址！！！
alt（必填项）表示图像的替代文字，既当图片没有被加载处理时，便显示该图像的替代文字
title表示鼠标悬停提示文字
width表示图像宽度
height表示图像高度

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
img标签学习:
src:图片地址    一般分为: 相对地址（推荐使用）  绝对地址
../   表示上一级目录！！！

-->
<img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</body>
</html>

在这里插入图片描述

超链接标签及应用、锚链接（重点掌握）

链接标签：

<a href="path" target="目标窗口位置">链接文本或图像</a>

href属性表示的是链接路径
target属性表示的是链接在哪个窗口打开，一般分为俩种：
- 当target属性的值为_blank时，既点击跳转后新打开一个窗口，不覆盖当前的网页窗口
- 当target属性的值为_self时（默认的就是self值），既点击跳转后在当前网页打开链接，既覆盖了当前的网页窗口
a标签中可以链接文本也可以链接图像，简单来说就是可以通过点击文本提示语跳转也可以通过设置图片来点击跳转！！！

超链接：

页面间链接
- 从一个页面链接到另一个页面

锚链接（重点理解并掌握）可以实现页面间的跳转，也可以实现不同页面之间的具体位置跳转！！！

锚链接:可以实现页面间的跳转，也可以实现不同页面之间的具体位置跳转!
例如: 从别的页面点击跳转到另一个页面的顶部或者尾部等等都能实现！！！
1.需要一个锚标记，<!--使用a标签中的name属性作为标记！！！-->
eg:
<a name="top">
    <img src="../resources/images/top.jpg" alt="头部图片" width="1412" height="125">
</a>
2.跳转到标记，通过a标签中的href属性等于 #+标记名
<a href="#top">
    <img src="../resources/images/top.png" alt="回到顶部" title="点击回到顶部" width="50" height="50">
</a>
如果是不同页面之间的具体位置跳转，跳转到标记有一点不同,既 #+标记名 加在跳转的页面路径后面！！！
eg:
<a href="Hyperlink-tags.html#down" target="_blank">
    <img src="../resources/images/down.png" alt="跳转到超链接标签网页底部" title="点击跳转到超链接标签网页底部" width="50" height="50">
</a>
#

功能性链接

1.邮件链接: mailto:  eg: <a href="mailto:2822527270@qq.com">点击联系我！</a>
2.QQ链接: 在百度搜索QQ推广后进入官网，登入后选择推广工具，输入自己想要的提示语已经组件样式后，复制代码过来就可   以直接使用了!
  (代码中的图片地址可能过期了可以直接右键图片复制图片链接过来更改即可！)

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签及应用</title>
</head>
<body>

<!--使用a标签中的name属性作为标记！！！-->
<a name="top">
    <img src="../resources/images/top.jpg" alt="头部图片" width="1412" height="125">
</a> <br/>

<!--
a标签:
herf: 必填，表示要跳转到哪个页面
target: 表示跳转的窗口在哪里打开
       _blank  表示会在新的网页中打开，既不覆盖当前网页
       _self   表示在当前的网页中打开，既覆盖住当前网页
-->

<a href="images-tags.html">点击跳转到图像标签网页</a> <br/>
<a href="https://www.baidu.com" target="_self">点击跳转到百度</a> <br/>
<a href="https://www.baidu.com"  target="_blank">
    <img src="../resources/images/搜索.png" alt="搜索" title="点击跳转到百度搜索" width="200" height="200">
</a>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>

<p>
    <img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">
</p>




<!--锚链接:可以实现页面间的跳转，也可以实现不同页面之间的具体位置跳转！
例如: 从别的页面点击跳转到另一个页面的顶部或者尾部等等都能实现！！！
1.需要一个锚标记
2.跳转到标记
#
-->

<a href="#top">
    <img src="../resources/images/top.png" alt="回到顶部" title="点击回到顶部" width="50" height="50">
</a> <br/>



<!--功能性链接
邮件链接: mailto:
QQ链接: 在百度搜索QQ推广后进入官网，登入后选择推广工具，输入自己想要的提示语已经组件样式后，复制代码过来就可以直接使用了!
(代码中的图片地址可能过期了可以直接右键图片复制图片链接过来更改即可！)
-->

<!--邮件链接-->
<a href="mailto:2822527270@qq.com">点击联系我！</a> <br/>

<!--QQ链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="https://pub.idqqimg.com/wpa/images/counseling_style_53.png" alt="你好，加我领取视频会员!" title="你好，加我领取视频会员!"/>
</a> <br/>

<!--使用a标签中的name属性作为标记！！！-->
<a name="down">
    <img src="../resources/images/down.jpg" alt="底部图片" width="1412" height="125">
</a>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
 img标签学习:
 src(必填项):图片地址    一般分为: 相对地址（推荐使用）  绝对地址
 ../   表示上一级目录！！！
 alt（必填项）表示图像的替代文字，既当图片没有被加载处理时，便显示该图像的替代文字
 title表示鼠标悬停提示文字
 width表示图像宽度
 height表示图像高度
-->
<img src="../resources/images/ouwen.jpg" alt="欧文海报" title="凯里.欧文" width="1366" height="768">

<!--锚链接还可以实现不同页面直接的具体位置跳转！！！
 a标签的herf属性中输入了跳转页面的地址后再加上 # + 对应锚链接标记的name属性的值 （这里是 # + down ）
 target属性选择_blank既点击跳转后打卡一个新的页面，默认的是_self既在当前页面跳转，覆盖了当前网页！-->
<a href="Hyperlink-tags.html#down" target="_blank">
    <img src="../resources/images/down.png" alt="跳转到超链接标签网页底部" title="点击跳转到超链接标签网页底部" width="50" height="50">
</a>

</body>
</html>

效果图：

在这里插入图片描述

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- 例如：p、（h1-h6…）
- 如果你新写了一个标签，它新开辟了一块空间，自动换了一行！它就属于块元素！！！
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- 例如：a、strong、em…
- 如果在行内没有主动换行的，它就属于行内元素！！！

eg：

在这里插入图片描述

列表

什么是列表：

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息！

列表的分类：

无序列表
- 无序列表是一个没有顺序的列表项目，在各条列前面使用●□◇◆等符号以示区隔。
- HTML无序列表始于
  - 标签，每个列表项始于
  - 标签；
  - 无序列表中的
  - 标签的type属性有三个数值可选，默认属性是disc实心园。
    分别为:disc为实心园、
    circle为空心园、
    square为实心小方块.
- 有序列表
  - 有序列表是一列按照字母或数字等顺序排列的列表项目，注意有序列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。
  - html有序列表始于
    1. 标签，每个列表项始于
    2. 标签。
    3. 在有序列表中的
      1. 标签中:
        type属性: 表示有序列表项目符号的类型！如果是用数字1、2、3类型来排序表示可以省略不写！
        start属性: 表示列表从多少开始编号排序显示！如果是1开始可以省略不写！
- 自定义列表
  - 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
  - HTML自定义列表以
    
    标签开始，每个自定义列表项以开始。每个自定义列表项的定义以
    开始。用于对术语或名称进行解释和描述。
  - ```
  <dl></dl>: 自定义列表的规定标签!
  <dt></dt>: 自定义列表的名称！
  <dd></dd>: 自定义列表的内容！
```
- 自定义列表的列表项前没有任何项目符号！

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表 -----  html有序列表始于<ol>标签，每个列表项始于<li>标签。
应用范围: 试卷，问答...
-->
<ol>
    <li>JAVA</li>
    <li>Python</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>C/C++</li>
</ol>

<hr/>

<!--在有序列表中的ol标签中:
type属性: 表示有序列表项目符号的类型！如果是用数字1、2、3类型来排序表示可以省略不写！
start属性: 表示列表从多少开始编号排序显示！如果是1开始可以省略不写！
-->
<ol type="A" start="2">
    <li>JAVA</li>
    <li>Python</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>C/C++</li>
</ol>

<hr/>

<ol type="I" start="3">
    <li>JAVA</li>
    <li>Python</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>C/C++</li>
</ol>

<hr/>

<!--无序列表 -----  无序列表是一个没有顺序的列表项目，在各条列前面使用●□◇◆等符号以示区隔.
html无序列表始于<ul>标签，每个列表项始于<li>标签。
应用范围: 导航栏，侧边栏...
-->
<ul>
    <li>JAVA</li>
    <li>Python</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>C/C++</li>
</ul>

<hr/>

<!--无序列表中的li标签的type属性有三个数值可选，默认属性是disc实心园。
分别为:disc为实心园、
      circle为空心园、
      square为实心小方块.
-->
<ul>
    <li type="circle">JAVA</li>
    <li type="circle">Python</li>
    <li type="circle">HTML</li>
    <li type="circle">CSS</li>
    <li type="circle">C/C++</li>
</ul>

<hr/>

<ul>
    <li type="square">JAVA</li>
    <li type="square">Python</li>
    <li type="square">HTML</li>
    <li type="square">CSS</li>
    <li type="square">C/C++</li>
</ul>

<hr/>

<!--自定义列表
dl: 自定义列表的规定标签!
dt: 自定义列表的名称！
dd: 自定义列表的内容！

应用范围: 公司或者大型网站的底部...
-->

<dl>

    <dt>课程名</dt>
    <dd>JAVA</dd>
    <dd>C/C++</dd>
    <dd>JAVAEE</dd>
    <dd>Python</dd>
    <dd>Linux</dd>

    <dt>前端学习内容</dt>
    <dd>用于画界面的标记语言:HTML</dd>
    <dd>用于美化界面:CSS</dd>
    <dd>用于处理业务逻辑:JavaScript</dd>

</dl>
</body>
</html>

在这里插入图片描述

表格

为什么使用表格：

简单通用！
结构稳定

表格的基本结构：

单元格
行 tr
列 td
边框 border
单元格间距 cellspacing 前提：没有设置边框合并！！！
单元格边距 cellpadding —— 既单元格边框和单元格内容之间的空白部分(以像素为单位)！
整个表格字段居中 style=“text-align: center” 一般在创建表格的table标签中就声明！
表格边框合并 style=“border-collapse: collapse”
表格边框颜色 bordercolor
跨行 rowspan
跨列 colspan

注意点：table标签默认不会直接显示出表格的边框，可以通过table标签的border属性来添加边框，并赋值边框的宽度！

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--
表格table
行   tr
列   td
边框  border
表格的整体宽度   width
单元格间距   cellspacing   如果该表格已经用style="border-collapse: collapse"实现了表格的边框合并的话，那再怎么调整单元格间距的值也不会发生改变！！！
单元格边距   cellpadding   既单元格边框和单元格内容之间的空白部分(以像素为单位)。 cellpadding属性值越大，单元格中的内容到单元格边框的距离也就越大。
整个表格字段居中  style="text-align: center"   注意: text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐!!!
表格边框合并     style="border-collapse: collapse"  可以实现表格的边框合并！！！
表格边框颜色    bordercolor  例如: bordercolor="red" 设置边框颜色为红色，默认边框颜色是黑色！！！

table标签默认不会直接显示出表格的边框，可以通过table标签的border属性来添加边框，并赋值边框的宽度！

-->
<table border="1px"  cellspacing="5px" cellpadding="5px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

<hr/>

<table border="1px" style="text-align: center">
    <tr>
<!--td标签（列标签）的colspan属性表示: 跨列  ， 后面是值代表跨几列！-->
<!--注意点: 在进行跨列后，行内内容不会自动居中，可以通过style属性来设置居中，style="text-align: center" -->
        <td colspan="4" >1-1</td>
        <!--<td>1-2</td>
         <td>1-3</td>
         <td>1-4</td>-->
    </tr>
    <tr>
<!--td标签（列标签）rowspan属性表示: 跨行  ， 后面是值代表跨几行！-->
<!--注意点: 不管是跨行还是跨列都要注意是否会将后序的单元格挤出去！从而不美观，故要对多余出来的单元格进行删除！！-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
<!--<td>3-4</td>-->
    </tr>
</table>

<hr/>
<!--style="border-collapse: collapse"可以实现表格的边框合并！！！-->
<!--只需要给table添加bordercolor属性就可以给表格设置边框颜色了。-->
<table border="1px"  bordercolor="red" style="text-align: center;border-collapse: collapse" cellpadding="5px"  >
    <tr>
        <td colspan="3" style="color: brown"><b>学生成绩</b></td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">夏黄杰</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

媒体元素

视频和音频

视频元素 —— video
音频元素 —— audio
loop 循环播放
controls: 控制条一般都需要设置！不然无法点击播放除非设置了自动播放，但也少了调节音频，控制暂停与播放已经是否全屏、下载等等控制条所具备的功能！！！
autoplay: 自动播放
- 注意点：在给audio标签和video标签添加上autoplay属性后，如果还是没有实现自动播放时，请去检查一下其浏览器是否支持自动播放，如果不支持请设置添加好URL从而实现该站点被浏览器允许媒体自动播放！！！
style=“display: none;” —— 隐藏控制条，例如在使用音频标签时，想让其作为背景音乐需要隐藏播放控制条时，可以通过去掉controls属性并添加style来实现！！！

举Microsoft Edge 浏览器为例，解决浏览器没有实现autoplay属性自动播放功能！如图，在站点权限中添加了我们自己HTML所使用的URL后，该浏览器便运行我们的代码效果图在该站点中实现自动播放！：

在这里插入图片描述

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--
音频和视频:
src(必填项，建议使用相对地址！): 资源路径
controls: 控制条  一般都需要设置，不然无法点击播放除非设置了自动播放，但也少了调节音频，控制暂停与播放已经是否全屏、下载等等控制条所具备的功能！！！
autoplay: 自动播放  注意点: 在给audio标签和video标签添加上autoplay属性后，
如果还是没有实现自动播放时，请去观察一下其浏览器是否支持自动播放，如果不支持请设置添加好URL从而实现该站点允许媒体自动播放！！！
loop 循环播放
style="display: none;"  隐藏控制条，例如在使用音频标签时，想让其作为背景音乐需要隐藏播放控制条时，可以通过去掉controls属性添加style来实现！！！
-->
<video src="../resources/video/海贼王.mp4"  width="500px" height="500px" controls autoplay></video>
<audio src="../resources/audio/清空.mp3"  style="display: none;" autoplay loop></audio>
</body>
</html>

页面结构分析（重点掌握）

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容（例如导航栏）

iframe 内联框架

对于iframe内联框架的使用要谨慎，虽然优点很多但缺点也比较明显。仍然要着重掌握并了解，因为iframe的强大功能的无可争议的，当前也不凡公司使用！！！

<iframe src="path" name="mainFrame"></iframe>

其中src表示的是引用页面地址
name表示的是框架标识名，自定义！

iframe是一个内联框架，可以在当前HTML页面中嵌入另一个文档，一般情况下使用iframe直接在页面嵌套iframe标签再指定src就可以了！

iframe标签规定一个内联框架，一个内联框架被用来在当前HTML文档中嵌入另一个文档！！！

所有的主流浏览器都支持标签。你可以把提示的文字放到和里面，这样不支持的浏览器就会出现提示的文字！！！

iframe的常用属性:

name：规定的名称
width：规定的宽度
height：规定的高度
src：规定在中显示的文档的URL
frameborder：规定是否显示周围的边框。（0为无边框，1为有边框）
align：规定如何根据周围的元素来对齐,既改动的是框架的位置！。（left、 right、top、middle、bottom）
scrolling：规定是否在中显示滚动条。（yes、no、auto）—— 一般都显示出来，不然只会显示你设置的内联框架大小一样的内容，从而影响浏览！！！

iframe的优缺点：

优点
- (最显著的作用：)重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少数据的传输，减少网页的加载时间）
- 技术简单，使用方便，主要应用于不需要搜索引擎来搜索的页面
- 方便开发，减少代码的重复率（比如页面的header，footer）
缺点
- 会产生很多的页面，不易于管理
- 不易打印
- 多框架的页面会增加服务器的http请求
这里尤其注意：name 和 target属性经常用到，两个属性需结合使用，name是当前iframe内联框架定义的名称，a标签中的target 属性指定将要显示的内容到什么位置，可以选择iframe标签中的name属性的值！！！。

具体看案例代码—— eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe 内联框架</title>
</head>
<body>
<!--iframe标签的属性:
- name： 规定<iframe>的名称
- width： 规定<iframe>的宽度
- height：规定<iframe>的高度
- src：规定在<iframe>中显示的文档的URL
- frameborder：规定是否显示<iframe>周围的边框。（0为无边框，1为有边框）
- align：规定如何根据周围的元素来对齐,既改动的是框架的位置！<iframe>。（left、 right、top、middle、bottom）
- scrolling：规定是否在<iframe>中显示滚动条。（yes、no、auto）—— 一般都显示出来，不然只会显示你设置的内联框架大小一样的内容，从而影响浏览！！！

iframe标签最显著和实用的作用是:
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少数据的传输，减少网页的加载时间）!!!
-->
<iframe src="https://www.bilibili.com" name="hello" frameborder="0" width="1520px" height="800px" scrolling="yes" align="top"><p>iframe标签</p></iframe>
<br/>
<a href="https://www.csdn.net" target="hello">点击跳转</a>
<!--这里将iframe标签中的name属性与a标签中的target属性想结合使用，
name 表示 iframe内联框架名称
target 表示将要跳转出来的内容显示到什么位置。 这里选择hello既表示点击跳转到CSDN的界面内容在iframe内联框架中显示！
这样一来，点击跳转后重载页面就不会重载整个页面，只需要重载内联框架中的内容。（减少数据的传输，减少网页的加载时间）！！！
-->
<hr/>
<p>iframe 的优缺点 </p>

    <p>优点:</p>

    <p>重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少数据的传输，减少网页的加载时间）</p>

    <p>技术简单，使用方便，主要应用于不需要搜索引擎来搜索的页面</p>

    <p>方便开发，减少代码的重复率（比如页面的header，footer）</p>

    <p>缺点:</p>

    <p>会产生很多的页面，不易于管理</p>

    <p>不易打印</p>

    <p>多框架的页面会增加服务气得http请求</p>

    <p>这里尤其注意：name 和 target属性经常用到，两个属性需结合使用，name是当前位置的名称，target 指定将要显示的内容到什么位置。</p>
</body>
</html>

在这里插入图片描述

点击跳转后，只是重载了该页面中上面定义的iframe内联框架页跳转到CSDN，而非重载整个页面！！！

在这里插入图片描述

初识表单post和get提交

<form method="post" action="Success.html"></form>

在HTML中的表单标签为form，其中必填的俩个属性为methoc和action

method：规定如何发送表单数据 —— 常用值为: get / post
- get方式: 用户可以在url中看到用户提交的信息所以不安全而且不能传输大文件，但该提交方式高效！
- post方式: 比较安全，在url看不到用户提交的信息，并且可以传输大文件！
action：表单提交的位置，可以是网站，也可以是一个请求处理地址！
- 如果是网站的话，对应的提交方式method要改成get才行！
  因为post提交方式会将数据提交到网站对应的数据库中，简单而言就是会改变其网站的数据，这是不被网站允许的，会报错！！！

其中在form标签中常用的input标签:

标签规定了用户可以在其中输入数据的输入字段。
元素在元素中使用，用来声明允许用户输入数据的 input 控件。
输入字段可通过多种方式改变，取决于 type 属性。
- 例如：
- text —— 表示文本框
- password —— 表示密码框，输入内容不会直接显示
- submit —— 提交按钮
- reset —— 重置按钮

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<!--
表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址！如果是网站的话，对应的提交方式method要改成get才行！
因为post提交方式会将数据提交到网站对应的数据库中，简单而言就是会改变其网站的数据，这是不被网站允许的，会报错！！！
method: post,get 提交方式
     get方式: 用户可以在url中看到用户提交的信息所以不安全而且不能传输大文件，但该提交方式高效！
     post方式: 比较安全，在url看不到用户提交的信息，并且可以传输大文件！
input标签用于搜集用户信息
<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
例如:
text  ——  表示文本框
password  —— 表示密码框，输入内容不会直接显示
submit  —— 提交按钮
reset  —— 重置按钮
-->
<body>
<form action="https://www.bilibili.com" method="get">
    <p>名字: <input type="text" name="username"></p>
    <p>密码: <input type="password" name="pwd"> </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>

</form>
</body>
</html>

在这里插入图片描述

post提交方式下查看密码

如果想在提交方式method为post的情况下查看密码框的内容，可以通过以下操作：

首先在输入好数据后，在提交前鼠标右键选择检查，并选择到网络既得下图结果：

在这里插入图片描述

点击提交后，可以看到图中多了一个请求，虽然我这是报错的因为我的提交方式是post不被B站允许！

在这里插入图片描述

接着点击该请求，并选择到Payload即可查看到用户输入的数据！！！

在这里插入图片描述

同时，也可以选择标头选项来查看其他相关的信息！！！

在这里插入图片描述

文本框和单选框

表单元素格式：

在这里插入图片描述

如果要提交表单的话，name属性是必填项！！！在表单提交时会附带name属性，之后JAVA程序读取时就是根据name属性来读取数据！！！
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据.只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的，没有 name 属性就无法得到表单元素提交给服务端的值
至于size属性一般不会在HTML中来用，因为在CSS中会重点来设置宽度、高度等属性！！！

文本框标签：

文本输入框: input type=“text”
value=“杰哥” 设置文本输入框的默认初始值
maxlength=“8” 设置文本框可输入的最大字符数
size=“30” 设置文本框的长度 ———— 该属性一般不怎么用，因为CSS里会具体来设置！！！
placeholder=“请输入姓名” 设置提示信息，在文本框中以浅灰色的样式显示，但如果设置了value默认初始值则该提示信息不会显示！！！注意点: 该属性适用于多行文本框和 type 属性值为 text, password, search, tel, url 或者 email 等的表单元素。

单选框标签：

单选框按钮：input type=“radio”
value: type为checkbox或者radio时，此时value属性的值表示的是提交给服务器的值！！！
在单选框中想要设置哪个选项为默认值，既添加上checked属性即可！！！
name: 表示表单元素的名称.
这里特别注意一下的是:
当type为radio时，需要给所有的单选框设置name属性并且要设置相同的一个值，从而意思就是它们是同一个组的，既不能被同时选中。这样才能正确的表现为单选框！！！

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
<!--
在HTML中获取表单的数据有以下俩种方式:
1.在表单的input标签中指定id属性值，在script脚本中可以通过 “表格的名称.id名称.value”来访问表单中的值，
例如：register_form.username.value
2.因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
例如该代码可以获得form中第一个name为“username”的元素:： var name = document.getElementsByName("username")[0].value;
-->
    <script type="text/javascript">
        function check() {
            var name = document.getElementsByName("username")[0].value;
            // 因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），
            // 所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
            //如下可以获得form中第一个name为“username”的元素!
            if(document.getElementsByName("username")[0].value=="夏黄杰"){
                alert("老铁，你又来了！");
             return;
            }else {
               alert(name+"欢迎登入！");
            }
        }
    </script>
</head>
<!--
表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址！如果是网站的话，对应的提交方式method要改成get才行！
因为post提交方式会将数据提交到网站对应的数据库中，简单而言就是会改变其网站的数据，这是不被网站允许的，会报错！！！
method: post,get 提交方式
     get方式: 用户可以在url中看到用户提交的信息所以不安全而且不能传输大文件，但该提交方式高效！
     post方式: 比较安全，在url看不到用户提交的信息，并且可以传输大文件！
input标签用于搜集用户信息
<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
例如:
text  ——  表示文本框
password  —— 表示密码框，输入内容不会直接显示
submit  —— 提交按钮
reset  —— 重置按钮
-->
<body>
<!--
文本输入框: input type="text"
value="杰哥"  设置文本输入框的默认初始值
maxlength="8"  设置文本框可输入的最大字符数
size="30"  设置文本框的长度  ———— 该属性一般不怎么用，因为CSS里会具体来设置！！！
placeholder="请输入姓名" 设置提示信息，在文本框中以浅灰色的样式显示，但如果设置了value默认初始值则该提示信息不会显示！！！
注意点: 该属性适用于 多行文本框和 type 属性值为 text, password, search, tel, url 或者 email 等的 <input>表单元素。
-->
<form  name="login" action="Success.html" method="get">
    <p>姓名: <input type="text" name="username"  maxlength="8" placeholder="请输入姓名"></p>
<!--密码框:   input type="password"  -->
    <p>密码: <input type="password" name="pwd" placeholder="请输入密码"> </p>
<!--
单选框标签: input type="radio"
value: type为checkbox或者radio时，此时value属性的值表示的是提交给服务器的值！！！
name: 表示表单元素的名称.
这里特别注意一下的是:
当type为radio时，需要给所有的单选框设置name属性并且要设置相同的一个值，从而意思就是它们是同一个组的，既不能被同时选中。这样才能正确的表现为单选框！！！
-->
    <p>性别:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>
        <input type="submit" value="提交" onclick=check()>
        <input type="reset" value="重置">
    </p>

</form>
</body>
</html>

在这里插入图片描述

input标签的value属性详解(重点掌握)

在讲述input标签的value属性前，我们先了解一下input标签的name属性：

name 属性规定 input 元素的名称
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的，没有 name 属性就无法得到表单元素提交给服务端的值

接下来，我们来仔细了解一下input标签的value属性：

input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的
当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本
当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是**输入框中显示的初始值，此初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值**）
当 type 的取值为** checkbox、radio** 中的其中一个时，此时 value 属性的值表示的是**提交给服务器的值**
当 type 的取值为** image** 时，点击它提交表单后，会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器
type=“checkbox” 时，其 value 属性的值表示在复选框呈勾选状态时提交给服务器的数据值，默认为 on
type=“image” 定义图像形式的提交按钮，此时必须把 src 属性和 alt 属性与 ** 结合使用（alt 属性表示图片未正常显示时，用于替换图片的提示；如果不写这个属性，当图片未正常显示时，会默认显示提交**这两个字）

特别的注意点：

checkbox 型的 input 标签的不足之处在于：提交表单时，只有处于勾选状态的复选框的数据值才会发送给服务器。也就是说，如果没有任何一个复选框被选中，那么服务器就不会收到与其相关的数据项
当设置 input 标签的 type 属性值为checkbox 或者 radio 时，必须同时设置 input 标签的 value 属性
当 type=“file” 时，不能使用 value 属性

按钮和多选框

在HTML中普通按钮标签创建为:

 <input type="button" name="btn" value="发送信息">

要想实现该按钮的效果，需要在后面的js中去实现，这里不多加说明！

在HTML中多选框标签创建为:

 <input type="checkbox" value="sleep" name="hobby">睡觉
 <input type="checkbox" value="code" name="hobby">编程
 <input type="checkbox" value="chat" name="hobby">聊天
 <input type="checkbox" value="game" name="hobby">游戏

在type取值为checkbox属性时，此时的value属性的值表示的是提交给服务器的值！！！ —————— 所以在定义value属性值时最好见名知意！！！
多选框与单选框一样，当你想设置哪个选项为默认值时，便在哪个选项中添加上checked属性即可！！！
对于多选框按钮的name属性没有强制性的要求要一致，但为了简便后面的数据处理。建议与单选框radio一样设置相同的name属性！！！

除了普通按钮之外，在HTML中type还可以定义为image，既创建图像按钮！！！

<input type="image" src="../resources/images/top.png" height="100px" width="100px">

input type=“image” 图像按钮，点击它提交表单后，会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器

列表框、文本域、文件域

在HTML中的列表框标签创建为:

<select name="select1" >
    <option value="china">中国</option>
    <option value="US">美国</option>
    <option value="JaPan">日本</option>
    <option value="Kr" selected>韩国</option>
</select>

列表框的创建不使用input标签而是select标签
name属性是为了设置或获取对象的名称，简单说就是列表的名称！
id属性是为了获取标识对象的字符串

在HTML中的文本域标签创建为:

<textarea name="textarea" id="" cols="30" rows="10" placeholder="输入内容:"></textarea>

其中的placeholder属性在文本框章节有提及过，既以浅灰色提示语的形式显示出来！
文本域简单来说就是文本框的升级版，实现了多行多列的输入框！并且在网页中可以拖动右下角来改变形状大小！！！
cols属性表示列
rows属性表示行

在HTML中的文件域标签创建为（这里提及的比较浅只是提一下！）:

<input type="file" name="files">

既较常见的上传文件标签，但要真正地实现上传需要对上传按钮提供方法等等！！！
简单效果图如下:

在这里插入图片描述

搜索框滑块和简单验证

上面的一些标签都没有强制性的验证消息功能，所以全由此类的标签建立的表单就算用户什么都不填依旧可以提交！！！

接下来我们学习一些带功能、带验证信息的标签：

邮件验证：
```
<input type="email" name="email">
```
<email并不是一个强制请求，所以name属性可以取其他名字！！！>
URL验证:
```
<input type="url" name="url">
```
URL跟email同理，其name属性可以任意取值！！！
数字验证:
```
<input type="number" name="num" max="100" min="0" step="1">
```
<与上同理，该数字验证标签的name属性可以任意取值，max与min可以设置数字输入的最大值与最小值，step则是设置步长既控制通过点击上下按钮来进行增加或删减的数字间隙！！！>
滑块:
```
 <input type="range" name="voice" min="0" max="100" step="5">
```
<滑块的实现既input标签中type=range，其常用于音量滑块等实现，name属性可以任意取值，max与min设置滑块的最大值与最小值，step设置步长，它与数字验证有些不同，它没有上下按钮显示此时的步长用于控制的是用户通过键盘来移动滑块的单次滑块间隙！！！>
搜索框:
```
 <input type="search" name="search">
```
<搜索框与普通的文本框表面看起来没有什么不同，唯一不同的就是在搜索框里输入内容后，在搜索框内部最右侧会有一个叉号❌可以用来一键删除搜索框内的内容！！！>

eg: 效果图

在这里插入图片描述

表单的应用(重点掌握)

这里例举一些表单的简单应用：

隐藏域
- 要想将某些表单元素隐藏起来，不让用户看到，只需要在input标签里加上hidden属性即可！但要注意，这里只是将其隐藏起来，该表单元素本身还是存在的！！！eg：当你想将某一表单数据始终默认为某一个值时，不仅仅只有使其只读还可以通过先设置一个默认值再将其隐藏起来从而实现效果！！！
- ```
密码: <input type="password" name="pwd" value="123456" hidden >
```
只读
- 要想让某些表单元素变为只读，不让用户更改，只需要在input标签里加上readonly属性便可！
- ```
姓名: <input type="text" name="username"  maxlength="8"  value="夏黄杰" readonly>
```

禁用

要想让某些表单元素变为禁用，不让用户选择时，只需要在input标签里加上disabled属性即可！

 <input type="radio" value="boy" name="sex" checked disabled>男
 <!--该案例中的checked属性是将该按钮设置为默认选项-->

增强鼠标可用性（实用性很强）
- 在html中，标签通常和标签一起使用，标签为input元素定义标注（标记）。标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。其中label标签的for属性要与对应跳转的表单元素id属性值相等才能实现点击文本也能跳转！！!
- ```
 <label for="search">搜索（可直接点击）</label>
 <input type="search" id="search">
```

表单初级验证（重点验证）

表单初级验证的常用方法：

placeholder 提示信息

姓名: <input type="text" name="username"  maxlength="8" placeholder="请输入姓名"  >
<!--placeholder属性常用于某些输入框的控件中，属性值内容以提示信息的状态显示，从而提示用户输入！！！-->

required 非空判断

姓名: <input type="text" name="username"  maxlength="8" placeholder="请输入姓名" required >
<!--required属性的作用是非空判断，既添加了该属性的控件不允许为空！！！-->

pattern 正则表达式验证

<p>自定义邮箱:
        <input type="text" name="diyemail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
<!-- pattern属性后面接着的是 正则表达式  通过正则表达式来判断输入框中的内容是否符合标准 ，在实际开发中经常被用到！！！经常需要用到的正则表达式可以在网上查询！-->