编程学习：html的input标签、button按钮下拉菜单、文本域、label标签、语义化标签、字符实体的说明
温馨提示：这篇文章已超过855天没有更新，请注意相关的内容是否还可用！
input系列标签的基本介绍
场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input input标签可以通过type属性值的不同，展示不同效果
type属性值：
input-占位符（提示信息）：
属性名：placeholder，说明：提示用户输入内容的文本。
input系列标签-单选框
场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：
属性名：name 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
属性名：checked 默认选中
注意点：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
input系列标签-文件选择
场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性：
属性名：multipl 多文件选择
input系列标签-按钮
场景：在网页中显示不同功能的按钮表单控件
type属性值：
注意点：
如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
button按钮标签
场景：在网页中显示用户点击的按钮
标签名：button type属性值（同input的按钮系列）:
注意点： 谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等
select下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性： selected： 下拉菜单的默认选中
textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置
label标签
场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法①
1、使用label标签把内容（如：文本）包裹起来
2、在表单标签上添加id属性
3、在label标签的for属性中设置对应的id属性值
使用方法②：
1、直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2、需要把label标签的for属性删除即可
语义化标签
没有语义的布局标签-div和span
场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
有语义的布局标签：
标签：
注意点：
以上标签显示特点和div一致，但是比div多了不同的语义
字符实体
场景：在网页中展示特殊符号效果时，需要使用字符实体替代
结构：&英文；
常见字符实体：
代码总结：
<body>
<form action="">
文本框：<input type="text" placeholder="请输入用户名">
<br>
<br>
密码框：<input type="password" name="" id="" placeholder="请输入密码">
<br>
<br>
单选框：<input type="radio" name="" id="">
<br>
<br>
性别：<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
<br>
<br>
多选框：<input type="checkbox" name="" id="" checked>
<br>
<br>
上传文件：<input type="file" name="" id="" multiple>
<br>
<br>
<!-- 按钮 -->
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮">
<!-- button按钮 -->
<br>
<br>
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮，没有任何功能</button>
<!-- 下拉菜单 -->
<br>
<br>
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option selected value="">深圳</option>
</select>
<!-- 文本域标签 -->
<br>
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- label标签 -->
<br>
<br>
性别：
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<label><input type="radio" name="sex">女</label>
<!-- 语义化标签 -->
<br>
<br>
<!-- 不带语义 -->
<div>这是div标签</div>
<div>这是div标签</div>
<span>这是span标签</span>
<span>这是span标签</span>
<!-- 带语义 -->
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
<!-- 字符实体 -->
字符实体 记住空格就可以
</form>
</body>
