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>

其他

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

原文地址:https://www.cnblogs.com/thecatcher/p/5769720.html