HTML 跨行表单、a标签实现网站导航、实现表单内容

最新推荐文章于 2023-05-16 14:34:59 发布
最新推荐文章于 2023-05-16 14:34:59 发布
阅读量380 收藏
点赞数
文章标签： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Feng_Blue_/article/details/120367470
版权

 

详情代码如下： 

<head>
<body>
    <h1 width = '50%' style = "text-align:center;margin-left:25%;margin-right:25%;">跨行表格</h1>
<div style = "text-align:center;">
    <table border = "5" width = '50%' style = "text-align:center;margin: 0 25%">
        <tr>
            <td colspan="3">學生成績</td>
        </tr>
        <tr>
            <td rowspan="2">語文</td>
            <td>韓梅梅</td>
            <td>98</td>
        </tr>
        <tr>
            
            <td>李雷</td>
            <td>60</td>
        </tr>
        <tr>
            <td rowspan="2">數學</td>
            <td>韓梅梅</td>
            <td>99</td>
        </tr>
        <tr>
            <td>李雷</td>
            <td>61</td>
        </tr>
    </table>
</div>
</body>
</head>

运行结果如下：

利用a标签实现网站导航

详细代码如下：

<head>
<body>
    <h1>简单的网站导航</h1>
    <a href="http://www.baidu.com" target="_blank">百度</a><br />
    <a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a><br />
    <a href="http://www.mobiletrain.org/" target="_blank">千锋</a>
    <hr />
    <a href="http://www.baidu.com"><img src="E:\新建文件夹\网站图\baidu.png"> </a><br />
    <a href="https://www.bilibili.com/"><img src="E:\新建文件夹\网站图\Bili.png"> </a><br />
    <a href="http://www.mobiletrain.org/"><img src="E:\新建文件夹\网站图\qf.png"> </a>

</body>
</head>

运行结果如下：

 用户注册

<head>
    
<body width = '50%' style = "line-height:height;margin: 0 25%">
<h1 >用户注册</h1>
<form>
用户名: <input type="text" name = "username" style="line-height:height;margin: 0 6%"/><br />
密码: <input type="password" name = "password" style="line-height:height;margin: 0 10%"/><br />
确认密码: <input type="password"  name = "passwd" style="line-height:height;margin: 0 1.8%"/><br />

性别: <input type="radio" name = "n1" value="nan" />男 
          <input type="radio" name = "n1" value="nv"  />女<br />


爱好:<input type="checkbox" name = "div2.1" value="run"
style="line-height:height;margin: 0 2.5%"/>跑步
         <input type="checkbox" name = "div2.2" value="fly"/>翼装飞行
         <input type="checkbox" name = "div2.3" value="skating"/>花样滑冰<br />


生日:<select style="line-height:height;margin: 0 2%">
        <option>选择年份</option>
        <option>1991</option>
        <option>1992</option>
        <option>1993</option>
        <option>1994</option>
        <option>1995</option>
        <option>1996</option>
        <option>1997</option>
        <option>1998</option>
        <option>1999</option>
        <option>2000</option>
        <option>2001</option>
        <option>2002</option>
        <option>2003</option>
        <option>2004</option>
</select>年
<select>
        <option>选择月份</option>
        <option>一月</option>
        <option>二月</option>
        <option>三月</option>
        <option>四月</option>
        <option>五月</option>
        <option>六月</option>
        <option>七月</option>
        <option>八月</option>
        <option>九月</option>
        <option>十月</option>
        <option>十一月</option>
        <option>十二月</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>
</select>日<br />


注册协议:<textarea cols="25" rows="7">
欢迎注册，在您注册同时也代表同意看本协议：
1.
您充分理解并同意，因您违反本协议或相关服务条款的规定，导致或产生第三方主张的任何索赔、要求或损失，您应当独立承担责任；腾讯因此遭受损失的，您也应当一并赔偿。
2.
一旦有效期届满，将会自动失效。如相关游戏币、游戏装备及其他游戏道具等游戏物品没有标明使用期限，或者标明的使用期限为“永久”或其他具有与“永久”相同或类似意思的内容的（如“无限期”、“无限制”等），则其使用期限为自您获得该游戏物品之日起至该游戏终止运营之日止。
</textarea><br />


头像上传:<input type="file" /><br />

<input type = "button" value = "普通按钮">
<input type = "reset" value = "重置按钮">
<input type = "submit" value = "提交按钮">
</form>
</body>
</head>

