前端学习笔记，HTML常用标签02

来源：互联网发布：数据库基础编辑：程序博客网时间：2024/05/21 12:50
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>HTML常用标签2</title>        </head>    <body>        <p>table是表格</p>        <table border="" cellspacing="2" cellpadding="10"  bgcolor="aqua" align="center">            <caption><h2>caption用于表示表头</h2> </caption>            <tr>                <th>th用于表示，表格的标题</th>                <th>th的用法和td一样</th>            </tr>            <tr>                <td>tr用于表示行</td>                <td>一个table标签 有几个tr，表示有几行</td>            </tr>            <tr>                <td>td表示列</td>                <td>一个tr里有几个td，表示有几列</td>            </tr>        </table>        <p><b>table标签属性</b></p>        <p> border="1" 设置表格边框的宽度为1pixel(像素)</p>        <p>width="500" 设置表格宽度为500pixel</p>        <p>height="500"设置表格高度为500pixel </p>        <p>cellspacing="2" 设置单元格之间的距离为2pixel </p>        <p>cellpadding="10" 设置文字距单元格边框的距离</p>        <p>bgcolor="red" 设置表格的背景颜色</p>        <p>align="center" 设置对齐方式,表格相对于父容器的位置 如right,left</p>                                <p  align="center">colspan Table</p>         <table  border="1" width=""  height=""                    cellspacing="0" cellpadding="50"                    align="center" bgcolor="green"                                       >                      <tr >                         <td colspan="2">td属性colspan="2"</td>                         <td></td>                         <td></td>                         <!--<td></td>-->                     </tr>                     <tr >                         <td colspan="3">td属性colspan="3"</td>                         <td></td>                           <!--<td></td>                           <td></td>-->                     </tr>                      <tr >                         <td colspan="4">td属性colspan=4 </td>                           <!--<td></td>                         <td></td>                         <td></td>-->                     </tr>                      <tr >                         <td></td>                         <td></td>                         <td></td>                         <td></td>                     </tr>                </table>                <p>clospand 横向合并  需要删除 本行（ tr） 里的td 否则横向会超出 ，如：有4列  td clospan="4",则此行（tr）里只需要一个td,colspan="3",则此行（tr）里需要2个td</p>                                                <p align="center">rowspan Table</p>                 <table  border="1" width=""  height=""                    cellspacing="0" cellpadding="50"                    align="center" bgcolor="green">                      <tr >                         <td></td>                         <td></td>                         <td></td>                         <td rowspan="2">tr1 td4 rowspan="2"</td>                     </tr>                     <tr >                         <td rowspan="2">tr2  td1 rowspan="2"</td>                         <td rowspan="3">tr2 td2 rowspand="3"</td>                         <td></td>                         <!-- 删除掉此<td></td> -->                     </tr>                      <tr >                         <!-- 删除掉此<td></td> -->                         <td></td>                         <td></td>                     </tr>                      <tr >                         <td></td>                         <td></td>                         <td></td>                     </tr>                </table>                <h2>form标签，表单</h2>                                <form action="test.php" method="post" >                                        <fieldset>                        <legend>legend标签 用于设置表单名称</legend>                        <p>input标签 type="text" 文本<input type="text"  name="un" maxlength="15" /> </p>                        <p>input标签 type="password" 密码<input type="password"  name="pd" maxlength="10" /> </p>                        <p>input标签 type="radio" 单选   在实现单选效果一定要给几个控件设置相同的名称                            <input type="radio"  name="gender" value="m" checked="checked"/>男                            <input type="radio"  name="gender" value="w" />女                        </p>                                                <select>                            <option>北京</option>                            <option>北京2</option>                            <option>北京3</option>                            <option selected="selected">selected=“selected” 设置默认选中</option>                        </select>                        <br />                        input type="checkbox":<input type="checkbox"  />多选1<input type="checkbox"  />多选2<input type="checkbox"  checked="checked" />默认选中                        <br />                    <p>input标签 type="file" 文件<input type="file" /> </p>                    <p>input标签 type="url"  网址url <input type="url" /> </p>                    <p>input标签 type="email" 邮箱<input type="email" /> </p>                    <p>input标签 type="number" 输入为数字<input type="number" /> </p>                    <p>input标签 type="date" 日期<input type="date" /> </p>                    <p>input标签 type="time" 详细时间<input type="time" /> </p>                    <input type="button" value="填写完毕">                        <input type="reset" value="重置信息">                    <input type="submit" value="完成注册">                    <input type="image" src="img/HBuilder.png">                    <input type="submit" value="input标签  type=submit  提交按钮"/>                                            </fieldset>                               </form>                <p>1.aciton="test.php" 规定当提交表示时，向何处发送表单数据</p>                <p>2.method="post" 指定用于发送form-data的HTTP方法，这里是用post</p>                <p>3.fieldset标签：设置表单边框</p>                <p>4.legend标签：设置表单名称</p>                <p>5.input标签：收集用户信息，根据不同的type属性值，输入字段拥有很多种形式，比如：文本、单选框，复选框、单选按钮、按钮、邮件地址，网页地址，日期，时间等等。</p>                <p>6.在实现单选效果一定要给几个控件设置相同的名称，例如性别的选择</p>                <p>7.input type="reset" 将表单控件中的值恢复到默认值状态</p>                <p>8.input type=”image”也可以进行表单的提交</p>                <br /><br /><br />        </body></html>
0 0