【从零开始的Java开发】2-8-1 HTML入门：标签、表格、表单

最新推荐文章于 2024-07-21 17:58:14 发布
最新推荐文章于 2024-07-21 17:58:14 发布
阅读量366 收藏 2
点赞数
分类专栏： 从零开始的Java开发 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/karshey/article/details/126306474
版权

文章目录

HTML简介

HTML，即Hyper Text Markup Language，超文本标记语言。

HTML文件结构：
在这里插入图片描述
第一个html文件

<html>
    <head>
        <title>first.html</title>
    </head>

    <body>
        这是第一个页面
    </body>
</html>

长成这样：
在这里插入图片描述

常用标签

字体标签

<font>...</font>

作用：规定文本的字体、字体尺寸（1-7，1最小，7最大）、字体颜色
如：

<html>
    <head>
        <title>first.html</title>
    </head>
    <body>
        <font size="7" face="隶书" color="red" >
        这是第一个页面
        </font>
    </body>
</html>

在这里插入图片描述

颜色表示：RGB、十六进制、标签。
具体后面会细讲。

段落标签p

<p>...</p>

作用：定义一个段落
如：

<html>

<head>
    <title>first.html</title>
</head>

<body>
    <p>Java是一门面向对象的编程语言</p>
    <p>Java是一门面向对象的编程语言</p>
</body>

</html>

在这里插入图片描述
注意：

  • 段落内依据所在容器的宽度自动换行
  • 浏览器会自动地在段落的前后添加空行
  • <p>和<br>的区别：<br>换行不换段。

注释标签<!--....-->

<!--....-->

作用：注释。

标题标签h

<h?>...</h?>

?处是数字，1-6，1最大，6最小。

作用：定义标题头的六个不同文字大小，依次显示重要性的递减。

注意：尽量靠近在html中的<body>标签，越近越好，以便让搜索引擎最快的领略主题。

如：

<!--前后重复部分就删去了-->
<body>
    <h1> h1</h1>
    <h2> h2</h2>
    <h3> h3</h3>
    <h4> h4</h4>
    <h5> h5</h5>
    <h6> h6</h6>
</body>

在这里插入图片描述
一般：

  • h1：大标题
  • h2：副标题
  • h3：栏目标题

图片标签img

<img src="***"/>

作用：来浏览器显示图片。
常用属性：src，alt，height，width

如：

<body>
    logo:<img src="1.jpg" alt="not find" />
</body>

若图片不存在，则显示not find
在这里插入图片描述

若存在则显示图片：
在这里插入图片描述
还可以设置宽度和高度（不常用）：

<body>
    logo:<img src="img/1.jpg" alt="not find" width="100px" height="100px" />
</body>

在这里插入图片描述
不过一般在css里面写高度和宽度。

超级链接标签a

a标签：<a>...<a>
作用：使用超级链接与网络上的另一个文件相连
注意：超链接可以是一个字，一个词，或一组词，也可以是图像：我们可以点击这些内容来跳转到新的文档或当前文档的某个部分。

如：

<body>
    <a href="welcome.html">打开新页面</a>
</body>

<body>
    <h1>我的新页面</h1>
    <a href="first.html"> 单击此处返回首页</a>
</body>

在这里插入图片描述
在这里插入图片描述
注意：打开一个网址需要加上http://

A标签的target属性：

标签格式
_blank在新打开、未命名的窗口打开链接
_parent在父窗口打开链接
_self在当前窗口打开
_top_top目标将会清除所有被包含的frame框架

如：

<body>
    <a href="welcome.html" target="_blank">打开新页面</a>
</body>

在这里插入图片描述
点击后会产生新窗口。

锚点标签

<a name="ziti">---</a>

作用：同一个文档中创建指向该锚（位置）的链接
注意：锚点必须先定义，再使用
用法：

  • <a href="#num-1"> 跳转到当前页面的num-1锚点
  • <a href="first#num-1">跳转到first这个页面的num-1锚点

如：

<body>
    <p><a href="#num-1">锚点1</p>
    <p><a href="#num-2">锚点2</p>
    <p><a href="#num-3">锚点3</p>
    <!--定义一个锚点-->
    <a name="num-1">
        <p>num-1一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
        <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
        <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
        <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
    </a>
    <a name="num-2">
        <p>num-2一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
        <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
        <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
        <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
    </a>
    <a name="num-3">
        <p>num-3一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
        <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
        <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
        <p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
        </p>
    </a>