<html>
    <body>
        <h1 style="color: blueviolet;text-align: center;">用户注册</h1>
        <table width = "50%" style="text-align: right;margin: 0% 35%">
            <form action="" method="POST" target="self" enctype="multipart/form-data">
                <tr>
                    <td>用户名:</td>
                    <td style="text-align: left;">
                        <input type="text" name = "username" value="输入用户名">
                    </td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td style="text-align: left;">
                        <input type="password" name = "password" >
                    </td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td style="text-align: left;">
                        <input type="password" name = "passwd" >
                    </td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td style="text-align: left;">
                        <input type="radio" name = "sex" value="1">男
                        <input type="radio" name = "sex" value="0">女
                    </td>
                </tr>
                <tr>
                    <td>爱好:</td>
                    <td style="text-align: left;">
                        <input type="checkbox" name = "like1" value="run">跑步
                        <input type="checkbox" name = "like2" value="fly">翼装飞行
                        <input type="checkbox" name = "like3" value="skating">花样滑冰
                    </td>
                </tr>
                <tr>
                    <td>生日:</td>
                    <td style="text-align: left;">
                        <select>
                            <option style="width: 10px;">请选择年份</option>
                            <option>1991</option>
                            <option>1992</option>
                            <option>1993</option>
                            <option>1994</option>
                            <option>1995</option>
                            <option>1996</option>
                            <option>1997</option>
                            <option>1998</option>
                            <option>1999</option>
                            <option>2000</option>
                            <option>2001</option>
                            <option>2002</option>
                            <option>2003</option>
                            <option>2004</option>
                        </select>年
                        <select>
                            <option style="width: 10px;">请选择月份</option>
                            <option>一月</option>
                            <option>二月</option>
                            <option>三月</option>
                            <option>四月</option>
                            <option>五月</option>
                            <option>六月</option>
                            <option>七月</option>
                            <option>八月</option>
                            <option>九月</option>
                            <option>十月</option>
                            <option>十一月</option>
                            <option>十二月</option>
                        </select>
                        <select>
                            <option style="width: 10px;">请选择日号</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>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>注册协议:</td>
                    <td style="text-align: left;">
                        <textarea name="bw" rows="5" readonly = "readonly">
欢迎注册，在您注册同时也代表同意看本协议：
1、
2、
3、
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td>头像上传:</td>
                    <td style="text-align: left;">
                        <input type="file" name = "up">
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">
                        <input type="button" value="普通按钮">
                    </td>
                    <td style="text-align: left;">
                        <input type="reset" value="重置按钮">
                        <input type="submit" value="提交按钮">
                    </td>
                </tr>
                <input type="hidden" name = "bzd" value="1231546">
            </form>
        </table>
    </body>
</html>

 

