前端基础-html（二）

码码大海
已于 2022-07-31 21:18:01 修改
阅读量91
点赞数
分类专栏：前端学习文章标签：前端 html
于 2022-07-31 21:16:50 首次发布
本文链接：https://blog.csdn.net/weixin_43254742/article/details/126090678
版权
前端学习专栏收录该内容
12 篇文章 0 订阅
订阅专栏
    021----table表格的相关属性
        <!-- 注释 -->
        <!--
            表格属性 
            1.宽度 width px,百分比
            2.高度 height
            3.边框 border
            4.边框颜色 bordercolor
            5.背景颜色 bgcolor
            6.水平对齐 align="left/right/center"
            7.cellspacing="单元格与单元格之间的间距"
            8.cellpadding="单元格与内容之间的空隙" 
        -->
        <table border="1"  width="500px"height="500px" bordercolor="red" bgcolor="yellow" align="center" cellspacing="50px" cellpadding="100px">
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
        <!-- 注意宽度比例 -->
        <table border="1"  width="50%"height="50%" bordercolor="red" bgcolor="yellow" align="center" cellspacing="50px" cellpadding="100px">
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
        <hr>
    022----行tr属性
        <!-- 注释 -->
        <!-- 022----行tr属性
            1.高度 height
            2.背景颜色bgcolor
            3.文字水平对齐 align="left/right/center"
            4.文字垂直对齐 valign="top/middle/bottom"
         -->
         <table bgcolor="yellow" width="50%" height="500px">
            <tr height="200px" bgcolor="red" align="center" valign="top">
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
         </table>
         <hr>
    023----单元格td属性
         <!-- 注释 -->
         <!-- 
            单元格td属性
            1.宽度 width
            2.高度 height
            3.背景颜色 bgcolor
            4.文字水平对齐 align="left/right/center"
            5.文字垂直对齐 valign="top/middle/bottom"
          -->
        <table>
            <tr bgcolor="red">
                <td width="200px">1</td>
                <td height="100px">2</td>
            </tr>
            <tr>
                <td bgcolor="green">3</td>
                <td align="center">4</td>
            </tr>
        </table>
        <hr>
    024----表格合并列colspan行和rowspan列
        <table border="1" width="500px" height="500px" align="center">
            <tr align="center">
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr align="center">
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr align="center">
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
        <!-- 注释 -->
        <!-- 
            colspan="数值"代表要合并几个单元格
            rowspan同理
        -->
        <table border="1" width="500px" height="500px" align="center" >
            <tr align="center">
                <td colspan="3">1</td>
                <!-- <td>2</td>
                <td>3</td> -->
            </tr>
            <tr align="center">
                <td rowspan="2">4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr align="center">
                <!-- <td>7</td> -->
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
        <hr>
    025----表格案例
        <!-- 表格示范 -->
        <table border="1" width="500px" height="260px"  align="center" cellspacing="0" >
            <tr  align="center" valign="middle">
                <td width="150px" >会员姓名</td>
                <td width="200px"></td>
                <td width="150px">出生日期</td>
                <td width="200px"></td>
            </tr>
            <tr  align="center" valign="middle">
                <td >身份证号</td>
                <td colspan="3"></td>
                <!-- <td></td>
                <td></td> -->
            </tr>
            <tr  align="center" valign="middle">
                <td>通信地址</td>
                <td colspan="3"></td>
                <!-- <td></td>
                <td></td> -->
            </tr>
            <tr  align="center" valign="middle">
                <td>联系电话</td>
                <td colspan="3"></td>
                <!-- <td></td>
                <td></td> -->
            </tr>
            <tr  align="center" valign="middle">
                <td>会员卡号</td>
                <td colspan="3"></td>
                <!-- <td></td>
                <td></td> -->
            </tr>
        </table>
        <hr>
    026---表单标签form标签
        <!-- 注释 -->
        <!-- 
            <form method="get/post" action="向何处发送表单数据">
                <input/>
                A.属性type定义输入框的类型
                    a.文本框type="text" 密码框type="password"
                    b.提交框type="submit",和<button>提交按钮</button>一样
                    c.按钮框type="button"单纯的按钮
                    d.重置框type="reset"清空的效果
                B. 属性placeholder描述输入字段预期值的简短的提示信息，兼容到IE8以上
                C.属性name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
                D.属性value
            </form>
         -->
        <form action="https://www.baidu.com/" >
            用户信息：<input type="text" placeholder="请输入你的名字" name="username"><br>
            密码：<input type="password" placeholder="请输入你的密码" name="mima"><br>
            <input type="submit" value="登录">
            <!-- 提交信息到action指定的地址 -->
            <!-- 提交之后会发现百度网址后面有问号 -->
            <!-- 接着添加用户和密码name属性，返回重新登录，会发现网址多了用户和密码的值
            https://www.baidu.com/?username=admin&mima=12345 
            -->
            <!-- 解释form当中method的post和get的区别 -->
            <!-- 1.get是从服务器上获取数据，post是向服务器传输数据。
                 2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到，
                    post是通过HTTP POST机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。
                    用户看不到这个过程。
                 3.对于get方式，服务器端用request.querystring获取变量的值，对于post方式，服务器端用request.form获取提交的数据。
                 4.get传送的数据量较小，不能大于2KB，post传送的数据量较大，一般被默认为不受限制，但理论上，iis4(互联网信息服务)中
                    最大量为80KB,iis5中为100KB. 
                 5.get安全性非常低，post安全性高，但是执行效率却比post方法好。
            -->    
        </form>
        <form action="https://www.baidu.com/" method="post">
            用户信息：<input type="text" placeholder="请输入你的名字" name="username"><br>
            密码：<input type="password" placeholder="请输入你的密码" name="mima"><br>
            <input type="submit" value="登录">
        </form>
        <!-- 
            当你在method属性输入get的值时候网址是“https://www.baidu.com/?username=aaa&mima=12”，正常登录
            当你在method属性输入post的值时候网址是"https://www.baidu.com/search/error.html"，页面报错
            可以验证解释form当中method的post和get的区别第五点    
        -->
        <form action="https://www.baidu.com/" method="get">
            用户信息：<input type="text" placeholder="请输入你的名字" name="username"><br>
            密码：<input type="password" placeholder="请输入你的密码" name="mima"><br>
            <input type="submit" value="登录">
            <button type="reset">重新输入密码</button>
        </form>
        <hr>