</body>

效果就是点哪里就跳转到哪里。

再另一个html文件上写：

<body>
    <h1>我的新页面</h1>
    <p><a href="first.html#num-3"> first页面的锚点3</a></p>
</body>

则会跳转到first这个页面的num-3的锚点。

列表

无序列表

<ul><li>...</li></ul>

此列项目使用粗体圆点进行标记：

  • 就
  • 是
  • 这
  • 个

注意：列表内部可以使用段落、换行符、图片、链接以及其他列表等。

如：

<body>
    <ul>
        <!--li*3 Tab 快速生成-->
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>

显示：

  • a
  • b
  • c

有序列表

<ol><li>...</li></ol>
  1. 就
  2. 是
  3. 这
  4. 个

如：

<body>
    <ol>
        <!--li*3 Tab 快速生成-->
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
</body>

显示：

  1. a
  2. b
  3. c

阶段小结

标签格式
列表ul、ol、li
超链接<a href="***"> ...</a>
锚点a name="maodian1"...</a> , <a href="#duanluo">段落标签</a>

表格

相关标签

  • table 表格的开始和结束
  • caption 表格的大标题
  • tr 行的添加
  • th 列/单元格（意思一样）的标题
  • td 列/单元格
  • border 边框
  • width 宽度

如：

<body>
    <!--这里没有px也可以 因为是不严格的语法检查-->
    <table border="1px" width="600px">
        <caption>用户信息表</caption>
        <tr>
            <th>姓名</th>
            <th>密码</th>
            <th>邮箱</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>123456</td>
            <td>123456@youxiang.com</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>111111</td>
            <td>小红@youxiang.com</td>
        </tr>
    </table>
</body>

显示：
在这里插入图片描述

合并行列

  • colspan 列的合并
  • rowspan 行的合并

合并原则：向上、向左合并。

  • 若是行的合并，则在要合并的第一行写代码
  • 列：选最左的一列

语法：colspan="?" ？是数字，合并几个数字就是几（包括自己）

如：

<body>
    <table border="1" width="600">
        <caption>商品库存表</caption>
        <tr>
            <th>商品类别</th>
            <th>商品名称</th>
            <th>单位</th>
            <th>数量</th>
        </tr>
        <tr>
            <td rowspan="2">家电类</td>
            <td>冰箱</td>
            <td>台</td>
            <td>123</td>
        </tr>
        <tr>
            <td>电视</td>
            <td>台</td>
            <td>456</td>
        </tr>
        <tr>
            <td>辅料</td>
            <td>插线板</td>
            <td>个</td>
            <td>111</td>
        </tr>
        <tr>
            <td colspan="4">备注:</td>
        </tr>
    </table>
</body>

在这里插入图片描述

分组设置表格格式的标签

  • caption
  • thead
  • tbody
  • tfood

以上四个标签描述的范围：
在这里插入图片描述
如：

<body>
    <table border="1" width="600">
        <caption>商品库存表</caption>
        <thead>
            <tr>
                <th>商品类别</th>
                <th>商品名称</th>
                <th>单位</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">家电类</td>
                <td>冰箱</td>
                <td>台</td>
                <td>123</td>
            </tr>
            <tr>
                <td>电视</td>
                <td>台</td>
                <td>456</td>
            </tr>
            <tr>
                <td>辅料</td>
                <td>插线板</td>
                <td>个</td>
                <td>111</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">备注:</td>
            </tr>
        </tfoot>
    </table>
</body>

这是用标签描述表格的范围：哪里是标题、哪里是页眉…等等，不会对显示有什么改变（caption会有改变）。相当于自己定义一个范围，之后用它。

相关属性

注意：Firefox、Chome、Safari仅支持colgroup元素的span和width。

属性值描述
alignright
left
center
justify
char		定义在列组合中内容的水平对齐方式
charcharacter规定根据哪个字符来对齐列组中的内容
charoffnumber规定第一个对齐的字符偏移量
spannumber规定列组应该横跨的列数
valigntop
middle
bottom
baseline		定义在列组合中内容的垂直对齐方式
widthpixels
%		规定列组合的宽度

如：按照数字的小数点对齐。
char表示自定义。属性char和charoff也是表示自定义——不过现在很多浏览器都不支持了。
相关代码改成：

