前端HTML之基础扫盲

最新推荐文章于 2024-07-12 23:25:33 发布

xyk:

最新推荐文章于 2024-07-12 23:25:33 发布

阅读量1.3k

点赞数 2

分类专栏： JavaEE初阶文章标签：前端 html 开发语言

本文链接：https://blog.csdn.net/asad21654864/article/details/130794802

版权

JavaEE初阶专栏收录该内容

30 篇文章 5 订阅

订阅专栏

博主简介：想进大厂的打工人
博主主页：@xyk:
所属专栏: JavaEE初阶

本篇文章将讲解HTML的基础，认识HTML的基本结构，学会使用常用的HTML标签，愿诸位喜欢

一、创建第一个HTML程序

1.1 创建一个HTML文件并运行

首先，找一个地方新建一个文件夹，文件夹里面创建一个新的文件.html文件

其次，打开文档写一段代码

双击运行查看

前端代码的运行环境就是浏览器, 前端中浏览器就相当于Java中JVM这样的角色, 浏览器可以解析html, css, js等代码中的内容, 根据代码去构造前端页面.

二、HTML基本标签介绍

2.1 HTML是什么？

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言

特点：

HTML的代码是由“标签”构成的~
一个标签通常是成对出现的, 比如是开始标签, 结束标签, 中间中方的是标签的内容; 少数标签是可以只有一个开始标签的, 即单标签.
标签是可以嵌套的, 一个标签的内容可以是其他一个或者多个标签, 此时这些标签就构成了一个 “树形结构”, 标签具有后代关系或者兄弟关系.
可以在开始标签中给标签赋予属性(Attribute), 属性相当于是键值对, 可以有一个或者多个.

比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

用记事本写代码是没有语法高亮和关键字补全的, 可以使用vsCode来进行前端代码的编写，对于HTML，css，js不用安装其他的东西~~像上面直接在记事本中写出来的html代码结构是不规范的！

那么上面这个例子，可以一键生成，在vsCode中输入 !+Tab 可以自动生成一个HTML模板：

细节解释：

代码中的第一行<!DOCTYPE html>是在声明文档的类型, 表示当前的文档是一个HTML5的文件.
<html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面".
<meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并
设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

2.2 注释标签

语法格式：

<!-- 注释内容 -->

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是一个html注释 -->
    hello
</body>
</html>

执行结果:

注释虽然不会在网页展示, 但是在浏览器查看网页源代码是可以看到注释的.

在vsCode中可以使用快捷键ctrl+/快速进行注释与非注释之间的转换.（与idea相同）

2.3 标题标签

一共分为6级标题, 数字越大, 则字体越小

语法格式：

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

执行结果：

标题标签每个标签都是独占一行的, 和代码的编写无关.

2.4 段落标签

HTML中使用p标签表示段落, 每一个p标签都独占一行, 段落之间有一个明显的段落间距.

语法格式：

<p>内容</p>

代码示例：

<p>
  第一段: Lorem, ipsum dolor sit             amet consectetur adipisicing elit.
  Nihil eligendi rem, ab suscipit velit tenetur, doloribus consectetur iste saepe voluptate quia repudiandae doloremque?
  Hic sequi laboriosam incidunt cumque dolor distinctio.
<p>
<p>
  第二段: Lorem, ipsum dolor sit                amet consectetur adipisicing elit.
  Nihil eligendi rem, ab suscipit velit tenetur, doloribus consectetur iste saepe voluptate quia repudiandae doloremque?
  Hic sequi laboriosam incidunt cumque dolor distinctio.
<p>
<p>
  第三段: Lorem, ipsum dolor sit        amet consectetur adipisicing elit.
  Nihil eligendi rem, ab suscipit velit tenetur, doloribus consectetur iste saepe voluptate quia repudiandae doloremque?
  Hic sequi laboriosam incidunt cumque dolor distinctio.
<p>

执行结果：

2.5 换行标签

br是一个单标签(不需要结束标签), 表示换行.

语法格式:

<br/>或者<br>

代码示例:

