zoukankan      html  css  js  c++  java
  • 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:表格边框
     宽度
     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属性
            宽度
     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 设置默认被选中,无值属性。

        

  • 相关阅读:
    Eclipse导入Ant项目
    Eclipse修改默认包路径的起始文件夹
    Java中DAO/DTO/PO/VO/BO/QO/POJO
    FreeMarker与Spring MVC 4集合的HelloWorld示例
    FreeMarker与Spring MVC 4结合错误:Caused by: java.lang.NoClassDefFoundError: org/springframework/ui/freemarker/FreeMarkerConfiguration
    FreeMarker与Servlet结合示例
    FreeMarker-简单示例
    Java模板引擎-FreeMarker
    SiteMesh2-sitemesh.xml的其它映射器的用法
    SiteMesh2-sitemesh.xml的ParameterDecoratorMapper映射器的用法
  • 原文地址:https://www.cnblogs.com/QiliPING9/p/9027935.html
Copyright © 2011-2022 走看看