JavaWeb：（学习笔记）三、HTML
第三章—HTML
一、HTML概述
1、说明
HTML ( HyperText Markup Language ) ：超文本标记语言
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言：由标签构成的语言
2、W3C标准
W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：
结构：对应的是 HTML 语言，定义页面的整体结构
表现：对应的是 CSS 语言，用来美化页面
行为：对应的是 JavaScript 语言，使网页动起来
3、HTMl语法特点
①HTML 文件以.htm或.html为扩展名
②HTML 标签不区分大小写
③HTML 标签属性值 单双引皆可
④HTML 语法松散
⑤HTML 标签定义内容，属性定义样式
注意：在HTML代码里书写的代码，其中文本之间无论书写多少个 “空格”，都以一个计算，回车换行也表示一个空格。
二、HTML标签
1、结构标签
1）标签
| 标签 | 描述 |
|---|---|
| <HTML> | 定义HTML文档 |
| <head> | 定义关于文档的信息 |
| <title> | 定义文档的标题 |
| <body> | 定义文档的主体 |
2）结构
<!-- 结构 -->
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
<!-- 举例 -->
<html>
<head>
<title>Hello World</title>
</head>
<body>
第一个HTML网页程序
</body>
</html>
3）说明：
①html 标签是根标签， 包含 head 标签和 body 标签两个子标签
②head 标签的 title 子标签是用来定义页面标题名称，定义的内容会展示在浏览器的标题位置
③body 标签的内容会被展示在内容区中
2、基础标签
| 标签 | 描述 |
|---|---|
| <!-- --> | 注释 |
| <h1> - <h6> | 定义标题，h1为一级标题 |
| <font> | 定义文本的字体、尺寸、颜色 |
| <b> | 粗体 |
| <i> | 斜体 |
| <u> | 下划线 |
| <center> | 居中 |
| <p> | 段落 |
| <br> | 换行 |
| <hr> | 水平线 |
1）注释、文本的字体、尺寸、颜色演示
<!-- 这是一段注释 -->
<!--
可以这样多行注释
-->
<h1>标题 h1</h1>
<h2>标题 h2</h2>
<h3>标题 h3</h3>
<h4>标题 h4</h4>
<h5>标题 h5</h5>
<h6>标题 h6</h6>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Kt1Ivsw-1645014833884)(G:\CSDN\JavaWeb\JavaWeb_3_HTML与CSS\1644812405411.png)]
2）换行、文本格式演示
演示文本：
在HTML代码里书写的代码，其中文本之间无论书写多少个 “空格”，都以一个计算，回车换行也表示一个空格。
段落1
段落2
<br>演示文本：
<br>在HTML代码里书写的代码，其中文本之间无论书写多少个 “空格”，都以一个计算，回车换行也表示一个空格。
<br>段落1
<br>段落2
<!-- 生成一个水平线 -->
<hr>
<!-- HTML不建议设置格式，网页格式设置在CSS中 -->
<font face="楷体" size="5" color=red"> 这是一段演示文本</font>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4tyr4ww5-1645014833885)(G:\CSDN\JavaWeb\JavaWeb_3_HTML与CSS\1644812422201.png)]
3）段落、文本格式显示
<p>
第一个演示段落
</p>
<!-- 网页中生成的段落与段落之间会有较大的空隙 -->
<p>
第二个演示段落
</p>
<b>加粗演示文字</b> <br>
<i>斜体演示文字</i> <br>
<u>下划线演示文字</u> <br>
<center>居中演示文字</center>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5xVRTk2o-1645014833886)(G:\CSDN\JavaWeb\JavaWeb_3_HTML与CSS\1644812437926.png)]
3、转义字符
| HTML代码 | 显示结果 | 描述 |
|---|---|---|
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 显示其他字符 |
| " | " | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | 不断行空白（空格） |
4、媒体标签
| 标签 | 描述 |
|---|---|
| <img> | 图片 |
| <audio> | 音频 |
| <video> | 视频 |
1）img：定义图片
src：规定显示图像的 URL（统一资源定位符）
height：定义图像的高度
width：定义图像的宽度
<img src="../img/hao123.png" width="100" height="100">
2）audio：定义音频。支持的音频格式：MP3、WAV、OGG
src：规定音频的 URL
controls：显示播放控件
3）video：定义视频。支持的音频格式：MP4, WebM、OGG
src：规定视频的 URL
controls：显示播放控件
4）尺寸单位
height属性和width属性有两种设置方式
①像素：单位是px
②百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）
5、超链接标签
| 标签 | 描述 |
|---|---|
| <a> | 超链接，链接到另一个资源 |
1）标签属性
①href：指定访问资源的URL
②target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开
2）演示
<!-- 在当前窗口打开 -->
<a href="http://www.baidu.com">这是一个超链接：百度</a>
<br/>
<!-- 在新的窗口打开 -->
<a href="http://www.baidu.com" target="_blank">这是一个超链接：百度</a>
3）超链接制作锚点
①说明：在当前网页内，通过点击某一标签，快速定位到当前网页的相应位置。
②实现
步骤一：把内容放在超链接标签内
步骤二：为内容的超链接标签添加 name 属性及其值
步骤三：使对应的锚点超链接的地址为 #name 值
③演示
<a href="#p1">超链接1</a>
<a href="#p2">超链接2</a>
<a href="#p3">超链接3</a>
<a href="#p4">超链接4</a>
<a href="#p5">超链接5</a>
<h3 ><a name="p1">超链接1的内容</a></h3>
<img src="../img/nike/1.png">
<h3><a name="p2">超链接2的内容</a></h3>
<img src="../img/nike/2.png">
<h3><a name="p3">超链接3的内容</a></h3>
<img src="../img/nike/3.png">
<h3><a name="p4">超链接4的内容</a></h3>
<img src="../img/nike/4.png">
<h3><a name="p5">超链接5的内容</a></h3>
<img src="../img/nike/5.png">
6、列表标签
| 标签 | 说明 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
1）有序列表
页面效果中是有标号对每一项进行标记的。
有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）
<!-- 有序列表 -->
<ol type="A">
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
<li>列表内容4</li>
<li>列表内容5</li>
</ol>
<ol type="1">
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
<li>列表内容4</li>
<li>列表内容5</li>
</ol>
2）无序列表
页面效果中没有标号对每一项进行标记，而是使用 · 进行标记。
无序列表中的 type 属性用来指定标记的形状
<!-- 无序列表 -->
<ul>
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
<li>列表内容4</li>
<li>列表内容5</li>
</ul>
7、表格标签
| 标签 | 说明 |
|---|---|
| <table> | 表格 |
| <tr> | 行 |
| <td> | 单元格 |
| <th> | 表头单元格 |
1）属性
①border：规定表格边框的宽度
②background属性：背景图片
③bgcolor属性：背景颜色
④Width、height属性：表格大小（默认按照表格内容填充大小）
⑤align：定义表格行的内容对齐方式
⑥rowspan:规定单元格可横跨的行数
⑦colspan:规定单元格可横跨的列数
⑧cellpadding：填充,内边距，内容到边框的距离
⑨cellspacing：间距，外边距，单元格与单元格的距离
2）举例
<table border="1" cellpadding="10" cellspacing="10">
<!-- 第一行 -->
<tr>
<!-- 五列 -->
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>计算机</th>
</tr>
<tr>
<th>甲</th>
<th>66</th>
<th>77</th>
<th>88</th>
<th>99</th>
</tr>
<tr>
<th>乙</th>
<th>100</th>
<th>98</th>
<th>100</th>
<th>99</th>
</tr>
</table>
3）快捷语句
例：定义四行五列单元格
1.table>tr*4>td*5
2.按下 Tab 键
4）合并单元格
说明：自定义表格样式，如下，合并第一列的3、4、5、6行单元格等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCBbTK6W-1645014833887)(C:\Users\32157\AppData\Roaming\Typora\typora-user-images\1644756286359.png)]
举例：
<!-- 初始单元格 -->
<table border="1" width="500" height="200" >
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr align="center">
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr align="center">
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr align="center">
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>
<!--
合并后的单元格
合并2,3单元格
合并10,15,20单元格
-->
<table border="1" width="500" height="200" >
<tr align="center">
<td>1</td>
<!--
合并行方向两个单元格
用一个表示两个单元格的位置
所以要删除对应数量的水平的多余单元格
-->
<td colspan="2">2</td>
<!-- 删除多余的行单元格<td>3</td> -->
<td>4</td>
<td>5</td>
</tr>
<tr align="center">
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<!--
合并列方向的单元格
用一个表示三个单元格的位置
所以要删除对应数量的垂直的多余单元格
-->
<td rowspan="3">10</td>
</tr>
<tr align="center">
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<!-- 删除多余的列单元格<td>15</td> -->
</tr>
<tr align="center">
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<!-- 删除多余的列单元格<td>20</td> -->
</tr>
</table>
8、表单标签
表单：网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器.
| 标签 | 描述 |
|---|---|
| <form> | 表单 |
| <input> | 表单项，type属性控制输入形式 |
| <label> | 为表单项定义标注 |
| <select> | 下拉表单 |
| <option> | 下拉表单的列表项 |
| <textarea> | 文本域 |
| 属性 | 说明 |
|---|---|
| action | 提交的服务器地址 |
| method | 请求提交数据的方式 |
| type | 输入框的类型 |
| name | 向服务器端提交数据的键 |
| value | 向服务器端提交数据的值 |
| placeholder | 提示信息 |
| readonly | 只读，不能输入数据，但还可以向服务器提交数据 |
| disabled | 用，禁用后，不会再向服务器提交数据 |
| check | 默认选中 |
| cols | 行字符宽度 |
| rows | 列最大数 |
1）form
form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。如下图就是不同的表单项标签展示出来的效果。
<form action="" method="get">
<!-- ... -->
</form>
2）单行文本输入框 text
<form action="" method="get">
账号<input type="text" />
账号<input type="text" name="account" value="" placeholder="请输入内容" readonly="readonly" />
账号<input type="text" name="account" value="" placeholder="请输入内容" disabled="disabled"/>
</form>
3）密码输入框 password
<form action="" method="get">
密码<input type="password" placeholder="请输入密码" />
</form>
4）文件选择框 file
<form action="" method="get">
照片<input type="file" />
</form>
5）单选框 radio
必须设置 name 属性相同，以实现互斥效果，选择性组件需要设置默认的 value 属性
<form action="" method="get">
性别<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</form>
6）多选框 / 复选框 checkbox
必须设置 name 属性相同，表示这些内容在同一复选框内
<form action="" method="get">
爱好<input type="checkbox" name="hobby" value="运动"/>运动
<input type="checkbox" name="hobby" value="学习"/>学习
<input type="checkbox" name="hobby" value="吃饭"/>吃饭
<input type="checkbox" name="hobby" value="娱乐"/>娱乐
<input type="checkbox" name="hobby" value="闲鱼"/>闲鱼
</form>
7）下拉框 select、option
<form action="" method="get">
城市<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</form>
8）多行文本输入框 textarea
<form action="" method="get">
备注<textarea cols="50" rows="5"></textarea>
</form>
9）按钮
①提交按钮 submit
②重置按钮 reset
③普通按钮 button
<form action="" method="get">
<!-- 提交按钮，触发表单的提交功能 -->
<input type="submit" value="登录" />
<br />
<!-- 重置按钮，重置表单的内容，恢复到默认形态 -->
<input type="reset" value="重置" />
<br />
<!-- 普通按钮，没有功能，触发事件，通过事件调用js函数 -->
<input type="button" value="按钮" />
</form>
9、布局标签
1）块级标签、行级标签、行级块标签
①块级标签：无论内容多少 都会独自占据一行的。
例如：<p>、<h1>、<ul>、<ol>、<hr/>等。
可以设置宽和高
默认的宽和父级标签一致
默认的高由内容决定
主要用来布局网页
②行级标签：只占自身大小的标签，不会占一行。
例如：<font>、<b>、<i>、<a>等。
不能设置宽高，即使设置了也是无效的
③行级块标签：可以设置大小，不占一行
例如：<input/> 、<img>等
2）注意
一般情况下，使用块级标签包含行级标签，不使用行级标签包含块标签。
3）div 与 span
| 标签 | 描述 |
|---|---|
| <div> | 是块级标签，可以放置任何标签。 没有任何附加功能（没有默认样式），给了什么属性就能变成什么样。 div主要的作用是被用来布局网页。 |
| <span> | 是行级标签 ， span 没有任何附加功能（没有默认样式），给了什么属性就能变成什么样。 span标签被用来选中文档中的文字。 |
三、补充知识
1、Display
1）说明
通过display样式可以修改标签的类型。
2）部分常用属性如下
| 属性 | 说明 |
|---|---|
| block | 设置标签为块标签 |
| inline | 设置标签为行级标签 |
| inline-block | 设置标签为行级块标签 |
| none | 隐藏标签（标签将在页面中完全消失）：不显示，也不占空间 |
3）举例
<h1 style="display: inline;">块级标签变行级标签</h1>
<hr />
<a href="" style="display: block;">行级标签变块级标签</a>
<hr />
前边
<h1 style="display: none;">隐藏标签</h1>
后边
2、内联框架
1）说明：内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面
<!--
<iframe src=#(URL) name=#(框架名称) width=#(宽度) height=#(高度) frameborder=#(边框宽度)> ... </iframe>
-->
<iframe src=# name=# width=# height=# frameborder=#> ... </iframe>
2）举例：在窗口嵌入超链接，指定页面地址
①Demo1
<iframe name="workframe" src="Demo2.html" width="500" height="400" frameborder="1">
</iframe>
<a href="http://www.baidu.com" target="_self">在当前窗口打开</a>
<a href="http://www.baidu.com" target="_blank">在新窗口打开</a>
<a href="http://www.qq.com" target="workframe">在内联窗口打开</a>
②Demo2
<a href="http://www.baidu.com" target="_parent">在父级窗口打开</a>
<a href="http://www.baidu.com" target="_self">在当前窗口打开</a>
<iframe src="Demo3.html">
</iframe>
③Demo3
<a href="http://www.baidu.com" target="_top">在顶级窗口打开</a>
4263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