<p>
  第一段: Lorem, ipsum dolor sit amet consectetur adipisicing elit.
<br><br><br> <!--表示换三行-->
  Nihil eligendi rem, ab suscipit velit tenetur, doloribus consectetur iste saepe voluptate quia repudiandae doloremque?
  Hic sequi laboriosam incidunt cumque dolor distinctio.
<p>

执行结果：

<br/>是规范写法
<hr>是分割线标签

2.6 格式化标签

文本格式化常见的有四个, 即加粗, 倾斜, 删除线, 下划线.

<!-- 加粗 -->
<strong>变粗</strong>
<b>变粗</b>
<!-- 倾斜 -->
<em>倾斜内容</em>
<i>倾斜</i>
<!-- 删除线 -->
<del>删除线</del>
<s>删除线</s>
<!-- 下划线 -->
<ins>下划线</ins>
<u>下划线</u>

执行结果：

2.7 图片标签

图片标签用到了img标签(单标签)

标签必须要带有src属性,值为图片的路径

img标签的常用属性:

src: 图片的路径路径.
alt: 图片获取失败后显示的内容.
title: 鼠标放到图片上有提示的文本信息.
width/height: 设置图片宽度/高度, 当width与height只设置一个时, 图片会等比例缩小或放大.
id: 给标签一个唯一的标识, HTML中任何元素都可以指定id, 但每个元素的id不能相同.

语法格式:

<img src="路径" alt="替换文本">

代码示例:

使用相对路径, html的工作目录就是该html文件所在的目录, 这里的图片和代码文件在同一路径下.

 <img src="../banner1.jpg" alt="">

使用绝对路径:

<img src="C:\htmlCode\222.jpg" alt="">

使用网络路径:

<img src="https://ts1.cn.mm.bing.net/th/id/R-C.8b96de5dd4275e9771909f6f723e4495?rik=A5aBoh1lF5xAtw&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f5%2ff8%2f94aef1bb7c.jpg&ehk=NJFosBIGH%2bfrABGf8o7oolxaGT2DSu8sTkGlieLYbEs%3d&risl=&pid=ImgRaw&r=0" alt="">

如果想要为图片配上一句话, 可以使用title标签, 这样在鼠标放上去就能显示文本.

最后常用的属性就是使用widht和height来设置图片的大小了, 常用单位为px(像素),

<img src="https://ts1.cn.mm.bing.net/th/id/R-C.8b96de5dd4275e9771909f6f723e4495?rik=A5aBoh1lF5xAtw&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f5%2ff8%2f94aef1bb7c.jpg&ehk=NJFosBIGH%2bfrABGf8o7oolxaGT2DSu8sTkGlieLYbEs%3d&risl=&pid=ImgRaw&r=0" alt=""
   title="这是一个美女" width="300px" height="300px">

2.8 超链接标签

“链接”(link)一般是一种快捷方式, “超链接” 就是跳转到的页面可以是当前网站之外的 ,标签为a, 属于行内元素常用属性有href表示链接地址, 如果将href属性的值给做#就表示一个空链接, 点了也是不会跳转的.

1.外部链接 href为其他网站的地址，写绝对路径

     <a href="http://www.baidu.com">百度</a>

还有一个属性是target, 值一般写作_block, 表示在一个新标签页打开链接而不会替换原有的页面, 同时如果把图片放在a标签里面, 点击图片也能跳转链接.

<a href="https://www.baidu.com/" target="_blank"></a>

2.内部链接 href为网站内部页面之间的链接，写相对路径

<!-- 这两个文件在同一个目录下 -->
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

3. 下载链接：href对应的路径是一个文件（可以使用zip文件）

<a href="test.zip">下载文件</a>

4. 网页元素链接：就是图片链接

<a href="http://www.sogou.com">
    <img src="rose.jpg" alt="">
</a>

点击完成了跳转

5. 锚点链接: 可以快速定位到页面中的某个位置.

语法上可以使用使用id属性在某一个标签位置插入一个锚点, a标签在href中给出锚点名即可, 此时, 点击锚点链接就会跳到锚点的位置.

