2022.1.19 Javaweb HTML入门精讲

最新推荐文章于 2024-08-05 22:35:13 发布

大厉害2021

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量714

点赞数

文章标签： html 前端 css3

本文链接：https://blog.csdn.net/qq_43416650/article/details/122573021

版权

HTML
在这里插入图片描述
基础标签

图片、音频、视频

完成案例课程表：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <tr align="center">
            <th colspan="2"  ></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr align="center">
            <td rowspan="4"  >上午</td>
            <td>早自习</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
            <td>语文</td>
            <td>英语</td>
        </tr>
        <tr align="center">
            <td>第1节</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>
        <tr align="center">
            <td>第2节</td>
            <td>物理</td>
            <td>物理</td>
            <td>物理</td>
            <td>物理</td>
            <td>物理</td>
        </tr>
        <tr align="center">
            <td>第3节</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
        <tr align="center">
            <td colspan="7">午休</td>
        </tr>
        <tr align="center">
            <td rowspan="3">下午</td>
            <td>生物</td>
            <td>生物</td>
            <td>生物</td>
            <td>生物</td>
            <td>生物</td>
            <td>生物</td>
        </tr>
        <tr align="center">
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
            <td>英语</td>
        </tr>
        <tr align="center">
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

    </table>
<hr>
</body>
</html>

结果如图
在这里插入图片描述

表单属性：
1.action:指定表单数据提交的URL
*表单项数据想要被提交，则必须指定其name属性
2.method:指定表单提交的方式
（1）get:默认值
*请求参数会拼接在URL后边
*url的长度有限制 4KB
（2）post:
*请求参数会在http请求协议的请求体中
*请求参数无限制的

    <form action="#">
        <input type ="text" name="username">
        <input type = "submit">
    </form>

网页提交后值如下
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <label for="yonghuming">  用户名：  </label>
         <input type ="text" name="username"  id="yonghuming"><br>
        <label for="mima">  密码：  </label>
         <input type = "password" name="password" id="mima"><br>
        性别：
        <input type="radio" name="gender" value="1" id="male">        <label for="male">  男  </label>
        <input type="radio" name="gender" value="2" id="female">        <label for="female">  女  </label>
        <br>
        爱好：
        <input type="checkbox" name="hobby" value="1"> 旅游
        <input type="checkbox" name="hobby" value="2"> 电影
        <input type="checkbox" name="hobby" value="3"> 游戏
        <br>
        头像：
        <input type="file"><br>
        城市：
        <select name ="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
        <br>
        个人描述：
        <textarea cols="20" rows="5" name="descption"></textarea>
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <br>
    </form>
</body>
</html>

效果如图：
在这里插入图片描述

大厉害2021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022.1.19 Javaweb HTML入门精讲

HTML基础标签图片、音频、视频完成案例课程表：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table border="1" cellspacing="0"> <t
复制链接

扫一扫