HTML-表格-列表-结构标记-表单


1.表格
  1.表格语法
    1.标记
      1.表格
        <table></table>
      2.行
        <tr></tr>--table row
      3.单元格/列
        <td></td>--table data
      练习:
        1.创建一个4行4列的表格
 2.在table标记中嵌套tr
 3.在tr中嵌套td
    2.属性
      1.table属性
        border:表格边框
 width:宽度
 height:高度
 align:设置表格的水平对齐方式
       left/center/right
        bgcolor:设置表格的背景颜色
 cellpadding:设置单元格的内边距(内容与td之间的间距)
 cellspacing:设置单元格外边距(td边框外的间距)
      练习:
  在练习一的基础上将表格的样式设置如下:
     1.设置表格尺寸为400*400px
     2.设置背景颜色为orange
     3.设置表格水平居中对齐
     4.设置内边距为5px
     5.设置外边距为10px
      2.tr属性
        1.align 设置当前行内容的水平对齐方式
                 left/center/right
        2.valign 设置当前行内容的垂直对齐方式
          top/middle/bottom
 3.bgcolor 设置当前行的背景颜色
 练习:在练习二的基础上
   1.设置第二行的数据靠右对齐
   2.第二行背景颜色为紫色purple
   3.设置第三行垂直方向靠上对齐 
      3.td属性
        width:宽度
 height:高度
 align:水平对齐方式
 valign:垂直对齐方式
 bgcolor:背景颜色
 colspan:跨列
 rowspan:跨行
      4.表格的复杂应用
        1.行分组
   可以将连续的几个行,划分到一个组中,并进行统一管理
   1.表头行
     表格中最上面一行进行分组的话,可以放在表头行中。
     <thead></thead>
   2.表主体行
     表格中将若干行放在tbody中,进行统一管理
     <tbody></tbody>
   3.表尾行
            将表格中最后一行进行分组管理的话,可以放在表尾行中。
     <tfoot></tfoot>
 2.不规则表格使用
   1.跨列
     colspan 从指定单元格位置处开始,横向向右合并几个单元格(包含自己),被合并掉的单元格要删除。
   2.跨行
     rowspan 从指定单元格位置处开始,纵向向下合并几个单元格(包含自己),被合并掉的单元格要删除。
   注意:
    如果表格进行了分组管理,不能将不同组设置跨行操作。
      5.可选标记
        1.表格标题
   <caption></caption>
   如果设置表格标题,则必须将<caption>放于<table>下的第一个子元素位置处。
 2.行/列标题
   <th></th>所有的td都可以用th取代
      6.表格嵌套
        表格的嵌套,在td中取嵌套另一个表格
2.列表
  1.列表的作用
    按照从上到下(从左到右)的方式来显示所有的数据,并且可以在数据前增加显示的标识。
  2.列表组成
    1.列表都是由"列表类型"和"列表项"来组成。
      1.列表类型
        有序列表:<ol></ol>--order list
 无序列表:<ul></ul>--unorder list
      2.列表项
        用于展示数据(嵌套在列表类型中)
 <li></li>--list item
        练习:
   创建有序列表,4个列表项,每个列表项中分别写上四大名著的名称
    2.列表属性
      1.有序列表
        1.type 指定列表标识的类型。
   取值:
      1 数字,默认值
      a 小写字母
      A 大写字母
      I 大写罗马数字
      i 小写罗马数字
       2.start 指定起始编号从第 几 位置开始排序。
     2.无序列表
       1.type 指定列表的标识类型
         取值:
     1.disc 实心圆点
     2.circle 空心圆
     3.square 实心方块
     4.none 不显示标识
    3.列表嵌套
      在一个列表项(li)中去嵌套另一个列表.
      语法:
        <ol>
   <li>
     <ul>
        <li>内容</li>
        <li>内容</li>
     </ul>
   </li>
 </ol>
  3.定义列表
    1.什么是定义列表
      定义列表常用于给出一类事物或对名词的解释说明。
    2.语法
      1.<dl></dl> 表示定义列表
      2.<dt></dt> 表示定义列表中要解释说明的名词
      3.<dd></dd> 表示定义列表中对名词解释的内容
      <dl>
         <dt>名词</dt>
  <dd>解释名词的具体内容</dd>
      </dl>
      使用场合:图文混排时使用
