HTML标签和属性三

八.列表

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中，这是语义要求

①在列表中嵌套其它元素

 <ol>

      <li><a href="#">汤圆抄橘子</a></li>

      <a href="#">汤圆炒橘子</a>

     <li><a href="#">西红柿炒月饼</a></li>

     <a href="#">西红柿炒月饼</a>

     <li><a href="#">苦瓜炒西瓜皮</a></li>

      <a href="#">汤圆炒橘子</a>

</ol>

②列表嵌套列表

 <h2>列表中嵌套列表</h2>

<ul>

      <li>美国的超极英雄

             <ul>

                      <li>狼叔</li>

                      <li>寡姐</li>

                      <li>小姐姐</li>

             </ul>

      </li>

      <li>日本的超极英雄

           <ul>

                 <li>凹凸曼</li>

                 <li>夜礼服假面</li>

                 <li>蜡笔小新</li>

            </ul>

      </li>

       <li>中国的超极英雄

              <ul>

                     <li>葫芦娃</li>

                     <li>孙悟空</li>

                      <li>蔡徐坤</li>

               </ul>

       </li>

</ul>

4.定义列表

对一个名词，进行解释说明的时候，使用的列表，h5新标签

<dl>

   <dt>要解释的名词</dt>

   <dd>对名词的说明内容</dd>

</dl>

九.结构标记

1.作用

用于网页布局,h5新出了一批结构标记，替代div做布局

这些结构标记与div的作用一模一样，只是增加了可读性

2.常用的结构标记

<header></header>   导航栏<nav></nav> aside             section                         <footer></footer>

1.<header></header>  定义网页的头部，或者某个区域的头部 2.<footer></footer>  定义网页的底部，或者某个区域的底部 3.<nav></nav>定义网页导航栏 4.<section></section>   定义网页主体内容 5.<aside></aside>定义侧边栏 6.<article></article>   定义与文字相关的内容 ex：论坛，回帖，用户评论

十.表单(重点&难点************)

1.作用

1.提供可视化的输入控件

2.收集用户输入的信息，并提交请求给服务器

总结：

form自带提交请求收集数据的功能

ajax提交请求，需要自己去收集数据

使用ajax就不要使用form

2.form的组成

前端：提供表单控件，与用户交互的可视化控件

后端：后台的接口对提交的数据进行处理

3.form表单的使用

①语法

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

②form的属性

1.action

  定义表单提交时发送的动作(向哪个url发送请求)

  如果action不写，或者action没有值，默认把请求发给本页面

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

  2.1 get方法  默认值

      特点：明文提交，提交的内容会显示到地址栏上

            get提交的数据，有大小限制，最大2kb

      使用时机：向服务器要数据的时候使用

  2.2 post方法

      特点：隐式提交，提交的内容不会显示到地址栏

            post提交的数据没有大小限制

      使用时机：要传递数据给服务器的时候使用

  2.3其它的方法---使用form表单，目前不许使用delete,put,option

     delete put option---ajax使用这些方法

3.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详解

1.文本和密码框

文本框 type="text" input默认是文本框

密码框 type="password"

属性：

maxlength 设定输入的最大长度

readonly 只读，无值属性。不能修改但是可以提交

placeholder 占位提示符，默认显示在框内的提示文本

2.按钮

type="submit" 将表单中的数据，收集整理，并发送给服务器

type="reset" 将当前表单恢复到初始化状态

type="button" 没有功能，配合事件，调用js代码

附加知识点 

<button></button>替代了submit

3.单选/复选按钮  

name属性除了作为控件名称以外，还作为控件分组

单选按钮 type="radio"  必须有value才能正确的传递值

复选按钮 type="checkbox" 必须有value才能正确的传递值

checked 无值属性，默认选中

4.隐藏域

type="hidden"

想把数据提交给服务器，但是不想展示给用户看

这种数据就放在隐藏域中

隐藏域，用户看不到，但是又可以提交

5.文件选择框(上传文件的时候使用)

type="file"

注意，使用文件选择框，需要保证form的属性

1.method="post"

2.enctype="multipart/form-data"

属性：multiple  多重，无值属性

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

<textarea></textarea>

允许录入多行文本

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

⑤下拉选

<select name="city">

  <option>佳木斯儿</option>

  <option>淄博</option>

  <option>张家口</option>

  <option>香格里拉</option>

  <option>重庆</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="un" id="r3">

<label for="r3">不透露</label>

2.为控件分组

<fieldset></fieldset>  控件分组

<legend></legend>  分组的标题

十.表单

4.表单元素

⑥其它元素

1.label

2.fieldset

3.浮动框架

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

<iframe></iframe>

src="00_home.html" 要引入网页的路径

width="100%"

height="400px"

frameborder="2px" 框架的边框

scrolling="no" 设置滚动条 yes 或者 no

ex:

<iframe width="100%" height="400px" src="00_home.html" frameborder="2px" scrolling="no"></iframe>

5.新表单元素

①邮箱

<input type="email" name="uemail">

提交时验证填写的邮箱格式是否正确

正确的标准，有@符号，并且@符号前后有内容

②搜索类型

<input type="search" name="us">

自带快速清除的小叉叉

③url类型

<input type="url" name="uu">

验证以http://开头

④电话号码

<input type="tel" name="ut">

移动设备使用时，会弹出虚拟键盘 

⑤数字类型

<input type="number" max="20" min="10" step="3">

max="20" 能接收的最大值

min="10" 最小值

step="3"  步长

⑥范围类型

<input type="range" max="50" min="30" step="5">

max="50"

min="30"

step="5"

⑦颜色类型

<input type="color">

⑧日期类型

<input type="date">

⑨月份类型

<input type="month">

⑩周类型

<input type="week">