JavaWeb HTML

陈弋辛

已于 2022-07-17 21:11:10 修改

阅读量1.4k

点赞数

分类专栏： Java # JavaWeb 文章标签： javascript java html

于 2022-07-17 20:48:48 首次发布

本文链接：https://blog.csdn.net/weixin_65637841/article/details/125831154

版权

Java 同时被 2 个专栏收录

68 篇文章 2 订阅

订阅专栏

JavaWeb

20 篇文章 2 订阅

订阅专栏

1、网页的组成部分

页面由三部分内容组成！分别是内容（结构）、表现、行为。

内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用

html 技术来展示。

表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用

CSS 技术实现.

行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。

2、HTML 简介

Hyper Text Markup Language （超文本标记语言）简写：HTML

HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画

面如何安排，图片如何显示等）

3、创建 HTML 文件。

1、创建一个 web 工程（静态的 web 工程）

2、在工程下创建 html 页面

注：Java 文件是需要先编译，再由 java 虚拟机跑起来。但 HTML 文件它不需要编译，直接由浏览器进行解析执行。

4、HTML 文件的书写规范

<html>      表示整个html页面的开始
<meta charset="字符集">  表示网页中显示的字符集
<head>      头信息
    <title>标题</title> 标题
</head>
<body>      body是页面的主体内容
    页面主体内容
</body>

</html> 表示整个页面结束

<!DOCTYPE html> <!--约束，声明-->
<html lang="zh_CN"><!-- html标签表示html的开始，lang="zh_CN"表示中文"en表示英文"-->
<!--html标签中一般分为两个部分，分别是：head和body-->
<head> <!-- 表示头信息，一般包含title标签,css标签,js标签 -->
    <meta charset="UTF-8"> <!-- 表示当前页面是用UTF-8字符集 -->
    <title>HELLO</title> <!-- 表示标题 -->
</head>
<body> <!-- body标签是整个html页面的主体内容 -->
    hello
</body>
</html> <!-- /html标签表示html的结束 -->

5、HTML 标签介绍

1.标签的格式

<标签名>封装的数据</标签名>

<标签名> 称之为开始标签 </标签名>称之为结束标签

2.标签名大小写不敏感。

3.注释标签 

4.标签拥有自己的属性。

① 基本属性：bgcolor = ”red" 可以修改简单的演示效果

②事件属性：onclick = "alert('你好！');" 可以直接设置事件响应或的代码

5.标签又分为单标签与双标签。

① 单标签格式： <标签名 />，
        单标签：开始标签和结束标签是同一个，斜杠放在单词后面
        如：<br />：换行     <hr /> 水平线
②双标签格式： <标签名> ...封装的数据... </标签名>

6. 标签的语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0-标签的语法</title>
</head>
<body>
    <!-- ①标签不能交叉嵌套-->
    正确：<div><span>hello</span></div>
    <!--错误：<div><span>hello</div></span>-->
    <hr />

    <!-- ②标签必须正确关闭 -->
    <!-- 有内容的标签（双标签）-->
    正确：<div>hello</div>
    <!--错误：<div>hello-->
    <hr />

    <!--没有内容的标签（单标签）-->
    正确：<br />
    <!--错误: <br>-->
    <hr />

    <!-- ③属性必须要有值，属性值必须加引号 -->
    正确：<font color="blue">hello</font>
    <!--错误：<font color=blue>hello</font>-->
    <!--错误：<font color>hello</font>-->
    <hr />
<!---->
    <!-- ④注释不能嵌套 -->
    正确：<!-- 注释内容 -->
    错误：<!-- <!-- 这是错误的html注释--> -->

</body>
</html>

7.常用标签

7.1 font标签

HTML <font> 标签

定义和用法

<font> 可规定文本的字体、字体尺寸、字体颜色。

提示和注释：

注释：请使用样式（代替 <font>）来定义文本的字体、字体颜色、字体尺寸。

可选的属性

属性值描述 DTD
color
rgb(x,x,x)
#xxxxxx
colorname
定义font元素中文本的颜色。 TF
face 字体名称列表定义font元素中文本的字体。 TF
size 从1到7的数字
如果已经定义了basefont，您可以规定从-6到6之间的数字。

定义font元素中的文本尺寸。
TF

属性	值	描述	DTD
color	rgb(x,x,x) #xxxxxx colorname	定义font元素中文本的颜色。	TF
face	字体名称列表	定义font元素中文本的字体。	TF
size	从1到7的数字	如果已经定义了basefont，您可以规定从-6到6之间的数字。定义font元素中的文本尺寸。	TF

需求 ：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-font标签</title>
</head>
<body>
    <!--需求 ：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。

        font标签是字体标签，它可以用来修改文本的字体，颜色，大小（尺寸）
            color属性修改颜色
            face属性修改字体
            size属性修改文本大小
    -->
    <font color="red" face="宋体">我是字体标签</font>
</body>
</html>

7.2 特殊字符标签

