HTML学习笔记(下)

来源：互联网发布：linux war包不自动解压编辑：程序博客网时间：2024/06/07 22:50

表格标签

<!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:边框宽度        - width:宽度        - height:高度        **tr的属性**        - align: 对齐方式        **td的属性**        - width:宽度        - 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>

其他

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

0 0