html基本标签

html基本的标签

• 布局标签

  • div 划分网页板块
    • 双标签/不带任何自带样式/独占一行
  • span 小文本
    • 双标签/不带任何自带样式/在同一行显示

• 列表标签

  • 无序列表

      <ul>
        <li><b>哈哈哈</b><>
        <li><a href="">嘿嘿嘿嘿</a><>
        <li>嘻嘻嘻<>
      </ul>
    

    • 应用场景：网页的导航/新闻列表/商品列表

  • 有序列表

  • 自定义列表

      <dl>
        <dt>图片/名词</dt>
        <dd>图片说明/名词的解释</dd>
        <dd></dd>
        <dd></dd>
      <>
    

    • 应用场景：1.上面的图片，下面是文字 2.左边是图片，右边是文字

• 表格: 主要用在后台系统展示数据，一般不用在前台网页布局

  • table 表格
    • 边框 border=“数字” 像素px
    • 宽度 width=“数字” 高 height=“数字”
    • 表格水平位置 align
      1. left 默认值
      2. center 居中
      3. right 居右
    • 单元格之间的间距 cellspacing=“数值” 一般设置0 去掉单元格之间的间距
    • 调整内容到单元格的距离 cellpadding=“数值”
    • 快速生成表格 table>tr10>td8{$} 10行8列的表格
  • tr 行
    • 水平对齐方式 align
      1. left 默认值
      2. center 居中
      3. right 居右
    • 垂直对齐方式 valign
      1. middle 居中 默认值
      2. top 居上
      3. bottom 居下
  • td 列
    • 水平和垂直的对齐方式和tr一样
    • 列合并 colspan
    • 行合并 rowspan
    • 合并的步骤：
      1. 补全表格，有几行几列就生成几行几列的表格
      2. 观察属于行合并还是列合并，哪个不同合并哪个
      3. 确定属性之后，观察合并几个单元格，属性对应的值就是几
      4. 将合并的属性放到合并的起始的单元格
      5. 注释掉多余的单元格
      • 表单 form

    <form action="" method=""></form>
    

    • action: 提交路径
    • method: 提交方式 GET/POST
      • GET一般用来获取数据 POST一般提交信息
      • GET请求安全系数较低
      • get可以传送的数据量较小 一般不超过2kb post可以传送的数据量较大 理论上不受限制
    • 表单元素 单标签/在同一行显示
      • 文本输入框

          请输入姓名：<input type="text" placeholder="请输入姓名" value="小白">
          placeholder：提示信息 value：默认值
        

      • 密码输入框

        请输入密码：
        <input type="password">
      

    • 提交按钮

     <input type="submit" value="搜索">
     value：按钮文本
    

    • 重置按钮

        <input type="reset" value="重新">
         value：按钮文本
      

    • 普通按钮

       <input type="button" value="普通按钮">