HTML 字符实体

        诸如 “<” 之类的符号在HTML中拥有特殊的含义，所以在文本中使用它们。

        为了在 HTML 中显示小于号 (<)，我们需要使用字符实体。

字符实体

        一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

        字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。

        要在 HTML 文档中显示小于号，我们需要这样写：< 或者 <

        使用实体名称而不是实体编号的好处在于，名称相对来说更容易记忆。而这么做的坏处是，并不是所有的浏览器都支持最新的实体名称，然而几乎所有的浏览器对实体编号的支持都很好。

注意：实体对大小写敏感。

空格

        空格是 HTML 中最普通的字符实体。

        通常情况下，HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格，那么 HTML 会去掉其中的9个。如果使用  ，就可以在文档中增加空格。

最常用的字符实体

显示结果描述实体名称实体编号
空格    
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '

其他一些常用的字符实体

显示结果描述实体名称实体编号
￠分 ¢ ¢
£ 镑 £ £
¥ 日圆 ¥ ¥
§ 节 § §
© 版权 © ©
® 注册商标 ® ®
× 乘号 × ×
÷ 除号 ÷ ÷

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'

显示结果	描述	实体名称	实体编号
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
§	节	§	§
©	版权	©	©
®	注册商标	®	®
×	乘号	×	×
÷	除号	÷	÷

需求：把我是 <br> 换行标签变成文本转换成字符显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-特殊字符标签</title>
</head>
<body>
<!-- 特殊字符
    需求 ：把 我是     <br> 换行标签 变成文本 转换成字符显示在页面上
        常用的特殊字符:
            < ===>>>> &lt;
            > ===>>>> &gt;
            空格 ===>>>> &nbsp;
-->
    我是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;br&gt; 换行标签
</body>
</html>

7.3 标题标签

HTML <h1> to <h6> 标签

定义和用法

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

可选的属性

属性值描述 DTD
align
left
center
right

左对齐（默认）

居中对齐

右对齐
TF

属性	值	描述	DTD
align	left center right	左对齐（默认）居中对齐右对齐	TF

需求 ：演示标题 1 到标题 6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-标题标签</title>
</head>
<body>
    <!--

        h1 - h6 都是标题标签
                h1 最大
                h6 最小
        属性：
                align 属性是对齐属性
                        left ：左对齐(默认)
                        center ：居中
                        right ： 右对齐
    -->
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

</body>
</html>

7.4 超链接标签

在网页中所有点击之后可以跳转的内容都是超连接

定义和用法

<a> 标签可定义锚。一个锚有两种用法：

通过使用 href 属性，创建一个到另外一个文档的链接
通过使用 name 或 id 属性，创建一个文档内部的书签

提示和注释：

注释：被链接的页面通常被显示在当前的浏览器窗口中，除非您规定了其他的 target。

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性值描述 DTD
href URL 链接的目标 URL。 STF
target
_blank
_parent
_self
_top
name

在何处打开目标 URL。

_blank - 在一个新的未命名的窗口载入文档
_self - 在相同的框架或窗口中载入目标文档
_parent - 把文档载入父窗口或包含了超链接引用的框架的框架集
_top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架
name 别的标签里的name值
TF

属性	值	描述	DTD
href	URL	链接的目标 URL。	STF
target	_blank _parent _self _top name	在何处打开目标 URL。 _blank - 在一个新的未命名的窗口载入文档 _self - 在相同的框架或窗口中载入目标文档 _parent - 把文档载入父窗口或包含了超链接引用的框架的框架集 _top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 name 别的标签里的name值	TF

需求：做一个超链接，在新窗口中跳转的百度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4-超链接标签</title>
</head>
<body>
    <!-- 需求：做一个超链接，在新窗口中跳转的百度
        a 标签是 超链接
            href 属性设置连接的地址

            target 属性设置哪个目标进行跳转
                _self 表示当前页面(默认值)
                _blank 表示打开新页面来进行跳转
    -->
    <a href="https:www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

7.5 列表标签

有序列表：HTML <ol> 标签

定义和用法

        <ol> 标签定义了有序列表。

提示和注释：

        注释：请使用样式来定义列表的类型。

可选的属性

属性值描述 DTD
start start_on_number 规定起始数字。不赞成使用。请使用样式代替。 TF
type
A
a
I
i
1
规定列表的类型。不赞成使用。请使用样式代替。 TF

无序列表：HTML <ul> 标签

定义和用法

        <ul> 标签定义了无序列表。

提示和注释：

        提示：请使用样式来定义列表的类型。
格式：
<ol>
        <li> *** <li>
        <li> *** <li>
        <li> *** <li>
</ol>

ol 有序列表
   start 表示从*开始，type 显示的类型：A a I i 1(deafult)
ul 无序列表
   type 显示的类型：disc(default) , circle , square
  li 是列表项