Feng_Blue_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html a标签 block,html的a标签借助display=block实现导航菜单功能
weixin_36176546的博客
06-20 1094
使用a标签实现导航菜单，a标签是css里的内联对象，不能像div这种块对象一样，可以设置标签的width和height。使用css的display属性，设置成block后，内联对象就变成了块对象，就能行div一样灵活设置了。如布布分享导航是：[首页] [影视专题] [最新电影] [大陆电影]等，实用a标签，代码如下：首页影视专题最新电影class="toptitle">大陆电影topti...
a标签(超链接到其他网址或者邮箱或者其他html文件)
07-03 5921
<!--a 标签:超连接到其他页面或者执行其他html文件--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--超链...
html中关于a标签的使用，#锚点，导航栏设计见解
谢先生的日记
03-30 762
一直在纠结怎么让控件显示或者隐藏的方法，这时候破天荒的想到一个解决方法，就是使用锚点进行传值，这样子就可以实现页面不刷新然后就可以进行控件的加载，但是一直困扰就是为什么点击两下才可以进行操作，于是我发起了提问：过程不怎么友好，还被怼了；后面没有解决问题，好在一个论坛上的大佬帮助，让我知道。href加载实在onclick之后； 当时问问题的帖子 那么还有什么方法可以解决呢，那就是运行js脚本，但是不...
CSS学习笔记-04 a标签-导航练习
weixin_39037804的博客
08-19 367
个人练习，各位大神勿笑 。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name...
新发现的好用网站导航
a840675982的专栏
03-27 869
<br />必去网址导航-让便利无处不在|2111年，你现在在你什么网址导航呢，什么，你还在用“好123，好360”那么你真的是OUT了，现在在这个信息不断更新的时代，如果不能时候走在信息的前沿，那么不久就会被社会淘汰，对于现在着处于有着满腔热血的80后，90后来说，每一天的每一个信息都有可能会改变一生，一个好的网站导航，就想黑夜的一盏明灯，必去导航就是你人生的“领路人”。必去网址导航
211_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
4. **前端开发**：这个模板不仅关注设计，还关注用户体验，意味着它可能包含JavaScript代码，用于添加交互性，如导航、动画效果、表单验证等。 5. **网页模板**：模板设计通常包括预定义的颜色方案、字体、图像和...
简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW个人网站制作成品 web网页制作与实现
08-10
- **多媒体元素**: 如`<video>`、`<audio>`标签用于嵌入视频或音频内容。 #### 2. CSS3 - **响应式布局**: 通过媒体查询调整不同屏幕下的样式，实现自适应布局。 - **Flexbox**: 提供了一种更高效的方式来布局、...
346_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
最新发布
08-02
- 栅格系统：如Bootstrap的网格系统，通过预定义的行(row)和列(column)实现响应式布局。 3. 移动端优化： - 触摸事件：HTML5支持touchstart、touchmove、touchend等触摸事件，适应触屏设备操作。 - 表单控件...
web前端期末大作业：基于HTML+CSS+JavaScript实现网上鲜花店网站设计(14页d
08-10
- **表单标签**: `<form>`、`<input>`、`<button>`等标签用于创建表单，便于用户提交数据，如登录、注册、评论等。 #### 2. CSS3样式设计 - **选择器**: 包括类选择器(`.classname`)、ID选择器(`#idname`)、伪类...
企业商业HTML5模板.zip
03-15
5. **响应式设计**：媒体查询（media queries）让网站可以根据设备的特性如屏幕尺寸调整布局，实现跨设备兼容。 6. **Flexbox和Grid布局**：Flexbox用于一维布局（如行或列），Grid则处理二维布局，这两种布局系统...
仅用a标签实现点击导航栏跳转到页面对应位置
amercury0818的博客
12-23 2654
a标签是最便捷的方式，不过没有下滑或者上滑的动画，是直接切换到指定位置的，适合新手
HTML如何在表单中添加链接,HTML 链接、表单【实用】
weixin_29296241的博客
06-11 902
这一章的核心是HTTPiframe 新开一个窗口用了它页面可能会卡...想嵌套页面的时候用(iframe默认 高度50 宽度100)【是可替换标签】第一种写法：第二种写法：name要和a一起用QQQQa 标签的 download 属性下载不加 download 也会下载 加和不加的区别：由HTTP响应决定：HTTP响应的是 Content-type:application/octet-stream...
HTML常用标签使用
Jackie_bupt的博客
06-09 420
1、  可定义文档中的分区或节，把文档分割为独立的、不同的部分。HTML页面通常通过来布局，划分不同的区块。 2、 段落标签，p 元素会自动在其前后创建一些空白。 3、 段内标签，行内元素，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 4、~ 标题。 定义最大的标题， 定义最小的标题。 5、 定义输入控件。根据不同的 type 属性值，输入字段拥有很多
html_css_购物界面侧边栏
weixin_45344430的博客
01-11 936
效果图 程序代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a {
html表格中加入导航栏,用HTML中的列表标签做个导航栏吧
weixin_42509720的博客
05-31 2495
我们在网上浏览的好多网页都有导航栏,它提供信息导航的功能,想知道它是怎么做出来的吗?首先要知道的:HTML中的列表标签都有那些呢?ul-li无序列表 ( 网页中显示的默认样式一般为：每项 li 前都自带一个圆点 )语法:文本文本2.ol-li有序列表(在网页中显示的默认样式一般为：每项 li 前都自带一个序号，序号默认从1开始)文本1文本2其实导航栏就是给列表标签设置CSS样式制作导航栏开始啦:第...
第三讲 html超链接和表格形式
Fiki515的博客
02-24 1625
1、超链接的表现形式：<a herf="" target="">超链接</a> 含义：通过使用超级链接，各个不同的网页就可以相互的导航和跳转 插入超级链接的标签 解释：（1）herf 引入跳转页面路径。包括：网址、相对路径、锚链接”#id值“； 网址<a href="网址">跳转网页</a> <a href="http://www.baidu.com">百度一下你就知道</a> 相对路径（本地文件） 相对路
声明式导航＜router-link＞：解决a标签自带的默认样式
YY的博客
11-30 4227
声明式导航原理
html中a标签锚点定位的运用
热门推荐
zgyhhygyh93的博客
09-22 3万+
点击此处到目标位置 目标位置
表格标签（table）的用法以及跨行跨列
weixin_72431184的博客
05-16 746
表格标签（table）的用法以及跨行跨列
泛微OA开发：HTML表单定制长度与功能实现教程
2. 隐藏表单边框和提示效果：文章提到如何实现表单元素的无边框外观，并在用户未输入内容时提供悬浮式的提示信息，提升界面美观度和易用性。 3. 签字节点的格式调整：着重介绍了如何调整HTML签字节点的布局，使其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值