代码示例:

<a href="#one">第一张</a>
    <a href="#two">第二张</a>
    <a href="#three">第三张</a>
    <p id="one">
    第一 <br/>
    第一 <br/>
    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.8b96de5dd4275e9771909f6f723e4495?rik=A5aBoh1lF5xAtw&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f5%2ff8%2f94aef1bb7c.jpg&ehk=NJFosBIGH%2bfrABGf8o7oolxaGT2DSu8sTkGlieLYbEs%3d&risl=&pid=ImgRaw&r=0">
    ...
    </p>
    <p id="two">
    第二 <br/>
    第二 <br/>
    ...
    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.8b96de5dd4275e9771909f6f723e4495?rik=A5aBoh1lF5xAtw&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f5%2ff8%2f94aef1bb7c.jpg&ehk=NJFosBIGH%2bfrABGf8o7oolxaGT2DSu8sTkGlieLYbEs%3d&risl=&pid=ImgRaw&r=0">
    </p>
    <p id="three">
    第三 <br/>
    第三 <br/>
    ...
    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.8b96de5dd4275e9771909f6f723e4495?rik=A5aBoh1lF5xAtw&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f5%2ff8%2f94aef1bb7c.jpg&ehk=NJFosBIGH%2bfrABGf8o7oolxaGT2DSu8sTkGlieLYbEs%3d&risl=&pid=ImgRaw&r=0">
    </p>

点第几张就跳到第几张的图片了~~

<!---禁止 a 标签跳转:---> 
<a href="javascript:void(0);"> 或者 <a href="javascript:;">
    <!--后续再了解也无妨-->

2.9 表格标签

表格标签有一组标签配合使用.

table: 表示整个表格.
tr: 表示表格中的一行.
td: 表示一行中的一个单元格
th, 表示表头(第一行)中的单元格, 会居中并加粗.
thead，表示表格的头部部分，比th范围大。
tbody，表示表格主体部分.

table包含tr, tr包含td或者th.

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸

代码举例：

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
     height="500">
     <tr>
     <td>姓名</td>
     <td>性别</td>
     <td>年龄</td>
     </tr>
     <tr>
     <td>张三</td>
     <td>男</td>
     <td>10</td>
     </tr>
     <tr>
     <td>李四</td>
     <td>女</td>
     <td>11</td>
     </tr>
     </table>

单元格之间的合并：（给单元格标签添加属性）

行合并rowspan=“n”
列合并colspan=“n”

步骤：
1. 先确定跨行还是跨列
2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
3. 删除的多余的单元格

代码举例：

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
     height="500">
     <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        </tr>
        <tr>
        <td>张三</td>
        <td colspan="2">男</td>
        </tr>
        <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
        </tr>
     </table>

2.10 列表标签

列表主要分为有序列表, 无序列表和自定义列表；

无序列表使用标签ul来表示, 有序列表使用标签ol来表示, 无序列表和有序列表里面每行的内容都使用li来表示;

自定义列表使用dl来表示, 可以使用dt设置一个小标题, 列表里面每行的内容使用dl来表示.

<h3>无序列表</h3>
<ul>
    <li>Java</li>
    <li>Pychon</li>
    <li>Go</li>
    <li>C语言</li>
    <li>C++</li>
</ul>
<h3>有序列表</h3>
<ol>
    <li>Java</li>
    <li>Pychon</li>
    <li>Go</li>
    <li>C语言</li>
    <li>C++</li>
</ol>
<h3>自定义列表</h3>
<dl>
    <dt>编程语言</dt>
    <dd>Java</dd>
    <dd>Pychon</dd>
    <dd>Go</dd>
    <dd>C语言</dd>
    <dd>C++</dd>
</dl>

2.11 表单列表

分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签.

input标签是一个单标签常用属性有下面几个:

type: 这个属性必须有, 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给input起了个名字, 尤其是对于单选按钮, 具有相同的name才能多选一.
value: input 中的默认值.
checked: 默认被选中(用于单选按钮和多选按钮).
maxlength: 设定最大长度.