属性	值	描述	DTD
start	start_on_number	规定起始数字。不赞成使用。请使用样式代替。	TF
type	A a I i 1	规定列表的类型。不赞成使用。请使用样式代替。	TF

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5-列表标签</title>
</head>
<body>
    武林高手排行榜
    <ol type = "i" start = 1>
        <li>扫地僧</li>
        <li>萧远山</li>
        <li>慕容博</li>
        <li>虚竹</li>
        <li>阿紫</li>
    </ol>
    武林大会人员名单
    <ul type="square">
        <li>乔峰</li>
        <li>阿朱</li>
        <li>马夫人</li>
        <li>白世镜</li>
    </ul>
</body>
</html>

7.6 img图片标签

HTML <img> 标签

定义和用法

        img 元素可定义一副图像。

（img 标签可以在 html 页面上显示图片。）

必需的属性

DTD指示此属性允许在哪种DTD中使用。S=Strict, T=Transitional, F=Frameset.

属性值描述 DTD
alt text
定义图像的简短描述（即图像的替代文本）。不超过 1024 个字符。

（在大部分浏览器中，当图片找不到时才会用文本代替图像）
STF
src URL 所显示图像的 URL。 STF

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性值描述 DTD
border pixels 定义图像周围的边框。 TF
height
pixels
%
定义图像的高度。 STF
width
pixels
%
设置图像的宽度。 STF

在 JavaSE 中路径也分为相对路径和绝对路径.

        相对路径:从工程名开始算

        绝对路径:盘符:/目录/文件名

在 web 中路径分为相对路径和绝对路径两种

        相对路径:

                . 表示当前文件所在的目录

                .. 表示当前文件所在的上一级目录

        文件名表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略

        绝对路径:

                正确格式是: http://ip:port/工程名/资源路径

                错误格式是: 盘符:/目录/文件名

属性	值	描述	DTD
alt	text	定义图像的简短描述（即图像的替代文本）。不超过 1024 个字符。（在大部分浏览器中，当图片找不到时才会用文本代替图像）	STF
src	URL	所显示图像的 URL。	STF

属性	值	描述	DTD
border	pixels	定义图像周围的边框。	TF
height	pixels %	定义图像的高度。	STF
width	pixels %	设置图像的宽度。	STF

这里以相对路径为例：

需求：使用 img 标签显示美女的照片。并修改宽高，和边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6-img标签</title>
</head>
<body>
    <!--
    img属性：

            img 标签是图片标签,用来显示图片
            src 属性可以设置图片的路径
            width 属性设置图片的宽度
            height 属性设置图片的高度
            border 属性设置图片边框大小
            alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容

    在 JavaSE 中路径也分为相对路径和绝对路径.
            相对路径:从工程名开始算
            绝对路径:盘符:/目录/文件名

    在 web 中路径分为相对路径和绝对路径两种
    相对路径:
        . 表示当前文件所在的目录
        .. 表示当前文件所在的上一级目录
        文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
    绝对路径:
        正确格式是: http://ip:port/工程名/资源路径
        错误格式是: 盘符:/目录/文件名
    -->
    <img src="imgs/1.jpg" width="95" height="142" border="1"/>
    <img src="./imgs/2.jpg" width="95" height="142"/>
    <img src="./imgs/3.jpg" width="95" height="142"/>
    <img src="imgs/4.jpg" width="95" height="142"/>
    <img src="imgs/5.jpg" width="95" height="142"/>
    <img src="imgs/6.jpg" width="95" height="142"/>
    <img src="imgs/1111.jpg" width="95" height="142" alt="图片找不到"/>

</body>
</html>

7.7 表格标签

HTML <table> 标签

定义和用法

<table> 标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性值描述 DTD
align
left
center
right
排列表格。不赞成使用。请使用样式取而代之。 TF
bgcolor
rgb(x,x,x)
#xxxxxx
colorname
规定表格的背景颜色。不赞成使用。请使用样式取而代之。 TF
border pixels
规定表格边框的宽度。

提示：可通过设置 border="0" 来显示无边框的表格！
STF
cellpadding
pixels
%
规定单元边沿与其内容之间的空白(间距)。 STF
cellspacing
pixels
%
规定单元格之间的空白（间距）。 STF
width
%
pixels
规定表格的宽度。 STF
height
%
pixels
规定表格的高度。 STF

HTML <tr> 标签

定义和用法

在表格中定义一行。

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性值描述 DTD
align
right
left
center
justify
char
定义单元格中的文本排列 STF
bgcolor
rgb(x,x,x)
#xxxxxx
colorname
规定表格单元格的背景颜色。不赞成使用。请使用样式取而代之。 TF

HTML <td>,<th> 标签

定义和用法

<td> 定义表格中的一个单元格。

<th>定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体,并居中。

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性值描述 DTD
align
left
right
center
justify
char
规定单元格内容的水平排列方式。 STF
bgcolor
rgb(x,x,x)
#xxxxxx
colorname
规定单元格的背景颜色。不赞成使用。请使用样式取而代之。 TF
colspan number 规定此单元格可横跨的列数。 STF
height pixels 规定表格单元格的高度。不赞成使用。请使用样式取而代之。 TF
rowspan number 规定此单元格可横跨的行数。 STF
width
pixels
%
规定表格单元格的宽度。不赞成使用。请使用样式取而代之。 TF

