使用表单标签及属性实现表单类网页结构搭建
认识常见语义化布局标签的使用场景
能够使用字符实体在网页中显示空格、大于号和小于号

表单标签

input系列

文本框 type="text"
占位符:placeholder
<input type="text" placeholder="占位符" name="取名称" value="写内容">
密码框 type="password"
占位符:placeholder
<input type="password" placeholder="占位符" name="取名称" value="写内容">
单选框 type="radio"
实现多选一的效果 必须设置相同的name属性值 
默认选中 checked 
<input type="radio" name="取名称" value="写内容" checked>
多选框 type="checkbox"
默认选中 checked 
<input type="checkbox" name="取名称" value="写内容" checked>
文件上传 type="file"
multiple 多文件上传
<input type="file" name="取名称"  multiple>
搜索 type="search"
占位符:placeholder
<input type="search" name="取名称"  placeholder="占位符">
数值 type="number" 
<input type="number" name="取名称" >
按钮组
    提交按钮  type="submit"
	<input type="submit" name="取名称" value="写内容" >
    重置按钮 
	<input type="reset" name="取名称" value="写内容" >
    普通按钮 type="button" 后期配合js使用
	<input type="button" name="取名称" value="写内容" >

所有表单控件都必须放到form表单域里面才可以生效

<form action="">
	表单控件
    input系列 
    button按钮
    下拉列表
</form>

button

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
推荐写法:
<button>按钮</button>

select(下拉列表)

<select>
    <option>下拉列表的每一项</option>
    <option selected>默认选中</option>
    ....
</select>
示例代码:

    <!-- 
        select:下拉菜单整体
        option:下拉菜单的每一项
        下拉菜单属性
            selected 默认选中
     -->
 所在城市:<select>
        <option>上海</option>
        <option>北京</option>
        <!--  selected 默认选中 -->
        <option selected>武汉</option>
        <option>深圳</option>
     </select>

文本域

应用场景  留言板 评论 每日反馈
<textarea name="" placeholder="自我介绍"></textarea>

label标签

 使用方法①：
    使用label标签把内容（如：文本）包裹起来
    在表单标签上添加id属性
    在label标签的for属性中设置对应的id属性值
    使用方法②：
    直接使用label标签把内容（如：文本）和表单标签一起包裹起来
    需要把label标签的for属性删除即可
示例代码:
    <!-- 方法一 -->
    性别:<input type="radio" name="sex" id="nan">
    <label for="nan">男</label>
    <input type="radio" name="sex" id="nv">
    <label for="nv">女</label>
    <hr>
    <!-- 方法二 -->
    爱好:
    <label>
        <input type="checkbox" name="">敲代码
    </label>

语义化标签

有语义化标签

<header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>
以上标签是html5新增标签 有兼容性问题,支持ie9以上浏览器
移动端布局常用

字符实体

空格               &nbsp;
大于号             &lt;
小于号             &gt;
和号               &amp;
引号               &quot;
撇号               &apos;
分                 &cent;
镑                 &pound;
元                 &yen;
欧元               &euro;
小节               &sect;
版权               &copy;