<h1>表单</h1>
<form action="https://www.baidu.com">
    <h2>姓名</h2>
    <input type="text">
    <h2>密码</h2>
    <input type="password">
    <h2>性别</h2>
    <input type="radio" name="sex">男<br/>
    <input type="radio" name="sex">女<br/>
    <h2>爱好</h2>
    <input type="checkbox">吃<br/>
    <input type="checkbox">喝<br/>
    <input type="checkbox">唱<br/>
    <input type="checkbox">玩<br/>
    <input type="checkbox">跑<br/>

    <input type="button" value="俺只是一个普通按钮"><br/>
    <input type="submit" value="提交按钮"><br/>
    <input type="reset" valu="清空按钮"><br/>
    <h2>选择文件</h2>
    <input type="file">
</form>

1. type属性的值为text时表示是一个文本框, 值为password表示是一个密码框.

2.type属性的值为radio表示一个单选框, 对于单选框需要加个name属性, name属性相同的单选框, 值之间是互斥的, 只能选一个.还可以使用checked属性增加一个默认选项的功能, 比如默认选择男.

还可以使用label标签来实现点击文本也能选中的功能, 通过给for属性赋予文本输入框的id, 这样就指定了是为哪一个文本框提供了选中功能.

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男</label> <input id="male" type="radio" name="sex">
id与name的区别：

id是标签的身份证，每个标签都不一样
name是标签的区分或者是不强大的身份标识，标签之间可以重复

3.type属性的值为checkbox表示一个复选框, 也可以设置checked属性为checked表示默认选项, 搭配label标签等.

4.type属性的值为button表示是一个普通按钮, submit表示是一个提交按钮, reset表示是一个提交按钮.

普通按钮一般需要搭配JS使用, 比如这里使用JS中的一个函数alert, 功能是弹出一个对话框显示文本内容.提交, 清空按钮都必须放到form标签内, 提交按钮点击后就会尝试给服务器发送, 清空按钮点击后会将form内所有的用户输入内容重置

5.如果需要选择文件, 上传文件, 可以设置type属性为file

6.

form起始标签添加属性action=“地址” method=“get”，代表提交到哪个地址（网络地址，本地地址）

<form action="https://www.baidu.com"> ...... </form>
method默认是get

2.12 select标签

select标签可以实现下拉菜单功能, 一个option表示一项菜单, option中也可以定义selected="selected"表示默认选中.

<select>
    <option selected="selected">--请选择年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
    <option>其他...</option>
</select>

2.13 文本标签

textarea标签对应的是可定制大小的文本框

<h2>备注</h2>
<textarea rows="3" cols="50">
   默认文本
</textarea>

2.14 无语义标签div与span

无语义标签有两个, 分别div标签和span标签, 没有特定的含义, div默认是独占一行的块级元素, 而span默认是不独占一行的行内元素.

代码示例：

<div>
    姓名：
    <input type="text">
</div>
<div>
    密码：
    <input type="password">
</div>
<div>
    性别：
         <input type="radio" name="sex">男
    <input type="radio" name="sex">女
</div>
<div>
    爱好：
    <input type="checkbox" id="1">吃
    <input type="checkbox">吃
    <input type="checkbox">吃
    <input type="checkbox">吃
    <input type="checkbox">吃
</div>

span，不会与其他span进行分割，还是在同一行

<span>1234</span>
    <span>4567</span>

三、HTML特殊字符

有些特殊的字符在html中不能直接表示出来，例如：

空格：&nbsp
小于号：&lt
大于号：&gt
按位与：&amp

四、HTML案例

4.1 简历案例

页面：

代码：

