实例
<!doctype html> <html lang="cn"> <head> <meta charset="utf-8"> <title>0702作业：1.html文档基本结构，2.实例演示无序列表，3.实例演示表格的用法，实例演示表单的使用</title> </head> <body> <!-- 1.html文档基本结构 <html> <head> 头部内容，这部分内容是给浏览器看的，用于告知浏览器当前文档的一些信息以及打开该文档后要需要的操作（自己的一些理解，不知是否准确）。 </head> <body> 主体内容，可在浏览器窗口中显示，这部分内容是给人看的。 </body> </html> 扩展：-----------------------------开始 1. <!doctype html>(5版本的写法)：文档类型定义，用于告知浏览器使用的是哪个版本的html。4版本和xhtml版本要引入dtd文件，5版本无须引入dtd文件，dtd文件可理解为定义规则或定义语法的一个文件。 2. 头部常用标签： 用于告知当前浏览器用什么字符集去解析当前文件的内容，这是html5的写法。扩展：html4的写法：<meta http-equiv="content-type" content="html/text;charset=utf-8"> <meta charset="utf-8"> 移动设备时页面宽高初始化设置和页面放大缩小设置 <meta name="viewport" content="width=divice-width, user-scalable=no, initial-scale=1.0, maxinum-scale=1.0, mininum-scale=1.0"> 可在浏览器标签栏显示，主要用于搜索引擎优化。 <title>文档标题</title> 主要用于搜索引擎优化。 <meta name="description" content="文档内容的简洁描述"> 主要用于搜索引擎优化。 <meta name="keywords" content="文档内容的主要关键词"> <meta name="author" content="作者名字"> 设置多少秒跳刷新或转到指定地址，地址不指定时是刷新当前页面，指定地址时如果没有"http://"，是一个相对地址。 <meta http-equiv="refresh" content="时间[;url=地址]"> 扩展：-----------------------------结束 --> <hr> <!-- 2.实例演示无序列表 --> <ul> <li><a href="" target="_self">网站首页</a></li> <li><a href="" target="_self">关于我们</a></li> <li><a href="" target="_self">产品中心</a></li> <li><a href="" target="_self">新闻中心</a></li> <li><a href="" target="_self">联系我们</a></li> <li><a href="" target="_self">在线留言</a></li> </ul> <!-- 总结：无序列表一般用来做导航栏。 --> <hr> <!-- 3.实例演示表格的用法 --> <table width="1000" border="1" align="center" bgcolor="lightyellow" cellspacing="0" cellpadding="3"> <caption><h3>web书籍价格数量统计表</h3></caption> <!-- 表格标题 --> <thead> <!-- 表格头部 --> <tr bgcolor="lightgray"> <th width="100">序号</th> <th width="200">书名</th> <th width="200">价格</th> <th width="200">数量</th> <th width="200">总额</th> <!-- th宽度总和是900，table宽为何设置1000？因为单元格还存在边框！ --> </tr> </thead> <tbody> <!-- 表格主体 --> <tr> <td>1</td> <td>html</td> <td>10</td> <td rowspan="5">1000</td> <td>10000</td> </tr> <tr> <td>2</td> <td>css</td> <td>20</td> <td>20000</td> </tr> <tr> <td>3</td> <td>js</td> <td>30</td> <td>30000</td> </tr> <tr> <td>4</td> <td>php</td> <td>40</td> <td>40000</td> </tr> <tr> <td>5</td> <td>mysql</td> <td>50</td> <td>50000</td> </tr> </tbody> <tfoot> <!-- 表格尾部 --> <tr> <td colspan="3" align="center"><span style="color: red;">总计：</span></td> <td><span style="color: red;">5000</span></td> <td><span style="color: red;">150000</span></td> </tr> </tfoot> </table> <!-- 总结：-----------------------------开始 table标签的重要属性说明： 1. border 用于设置表格边框，设置之后单元格th和td也会有边框。 2. align 用于设置表格对其方式，值有：left / center / right。 3. cellspacing 用于设置边框之间的间距，通常设置为0。 4. cellpadding 用于设置单元格与其中内容的间距。 th和td标签的重要属性说明： 1. rowspan 用于设置当前单元格开始往下合并多少行。 1. colspan 用于设置当前单元格开始往右合并多少列。 总结：-----------------------------结束 --> <hr> <!-- 4.实例演示表单的使用 --> <form action="" method=""> <div><label for="account">账号：</label><input type="text" name="account" id="account" placeholder="账号只能是字母数字组合！"><!-- 单行文本框 --></div> <div><label for="password">密码：</label><input type="password" name="password" id="password"> <!-- 密码文本框 --></div> <div><label for="email">邮件：</label><input type="email" name="email" id="email"> <!-- 邮件型input --></div> <div><label for="age">年龄：</label><input type="number" name="age" id="age" max="200" min="1"> <!-- 数字型input --></div> <div><label for="birthday">生日：</label><input type="date" name="birthday" id="birthday"> <!-- 日期型input --></div> <div><label for="profile">简介：</label><textarea name="profile" id="profile" cols="60" rows="10"></textarea> <!-- 多行文本框 --></div> <!-- 下拉菜单 --> <div> <label for="subject">科目：</label> <select name="subject" id="subject"> <option value="html">html</option> <option value="css">css</option> <option value="js">js</option> <option value="php" selected>php</option> <option value="mysql">mysql</option> </select> </div> <!-- 单选框 --> <div> <span>性别：</span> <label for="female">男</label><input type="radio" name="sex" id="female"> <label for="male">男</label><input type="radio" name="sex" id="male"> <label for="keep-secret">保密</label><input type="radio" name="sex" id="keep-secret" checked> </div> <!-- 复选框 --> <div> <span>爱好：</span> <label for="">运动</label><input type="checkbox" name="hobby[]" id="sport"> <label for="">阅读</label><input type="checkbox" name="hobby[]" id="reading"> <label for="">烹饪</label><input type="checkbox" name="hobby[]" id="cooking" checked> </div> <!-- 按钮 --> <div> <input type="submit"> <!-- 提交按钮 --> <input type="reset"> <!-- 重置按钮 --> <input type="button" value="按钮"> <!-- 普通按钮 --> <button type="button">按钮</button> <!-- type的默认值是submit，设置为button时为普通按钮。 --> </div> </form> <!-- 总结：-----------------------------开始 form标签重要属性说明： action 用于设置表单数据的提交地址。 method 用于设置提交数据的方式，值有：get / post，post可以提交更多数据且更安全。 文本框标签重要属性说明： placeholder 用于设置文本框中的输入提示。 数字型input标签重要属性说明： max 用于设置最大值。 min 用于设置最大值。 textarea标签重要属性说明： cols 用于设置可输入列数。 rows 用于设置可输入行数。 下拉菜单重要说明： selected 直接就是一个属性，没有值，如果某个option标签有该属性表示这个option标签默认被选中，注：若要提交的option标签没有value值，则被提交的数据是option标签之间的数据。 单选框重要说明： checked 直接就是一个属性，没有值，如果某个单选框标签有该属性表示这个单选框标签默认被选中，注：同一组单选框的name必须相同。 单选框重要说明： checked 直接就是一个属性，没有值，如果某个复选框标签有该属性表示这个复选框标签默认被选中，注：同一组复选框的name必须相同，且必须是数组形式，即名字后加“[]”。 label标签重要属性说明： for 主要用于绑定某个表单控件，就是单击label标签时，和该label标签关联的表单控件会获取焦点。 总结：-----------------------------结束 --> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