定义表格格式：
        <table> 表示表格
                <tr> 表示第一行                        <th>Cell A</th> 表示第一行第一列，即第一个单元格
                        <th>Cell B</th>
                </tr>
                <tr> 表示第二行                        <td>Cell A</td>                        
                        <td>Cell B</td>                 </tr>
                ...        </table>

属性	值	描述	DTD
align	left center right	排列表格。不赞成使用。请使用样式取而代之。	TF
bgcolor	rgb(x,x,x) #xxxxxx colorname	规定表格的背景颜色。不赞成使用。请使用样式取而代之。	TF
border	pixels	规定表格边框的宽度。提示：可通过设置 border="0" 来显示无边框的表格！	STF
cellpadding	pixels %	规定单元边沿与其内容之间的空白(间距)。	STF
cellspacing	pixels %	规定单元格之间的空白（间距）。	STF
width	% pixels	规定表格的宽度。	STF
height	% pixels	规定表格的高度。	STF

属性	值	描述	DTD
align	right left center justify char	定义单元格中的文本排列	STF
bgcolor	rgb(x,x,x) #xxxxxx colorname	规定表格单元格的背景颜色。不赞成使用。请使用样式取而代之。	TF

属性	值	描述	DTD
align	left right center justify char	规定单元格内容的水平排列方式。	STF
bgcolor	rgb(x,x,x) #xxxxxx colorname	规定单元格的背景颜色。不赞成使用。请使用样式取而代之。	TF
colspan	number	规定此单元格可横跨的列数。	STF
height	pixels	规定表格单元格的高度。不赞成使用。请使用样式取而代之。	TF
rowspan	number	规定此单元格可横跨的行数。	STF
width	pixels %	规定表格单元格的宽度。不赞成使用。请使用样式取而代之。	TF

需求 1 ：做一个带表头的，三行，三列的表格，并显示边框

修改表格的宽度，高度，表格的对齐方式，单元格间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8-表格标签</title>
</head>
<body>
    <!--
    需求 1：做一个 带表头的 ，三行，三列的表格，并显示边框
         2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

         table 标签是表格标签
            border 设置表格标签
            width 设置表格宽度
            height 设置表格高度
            align 设置表格相对于页面的对齐方式
            cellspacing 设置单元格间距
         tr 是行标签
         th 是表头标签
         td 是单元格标签
            align 设置单元格文本对齐方式
    -->
    <table border="1" align="center" width="300" height="300" cellspacing="0">
        <tr>
            <th>1-1</th>
            <th>1-2</th>
            <th>1-3</th>
        </tr>
        <tr align="center">
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr align="center">
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>
</body>
</html>

需求 2 ：新建一个五行，五列的表格，第一行，第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四 列的单元格跨两行两列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9-跨行跨列表格</title>
</head>
<body>
    <!--
    需求 2： 新建一个五行，五列的表格，
            第一行，第一列的单元格要跨两列，
            第二行第一列的单元格跨两行，
            第四行第四列的单元格跨两行两列。

                colspan 属性设置跨列
                rowspan 属性设置跨行
    -->
</body>
<table border="1" width="300" height="300" cellspacing="0" align="center">
    <tr>
        <th colspan="2">1-1</th>
        <th>1-3</th>
        <th>1-4</th>
        <th>1-5</th>
    </tr>
    <tr align="center">
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
    </tr>
    <tr align="center">
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
        <td>3-5</td>
    </tr>
    <tr align="center">
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td rowspan="2" colspan="2">4-4</td>
    </tr>
    <tr align="center">
        <td>5-1</td>
        <td>5-2</td>
        <td>5-3</td>
    </tr>
</table>
</html>

7.8 iframe标签

ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面

HTML <iframe> 标签

定义和用法

iframe 元素会创建一个包含另外一个文档的内联框架。

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性值描述 DTD
align
left
right
top
middle
bottom
规定如何根据周围的文本来排列此框架。 TF
frameborder
1
0
规定是否显示框架的边框。 TF
height
pixels
%
定义 iframe 的高度。 TF
name frame_name 规定 iframe 的唯一名称（以便在脚本中使用）。 TF
src URL 在 iframe 中显示文档的 URL。 TF
width
pixels
%
定义 iframe 的宽度。 TF

属性	值	描述	DTD
align	left right top middle bottom	规定如何根据周围的文本来排列此框架。	TF
frameborder	1 0	规定是否显示框架的边框。	TF
height	pixels %	定义 iframe 的高度。	TF
name	frame_name	规定 iframe 的唯一名称（以便在脚本中使用）。	TF
src	URL	在 iframe 中显示文档的 URL。	TF
width	pixels %	定义 iframe 的宽度。	TF

iframe标签可以与a标签联用：点击a的超链接，可以直接跳转到iframe内联框架中

        ifarme 和 a 标签组合使用的步骤:

                1 在 iframe 标签中使用 name 属性定义一个名称

                2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9-iframe标签</title>
