本次练习了HTML的常用标签
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <!-- 标题标签共有6级: h1 ~ h6, 大多只用到h1~h3 --> <h1>这是H1标签</h1> <h2>这是H2标签</h2> <h3>这是H3标签</h3> <p>我是p标签</p> <!-- 段落可以有多个 --> <p>我是p标签2</p> <!--换行--> <hr> <div> <!-- strong: 文本加粗 --> <p>说好一起到<strong style="background: black;color:white">白头</strong>, 你却偷偷<span style="color:green">焗了油</span></p> <!-- em: 文本斜体 --> <p>说好一起当<em style="color:red">学渣</em>,你却偷偷当学霸</p> <h3>购物清单</h3> <!--ul是无序列表--> <ul> <li>1. 暖手宝一个, 30元, 被窝太冷</li> <li>2. 笔记本电脑一台, 5000, 学php编程</li> <li>3. 哈哈哈哈哈哈哈哈</li> </ul> <!--ol是有序列表--> <ol> <li>暖手宝一个,</li> <li>笔记本电脑一台, 5000, 学php编程</li> <li>哈哈哈哈哈哈</li> </ol> <!--定义列表--> <dl> <dt>列表</dt> <dd>内容内容内容内容</dd> <dt>列表2</dt> <dd>内容2内容2222222</dd> </dl> </div> </div> <!--(1) 表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理 (2) 表单涉及:form,label,input,select,textarea,button标签 (3) 表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性--> --> <!-- 下面以用户注册表单为例进行演示 --> <h2>用户注册</h2> <form action="" method="GET"> <div> <!-- (1)控件的提示文本应该放在独立的label标签中,label的for属性与控件的id绑定 (2)一旦绑定成功, 点击标签文本,焦点会自动落到对应的控件上 --> <!-- 用户名: --> <label> <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 --> <!-- placeholder: 用户于设置文本框的提示文本 --> <input type="text" id="username" name="username" value="" placeholder="不少于6位"></label> </div> <div> <!-- 再介绍一种语法,可以少写二个属性for,id,将控件元素写在label标签内 --> <label> <!-- password类型,输入的内容以*号占位符代替 --> 密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <label> 确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 --> <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 --> <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女</label> </div> <div> <!-- 复选框 --> <!-- 将提示文本全部放在label标签中,确保点击标签文本,也可以选中对应的复选框 --> <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 --> <input type="checkbox" name="hobby" value="game" id="game" checked><label for="game">打游戏</label> <input type="checkbox" name="hobby" value="smoke" id="smoke"><label for="smoke">抽烟</label> <!-- 同样也是使用checked设置默认值,可同时设置多个 --> <input type="checkbox" name="hobby" value="programme" id="programme" checked><label for="programme">撸代码</label> </div> <div> <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 --> <label for="edu">您的学历:</label> <select name="" id="edu" value=""> <option value="1">幼儿园算吗?</option> <!-- selected设置默认项 --> <option value="2" selected>小学没毕业</option> <option value="3">不好意思,博士后</option> </select> </div> <!-- 文本域,其实就是多行文本框 --> <div> <label for="common">请留言:</label> <textarea name="" id="common" cols="30" rows="10" placeholder="不超过100字" value=""></textarea> </div> <!-- 按钮 --> <input type="submit" value="提交"> <!-- 重置功能极少用到,推荐不要再使用,而是通过其它方式 --> <input type="reset" value="重置"> <!-- 推荐使用语义化的button标签 --> <!-- button默认类型为提交submit,通常是修改为button类型,最后通过ajax异步提交表单 --> <button type="button">注册</button> </form> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
