java表格按钮 javaweb表格

转载

漫步云端的猪 2024-02-18 20:34:36

文章标签 java表格按钮 html css java web 文章分类 Java 后端开发

文章目录

前言
一、表格标签
二、视频和音频标签
三、网页结构分析
四、表单标签
五、iframe内嵌框架
总结

前言

　　本文介绍了HTML常用标签，表格标签、视频和音频标签、表单标签以及iframe内嵌框架等，对HTML网页结构进行分析。

一、表格标签

　　使用表格标签，其功能简单通用，结构稳定，是基本结构，实现单元格的跨行和跨列。
示例如下：

<!--表格table
行tr
列td
border：宽度
-->
<table border="1px">
    <tr>
        <!-- colspan跨列-->
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <!--<td>1-4</td>-->
    </tr>
    <tr>
        <!--rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <!--<td>3-4</td>-->
    </tr>
</table>

浏览器展示：

java表格按钮 javaweb表格_html

二、视频和音频标签

<!--视频和音频
    src：资源路径
    controls：控制条
    autoplay：自动播放
    -->
<video src="resource/dulante.mp4" controls autoplay></video>
<audio src="resource/老孟打赌.m4a" controls autoplay></audio>

用video和audio处理视频和音频。

三、网页结构分析

　header:标题头部区域的内容
　footer：标注脚部区域的内容
　section：web页面中的独立的区域
　article：独立的文章的内容
　aside:相关内容和引用
　nav：导航类辅助内容

四、表单标签

表单：
action：表单提交的位置，以后这个位置写的就是我们的服务端的地址
methon:post,get提交方式
get提交方式，我们可以在我们的url中看到我们的信息，不安全，不高效
post：比较安全，可以传输大文件

<form action="表格标签练习.html" method="get">
    <p>名字：<input type="text" name="usename"></p>
    <p>密码：<input type="password" name="password"></p>

１．单选文本框

<!--单选文本框
     type=redio
        value：单选框的值
        name：表示我们分的组
        checked：默认选中
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex">女
    </p>

２．多选框

<p>爱好：
        <input type="checkbox" value="打篮球" name="hobby" />打篮球
        <input type="checkbox" value="爱姣姣" name="hobby" checked/>爱姣姣
        <input type="checkbox" value="打游戏" name="hobby" />打游戏
        <input type="checkbox" value="吃大餐" name="hobby" />吃大餐

    </p>

３．下拉框

<!--下拉框
         value：我们后台接收的值
         selected：默认选中
    -->
    <p>国家：
        <select name="list">
            <option value="c">中国</option>>
            <option value="u" selected>美国</option>>
            <option value="e">英国</option>>
            <option value="j">日本</option>>
        </select>
    </p>

４．文本域

<!--文本域
             textarea
             cols：列
             rows：行
        -->
        <p>反馈信息：
            <textarea name="textarea" cols="100" rows="2">反馈</textarea>
        </p>

５．文件上传

<!--文件上传
    name：属性
    -->
    <p>
        <input type="file" name="files"/>文件
    </p>

６．邮箱验证

<!--邮箱的验证-->
    <p>邮箱：
        <input type="email" name="email"/>
    </p>

７．URL的验证

<!--URL的验证-->
    <p>网站：
       <input type="url" name="url"p>
    </p>

８．滑块的标签

<!--滑块的标签-->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="10"/>
    </p>

９．搜索框

<!--搜索框-->
    <p>搜索：
        <input type="search" name="search"/>
    </p>

１０．增加鼠标的可用性

<!--增加鼠标的可用性-->
    <label for="mark">点我
        <p>搜索：
            <input type="search" name="search" id="mark">
        </p>
    </label>

１１．提交和重置

<!--提交和重置-->
    <input type="submit">
    <input type="reset">

表单标签中的应用：
　　　　　　　　　　只读：readonly
　　　　　　　　　　隐藏：hidden
　　　　　　　　　　禁用：disabled

浏览器展示如下：

java表格按钮 javaweb表格_css_02

五、iframe内嵌框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内嵌框架</title>
</head>
<body>
<!--<iframe src="https:www.baidu.com" frameborder="0"-->
<!--      width="800px" height="800px"></iframe>-->
<iframe src="https:www.baidu.com" name="hello" frameborder="0" width="800px" height="800px"></iframe>
<a href="表格标签练习.html" target="hello">点击跳转</a>
</body>
</html>