程序员经验分享-hwhale

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

2023-11-18

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。

属性 值 描述
align right
left
center
justify
char		 定义在列组合中内容的水平对齐方式
char character 规定根据哪个字符来对齐列组中的内容
charoff number 规定第一个对齐的字符偏移量
span number 规定列组应该横跨的列数
valign top
middle
bottom
baseline		 定义在列组合中内容的垂直对齐方式
width pixels
%		 规定列组合的宽度

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

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

在这里插入图片描述

其他标签

属性名称 属性值 作用
border 1 设置边框
width npx,n%（相对于浏览器的宽度） 表格宽度
bgcolor 颜色值 表格背景
align left、center、right 表格在文档中的对齐方式
cellpadding npx 内容和边框之间的间距
cellspacing npx 单元格之间的间距

关于显示边框：

属性名称 属性值 作用
frame void 不显示外边框
frame border 四周都显示
frame above 显示上部的外边框
frame below 显示下部的外边框
frame hsides 显示上下的外边框
frame lhs 显示左部的外边框
frame rhs 显示右部的外边框
frame vsides 显示左右的外边框

关于单元格间距：

属性名称 属性值 作用
rules none 内边框将不被显示
rules rows 内边框将在行之间显示
rules cols 内边框在列之间显示
rules all 内边框将被显示
align left、center、right 三种水平对齐方式
valign bottom、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>

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

从零开始的Java开发

html

javascript

前端

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

随机推荐

  • Linux性能监控 -- vmstat命令

    文章目录 示例 字段说明 示例 输入vmstat命令后 第一个参数表示每1秒获取一次服务器资源 第二个参数表示总共获取10次 若第二个参数不设置 则表示持续获取服务器资源 字段说明 数据项 含义 r 表示有多少任务需要CPU执行 通常与后5

  • Button与ImageButton的点击监听事件-onClick

    Button与ImageButton自身都有一个onClick点击事件 通过自身的 setOnClickListener OnClickListener 的方法添加点击事件 所有控件都有一个OnClick事件 通过点击事件的监听可以实现点击

  • 吐血总结《Mysql从入门到入魔》，图文并茂

    文章目录 1 数据库操作 1 1显示数据库 1 2 创建数据库 1 3 使用数据库 1 4 查看当前数据库 1 5 删除数据库 2 表操作 2 1 创建表 2 2 更新表 2 2 1 添加列 2 2 2 删除列 2 3 查看表结构 2 4

  • CTF基本赛制与题型

    CTF简介 CTF的全称为Capture The Flag 即夺旗赛 CTF竞赛活动蓬勃发展 已成为了锻炼信息安全技术 展现安全能力和水平的绝佳平台 CTF号称计算机界的奥林匹克 CTF目标 CTF参赛队伍的目标为获取尽可能多的flag 参

  • 随机抽样一致性算法（RANSAC)示例及源代码

    作者 王先荣 大约在两年前翻译了 随机抽样一致性算法RANSAC 在文章的最后承诺写该算法的C 示例程序 可惜光阴似箭 转眼许久才写出来 实在抱歉 本文将使用随机抽样一致性算法来来检测直线和圆 并提供源代码下载 一 RANSAC检测流程 在

  • maven死活下载不了jar包的问题

    对应 问题6 选择适合自己的更新方式 通过排除法排除过的问题 1 idea版本问题 换了4个版本都有问题 2 电脑问题 差点重装 3 网络问题 换了手机网络一样不行 4 仓库 xml配置 或者maven插件版本的问题 试了很多版本 包括id

  • Spring Boot整合fastjson

    SpringBoot在构建RESTful风格的web服务时 默认使用的是Jackson作为JSON解析器 个人使用比较习惯的 json 框架是 fastjson 所以 spring boot 默认的 json 使用起来就很陌生了 所以很自然

  • Dynamics CRM: 使用setFilterXml来过滤需要在表单的Subgrid控件中进行展示的记录

    我们经常在表单中会用到subgrid控件 通常在一个表单中插入subgrid用来显示另外一个实体中的记录 而显示的内容我们是通过定义不同的视图来进行显示的 也可以通过javascript来进行一些控制 今天这篇博文我们使用另外一种方法来实现

  • KDUpdater 入门 (Qt5)

    KDTools 2 3 0 是KDAB公司的一个Qt4工具包 采用商业 GPL LGPL 三重授权 http www kdab com kdab products kd tools 该工具包中包含一个KDUpdater的组件 为Qt程序的自

  • t-SNE降维算法详解（附matlab代码）

    什么是t SNE t SNE的主要用途是可视化和探索高维数据 它由Laurens van der Maatens和Geoffrey Hinton在JMLR第九卷 2008年 中开发并出版 t SNE的主要目标是将多维数据集转换为低维数据集

  • 计算机视觉目标检测流程

    个人接触机器视觉的时间不长 对于机器学习在目标检测的大体的框架和过程有了一个初步的了解 不知道对不对 如有错误 请各位大牛不吝指点 目标的检测大体框架 目标检测分为以下几个步骤 1 训练分类器所需训练样本的创建 训练样本包括正样本和负样本

  • 线程池面试题

    线程池面试题 1 Executor 框架三大组成部分 2 ThreadPoolExecutor 类 线程池执行器 核心 2 1 ThreadPoolExecutor 3 个最重要的参数 2 2 ThreadPoolExecutor 饱和策略

  • 电机四象限运行

    电机四象限模式 前言 电机单象限模式 电机四象限模式 电机控制中的两象限和四象限程序 两象限程序 四象限程序 前言 在主机厂工作中常常提到四象限和两象限程序 对于电驱运行方式的四象限运行不是很熟悉 学习一下 做下笔记 以防止遗忘 个人理解

  • 成功解决 XXX--1.0-SNAPSHOT.jar中没有主清单属性

    问题描述 在运行使用maven打包的项目之后 运行项目发现主类没有找到 提示XXX 1 0 SNAPSHOT jar中没有主清单属性 问题原因 maven在打包时没有配置主类 解决方案 如果您使用的是Springboot框架 那么只需要在p

  • elasticsearch7.8.0 win指定jdk版本

    修改 elasticsearch env bat 文件 set JAVA HOME D elasticsearch 7 8 0 jdk if JAVA HOME set JAVA ES HOME jdk bin java exe set J

  • Python学习6.1类与对象

    一 类的定义 1 类的组成 类属性 实例方法 静态方法 类方法 eg 输入 class Student native place 云南 类属性 def init self name age self name name self age a

  • JUC之ReentrantLock

    一 背景 随着java内卷越来越厉害 校招经常会问一些源码知识 例如Synchronized的实现原理 ReentrantLock的实现原理 AQS的实现原理 ConCurrentHashMap的实现原理等等 如何能够灵活的应对呢 解决方案

  • STDC语义分割网络:BiSeNet的轻量化加强版（CVPR2021语义分割）

    今天和大家分享CVPR2021中语义分割领域的一篇论文 论文标题及作者如下图所示 论文下载地址 https arxiv org abs 2104 13188 代码即将开源 https github com MichaelFan01 STDC

  • 访问权限修饰符

    访问控制权限修饰符 Java中访问修饰符有四种 分别是public private protected和默认 1 public 表示公有的 对于一个public成员 可以被任何类访问 在不同的包中 所有类都可以访问 2 private 表示

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

    文章目录 HTML简介 常用标签 字体标签 段落标签p 注释标签 标题标签h 图片标签img 超级链接标签a 锚点标签 列表 阶段小结 表格 相关标签 合并行列 分组设置表格格式的标签 相关属性 其他标签 表单 表单主要控件和实例 表单其他

热门标签