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

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>Documenttitle>
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">    <input type="reset">
                    td>
                tr>
            tBody>
        table>
    form>
body>
html>
  • 结果展示
    html中表格和表单嵌套以及css基础知识_第1张图片

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>
    <p>4、@import方式引入外部样式,一般不常用p>
    <h2>css中颜色表示方法:h2>
    <p>1.单词表示法:red···p>
    <p>2.十六进制表示法:#000000,#ffffffp>
    <p>3.rgb三原色表示法:rgb(255,244,233),取值范围:0~255p>
    <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}
  • 结果展示
    html中表格和表单嵌套以及css基础知识_第2张图片

你可能感兴趣的:(web前端,css,html,css3)