HTML（day03）

1. 列表

1. 列表的使用
   让数据有条理的显示, 在数据之前添加标识
   但是现在的页面布局, 经常会使用到无序列表

2. 列表的组成

   • 有序列表

         <ol>
           <li></li>
           ...
         </ol>
     

     • 属性:
       type: 设置列表标识的类型
       取值: 1 默认值 / a A 字母 / i I 罗马数字

     start: 设置标识项的起始值

   • 无序列表

     <ul>
       <li></li>
       ...
     </ul>
     

     • 属性:
       type: 设置列表项标识类型
       取值: disc 实心圆 / circle 空心圆 / square 方形 / none 无

     ul 在项目中使用非常频繁, 常用于一组相似的内容进行布局和排版

3. 列表的嵌套 [所有的嵌套内容必须写在 li 中]

   • 在列表中嵌套其他元素
     
   • 列表嵌套列表
     

4. 定义列表 [对一个名词进行解释说明时使用的列表,h5新标签]

   <dl>
     <dt>要解释的名词</dt>
     <dd>对名词的说明内容</dd>
   </dl>
   

5. 结构标记

   • 作用
     用于网页布局, h5 新出了一批结构标记, 代替 div 布局
     这些结构标记与 div 的作用一幕一样, 只是增加了可读性

   • 常用的结构标记
     < header > 定义网页的头部, 或者某个区域的头部
     < footer > 定义网页的底部, 或者某一区域的底部
     < nav > 定义网页导航
     < section > 定义网页的主题内容
     < aside > 定义侧边栏
     < article > 定义文字相关的内容, ex: 论坛回帖, 用户评论

2. 表单（重点****）

1. 作用

   • 提供可视化的输入控件
   • 收集用户输入的信息, 并提交请求给服务器
     总节:
     form 自带提交请求数据的功能
     ajax 提交请求, 需要自己去收集数据
     使用用 ajax 就不使用 form

2. form 的组成

   • 前端: 提供表单空件, 与用户交互的可视化空件
   • 后端: 后台的接口对提交的数据进行处理

3. form 表单的使用

   • 语法

      <form action="接口 url" method="提交方法"></form>
     

   • form 的属性
     action
     定义表单提交时发送的动作（向那个 url 发送请求）如果 action 不写, 或者 action 没有值, 默认把请求发给本页
     method [定义表单的提交方式]

     get（默认值）
     特点
     提交的内容会显示到地址栏
     get 提交的数据, 有大小限制, 最大 2kb
     使用时机: 向服务器要数据时使用
     post
     特点
     饮食提交, 提交的内容不会显示到地址栏
     post 提交没有大小写限制
     使用时机: 要传递数据给服务器时使用
     其他方式 – 使用 form 表单目前不许使用 delete, put, option 等方法
     delete put option — ajax 使用方法

   • enctype
     指定表单数据的编码方式
     允许将什么样的数据提交给服务器

     取值:

     1. text_plain 允许提交普通字符给服务器
     2. multipart/form-data 允许提交文件给服务器
     3. application/x-www-form-urlencoded 允许提交任意字符给服务器（文件不能提交）

4. 表单空件, 在 form 表单中, 能够与用户进行交互的可视化空件

   • 分类
     input标签 基础 9 种, h5新标签 10 种
     textarea 多行文本域
     select 和 option 下拉选择框
     其他元素

   • input 元素

     <input type="值" >
     

     属性:

     1. type 指定 input 元素的类型
     2. name 为空件定义名称, 把名称提供给服务器端使用
        如果 form 表单想提交数据必须写 name 属性
     3. value 空件的值, 就时传递给服务器的值
        例外, 在 button 中使用的时候, value 是按钮上的文本
     4. disabled 禁用, 不能修改, 也不可提交（无值属性, 在使用时可以不写值）

   • input 详解

     • 文本框和密码框

     文本框: type=“text” input 默认就是文本框
     密码框: type=“password”

     属性：
     maxlength 设置输入的最大长度
     readonly 只读（无值属性）只是不能修改, 但是它可以提交
     placeholder 占位提示符, 默认显示在输入框内的提示文本

   • 按钮

     type=“submit” 将表单中的数据, 收集整理并发送给服务器
     type=“reset” 将当前表单恢复到初始化状态
     type=“button” 无任何功能, 配合事件, 调用 JS 代码
     附加知识点
     < button > 替代了 type=“submit”

   • 单选/复选按钮 [name属性除了作为控件名称以外还作为控件分组]

     单选按钮 type=“radio” 必须有 value 才能正确的传递值
     复选按钮 type=“checkbox” 必须 有 value 才能正确传值

     checked 无值属性, 默认选择为当前设置

   • 隐藏域

     type=“hidden”
     想把数据交给服务器, 但是不想展示给用户看
     这种数据就放在隐藏中
     隐藏域, 用户看不到, 但是又可以提交

   • 文件选择框（上传文件时使用）

     type=“file” name=“pic”
     注意, 使用文件选择框需要保证 form 的属性

     1. method=“POST”
     2. enctype=“multipart/form-data”

     属性: multile 多重, 无值属性

   • 多行文本域（大的文本框）

     <textarea></textarea>
     

     允许录入多行文本

     属性 cols rows 根据计算机硬件的不同有不同的显示, 不准确

   • 下拉选择框

     <select name="city">
       <option value="lc">聊城</option>
       <option value="zb">淄博</option>
       <option value="zjk">张家口</option>
       <option value="tj">天津</option>
     </select>
     

     注意: 如果 option 没有 value 属性, 那么提交的 select的value就是 option 的内容, 如果 option 有 value 那么 select 的 value 就是选中的 option 的 value

     属性:
     size=“4” size > 1 变为滚动选择框
     multiple 滚动选择框时可以多选

   • 其他元素

     1. label 元素
        替代 form 中的 span
        文本和表单控件的关联

       <input type="radio" name="gender" value="m" id="r3" >
       <label for="r3">男</label>
     

     2. 为控件分组
        < fieldset > 控件分组
        < leged > 分组的标题

3. 浮动框架

在 一个 html 中引入其他 html 文本

<iframe></iframe>
<!--
  src: 引入网页的路径
  width
  height
  frameborder: 框架的边框
  scrolling: 设置滚动条  yes 或 no
-->
<iframe width="100%" height="400px" src="./01_ex.html" 
frameborder="2px" scrolling="no"></iframe>

4. HTML5 新表单元素

1. 邮箱

   < input type=“email” >
   提交时验证填写的邮箱格式是否正确
   正确的标准, 有 @ 符号, 并@符号前后有内容

2. 搜索类型

   < input type=“search” >
   自带快速清除的 ❌

3. URL 类型

   < input type=“url” >
   验证以 http:// 开头

4. 电话号码

   < input type=“tel” >
   移动设备使用时会弹出虚拟键盘

5. 数字类型

   < input type=“number” >
   属性
   max 最大值
   min 最小值
   step 步长

6. 范围类型

   < input type=“range” >
   属性
   max / min / step

7. 颜色类型

   < input type=“color” >

8. 日期类型

   < input type=“date” >
   < input type=“datetime” >
   < input type=“month” >
   < input type=“datetime-local” >
   < input type=“week” >