表单标签和语义化标签和字符实体（html）

一>

#目标#

能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

#学习路径#

1.input系列标签

*场景*：在网页中显示收集用户信息的表单效果，如：登录页，注册页

标签名：input

*特点*：input标签可以通过type属性的值的不同，展示不同效果

type属性值：text                   说明：文本框，用于输入单行文件

在text属性值后运用placeholder属性可以在文本框内显示提示信息

type属性值：password         说明：密码框，用于输入密码

type属性值：radio                 说明：单选框，用于多选一

type属性值：checkbox          说明：多选框，用于多选多

type属性值：file                     说明：文件选择，用于之后上传文件

type属性值：submit               说明：提交按钮，用于提交

type属性值：reset                  说明：重置按钮，用于重置

type属性值：button                说明：普通按钮，默认五功能，之后配合js添加功能

#input系列标签-单选框#

场景：在网页中显示多选一的单选表单控件

type属性值：radio

常用属性：

属性名：name

说明：分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中

属性名：checked

说明：默认选中

*注意点*

name属性对于单选框有分组功能

有相同name属性值的单选框为一组，一组中只能同时有一个被选中

#input系列标签-文件选择#

场景：在网页中显示文件选择的表单控件

type属性值：file

常用属性：

属性名：multiple

说明：多文件选择

#input系列标签-按钮#

场景：在网页中显示不同功能的表单控件

type属性值：submit

说明：提交按钮。点击之后提交数据给后端服务器

type属性值：reset

说明：重置按钮。点击之后恢复表单默认值

type属性值：button

说明：普通按钮。默认无功能，之后配合js添加功能

*注意点*

1.如果需要实现以上按钮功能，需要配合form标签使用

2.form使用方法：用form标签把表单标签一起包裹起来即可

3.如需更改按钮框内的文字，只需在input标签内的 type属性的 后面加一个value属性即可，属性值即为按钮框内的文字。

#代码示例#

 <form action="">

        昵称框：<input type="text">

        <br>

        <br>

        密码框：<input type="password">

        <br>

        <br>

        性别（单选框）：<input type="radio" name="gender" checked>男

                    <input type="radio" name="gender">女

        <br>

        <br>

        多选框：<input type="checkbox" checked> 我已同意相关条款。

        <br>

        <br>

        文件选择：<input type="file" multiple>

        <br>

        <br>

        <input type="submit" value="免费注册">

        <input type="reset" >

        <input type="button" value="普通按钮">

    </form>

2.button按钮标签

*场景*：在网页中显示用户点击的按钮

标签名：button

type属性值：submit

说明：提交按钮。点击之后提交数据给后端服务器

type属性值：reset

说明：重置按钮。点击之后恢复表单默认值

type属性值：button

说明：普通按钮。默认无功能，之后配合js添加功能

*注意点*

谷歌浏览器中的button默认是提交按钮

button标签是双标签，更便于包裹其他内容：文字，图片等

代码示例：

<form action="">

        昵称框：<input type="text">

        <br>

        <br>

        密码框：<input type="password">

        <br>

        <br>

        性别（单选框）：<input type="radio" name="gender" checked>男

                    <input type="radio" name="gender">女

        <br>

        <br>

        多选框：<input type="checkbox" checked> 我已同意相关条款。

        <br>

        <br>

        文件选择：<input type="file" multiple>

        <br>

        <br>

        <button type="submit">button提交按钮</button>

        <button type="reset">button重置按钮</button>

        <button type="button">button普通提交按钮</button>

    </form>

3.select下拉菜单标签

*场景*：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

*  select标签：下拉菜单的整体

*  option标签：下拉菜单中的每一项

常用属性：

selected：下拉菜单的默认选中

代码示例：

地址：<select name="" id="">

        <option value="">河南</option>

        <option value="" selected>山东</option>

        <option value="">山西</option>

        <option value="">河北</option>

    </select>

4.textarea文本域标签

*场景*：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

*  cols： 规定了文本域内可见宽度

*  rows：规定了文本域内可见行数

#注意点#：

*  右下角可以拖拽改变大小

*实际开发时针对于样式效果推荐使用css设置

代码示例：

 <textarea cols="30" rows="10"></textarea>

5.label标签

*场景*：常用于绑定内容与表单标签的关系

标签名：label

使用方法（1）：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

使用方法（2）：

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

代码示例：

 性别：  <input type="radio" name="gender" id="nan"><label for="nan">男</label>

            <label><input type="radio" name="gender">女</label>

二>语义化标签

#目标#：能够认识开发中常用的没有语义布局标签（div、span）

学习路径：

1.没有语义的布局标签（div、span）

*场景*：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

2.有语义的布局标签（了解）

标签：header

语义：网页头部

标签：nav

语义：网页导航

标签：footer

语义：网页底部

标签：aside

语义：网页侧边栏

标签：section

语义：网页区块

标签：article

语义：网页文章

注意点：

以上标签显示特点和div一致，但是比div多了不同的语义

三>字符实体

#目标#：能通过字符实体在网页中显示特殊符号

学习路径：

1.HTML中的空格合并现象

2.常见字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文;
常见的字符实体：&nbsp;        用来显示一个空格

快捷键：alt+shift+下箭头可以快速向下复制

相亲网页代码示例：

<form action="">

        昵称：<input type="text" placeholder="请输入昵称">

        <br>

        <br>

        性别：<label ><input type="radio" name="sex" checked>男</label>

            <label ><input type="radio" name="sex" >女</label>

        <br>

        <br>

        所在城市：<select>

            <option>北京</option>

            <option selected>上海</option>

            <option>广州</option>

        </select>

        <br>

        <br>

        婚姻状况：<label><input type="radio" name="now" checked>未婚</label>

        <label><input type="radio" name="now">离异</label>

        <label><input type="radio" name="now">保密</label>

        <br>

        <br>

        喜欢的类型：<label><input type="checkbox">可爱</label>

        <label><input type="checkbox" checked>甜美</label>

        <label><input type="checkbox" checked>优雅</label>

        <br>

        <br>

        个人介绍：<br>

        <textarea cols="60" rows="10"></textarea>

        <br>

        <br>

        <h3>我承诺</h3>

        <br>

        <ul>

            <li>年满十八，单身</li>

            <li>抱着严肃的态度</li>

            <li>真诚的寻找另一半</li>

        </ul>

        <br>

        <br>

        <label><input type="checkbox" checked>我同意所有条款</label>

        <br>

        <br>

        <input type="submit" value="免费注册">

        <button>重置</button>

    </form>