javaweb---静态网页开发技术(1)

最新推荐文章于 2022-03-18 10:47:37 发布

小张哎！

最新推荐文章于 2022-03-18 10:47:37 发布

阅读量299

点赞数 1

本文链接：https://blog.csdn.net/qq_45746744/article/details/114576575

版权

1、笔记

在这里插入图片描述

2、实例

简单的一个例子

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Insert title here</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>我的校园</th>
                <th>校园生活</th>
                <th>我的家园</th>
            </tr>
            <tr>
                <th>计算中心</th>
                <th colspan="2" rowspan="4">
                    用户名：
                    <input type="text" name="name1">
                    <br>
                    密 码：
                    <input type="password" name="name2">
                    <br>
                    <button>确定</button>
                    <button>重置</button>
                </th>
            </tr>
            <tr><th>资环学院</th></tr>
            <tr><th>信息学院</th></tr>
            <tr><th>动科学院</th></tr>
        </table>
    </body>
</html>

其运行结果为：
在这里插入图片描述

复杂的
<补充>图像标签< img >：
常见的图片格式：jpg、gif、png、bmp等等
格式：

< img src="path" alt="text" title="text" width="x" height="y" />

其中：

src:图像的地址
alt：图像的替代文字
title：鼠标悬停提示文字
width：图像宽度
height：图像高度

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>山东农业大学</title>
    </head>
    <body>
        <table border="1" width="810px" background="image/sdau.jpg" height="60px">
        <tr>
            <img src="image/sdau.jpg" width="810px" height="300px">
        </tr>
            <tr >
                <th>我的校园</th>
                <th>校园生活</th>
                <th>我的家园</th>
            </tr>
        </table>
        <table border="1" width="810px" height="120px">
            <tr bgcolor="blue" height="60px">
                <th>计算中心</th>
                <th colspan="2" rowspan="4">
                    用户名：
                    <input type="text" name="name1">
                    <br>
                    密  码：
                    <input type="password" name="name2">
                    <br>
                    <button>确定</button>
                    <button>重置</button>
                </th>
            </tr>
            <tr bgcolor="blue" height="60px"><th>资环学院</th></tr>
            <tr bgcolor="blue" height="60px"><th>信息学院</th></tr>
            <tr bgcolor="blue" height="60px"><th>动科学院</th></tr>
        </table>
    </body>
</html>

其运行结果是：
在这里插入图片描述
如果需要将表格居中只需在table中加

style="margin: 0px auto;"
//完整版：
<table border="1" style="margin: 0px auto;">

小张哎！

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