html中表格和表单嵌套以及css基础知识

最新推荐文章于 2024-08-06 10:02:08 发布

疋瓞

最新推荐文章于 2024-08-06 10:02:08 发布

阅读量6.2k

点赞数 2

分类专栏： web前端文章标签： css html css3

本文链接：https://blog.csdn.net/sz1125218970/article/details/128243668

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、html中表格和表单嵌套

注意嵌套过程中先写表单外标签，因为表单没有嵌套规则
表格的合并以及相关操作可以在嵌套中正常使用
总结：表格和表单的嵌套，代码中展示是表格被嵌套在了表单当中，在展示中看着是表单被嵌套在了表格当中。
代码

<!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>
    <!-- 因为表单没有嵌套规则，表格有嵌套规范，所以表单写在外面 -->
    <form>
        <table border="1" cellpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体布局</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td><input type="text" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset">
                    </td>
                </tr>
            </tBody>
        </table>
    </form>
</body>
</html>

结果展示

2、css基础

注意css书写样式有四种方法，其中常用的有三种：内联样式、内部样式、外部样式
外部样式需要通过link来把写在外部的css文件引入到html当中，下面的例子中css和html是写在同一文件夹当中的。
html代码

<!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">
    <link rel="stylesheet" href="./外部样式.css">
    <title>css基础</title>
    <style>
        div{width:50% ; height:100px ; background-color:red}
    </style>
</head>
<body>
    <h2>div介绍：</h2>
    <p>div可以理解为在网页中做一个区域划分的块</p>
    <h2>span介绍：</h2>
    <p>span是对文字进行修饰的内联</p>
    <h2>css基础：</h2>
    <p>写法：选择器{ 属性1:值1 ; 属性2:值2 }</p>
    <p>常见属性：width（宽）、height（高）、background-color（背景色）</p>
    <p>长度单位：px（像素）、%（百分比）</p>
    <h2>css样式引入方式：</h2>
    <p style="width:50% ; height: 50px; ; background-color:blue">1、内联样式</p>
    <div>2、内部样式</div>
    <span>3、外部样式</span><!-- 外部样式需要通过link标签来引入，link标签一般写在head中meta和title之间 -->
    <p>4、@import方式引入外部样式，一般不常用</p>
    <h2>css中颜色表示方法：</h2>
    <p>1.单词表示法：red···</p>
    <p>2.十六进制表示法：#000000，#ffffff</p>
    <p>3.rgb三原色表示法：rgb（255，244，233），取值范围：0~255</p>
    <h2>练习：创建一个100*100红色方块，一个200*150蓝色的方块</h2>
    <p style="width: 100px ; height:100px ; background-color: red"></p>
    <p style="width: 200px ; height:150px ; background-color: blue"></p>
</body>
</html>

css代码

span{width:50% ; height: 300px; ; background-color:purple}

结果展示

疋瓞

关注

2
点赞
踩
36

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录