</head>
<body>
<iframe src="imgs/13.jpg" width="900" height="700" name="abc" align="right">
</iframe>
<ul>
    <li><a href="imgs/1.jpg" target="abc">1.jpg</a></li><br />
    <li><a href="imgs/2.jpg" target="abc">2.jpg</a></li><br />
    <li><a href="imgs/3.jpg" target="abc">3.jpg</a></li><br />
    <li><a href="imgs/4.jpg" target="abc">4.jpg</a></li><br />
</ul>
</body>
</html>

7.9 表单标签

7.9.1 form标签

HTML <form> 标签

定义和用法

        form 元素可为用户输入创建表单。

        表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。

必需的属性

属性值描述 DTD
action URL 当确认按钮被按下时，接受和处理表单数据的 URL。 STF
method
get
post

用于向 action URL 传送数据的 HTTP 方法。默认为 get。

(但推荐使用post)
STF

注释：

        如果表单值包含非 ASCII 字符或者超过 100 个字符，您则必须使用 method="post"。

        method="post"：此方法可传送 request 主体中的表单内容。

可选的属性

属性值描述 DTD
accept-charset 字符集名称列表一个服务器可接受的字符集的列表（用逗号分隔）。 STF
enctype MIME 类型用来编码表单内容的 MIME 类型. STF
name 表单名称定义表单的唯一名称。 TF
target
_blank
_parent
_self
_top
name

在何处打开目标 URL。

_blank - 在一个新的未命名的窗口载入文档
_self - 在相同的框架或窗口中载入目标文档
_parent - 把文档载入父窗口或包含了超链接引用的框架的框架集
_top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架
name - 跳转到名称为name的标签中
TF

属性	值	描述	DTD
action	URL	当确认按钮被按下时，接受和处理表单数据的 URL。	STF
method	get post	用于向 action URL 传送数据的 HTTP 方法。默认为 get。 (但推荐使用post)	STF

属性	值	描述	DTD
accept-charset	字符集名称列表	一个服务器可接受的字符集的列表（用逗号分隔）。	STF
enctype	MIME 类型	用来编码表单内容的 MIME 类型.	STF
name	表单名称	定义表单的唯一名称。	TF
target	_blank _parent _self _top name	在何处打开目标 URL。 _blank - 在一个新的未命名的窗口载入文档 _self - 在相同的框架或窗口中载入目标文档 _parent - 把文档载入父窗口或包含了超链接引用的框架的框架集 _top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 name - 跳转到名称为name的标签中	TF

7.9.2 inpu标签

HTML <input> 标签

定义和用法

        <input> 标签可定义输入域的开始，在其中用户可输入数据。

        对于大量通常的表单控件，可以使用 <input> 标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。

        虽然 <input> 标签中有许多属性，但是对每个元素来说，只有 type 属性和 name 属性是必需的（提交或重置按钮只有 type 属性）。

提示和注释：

        注释：input 元素是空的，它仅包含属性。

        提示：请使用 label 元素为某个表单控件定义标签。

必需的属性
属性值描述 DTD
type

button
checkbox
file
hidden
image
password
radio
reset
submit
text
指示 input 元素的类型。默认值是 "text"。
text 是文件输入框 

password 是密码输入框 

radio 是单选框 name 属性可以对其进行分组，对同一组内数据进行单选 checked="checked"表示默认选中

checkbox 是复选框 

reset 是重置按钮 

submit 是提交按钮 

button 是按钮 

file 是文件上传域

hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的 时候同时发送给服务器）
STF
name field_name
定义用于此 input 元素的唯一名称。

注释：此属性必需与 type="button"、type="checkbox"、type="file"、type="hidden"、type="image"、type="password"、type="text" 以及 type="radio" 一同使用。
STF

属性	值	描述	DTD
type	button checkbox file hidden image password radio reset submit text	指示 input 元素的类型。默认值是 "text"。 text 是文件输入框 password 是密码输入框 radio 是单选框 name 属性可以对其进行分组，对同一组内数据进行单选 checked="checked"表示默认选中 checkbox 是复选框 reset 是重置按钮 submit 是提交按钮 button 是按钮 file 是文件上传域 hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）	STF
name	field_name	定义用于此 input 元素的唯一名称。注释：此属性必需与 type="button"、type="checkbox"、type="file"、type="hidden"、type="image"、type="password"、type="text" 以及 type="radio" 一同使用。	STF

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性值描述 DTD
checked checked
指示此 input 元素首次加载时应当被选中。

注释：请与 type="checkbox" 及 type="radio" 配合使用。
STF
size number_of_char
定义 input 元素的尺寸。

注释：不能与 type="hidden" 一同使用。
STF
value value
对于按钮、重置按钮和确认按钮：定义按钮上的文本。

对于图像按钮：定义传递向某个脚本的此域的符号结果。

对于复选框和单选按钮：定义 input 元素被点击时的结果。

对于隐藏域、密码域以及文本域：定义元素的默认值。

注释：不能与 type="file" 一同使用。