<!DOCTYPE html>
<html lang="en">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简历</title>
        <style>
            .one {
                width: 600px;
                height: 1500px;
                border-style: solid;
            }
            img{
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body class="one">
        <h1>xyk:的简历</h1>
    <!--基本信息-->
    <div>
        <h2>基本信息</h2>
        <img src="C:\Users\86180\Pictures\微信图片_20230523171510.jpg" alt="证件照">
        <p>求职意向: Java开发工程师, 测试开发工程师</p>
        <p>联系电话: 1008611</p>
        <p>邮箱: 1234567891@qq.com</p>
        <p>个人博客: <a href="https://blog.csdn.net/">CSDN</a></p>
        <p>gitee: <a href="https://gitee.com/">https://gitee.com</a></p>
    </div>
    <!--教育背景-->
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>2010 - 2012 幼儿园 幼儿园</li>
            <li>2012 - 2017 小学 小学</li>
            <li>2017 - 2019 中学 初中</li>
            <li>2019 - 2021 中学 高中</li>
            <li>2021 - 2025 大学 软件工程 本科</li>
        </ol>
    </div>
    <!--专业技能-->
    <div>
        <h2>专业技能</h2>
        <ul>
            <li>Java 基础语法扎实, 已经刷了800道Leetcode题.</li>
            <li>常见数据结构都可以独立实现并熟练应用.</li>
            <li>熟知计算机网络理论,并且可以独立排查常见问题.</li>
            <li>掌握Web开发能力,并且独立开发了学校的留言墙功能.</li>
        </ul>
    </div>
    <!--我的项目-->
    <div>
        <h2>我的项目</h2>
        <ol>
            <li>
                <h3>留言墙</h3>
                <p>开发时间：2023年9月 到 2023年12月</p>
                <p>
                    功能介绍:
                    <ul>
                        <li>支持留言发布</li>
                        <li>支持匿名留言</li>
                    </ul>
                </p>
            </li>
    
            <li>
                <h3>学习小助手</h3>
                <p>开发时间：2023年9月 到 2023年12月</p>
                <p>
                    功能介绍:
                <ul>
                    <li>支持错题检索</li>
                    <li>支持同学探讨</li>
                </ul>
                </p>
            </li>
        </ol>
    </div>
    <!--其他信息-->
    <div>
        <h2>个人评价</h2>
        <p>在校期间,学习成绩优良,多次获得奖学金.</p>
    </div>
    </body>
    </html>

4.2 简历填写案例

页面：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <h3>请填写简历信息</h3>
    <meta charset="UTF-8">
    <title>简历填写</title>
    <style>
        .one {
            width: 510px;
            height: 750px;
            border-style: solid;
        }
    </style>
</head>
<body class="one">
    <table>
        <tr>
            <td>
                <label for="name">姓名</label>
            </td>
            <td>
                <input type="text" id="name">
            </td>
        </tr>

        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name='1' id="male" checked="checked">
                <label for="male"><img src="" alt="" width="20px">男</label>
                <input type="radio" name = '1' id="female">
                <lable for="female"><img src="" alt="" width="20px">女</lable>
            </td>
        </tr>

        <tr>
            <td>出生日期</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2003</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
            </td>
        </tr>
        
        <tr>
            <td>就读学校</td>
            <td>
                <input type="text">
            </td>
        </tr>

        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox" id="forntend">
                <label for="forntend">前端开发</label>
                <input type="checkbox" id="backend">
                <label for="backend">后端开发</label>
                <input type="checkbox" id="pa">
                <label for="pa">测试开发</label>
                <input type="checkbox" id="op">
                <label for="op">运维开发</label>
            </td>
        </tr>

        <tr>
            <td>掌握的技能</td>
            <td>
                <textarea cols="53" rows="10"></textarea>
            </td>
        </tr>

        <tr>
            <td>项目经历</td>
            <td>
                <textarea cols="53" rows="10"></textarea>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="radio" id="lisence">
                <label for="lisence">我已仔细阅读过公司的招聘要求</label>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <h3>请应聘者确认</h3>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽早去公司实习</li>
                    <li>能接受公司的加班文化</li>
                </ul>
            </td>
        </tr>

        <tr>
            <td>

            </td>
            <td>
                <button onclick="alert('提交成功!')">提交</button>
            </td>
        </tr>
    </table>
</body>
</html>