从HTML开始接触前端Day03

注：上一天的目录继续学习

目录

2、HTML标签类学习

2.7表单标签

2.7.1 input系列标签的基本介绍

  2.7.2button按钮标签

  2.7.3select下拉菜单标签

  2.7.4textarea文本域标签

  2.7.5label标签

 2.8语义化标签

  2.8.1没有语义的布局标签div和span

  2.8.2有语义的布局标签

---

2、HTML标签类学习

2.7表单标签

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

2.7.1 input系列标签的基本介绍

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

        标签名：<input>

        <input>标签可以通过type属性值的不同，展示不同效果

        <input>标签中type属性值：

                text：文本框，用于输入单行文本

                        在网页中显示输入单行文本的表单控件

                        常用属性：

                        placeholder：占位符，提示用户输入内容的文本

                password：密码框，用于输入密码

                radio：单选框，用于多选一

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

                        常用属性：

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

                                checked：默认选中

                        注：

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

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

                checkbox：多选框，用于多选多

                file：文件选择，用于之后上传文件

                （在网页中显示不同功能的按钮表单控件）

                submit：提交按钮，用于提交，点击之后提交数据给后端服务器

                reset：重置按钮，用于重置，点击之后回复表单默认值

                button：普通按钮，默认无功能，需配合JavaScript添加功能                        

                        注：

                                如果需要实现以上按钮方法，需要配合<form>标签使用

                                <form>使用方法：用<form>标签吧表单标签一起包裹起来即可

  2.7.2button按钮标签

        在网页中显示用户点击按钮

        标签名：<button>

        注：

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

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

  2.7.3select下拉菜单标签

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

        标签组成：

                <select>：下拉菜单的整体

                <option>：下拉菜单的每一项

        常见属性：

                selected：下拉菜单的默认选中

  2.7.4textarea文本域标签

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

        标签名：<textarea>

        常见属性：

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

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

        注：

                右下角可以拖拽改变大小

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

  2.7.5label标签

        常用于绑定内容与表单标签的关系

        标签名：<label>

        使用方法：

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

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

                （3）在<label>标签的for属性中设置对应的id属性值

        注：

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

                需要把<label>标签的for属性删除即可

 2.8语义化标签

        能够认识开发中常用的没有语义布局标签(<div>、<span>)和有语义的布局标签

  2.8.1没有语义的布局标签div和span

        实际开发网页时大量频繁的使用到<div>和<span>这两个没有语义的布局标签

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

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

  2.8.2有语义的布局标签

        在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

        标签：

                <header>网页头部

                <nav>网页导航

                <footer>网页底部

                <aside>网页侧边栏

                <section>网页区块

                <article>网页文章

        注：

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