收藏
批改状态：合格
老师批语：表单是用于收集用户信息, 并不是为了规范, 检测用户输入是通过一些属性或正则或js来处理
一、 标签
在HTML中，我们把用尖括号包起来的对象叫做标签，比如“<p></p>"， 标签是HTML中最基础的也是最重要的组成单位，一般都具有以下几个特点：
● 它是由一对尖括号包起来的，比如<head>。
● 一般是成对出现的，标签中的第一个标签是开始标签，第二个是结束标签，比如<p></p>标签中，<p>是开始标签，</p>是结束标签。
● 也有单独出现的标签，如<img>标签。
● 在成对的标签间，写入内容，而单标签里会写入属性。比如：<p>这是一句话。</p> <img scr="美女.jgp" alt="小美女">
● 标签对大小写不敏感，但一般用小写。
二、元素
以开始标签开始，以结束标签结束，之间的内容，称之为元素。
● 块元素：自动换行 如<div></div>
● 行内元素：不会另起一行，如<span></span>
● 没有内容的元素称为空元素，以开始标签结束。如：<br>,<hr>
● 大多数元素可以嵌套。如:
在HTML文档中，<html>元素定义了整个HTML文档；
<head>元素定义了文档的头部，给浏览器读取字符集等信息，后面引用的css文件和javascript文件也写在这里；
<body>元素定义了文档的主体，将文本、图片等网页内容呈现给网页浏览者。
三、属性
属性为HTML元素提供附加信息，写在开始标签中，属性以名称/值的样式成对出现。
四、列表
在HTML中，列表分为无序列表、有序列表、自定义列表三种。
<body> <h3> <p>无序列表：无序列表是一个项目的列表，列表前面用小圆点或小黑点标记。</p> </h3> <ul> <li>看视频</li> <li>自己操作几遍</li> <li>预习CSS</li> </ul> <h3> <p>有序列表：有序列表也是一个项目的列表，列表项目用数字标记。</p> </h3> <ol> <li>看视频</li> <li>自己操作几遍</li> <li>预习CSS</li> </ol> <h3> <p>自定义列表：自定义列表也是一个项目的列表，由列表和列表注释组成。</p> </h3> <dl> <dt>抽烟</dt> <dd>抽烟有害健康。</dd> <dt>喝酒</dt> <dd>少喝怡情，喝多伤身</dd> </body>
点击 "运行实例" 按钮查看在线实例
五、列表与表格的区别与联系
表格是由tabel标签定义的，含有若干行（tr标签定义）和若干列（td定义）组成的，能直观的显示多列多行的数据，列表适用于单列多行的数据。
六、商品清单实例
<body> <table border="1" width="500px" cellspacing="0"> <caption> <h3>购物车</h3> </caption> <thead bgcolor="lightblue"> <tr align="center"> <th>供应商</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tr align="center"> <td rowspan="3">前进车灯厂</td> <td>灯罩</td> <td>20</td> <td>10</td> <td>200</td> </tr> <tr align="center"> <td>装饰框</td> <td>30</td> <td>15</td> <td>450</td> </tr> <tr align="center"> <td>后壳</td> <td>15</td> <td>30</td> <td>450</td> </tr> <tr align="center"> <td colspan="3" align="center">合计</td> <td>55</td> <td>1100</td> </tr> </table> </body>
点击 "运行实例" 按钮查看在线实例
七、表单标签
<body> <form> <h3>注册信息表</h3> <p> <label for="name">姓名</label> <input type="text" name="name" id="name" placeholder="请输入用户名"> </p> <p> <label for="psd">密码</label> <input type="password" name="password" id="psd" placeholder="请输入密码"> </p> <p> <label for="sex">性别</label> <input type="radio" name="sex" id="male" checked>男 <input type="radio" name="sex" id="female">女 </p> <p> <label for="age">年龄</label> <input type="number" name="age" id="age" min="16" max="100"> </p> <p> <label for="search">学历</label> <select name="search" id="search"> <option value="请选择">请选择</option> <option value="本科">本科</option> <option value="大专">大专</option> <option value="高中">高中</option> </select> </p> <p><label for="email">邮箱</label> <input type="email" name="email" id="email" placeholder="xxx@xx.com"> </p> <input type="button" value="提交"> </form> </body>
点击 "运行实例" 按钮查看在线实例
表单标签一般用在用户注册的时候，为了规范用户的输入信息。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