注释：与 type="checkbox" 和 type="radio" 一同使用时，此元素是必需的。
STF

属性	值	描述	DTD
checked	checked	指示此 input 元素首次加载时应当被选中。注释：请与 type="checkbox" 及 type="radio" 配合使用。	STF
size	number_of_char	定义 input 元素的尺寸。注释：不能与 type="hidden" 一同使用。	STF
value	value	对于按钮、重置按钮和确认按钮：定义按钮上的文本。对于图像按钮：定义传递向某个脚本的此域的符号结果。对于复选框和单选按钮：定义 input 元素被点击时的结果。对于隐藏域、密码域以及文本域：定义元素的默认值。注释：不能与 type="file" 一同使用。注释：与 type="checkbox" 和 type="radio" 一同使用时，此元素是必需的。	STF

7.9.3 select 标签

HTML <select> 标签

定义和用法

select 元素可创建单选或多选菜单。

当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。

提示和注释：

提示：请在 form 元素中使用此标签来接受用户的输入。

例子
<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
可选的属性

属性值描述 DTD
name unique_name 定义下拉列表的唯一标识符。 STF
size number 定义菜单中可见项目的数目。 STF

HTML <option> 标签

定义和用法

option 元素可定义下拉列表中的一个选项（一个条目）。

浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

提示和注释：

注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。

例子
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel" selected="selected">Opel</option>
  <option value="audi">Audi</option>
</select>
可选的属性

属性值描述 DTD
selected selected 规定选项（在首次显示在列表中时）表现为选中状态。 STF
value text 定义送往服务器的选项值。 STF

属性	值	描述	DTD
name	unique_name	定义下拉列表的唯一标识符。	STF
size	number	定义菜单中可见项目的数目。	STF

属性	值	描述	DTD
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。	STF
value	text	定义送往服务器的选项值。	STF

7.9.4 语法小结

表单格式：
<form>
        <input/>           
        ... 
        <select>           
                <option></option>
        </select>
        ...
        <input/>         
        ... 

语法：
</form>
form 标签就是表单
    input type=text 是文本输入框，value设置默认显示内容, 
                        name为输入框名称（必写）

    input type=password 是密码输入框，value设置默认显示内容,
                        name为输入框名称（必写）

    input type=radio 是单选框，value为点击结果（必写），
                        name 属性可以对其进行分组(必写)，对同一组内数据进行
                        单选checked="checked"表示默认选中

    input type=checkbox 是复选框，name 属性可以对其进行分组(必写)
                        checked="checked"表示默认选中
                        value为点击结果（必写）

    input type=reset 是重置按钮 value 属性修改按钮上的文本

    input type=submit 是提交按钮 value 属性修改按钮上的文本

    input type=button 是按钮 value 属性修改按钮上的文本

    input type=file 是文件上传域

    input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，
                      就可以使用隐藏域（提交的 时候同时发送给服务器）
        select 标签是下拉列表框

                option 标签是下拉列表框中的选项 selected="selected"设置默认选中

                        value为点击结果（必写）

        textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）

                rows 属性设置可以显示几行的高度

                cols 属性设置每行可以显示几个字符宽度

注意事项：

        form 标签是表单标签

                action 属性设置提交的服务器地址

                method 属性设置提交的方式 GET( 默认值 ) 或 POST

         表单提交的时候，数据没有发送给服务器的三种情况：

                1、表单项没有 name 属性值

                2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，

                                以便发送给服务器

                3、表单项不在提交的 form 标签中

        GET 请求的特点是：

                1、浏览器地址栏中的地址是：action 属性 [+?+ 请求参数 ]

                        请求参数的格式是：name=value&name=value

                2、不安全

                3、它有数据长度的限制

        POST 请求的特点是：

                1、浏览器地址栏中只有 action 属性值

                2、相对于 GET 请求要安全

                3、理论上没有数据长度的限制

注意：当属性名称与属性值相同时，可以不用写属性值，只用写属性名称

如： selected="selected"可写成selected.

7.9.5 需求

需求 : 创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。隐藏域，自我评价（多行文本域）。重置，提交。如下图:

7.9.6 表单显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-表单标签</title>
</head>
<body>

<!--需求 :创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），
兴趣爱好（多选），国籍（下拉列表）。 隐藏域，自我评价（多行文本域）。重置，提交。-->
    
    <form >
    <h1>用户注册</h1>
        <input type="hidden" name="action" value="login"/>
        用户名称：<input type="text" name="username" value="请输入您的用户名称"/><br/>
        用户密码：<input type="password" name="password"/><br/>
        正确密码：<input type="password" name="new_password"/><br/>
        性别：<input type="radio" name="sex" value="male" checked/>男
        <input type="radio" name="sex" value="female"/>女<br/>
        兴趣爱好：<input type="checkbox" name="hobby" value="c"/>C
        <input type="checkbox" name="hobby" value="c++"/>C++
        <input type="checkbox" name="hobby" value="java"/>Java<br/>
        国籍：<select name="country">
        <option>请选择您的国籍</option>
        <option value="ch">中国</option>
        <option value="am">美国</option>
        <option value="en">英国</option>
        <option value="jp">日本</option>
    </select><br/>
        自我评价：<textarea name="desc" rows="4" cols="20">我是默认值</textarea>
        <br />
        <input type="reset" />
        <input type="submit"/>

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