<td align="char" char=".">123.0</td>
...
<td align="char" char=".">456.00</td>
...
<td align="char" char=".">111.00000</td>

在这里插入图片描述

其他标签

属性名称属性值作用
border1设置边框
widthnpx,n%（相对于浏览器的宽度）表格宽度
bgcolor颜色值表格背景
alignleft、center、right表格在文档中的对齐方式
cellpaddingnpx内容和边框之间的间距
cellspacingnpx单元格之间的间距

关于显示边框：

属性名称属性值作用
framevoid不显示外边框
frameborder四周都显示
frameabove显示上部的外边框
framebelow显示下部的外边框
framehsides显示上下的外边框
framelhs显示左部的外边框
framerhs显示右部的外边框
framevsides显示左右的外边框

关于单元格间距：

属性名称属性值作用
rulesnone内边框将不被显示
rulesrows内边框将在行之间显示
rulescols内边框在列之间显示
rulesall内边框将被显示
alignleft、center、right三种水平对齐方式
valignbottom、middle、top三种垂直对齐方式

表单

表单主要控件和实例

表单：用于收集用户信息，进行人机交互操作。
包含元素：文本框、单选按钮、列表框、图片框、复选框等。这些元素统称“控件”

示例：
在这里插入图片描述
控件的常用属性：
在这里插入图片描述
代码实现：

<!--html:5 Tab 快捷输入-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>

<body>
    <form action="" method="">
        <!--放进 label里 这样之后就可以操作文字-->
        <label>请输入姓名：</label>
        <input type="text" name="" id=""><br>
        <label>请输入密码：</label>
        <input type="password" name="" id=""><br>
        <label>请重复输入密码：</label>
        <input type="password" name="" id=""><br>
        <label>性别：</label>
        <!--name是一样的，则是一组——一组里只有一个能选中-->
        <input type="radio" name="xb" id="" value="1"><label>男</label>
        <input type="radio" name="xb" id="" value="0"><label>女</label><br>
        <!--value里的值是传到后台的值 最好是数字。字符会有编码的问题-->
        <label>兴趣爱好：</label>
        <input type="checkbox" name="" id="" value="1"><label>游泳</label>
        <input type="checkbox" name="" id="" value="2"><label>看书</label>
        <input type="checkbox" name="" id="" value="3"><label>爬山</label>
        <input type="checkbox" name="" id="" value="4"><label>思考</label><br>
        <label>生日：</label>
        <select>
            <option value="1995">1995</option>
            <option value="1996">1996</option>
            <!--默认选中1997-->
            <option value="1997" selected="selected">1997</option>
            <option value="1998">1998</option>
        </select>
        <label>年</label>
        <select>
            <option value="1" selected="selected">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
        </select>
        <label>月</label>
        <select>
            <option value="01" selected="selected">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
        </select>
        <label>日</label><br>
        <!--选择头像-->
        <label>头像</label><img src="img/1.jpg">
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select><br>
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <!--submit 进入后台继续处理-->
    </form>
</body>

</html>

显示：
在这里插入图片描述

表单其他控件

主要包括：

  • 普通列表框（非下拉列表框）
  • 隐藏域
  • 上传控件
  • 多行文本框

ps：
多行文本框一般用于论坛回帖、发帖。
单行文本框一般用于用户数据的收集。

普通列表框

<select size="10"> <!--有几个选项size就是几-->
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="3">3</option>
        <option value="3">3</option>
        <option value="3">3</option>
        <option value="3">3</option>
        <option value="3">3</option>
        <option value="3">3</option>
        <option value="3">3</option>
    </select>

显示：
在这里插入图片描述

隐藏域

000<input type="hidden">00000

蓝色选中的这一块就是隐藏域——它不显示。
主要的作用是：信息传递。
在这里插入图片描述

上传

<input type="file"><input type="button" value="上传">

在这里插入图片描述
多行文本框

<body>
    <textarea rows="5" cols="30">请输入：</textarea>
</body>

在这里插入图片描述

