夜灵的Html笔记Day03——列表、H5结构标记、表单、Iframe

1.列表

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

   1.列表类型

      1.有序列表：<ol>   order list

      2.无序列表: <ul>   unorder list

         列表项：<li>  list item

     1.1有序列表

        语法： 
  <ol>
     <li>内容</li>
     <li>....</li>
     ......
  </ol>
属性：
 1.type 有序列表的类型

        取值：
  1  （默认值）数字
  a   小写的英文字母
  A   大写的英文字母
  i   小写罗马数字
  I   大写罗马数字

      2.无序列表

         语法：
   <ul>
      <li>内容</li>
      <li>内容</li>
      <li>内容</li>
      ......
   </ul>

         属性：
   type  无序列表的类型
取值：
  disc   实心圆  (默认值）
  circle  空中圆
  square  实心方块
  none    不显示标识

      3.列表嵌套

         一个列表中嵌套另外一个列表

      语法：

         <ul>
   <li>
   <ol>
      <li>内容1</li>
      <li>内容2</li>
      .....
   </ol>
   </li>
</ul>

  ex:

   用有序列表显示5个超链接，用大写的字母排序

   用无序列表显示3张图片，不显示列表项标识

  课堂练习？？？？

<img src="1.jpg" />

<img src="images/2.jpg"/>

      4.自定义列表 

        主要用于要给出一类事物的定义情形，情景
1.语法：
  <dl></dl>  创建一个自定义列表
  <dt></dt>   定义要解释的专有名词
  <dd></dd>   定义对志有名词 进行解释的内容
使用的场合：图文混排的时候使用

2.H5的结构标记

   1.什么是？

      在HTML5中，专门提出的一级用来制作网页布局的

   作用：

     取代div布局，提升布局代码的语义性和可读性

     ex: <div></div>---<header></header>

   2.常用标记

      1.header元素

         作用：定义网页或其它部分内容的页头信息（网页顶部的内容）

         语法：<header></header>

      2.nav元素

         作用：定义页面的导航内容
语法：<nav>内容</nav>

      3.section元素

         作用：定义网页的主体内容
语法：<section></section>

      4.aside元素

         作用：定义网页任何一个位置的边栏
语法：<aside></aside>

      5.footer元素

         作用：定义网页的底部信息（最下面的公司，公告的信息）

         语法：<footer></footer>

      6.article元素

         作用：定义与文章相关的内容部分，比如：简短的内容，新闻，微博条...

3.表单（重点）***

   1.作用：用于显示，收集数据，并提交信息给服务器

      1.实现数据交互的可见界面元素（前端 ）

      2.提交后的表单数据处理 （后台）

   2.表单元素

      标记：<form></form>

      属性：

         1.action
   定义表单提交时发生的动作
  指定服务器端处理程序的地址url
  *：如果省略，默认提交给本页
2.method
   表单数据的提交方式
  取值：
      1.get 默认值
         明文提交，提交的数据会显示在地址栏上
         安全性不高
 提交数据有大小限制 ？？
 场合：向服务器要数据时使用，搜索关键字提交
      2.post
         特点：
 隐匿提交，不会将提交信息显示在浏览器的任何位置
 安全性较高
 提交数据大小 无限制
 场合：要传递数据给服务器进行处理时，使用post
 **：提交，注册，上传文件等....

         3.enctype
  作用：指定数据进行编码的方式
  取值：
     application/x-www-form-urlencoded
       默认值，可以将表单中的普通文本，特殊字符，标点符号都进行二进制编码
       然后进行提交
     multipart/form-data
       可以将表单中的文件进行二进制编码再提交字符，标点符号无法进行编辑提交
     text/plain
       可以将表彰普通字符进行二进制编码再提交，其余都无法提交
 4.name
    定义表单名称
 5.id  定义唯一标识

4.表单控件

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

   1.表单控件的分类：

      1.input元素

         文本输入框(文本框，密码框)，按钮，单选按钮，复选框....
语法：<input/>

      2.textarea

         多行文本域
语法：<textarea></textarea>

      3.select和option元素

         选项框
语法：
<select>
    <option>内容</option>
    <option>内容1</option>
    ......
</select>

      ...

 5.<input>元素 ***

   1.用于收集用户信息

      <input/>

    *****:所有的input元素都具有的属性

      1.type

          根据type类型的值，来创建各种类型的输入控件
 ex:text文本框，密码框，提交

       2.name 

           控件的名称，提供给服务器用

       3.value

           控件的值，最终提交给服务器的值 

       4.disabled

           禁用控件
  **：表示控件不可用（不能获取值，不能被提交）
  注意：该属性无值

  6.input控件详解

     1.文本框和密码

         文本框：<input type="text">
密码：  <input type="password">

      2.专有属性

          1.maxlength
    限制输入字符的长度，数量
    取值：数字
 2.readonly
   只读  （该属性无值）
   disabled  禁用，不能被提交
   readonly  只读，允许被提交
 3.name
    文本框和密码框的缩写：txt
    <input type="text" name="txtName">
    <input type="password" name="txtPwd">
 4.placeholder
    占位符

     3.单选按钮和复选框

         单选按钮：<input type="radio">
复选框：  <input type="checkbox">
专有属性：
    1.name
       名称，同时具有分组作用
    单选按钮：一组中只能有一个按钮被提交
    复选框：一组数据后台获取时名称相同
     缩写：radio---rdo
           checkbox--chk

             2.value
       值
被选中后提交的值
    3.checked
       设置默认被选中
***:该属性无值

      4.按钮

          1.  <input type="submit">
     提交按钮：提交表单的数据给服务器
 2.  <input type="reset">
     重置按钮：将表单恢复到初始化的状态（清除）
 3.  <input type="button">
     普通按钮（自定义）：由用户自己定义功能
 共有属性：
    1.name
        定义按钮名称，缩写：btn

             2.value
        按钮上文字

          其它按钮：
    1.   <input type="image">
       图片按钮(提交功能
属性：src
    2.  <button>内容</button>
      按钮（提交按钮

      5.隐藏域和文件选择框

         1.隐藏域
    <input type="hidden">
    作用：要提交给服务器，但是用户不想看到的数据，放在隐藏域中
2.文件选择框
    <input type="file">
    作用：允许打开文件选择框，选择文件进行上传
 共有属性：
    name:名称
    value:值
***：使用文件选择框上传文件时，有以下两点要求
 1.form的method属性是post值
 2.enctype属性值必须是multipart/form-data

     6.textarea元素

         作用：完成多行文本的录入功能
语法：<textarea></textarea>
属性：
   1.name 
      缩写：txt
   2.cols
      指定文本区域的列数（设置textarea的宽）
      值：数字
   3.rows
      指定文本区域的行数 （高）
   4.readonly
      只读，可以提交给服务器

     7.选项框

        下拉选项框  
滚动列表
语法：
   <select></select>
   创建选项框（滚动列表）
   属性：
      1.name  名称，缩写：sel
      2.size
          默认值：1
  指定选项框默认能显示几项内容
  如果默认值大于1，则为滚动条列表
      3.multiple
          设置允许多选
  ***：该属性无值

            2.<option></option>
   作用：定义选项框的子选项
    属性：
       1.value  选项的值
2.selected  预选中，设置默认被选中的选项

 ***：该属性无值 

4.表单的其它元素

   1.label元素

     作用：关联文字与表单控件，关联后点击文字如同点击表单控件一样

     语法：<label></label>

     属性：for

        该元素相关联的表单控件的ID属性值

   2.控件分组

      语法：<fieldset></fieldset>

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

1.追加常用标记

   1.浮动框架

      作用：可以在一个浏览器窗口中同时显示多个html文档

      语法：

         <iframe>文字内容</iframe>

         **：当你当前浏览器不支持iframe标签时，文字内容就是显示

      属性：

         src   浮动框架中的网页的url(地址
width  宽
height
frameborder  浮动框架的边框，如果不想要边框的话，设为0

2.新表单元素

   (html5新标记)

   1.电子邮件类型

      <input type="email"/>

   2.搜索

      <input type="search"/>

   3.url

      <input type="url"/>

   4.电话号码

      <input type="tel"/>

   5.数字

      <input type="number"/>

      属性：

        min  定义控件接受的最小值 
max  最大值 
step  控制控件递增的步长，默认为1

   6.范围

      <input type="range"/>

      属性：

         min  指定范围的最小值
max  最大值
step  步长
vlaue  设置初始值

    7.颜色

       <input type="color"/>

       拾取颜色控件

    8.日期类型

       <input type="date"/>

       选择日期

    9.周类型

       <input type="week"/>

       只能选择周

    10.月份

       <input type="month"/>

作业：

   table表格的layout???

   bgcolor,color为什么不起作用？？

   菜鸟教程：html4.0图像看到表单，预习框架

   今天的表单元素全写出来看下有什么不同？