列表、结构标记、表单

1. 列表

1.1. 列表的作用

将具有相似特征或具有先后顺序的内容按照从上往下或者从左往右进行排列

1.2. 列表的分类

1. 有序列表: <ol></ol>
2. 无序列表: <ul></ul>

1.3. 语法

1.3.1. 列表的组成

列表类型: 指定列表是有序的还是无序的

列表项: 列表中所显示的内容

1.3.2. 有序列表( order list )

1. 列表类型: <ol></ol>

2. 列表项: <li></li>

3. 用法

   <ol>
     <li>内容一</li>
     <li>内容二</li>
     <li>内容三</li>
     ....
   </ol>
   

4. 属性

   1. type: 指定列表项标志的类型默认为数字排列

      取值: 1 -> 数字，默认值 a -> 小写字母 A -> 大写字母 i -> 写罗马数字 I -> 大写罗马数字

   2. start: 定义起始值(数字), 默认从1开始; 作用: 起始编号

1.3.3. 无序列表( Unordered list )

1. 列表类型: <ul></ul>

2. 列表项: <li></li>

3. 用法

   <ul>
     <li>内容一</li>
     <li>内容二</li>
     <li>内容三</li>
     ....
   </ul>
   

4. 属性

   1. type: 列表项前的标志

      取值: disc -> 实心圆 circle -> 空心圆 square -> 实心方块 none -> 不显示标识

1.3.4. 列表的嵌套

允许在一个列表中嵌套另外一个列表, 嵌套的列表必须放在 Li 中

<ol>
  <li>
    <ul>
      <li>内容</li>
    </ul>
  </li>
</ol>

1.3.5. 定义列表

1. 作用: 往往用于要给出一类事物的定义情形

2. 语法: <dl></dl> -> 定义一个定义列表

   <dt></dt> -> 定义要解释的内容 专有名词/术语

   <dd></dd> -> 定义对专有名词/术语进行解释的内容

3. 使用场合: 图文混排的布局时使用

2. 结构标记

2.1. 什么是结构标记

在 HTML5 中，专门提出一组标记用来表示网页的结构, 即制作布局

目的: 取代div布局, 提升布局代码的语义性和可读性

2.2. 常用的结构标记

2.2.1. header 元素

作用: 定义网页或其他部分内容的页眉(靠顶部的内容)

语法: <header>内容</header>

在页面上可以出现多次, 作为任何部分的头部内容

2.2.2. nav 元素

作用: 定义网页的导航链接部分

语法：<nav>内容</nav>

2.2.3. section 元素(语义：小节)

作用: 定义页面中的节, 表示页面的主体内容

语法: <section>内容</section>

2.3.4. footer 元素

作用: 定义页面的底部信息, 用户不太注意的内容 -> EX: 网站备案号, 解释说明

语法: <footer>内容</footer>

2.3.5. aside 元素

作用: 定义页面中的边栏信息

语法: <aside>内容</aside>

2.3.6. article 元素

语义: 文章,艺术

作用: 用来定义一些简短的内容, 章, 节 -> EX: 论坛的帖子, 用户评论, 微博条目

语法: <article>内容</article>

注意: 如果以后出现无法被结构标记取代的模块, 那么继续用div布局

3. 表单

3.1. 表单的作用

用于显示, 收集数据, 并且提交信息给服务器

完整的表单处理包含两部分:

1. 实现数据交互的可见界面元素(前端) EX: 文本框, 密码框, 按钮等
2. 提交后的表单的数据处理(服务器端)

3.2. 表单元素

标记: <form></form>

属性:

1. action: 定义表单提交时发生的动作 -> 即要提交的服务器地址 具体取值与后端服务器人员协同完成 -> 如果省略不写, 默认提交给本页, 无法验证

2. method: 定义表单数据提交的方式

3. 取值:

   1. GET(默认值) 特点:

      • 明文提交, 提交的数据会显示在地址栏上
      • 安全性不高
      • 提交数据的大小有限制 小于 2 KB

      场合: 向服务器要数据时使用, 搜索关键字提交

   2. POST 特点:

      • 隐式提交, 不会将提交的信息显示在浏览器的任何位置
      • 安全性高
      • 无大小限制

      场合: 要传递数据给服务器进行处理时 -> EX: 注册, 登录, 上传文件时

4. enctype: 指定数据进行编码的格式 取值:

   1. application/x-www-form-urlencoded 默认值, 可以将表单中的普通文本, 特殊字符, 标点符号都可以进行二进制编码 -> 然后提交(无法对文件进行提交)
   2. multipart/form-data 将表单中的文件进行二进制编码再提交(字符，标点符号无法编码提交)
   3. text/plan 将表单中的普通字符进行二进制编码提交, 其余无法提交

5. name: 定义表单名称, JS 用到的比较多

6. id: 定义独一无二的标识

3.3. 表单控件

3.3.1. 作用

用于接收用户数据并依托于表单提交给服务器

3.3.2. 表单控件的分类

1. input元素: 文本输入框(用户名，密码), 按钮, 单选框, 复选框 标记: <input> 或 <input />

2. textarea 元素: 多行文本域

   标记: <textarea>内容</textarea>

3. select 和 option: 选项框 标记:

   <select>
     <option></option>
   </select>
   

3.4. input 元素

3.4.1. 作用

用于收集用户信息, 并提供不同的输入字段

3.4.2. 语法

标记: <input>

主要属性: 通有属性, 指所有input都具备的属性

• type: 根据type的值, 来创建各种类型的输入控件 -> EX: 文本框, 密码框, 按钮