karshey
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Java Web开发从0到1
会挖坑的小石头的博客
03-15 1147
.
java表格标签,一个自己写得很实用的表格标签: qixin000tag
weixin_30905655的博客
03-16 184
由于现在的displaytag及其valuelist等标签只是表现层的东东,和数据库无关,所以开发者将数据库中的数据传递给这些标签时就会出现分页显示不正确的现象,由于只有将数据库中的所有记录传递给这类标签时,他才能正确处理分页,但是当数据库中的记录很大时,就变得不现实了,所以这类标签适合作为快速开发原型或者显示少量数据时应用，或者进行更改才能符合自己的需要，但是，改起来比较麻烦；针对以上问题,我做...
（二）JavaWeb学习P4-P8（表格标签table，表单标签form，frameset-iframe标签）
qq_56910237的博客
12-19 439
标签定义及使用说明标签定义 HTML 表格一个 HTML 表格包括元素，一个或多个、以及元素。元素定义表格行，元素定义表头，元素定义表格单元。更复杂的 HTML 表格也可能包括元素。
java中title和caption区别_<table>标签里的caption标签和H标签的区别
weixin_32508515的博客
02-28 963
实例带有标题的表格：Monthly savingsMonthSavingsJanuary$100浏览器支持所有主流浏览器都支持 标签。标签定义及使用说明 标签定义表格的标题。 标签必须直接放置到 标签之后。您只能对每个表格定义一个标题。提示：通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。HTM...
JAVA零基础入门2-实现增删改查功能
a1571861354的博客
10-22 1141
在所有的逻辑当中，增删改查是最基础的功能，脚踏实地，基础扎实才能越走越远，本章节完成了对菜品信息的增加、删除、修改、查询功能
JAVA从零开始学习知识整理——HTML——day05—【Bootstrap】
weixin_44167508的博客
01-26 263
一、Bootstrap 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插...
从零开始的Java开发 笔记目录（跑路了）
karshey的博客
07-13 182
。
【Java Web学习笔记】 1 - HTML入门
qq_41891655的博客
12-02 1476
1). HTML ( HyperText Mark-up Language)即超文本标签语言(可以展示的内容类型很多)2). HTML文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等3). HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息.
从零开始的java全栈成长之路（一）
k_low的博客
08-21 367
鲨鱼辣椒的程序员成长历程。
Web-前端html+css从入门到精通 131. 表单扩展之标签.zip
05-23
本课程“Web-前端html+css从入门到精通 131. 表单扩展之标签”专注于讲解如何利用HTML表单元素以及相关的CSS样式来创建功能丰富的用户交互界面。下面我们将深入探讨这一主题中的关键知识点。 一、HTML表单基础 ...
Java开发案例-springboot-19-校验表单重复提交-源代码+文档.rar
05-31
Java开发案例-springboot-19-校验表单重复提交-源代码+文档.rar Java开发案例-springboot-19-校验表单重复提交-源代码+文档.rar Java开发案例-springboot-19-校验表单重复提交-源代码+文档.rar Java开发案例-...
java-web-tags.zip_4 3 2 1_JAVA 语法 大全_JSTL_jsp 表单_web-tags
09-20
java web 标签大全，包括1、struts 1 各类型标签；2、struts 2 标签；3、jstl 各类型标签；4、spring 标签；5、jsf标签；6、jsp标签、语法；7、freemarker语法；8、velocity语法；9、ajax常用函数；10、常用js表单...
vue-jsonschema-form:vue2的JSON模式表单生成器
05-12
入门 克隆此存储库，安装依赖项并使用dev命令运行。 # Clone this repository git clone https://github.com/fagbokforlaget/vue-jsonschema-form.git # Change directory to cloned path cd vue-jsonschema-form #...
form-to-google-sheets:将HTML表单提交的文件存储在Google表格中
04-28
提交表单至Google表格| 如何使用普通的'ol JavaScript（ES6）， ， 和创建HTML表单，以将提交的表单数据存储在Google表格中。 1.创建一个新的Google表格 首先，转到然后使用Blank模板Start a new spreadsheet 。 将...
html--图片变化
2301_81140745的博客
07-20 462
2.点击上传图片会有变化。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
最新发布
apple_68589597的博客
07-21 688
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 344
网页隐藏版一行小说阅读器
HTML、CSS、JS浅浅浅浅浅解
lbdking的博客
07-20 1434
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
Control-M作业配置详解：从入门到实战
每个实例步骤包括登录Desktop、新建表单、创建Job以及保存作业，涵盖了从数据准备到作业执行的全过程。 6. **注意事项**： - 在定义作业时，用户需要考虑的因素包括任务的执行顺序、依赖性、错误处理、性能优化等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

karshey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值