7.9.7 表单格式化

将表单放入表格中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form >
    <h1 align="center">用户注册</h1>
    <input type="hidden" name="action" value="login"/>
    <table align="center" border="0">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" name="username" value="请输入您的用户名称"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td>正确密码：</td>
            <td><input type="password" name="new_password"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="sex" value="male" checked/>男
                <input type="radio" name="sex" value="female"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" name="hobby" value="c"/>C
                <input type="checkbox" name="hobby" value="c++"/>C++
                <input type="checkbox" name="hobby" value="java"/>Java
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option>请选择您的国籍</option>
                    <option value="ch">中国</option>
                    <option value="am">美国</option>
                    <option value="en">英国</option>
                    <option value="jp">日本</option>
                </select><br/>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea name="desc" rows="4" cols="20">我是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>
</body>
</html>

7.9.8 表单提交

需要一个注册成功页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册成功</title>
</head>
<body>
<h1 align="center"><font color="red">注册成功</font></h1>
</body>
</html>

在格式化都的代码中，在form标签中添加属性action与method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form action="10-表单标签4-注册成功页面.html" method="get">
    <h1 align="center">用户注册</h1>
    <input type="hidden" name="action" value="login"/>
    <table align="center" border="0">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" name="username" value="请输入您的用户名称"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td>正确密码：</td>
            <td><input type="password" name="new_password"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="sex" value="male" checked/>男
                <input type="radio" name="sex" value="female"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" name="hobby" value="c"/>C
                <input type="checkbox" name="hobby" value="c++"/>C++
                <input type="checkbox" name="hobby" value="java"/>Java
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option>请选择您的国籍</option>
                    <option value="ch">中国</option>
                    <option value="am">美国</option>
                    <option value="en">英国</option>
                    <option value="jp">日本</option>
                </select><br/>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea name="desc" rows="4" cols="20">我是默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>
</body>
</html>

GET 请求的特点是：

                1、浏览器地址栏中的地址是：action 属性 [+?+ 请求参数 ]

                        请求参数的格式是：name=value&name=value

                2、不安全

                3、它有数据长度的限制

        POST 请求的特点是：

                1、浏览器地址栏中只有 action 属性值

                2、相对于 GET 请求要安全

                3、理论上没有数据长度的限制

method="get"时：浏览器地址栏中为：

http://localhost:63342/javaWeb/html/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE4-%E6%B3%A8%E5%86%8C%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html?action=login&username=abc&password=123&new_password=123&sex=male&hobby=java&country=ch&desc=ok

其中：

①

http://localhost:63342/javaWeb/html/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE4-%E6%B3%A8%E5%86%8C%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html

为action 属性值

②

？为分隔符

③

action=login&

username=abc&

password=123&

new_password=123&

sex=male&

hobby=java&

country=ch&

desc=ok

为表单信息

method="post"时：浏览器地址栏中为：http://localhost:63342/javaWeb/html/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE4-%E6%B3%A8%E5%86%8C%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html

只有action属性值。

7.10 frameset标签

HTML <frameset> 标签

定义和用法

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

可选的属性

属性值描述 DTD
cols
pixels
%
*
定义框架集中列的数目和尺寸。 F
rows
pixels
%
*
定义框架集中行的数目和尺寸。 F

属性	值	描述	DTD
cols	pixels % *	定义框架集中列的数目和尺寸。	F
rows	pixels % *	定义框架集中行的数目和尺寸。	F

HTML <frameset> 标签的 cols 属性和 rows 属性

作用和用法

        <frameset> 标签有一个必需的属性：要么是 rows，要么是 cols，这取决于您的选择，它们定义了文档窗口中框架或嵌套的框架集的行或列的大小及数目。

        这两个属性都接受用引号括起来并用逗号分开的值列表，这些数值指定了框架的绝对（像素点）或相对（百分比或其余空间）宽度（对列而言），或者绝对或相对高度（对行而言）。这些属性值的数目决定了浏览器将会在文档窗口中显示多少行或列的框架。

        与表格一样，浏览器在显示时会尽可能接近给定的框架集尺寸。但是，浏览器不会为了能够容纳下超出边沿的框架集而扩展文档窗口的边界，也不会在指定的框架没有填满整个窗口时用空白区域来填满窗口。相反，浏览器会根据一个框架在行和列中相对于其他框架的大小来分配空间，这样就能够填满整个文档窗口了。（注意到一个主框架文档中没有滚动条了吗？）

例子

例子 1

下面的代码将创建 3 行框架：
<frameset rows="150,300,150">
其中的每行都贯穿整个文档窗口。第一和最后一个框架被设为 150 像素高，第二行设置成 300 像素高。

