HTML的列表 表格 链接 表单 学习

web02

1. 列表

   • 自定义列表

     • <dl>
       

           <dt></dt> 列头
       

           <dd></dd> 列表项
       

           <dd></dd> 列表项
       

           <dt></dt>
       

           <dd></dd>
       

       </dl>
       

   • 有序列表

     • <ol>
       

           <li>></li>
       

       </ol>
       

   • 无序列表

     • <ul>
       

           <li></li>
       

       </ul>
       

2. 链接

   1. 超链接（a）:

      • href：链接地址
        • #:可以点击 不跳转
        • 相对路径:当前项目下的某个页面
        • 实际路径:网址
      • target:访问链接地址的打开方式
        • _self:默认 在当前窗口打开
        • _blank:在新建窗口打开
        • _top：置顶（本窗口）打开
      • a标签的内容可以使文字，图片，。。。 当点击这些时 发生跳转
      • 快速定位:锚点 #
        • 通过#+id值 定位跳转到目标页面的某个位置（id值的标签）

   2. iframe浮动框架：

      • src：框架中显示的页面
      • scrolling:滚动条的显示 取值auto Yes no

   3. 图片映射：

      • <img src="" usermap="#XX">
        

        <map name="xx">
        

            <!-- (0,0)左上角   (160,150)右下角  
        

                        长160  宽150
        

                     -->
        

            <area shape="rect" coords="0,0,160,150" href="正方形.html" />
        

            <!-- (75,320) 圆心位置  72半径 -->
        

            <area shape="circle" coords="75,320,72" href="圆.html" />
        

        </map>
        

3. 表格

   1. 表格结构:
      • 表名：caption
      • thead：列头
        • tr>td*n
      • tbody：表中数据
        • tr * n>td * m
      • tfoot：合计
        • tr>td*n
   2. 合并单元格
      1. 横向：将一行中若干个列的单元格合并为一个 跨列 colspan
      2. 纵向: 将一列中若干个行的单元格合并为一个 跨行 rowspan
   3. cellspacing:单元格之间的间距
   4. cellpadding:单元格内内容与单元格边的距离

4. 表单

   1. form的属性

      1. action:表单提交的目标
      2. method:取值get与post 推荐使用post

   2. input

      1. type=text
         1. name=value 名值对
         2. autofocus自动获取焦点
         3. autocomplete自动记录
         4. required必填
      2. type=password
         1. maxlength字符最大长度