• name: 用来定义控件名称, 提供给服务器使用

  注意: 如果不给控件设置名称, 则数据无法提交

  匈牙利命名法: 控件缩写+功能名称( 功能名称输写首字母必须大写 ) -> EX: txtName ( 输入用户名的文本框 ), txtPassword

• value: 设置控件的值, 也是最终提交给服务器的值

• disabled: 禁用控件 -> 表示控件不可用( 不能获取值, 不能被提交 )

  EX: <input type="" name="" value="" disabled>

3.2.3. input 元素详解

1. 文本框与密码框

   • 文本框: <input type="text">

   • 密码框: <input type="password">

   • 属性:

     1. maxlength: 限制输入字符数的数量 -> 取值: 数字

     2. readonly: 只读

        注意: readonly 只读, 允许被提交 disabled 禁用, 不能被提交

     3. name: 用来定义控件名称, 提供给服务器使用

     4. placeholder: 占位符

   文本框和密码框的缩写: txt -> EX: txtName, txtPassword -> <input type="text" name="txtName"> <input type="password" name="txtPassword">

2. 单选框和复选框

   • 单选框: <input type="radio"> 复选框: <input type="checkbox">

   • 属性:

     1. name: 名称, 同时具备分组作用 -> 一组单选框或者复选框的 name 值必须相同

        单选框: 一组中只能有一个数据被提交 -> 缩写为 rdo

        复选框: 一组数据后台获取时名称相同 -> 缩写为 chk

     2. value: 值 被选中后提交的值

     3. checked: 设置默认选中

3. 按钮

   • 提交按钮: <input type="submit"> 作用: 提交表单数据给服务器

   • 重置按钮: <input type="reset"> 作用: 将表单恢复到初始化的状态

   • 普通按钮: <input type="button"> 作用: 由用户自定义功能( 通常和js一起使用 )

   • 属性:

     1. name: 定义按钮名称 -> 缩写: btn
     2. value: 按钮上的文字内容

   • 其他按钮:

     1. 图片按钮( 提交 ) : <input type="image" src=""> 属性: src
     2. 按钮( 提交 ): <button>内容</button>

4. 隐藏域和文件选择框

   • 隐藏域: <input type="hidden"> 作用: 要提交给服务器, 但是又不想给用户看到的数据, 放到隐藏域中

   • 文件选择框: <input type="file"> 作用: 允许打开文件的选择框, 选择文件进行上传

   • 属性:

     1. name: 缩写为 txt
     2. value: 值

   • 注意：使用文件选择框上传文件的时候, 有以下两点要求:

     1. <form>的 method 属性值必须是 post
     2. <form>的 enctype( 编码格式 )必须是 multipart/form-data

   注意: 就文本框和密码框和文件选择框的 name 缩写为 txt, 单选的为 rdo, 复选的为 chk, 按钮的为 btn

3.5. textarea 元素

3.5.1. 作用

完成多行文本的录入功能

3.5.2. 语法

• 标记: <textarea></textarea>
• 属性:
  1. name: 名称, 缩写为 txt
  2. cols: 指定文本区域的列数 -> 变相设置控件的宽度
  3. rows: 指定文本区域的行数 -> 变相设置控件的高度
  4. readonly: 只读

3.6. 选项框

• 分为: 下拉选项框和滚动列表
• 语法:
  1. <select></select>:
     • 作用: 创建选项框
     • 属性:
       1. name: 名称 缩写为sel
       2. size: 指定选项框默认能显示几项内容, 默认值为1, 如果大于1, 则为滚动列表
       3. multiple: 设置允许多选, 该属性无值
  2. <option></option>
     • 作用: 定义选项框中子选项
     • 属性:
       1. value: 选择的值
       2. selected: 预选中, 设置默认被选中选项

2.7. 其他元素

2.7.1. label 元素

• 作用: 关联文字与表单控件, 点击文件时如同点击表单控件一样

• 语法: <label>文本</label>

• 属性: for -> 表示与该元素相关联的表单控件 id 属性值

  EX: <input type="radio" name="rdoGender" value="M" id="chkMale" > <label for="chkMale">男<label>

  上面的写法还可以: <label>用户名 <input type="" /> </label>

2.7.2. 为控件分组

• <fieldset></fieldset>

• 子元素: <legend></legend>指定分组的标题

• <fieldset>
    <legend>用户基本信息</legend>
    <input type="" name=""/>
    .......
  </fieldset>
  

2.8. 新的表单元素(HTML5新标记 ) 缩写 txt

属性: required -> 非空限制( 属性无值 ) -> 不填入信息时 会提示

1. 电子邮件类型: <input type="email">
2. 搜素类型: <input type="search">
3. url 类型: <input type="url">
4. 电话号码类型: <input type="tel">
5. 数字类型: <input type="number">
   • 属性:
     1. min: 控件接受的最小值
     2. max: 控件接受的最大值
     3. step: 控件控制递增的步长, 默认为1
6. 范围类型: <input type="range">
   • 作用: 允许指定范围内的一个值
   • 属性:
     1. min: 指定范围的最小值( 下限值 )
     2. max: 指定范围的最大值( 上限值 )
     3. step: 值变化的步长
     4. value: 设置初始值
7. 颜色类型: <input type="color">
   • 作用: 颜色拾取控件
8. 日期类型: <input type="date">
   • 作用: 允许用户选择日期
9. 周类型: <input type="week">
   • 作用: 与date类似, 但只能选择周
10. 月份类型: <input type="month">
    • 作用: 与date类似, 选择一个月份