夜灵的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图像看到表单，预习框架
   今天的表单元素全写出来看下有什么不同？