实例
<!DOCTYPE html> <!--申明html版本 h5--> <html lang="zh-CN"> <!--当lang设置为zh-CN 简体中文 设置为en 浏览器可能会提示 是否需要翻译按钮 比如谷歌--> <head> <!--head区域主要是给浏览器和搜索引擎提供网页相关信息--> <meta charset="UTF-8"> <!--设置网页字符集 常见utf-8 是***码 就是中日韩美等做网页都可以用这个都能正常显示,gb2312简体中文 BIG5繁体中文 还有很多 --> <title>7.2 HTML标签练习 ul ol table、form</title> <!--这个是标题浏览器标签会显示 通多代码还能在标题前面加个小图标 当然js还能让标题动态变化哦--> </head> <body> <!--body区域的信息是显示给用户看的区域。--> <div style="text-align: center"><h1>基础标签练习</h1></div> <div> <h2>我是有序列表 ol是块级元素</h2> <ol> <li>我是无序列表1</li> <li>我是无序列表2</li> <li>我是无序列表3</li> <li>我是无序列表4</li> <li>我是无序列表5</li> <li>我是无序列表6</li> <li>我是无序列表7</li> <li>我是无序列表8</li> <li>我是无序列表9</li> <li>我是无序列表10</li> </ol> <br> <h2>我是无序列表 ul也是块级元素 对了li也是块级元素</h2> <ul> <li><a href="#">我是无序列表1</a></li> <li><a href="#">我是无序列表2</a></li> <li><a href="#">我是无序列表3</a></li> <li><a href="#">我是无序列表4</a></li> <li><a href="#">我是无序列表5</a></li> <li><a href="#">我是无序列表6</a></li> <li><a href="#">我是无序列表7</a></li> <li><a href="#">我是无序列表8</a></li> <li><a href="#">我是无序列表9</a></li> <li><a href="#">我是无序列表10</a></li> </ul> <hr> <p> <h3>html块级元素</h3> 块级元素在浏览器显示时,通常会以新行来开始(和结束)。<br> 比如:h1到h6, p, ul,ol,li ,table 等等 <h4>块级元素有以下几个特点:</h4> <ol> <li>总是另起一行(特立独行)</li> <li>可以设置其宽度、高度,内外边距</li> <li>在不手动设置宽度的情况下,宽度默认为所在容器的100%(即容器宽度)</li> <li>可以容纳行内元素和其他块元素。</li> </ol> </p> <p> <h3>html行内元素 也叫 行级元素</h3> 行内元素在显示时通常不会以新行开始。<br> 比如:b, td, a,span等等 </p> <p> <h3>html行内块元素</h3> 行内块元素多个标签会显示在一行但是又支持设置内边距、外边距等。<br> 比如:input img等等 </p> <hr> <div style="text-align: center"> <table border="0" cellspacing="1" cellpadding="10" bgcolor="#808080"> <!--border表格边框 cellspacing 单元格间距 cellpadding 单元格内边距 bgcolor 背景颜色--> <caption><h2>课程表</h2></caption><!--caption表格标题--> <thead><!--表格头部 页眉--> <tr> <td></td> <td>星期1</td> <td>星期2</td> <td>星期3</td> <td>星期4</td> <td>星期5</td> <td>星期6</td> <td>星期7</td> </tr> </thead> <tbody><!--表格主体 内容--> <tr> <td rowspan="4">上午</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> <td colspan="2" rowspan="4">睡懒觉</td> <!--colspan 规定单元格可横跨的列数 rowspan规定单元格可横跨的行数--> </tr> <tr> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> </tr> <tr> <td>物理</td> <td>物理</td> <td>物理</td> <td>物理</td> <td>物理</td> </tr> <tr> <td colspan="5">老师们上课不要打扰睡觉的同学影响他们长身体</td> </tr> <tr> <td rowspan="4">下午</td> <td>化学</td> <td>化学</td> <td>化学</td> <td>化学</td> <td>化学</td> <td colspan="2" rowspan="4">找不见人</td> <!--colspan 规定单元格可横跨的列数 rowspan规定单元格可横跨的行数--> </tr> <tr> <td>美术</td> <td>美术</td> <td>美术</td> <td>美术</td> <td>美术</td> </tr> <tr> <td>音乐</td> <td>音乐</td> <td>音乐</td> <td>音乐</td> <td>音乐</td> </tr> <tr> <td colspan="5">德智体美劳全面发展样样不精通</td> </tr> </tbody> <tfoot><!--表格底部 页脚--> <tr> <td >备注</td> <td colspan="5">老师不可以私下调课 尤其是让体育老师替课</td> <td colspan="2">家长监管</td> </tr> </tfoot> </table> <style> td{background: #ffffff;} </style> </div> <br> <hr> <br> <div> <h2>表单</h2> <form action="/form.php" method="post"> <!-- action 属性值是一个url地址 表示将数据提交***。method属性值有post和get post隐藏提交安全 get通过网址传送参数 有长度限制 包含密码的不可以用get提交不安全 --> <p> <label for="userid">账号:</label><input type="text" name="userid" id="userid" placeholder="请输入账号" autofocus> <!--autofocus 设置自动焦点位置 name属性值让程序知道数据应该插入到那个表的那个字段里 --> </p> <p> <label for="password">密码:</label><input type="password" name="password" id="password" placeholder="请输入密码"> <!-- input 的id在当前网页不能重复 就像人的***号码一样 是这个元素的唯一识别码。placeholder是输入框的提示信息但是兼容性并不好 ie等浏览器还要靠js来设置--> </p> <p> <label for="email">邮箱:</label><input type="email" name="email" id="email" placeholder="请输入邮箱" required> <!--required属性是必填的意思 当然你可能会看到 required="required"这种方式其实与直接写required一个意思等价。只有页面声明为h5才可以简写一个单词 required 其他属性也是 --> </p> <p> <label for="age">年龄:</label><input type="number" name="age" id="age" min="5" max="80"> <!--label标签有个for属性作用是 label元素被点击后 for值关联的input等标签会获得焦点被选中状态 --> </p> <p> <label for="shengri">生日:</label><input type="date" name="shengri" id="shengri"> </p> <p> <label for="kc">课程:</label> <select name="kc" id="kc"> <option value="0">请选择</option> <option value="h5">html5</option> <option value="js">JavaScript</option> <option value="tp">thinkPHP</option> <!--这里的option元素还可以通过 optgroup标签来进行分组哦--> </select> </p> <p> <label for="">爱好:</label> <input type="checkbox" name="ah[]" value="game" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="ah[]" value="kdy" id="kdy"><label for="kdy">看电影</label> <input type="checkbox" name="ah[]" value="gj" id="gj"><label for="gj">逛街</label> <input type="checkbox" name="ah[]" value="pb" id="pb" checked><label for="pb">泡吧</label> <!--input 类型为checkbox时是复选框 一组复选框的name值必须是一样的哦--> </p> <p> <label for="">性别:</label> <input type="radio" name="xb" value="nan" id="nan"><label for="nan">男</label> <input type="radio" name="xb" value="nv" id="nv"><label for="nv">女</label> <input type="radio" name="xb" value="bm" id="bm"><label for="bm">保密</label> <!--input的类型为radio时为单选按钮name值需要一样才能起到单选效果哦 --> </p> <p> <label for="jj">简介</label><textarea name="jj" id="jj" cols="30" rows="5" maxlength="50" placeholder="精简介绍自己50个字以内。"></textarea> <!--textarea是文本域 常见的备注框 留言框 使用较多。cols规定文本区内的可见宽度 rows规定文本区内的可见行数 maxlength规定最多输入多少字符 readonly属性可以设置为只读 比如查看时候用只能看不能改--> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> </p> <p></p> </form> </div> <br><br><br><br><br> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例