• HTML学习笔记(下)


    表格标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>表格标签</title>
    </head>
    <body>
    
        <!--
            ##表格标签
            ```html
            <table>
                <caption>表格名称</caption>
                <tr>
                    <th>一个单元格</th>
                    <th>一个单元格</th>
                </tr>
                <tr>
                    <td>一个单元格</td>
                    <td>一个单元格</td>
                </tr>
            </table>
            ``` 
            **table常见属性**
            - border:边框宽度
            - 宽度
            - height:高度
            **tr的属性**
            - align: 对齐方式
            **td的属性**
            - 宽度
            - height:高度
            - 合并单元格:(值的写法,合并几个单元格,值就写几)
                - 行合并:rowspan=""  将几行合并在一起,看上去是一列的几个单元格合并成了一个
                - 列合并:colspan=""  将几列合并在一起,看上去是一行的几个单元格合并成了一个
            **td和th**
            - 区别:
                - th中间的内容默认粗体居中显示
                - th一般用于做表头
    
         -->
        <!-- 一个简单的表格 -->
        <table border="1" width="50%" height="50%" bgcolor="gray">
            <caption>用户列表</caption>
            <tr align="center">
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr align="center">
                <td>1</td>
                <td>张三</td>
                <td></td>
            </tr>
            <tr align="center">
                <td>2</td>
                <td>李四</td>
                <td></td>
            </tr>
        </table>
        <!-- 合并单元格 -->
        <table border="1" width="50%" height="50%" bgcolor="gray">
            <caption>用户列表</caption>
            <tr align="center">
                <th>默认单元格</th>
                <th>默认单元格</th>
                <th>默认单元格</th>
            </tr>
            <tr align="center">
                <td colspan="3">这是一个列合并单元格(colspan="3")</td>
    
            </tr>
            <tr align="center">
                <td rowspan="2">这是一个行合并单元格(rowspan="2")</td>
                <td>默认单元格</td>
                <td>默认单元格</td>
            </tr>
            <tr align="center">
                <td>默认单元格</td>
                <td>默认单元格</td>
            </tr>
        </table>
    
        <!-- 表格嵌套 -->
        <table border="1">
            <caption>表格的嵌套</caption>
            <tr>
                <td rowspan="3">
                    <table>
                        <tr>
                            <td>2</td>
                            <td>2</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>2</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </table>
    
    </body>
    </html>

    表单

    这段我必须承认我非常无耻的抄了别人的笔记…

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>表单标签</title>
    </head>
    <body>
        <!--
            * 表单标签(**********)
                * 收集用户输入的数据
    
                * 表单的标签
                <form >
                    * form的属性
                        * action="表单的提交路径"
                            * http://www.baidu.com
                            * html页面
                        * method="提交方式(默认是get方式)"(面试题)
                            * form表单的提交方式有哪些?(get和post的区别)
                                * 答:form表单提交方式有很多,常用的有两种post和get
                                    * post和get提交方式的区别:
                                        * get方式会把参数列表显示在地址栏上,post方式不会(请求体)。
                                        * get方式说明网站安全级别较低,post安全级别较高。
                                        * get方式不支持大数据,post支持大数据。
    
                                * 推荐大家使用post方式。
    
                    * 用户输入的内容
                    <input type="类型" name="名称(必须要指定)" value="是否指定value属性" />
                        * name属性必须要指定,value可以看情况指定
    
                    * type="text"           普通的文本框
                        * name必须指定
    
                    * type="password"       密码框
                        * * name必须指定
    
                    * type="radio"          单选按钮
                        * name必须指定  value必须指定
                        * name的属性,值要相同
                        * 默认值:checked=checked或者true
    
                    * type="checkbox"       多选按钮
                        * name必须指定  value必须指定
                        * 默认值:checked=checked或者true
    
                    * type="reset"          重置:恢复到最初的状态 
                    * type="submit"         提交表单
                        * 点击提交后,地址栏发生了变化(?sex=on)
                        * 在普通的文本框上添加name属性 name="username"之后,点击提交,地址栏发生了变化(?username=haha&sex=on)
                            String str = "?username=haha&sex=on";
                        * ?username=zhangsan&password=123&sex=nan&love=zq   
    
                    * type="file"           选择文件        
                        * name属性指定
                    * type="hidden"         隐藏组件
                        * name指定 value指定    
    
                    * type="button"         按钮
                        * value="显示的文字"
                        * 和js(javascript)   绑定事件
    
                    * type="image"          图片
                        * 提交    引入外部的一个文件(图片)
    
                    * 声明选择框 
                        <select name="city">
                            <option value="bj"></option>
                            <option value="sh"></option>
                        </select>   
    
                    * <textarea>文本域
                        * rows="行"
                        * clos="列"  
                        * name属性指定
                        * selected="selected"   代表默认值
                </form>
         -->
    
         <form>
            输入姓名:<input type="text" name="username"/><br/>
            输入密码:<input type="password"/><br/>
            选择性别:<input type="radio" name="sex" value="male"/>男
                    <input type="radio" name="sex" checked="checked" value="femal"/>女<br/>
            选择爱好:<input type="checkbox" name="love" value="basketball"/>篮球
                    <input type="checkbox"/>足球
                    <input type="checkbox"/>冰球
                    <input type="checkbox"/>排球<br/>
            选择附件:<input type="file"><br/>
            隐藏组件:<input type="hidden" name="userID" value="001"><br/>
            选择城市:<select name="city">
                        <option>请选择</option>
                        <option value="wh">武汉</option>
                        <option value="hh">黑河</option>
                    </select>
                    <input type="reset"/>
                    <input type="submit"/><br/>     
                    <input type="button" value="test"/>
                    <input type="image" src="../imgs/tj.png" >
            个人简介:<textarea cols=10 rows="20"></textarea>
         </form>
    
    </body>
    </html>

    其他

    其他的忽略了…实在不感兴趣…

  • 相关阅读:
    高并发网络编程之epoll详解
    位操作实现加减乘除四则运算
    堆和栈的区别
    IT思想类智力题
    C/C++基础总结
    数据库总结
    面试网络总结
    Windows内存管理和linux内存管理
    面试操作系统总结
    数据结构与算法
  • 原文地址:https://www.cnblogs.com/thecatcher/p/5769720.html
Copyright © 2020-2023  润新知