上播!这期写的是HTML的基础标签之块内与行内元素and输入标签。
一.块内元素与行内元素的基本定义
1.块元素 :独占一行:浏览器会自动给它前后换行,一个元素占满整行
2.行元素 :不独占一行:和其它行内元素并排显示,不会自动换行
3.常见的块级元素有div、form、h1~h6、hr、p、table、ul、li等
4.常见的行内元素有span、a、b、em、i、strong、img、input等
二、输入之王<input>
<input> 标签可以通过改变 type 属性变成不同的控件:
<input type="text">:单行文本输入框,可用于输入学员姓名等文字信息
<input type="password"> :密码输入框,输入的内容会被隐藏显示(如输入密码)
<input type="radio">:单行按钮,必须保证name属性相同才能互斥选择
<input type="checkbox">:复选按钮,允许同时勾选多个选项
<input type="file“>:文件选择器,可限制只选择图片文件
三.场景实操
我们以一个学员信息收集表作为场景
<head> <meta charset="UTF-8"> <title>学员信息收集表</title> </head> <body> <h2>学员信息收集表</h2> <form action="#" method="GET"> <div> <label>姓名:</label> <input type="text" name="username"> </div> <div> <label>密码:</label> <input type="password" name="pwd"> </div> <div> <label>性别:</label> <input type="radio" name="gender" value="male" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">女</label> </div> <div> <label>兴趣:</label> <input type="checkbox" name="hobby" value="code" id="code"> <label for="code">编程</label> <input type="checkbox" name="hobby" value="design" id="design"> <label for="design">设计</label> <input type="checkbox" name="hobby" value="game" id="game"> <label for="game">游戏</label> </div> <div> <label>头像上传:</label> <input type="file" name="avatar"> </div> <div> <input type="reset" value="重置"> <input type="submit" value="提交"> </div> </form> </body>以下是他的运行图
好的 这期就到这了 下播!