实际上，除非浏览器窗口正好是 600 像素高，否则浏览器将会自动按照比例延伸或压缩第一和最后一个框架，使得这两个框架都占据 1/4 的窗口空间。中间行将会占据剩下 1/2 的窗口空间。

例子 2

用窗口尺寸的百分比表示的框架行和列尺寸数据更加实际。

例如，下面这个示例与刚才那个示例的效果相同：
<frameset rows="25%,50%,25%">
当然，如果这些百分比加起来不是 100%，浏览器也会自动按照比例重新给出每行尺寸以消除差异。

例子 3

如果你像我们一样，那么将问题综合起来就不是一件难事。可能有的框架设计人员正为同样的困难而感到苦恼，这就解释了为什么他们要在 <frameset> 的 rows 和 cols 值上加上星号。它告诉浏览器要在将相邻的框架放入框架集之后，给剩下的空间分配各自的行或列。

例如，当浏览器遇到下列框架标签时：
<frameset cols="100, *">
上面的例子会生成一个宽为固定的 100 像素的列，然后再生成另一个框架列，该列会占据框架集中其余所有的空间。

例子 4

您还可以对多个列或行属性值使用星号。在这样的情况下，相应的行或列将对可用空间进行等分，例如：
<frameset rows="*, 100, *">
这条语句在框架集的中间生成一个 100 像素高的行，并在这行的上边和下边各生成一个相同尺寸的行。

例子 5

如果在星号前放置一个整数值，相应的行或列九回相对地获得更多的可用空间。例如：
<frameset cols="10%, 3*, *, *">
它生成了 4 列：第一列占据整个框架集宽度的 10%。然后浏览器把其他空间的 3/5 分配给第二个框架，第三个和第四个框架各分配其余空间的 1/5。

从上面的例子可以发现，使用星号（尤其是用数值作为前缀），可以很容易地在一个框架集中分割剩下的空间。

提示和注释

提示：需要注意的是，浏览器允许用户手动地为单个框架文档的行或列重新确定大小，并因此改变每个框架在框架显示中各自占据的相对比例，除非你显式地告诉浏览器不要这样做。为了防止这种情况，可以在 <frame> 标签中使用 noresize 属性。

HTML <frame> 标签

定义和用法

在 <frameset> 中定义一个框架。

可选的属性

属性值描述 DTD
frameborder
0
1
规定是否显示框架周围的边框。 F
name frame_name 为框架定义唯一的名称（以便在脚本中使用）。 F
src URL 定义显示在框架中的文件的 URL。 F

属性	值	描述	DTD
frameborder	0 1	规定是否显示框架周围的边框。	F
name	frame_name	为框架定义唯一的名称（以便在脚本中使用）。	F
src	URL	定义显示在框架中的文件的 URL。	F

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-frameset标签</title>
</head>

<!--rows="20%,*"表示将页面分为上下两部分，其中上部分为20%，*表示剩下的部分-->
<!--属性frameborder="no"表示隐藏页边框-->
<frameset rows="20%,*"><!-- frameborder="no" -->
    <!--上半部分为页面11-frameset标签2-top.html；
    剩下部分还需分割，cols="15%,*"表示左边占用15%，剩下为右边-->
    <frame src="11-frameset标签2-top.html"/>
    <frameset cols="15%,*">
        <!--左半部分为页面11-frameset标签2-left.html；剩下部分还需分割-->
        <frame src="11-frameset标签2-left.html"/>
        <frameset rows="80%,*">
            <!--剩下两部分都为页面，都用frame-->
            <frame src="11-frameset标签2-main.html">
            <frame src="11-frameset标签2-bottom.html"/>
        </frameset>

    </frameset>

</frameset>

</html>

注意：需要取出body标签

top.html (left.html, main.html, bottom.html都与此类似)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bottom</title>
</head>
<body>
BOTTOM
</body>
</html>

7.11其他标签

常见标签还有：

标签作用

div
层，默认独占一行
span
它的长度是封装数据的长度

p
段落标签

默认会在段落的上方或下方各空出一行来（如果已有就不再空）

b 将文字加粗
i 将文字斜体
u 给文字加下划线
sup 上标标签
sub 下标标签

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-其他标签</title>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <hr>

    <span>span标签1</span>
    <span>span标签2</span>
    <br><hr>

    <p>段落1</p>
    <p>段落2</p>

    <hr>
    <b>字体1</b> <br>
    <i>字体2</i> <br>
    <u>字体3</u> <br>
    <!--可以嵌套-->
    <b><i><u>字体3</u></i></b>
    <br><hr>

    氧气的化学式为:O<sup>2</sup> <br/>
    水的化学式为:H<sub>2</sub>O
</body>
</html>

陈弋辛

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb HTML

页面由三部分内容组成！分别是内容（结构）、表现、行为。内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用html 技术来展示。表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用CSS 技术实现. 行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。 Hyper Text Markup Language （超文本标记语言）简写：HTML
复制链接

扫一扫

专栏目录