3.结构标记
  1.结构标记的作用
    用于描述整个网页的结构(取代div做布局)
    提升标记的语义性和可读性。
  2.常用的结构标记
    1.<header></header>
      作用:定义网页或某部分内容的头部。
    2.<nav></nav>
      作用:定义网页的导航链接部分。
    3.<section><section>
      作用:定义网页主体内容。
    4.<aside></aside>
      作用:定义页面中侧边栏的信息,靠近边缘。
    5.<footer></footer>
      作用:定义网页中偏底部的内容,比如:备案号,解释说明,联系方式等。
    6.<article></article>
      作用:定义与文字相关的内容,如:论坛帖子,微博条目,用户评论等。
4.表单
 1.作用
  1.提供可以与用户交互的可视化控件(用户名和密码输入框,登录按钮等)
  2.收集用户信息并提交给服务器
 2.表单的组成部分
   1.前端部分
     表单控件,与用户交互的可视化控件
   2.服务器端部分
     对收集的数据进行提交(提交数据的处理)
   3.表单
     标记:<form></form>
     属性:
        1.action
   作用:定义表单被提交时发生的动作,通常定义的是服务器上处理程序的地址(url),默认提交给本页
 2.method
   作用:指定表单数据的提交方式
   取值:
      1.get(默认值)
        1.明文提交,待提交的数据会显示在浏览器的地址栏中。
        2.安全性不高
        3.提交数据有大小限制,限制2KB
        4.向服务器要数据时使用get方式
      2.post
        1.隐式提交,提交的数据不会显示在地址栏中。
        2.安全性较高
        3.提交数据无大小限制
        4.要传递数据给服务器时使用。

      3.delete 一般禁用
      4.put 一般禁用

        3.enctype
   作用:指定表单数据的编码方式,允许将什么样的数据提交给服务器。
   取值:
     1.application/x-www-form-urlencoded
      默认值,允许将任意的字符提交给服务器(文件无法提交)
     2.multipart/form-data
       允许将文件提交给服务器
     3.text/plain
       只能将普通文本提交给服务器
   4.表单控件
     能够与用户进行交互的可视化控件。
     1.分类
       1.input 元素
       2.textarea-多行文本域元素
       3.select和option-选项框元素
       4.其它元素
     2.input元素
       1.作用
         在页面中提供各种各样的输入控件。如:文本框,密码框,单选按钮,复选框...
       2.语法
         1.标记<input>或<input/>
  2.属性:
    1.type 指定创建输入控件的类型
      ex:
      type="text"
      type="password"
    2.name 为控件定义名称,服务器端使用(必须值)
    3.value 控件的值,服务器端使用
    4.disabled 禁用控件,不能操作并且数据也不能提交给服务器。
      无值属性,只要出现在标记中,就是禁用。
 3.详解
   1.文本框和密码框
     文本框:<input type="text">
     密码框:<input type="password">
     属性:
       1.maxlength
         指定限制输入的字符数
       2.readonly
         只读,只能看,不能改,但允许被提交。
  无值属性,直接将属性放在标记中。
       3.placeholder
         占位符,即默认显示在控件上的文本。
   2.按钮
     1.提交按钮
       <input type="submit">
       功能:将表单中的数据,提交给服务器程序使用
     2.重置按钮
       <input type="reset">
       功能:将表单中的数据恢复到初试化状态。
     3.普通按钮
       <input type="button">
       没有功能
      注意:
        属性:value 定义按钮上显示的文字。
          3.单选按钮和复习框
     单选按钮:<input type="radio">
     复选框:<input type="checkbox">
     属性:
        name 除了定义控件的名称之外,还能起到分组的作用。
        checked 设置默认被选中,无值属性。

    

猜你喜欢

转载自www.cnblogs.com/QiliPING9/p/9027935.html
今日推荐