02-html标签&表格&表单

html的基本标签

• 列表标签

  • 无序列表

    <ul>
      <li>哈哈1</li>
      <li>哈哈2</li>
      <li>哈哈3</li>
    </ul>
    

    • 快速生成4个li，里面的文本是哈哈+数值 ul>li*4{哈哈$}
    • ul和li都是独占一行
    • 应用场景：导航/新闻列表/商品列表

  • 有序列表

    <ol type=""  start="">
      <li>哈哈1</li>
      <li>啊哈哈2</li>
    </ol>
    

    • 设置排列方式 type
      1. 默认是数值排列
      2. 设置英文字母的排列 A/a
      3. 罗马数字排列 I/i
    • 设置排列的起始值 start值必须是数字

  • 自定义列表

    <dl>
        <dt>图片，名字</dt>
        <dd>图片的说明，文字的解释</dd>
        <dd></dd>
        <dd></dd>
    </dl>
    

    • 快捷生成自定义列表结构 dl>dt{图片，名字}+dd*3{哈哈}
    • dl,dt,dd独占一行
    • 应用场景：左边是图片，右边是文本或者上面是图片，下面是文本
• 布局标签
  • div标签：划分网页板块
    • 独占一行，没有任何自带样式
  • span：小文本
    • 在同一行显示，没有任何自带的样式
• 表格标签

      <table border="3" width="300" height="300" bordercolor="red" cellspacing="0" cellpadding="0" align="center">
        <tr align="center">
            <td align="left">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      </table>
  

  • 表格 table table>tr>td 三行三列的表格：table>tr3>td3
    • 边框 border="数字" 数字越大越粗
    • 宽度 width="数字"
    • 高度 height="数字"
    • 边框颜色 bordercolor="颜色单词"
    • 单元格之间的间距 cellspacing="数字" cellspacing="0"去掉默认间距
    • 内容距离单元格之间的距离 cellpadding="数字" cellpadding="0"去掉距离
    • 表格的对齐方式 align
      1. left 默认左对齐
      2. center 居中
      3. right 居右
  • 行tr
    • align: 调整文字在单元格内的水平对齐方式
      1. left 默认左对齐
      2. center 居中
      3. right 居右
    • valign: 调整文字在单元格内的垂直对齐方式
      1. middle 默认值居中
      2. top 顶部对齐
      3. bottom 底部对齐
  • 列td
    • align: 调整文字在单元格内的水平对齐方式
      1. left 默认左对齐
      2. center 居中
      3. right 居右
    • valign: 调整文字在单元格内的垂直对齐方式
      1. middle 默认值居中
      2. top 顶部对齐
      3. bottom 底部对齐
    • 合并列 colspan="数值" 列不同合并列 rowspan="数值"
      1. 补全表格，观察几行几列，
      2. 确定是列合并还是行合并，哪个不同合并哪个,都存在的时候先合并列再合并行
      3. 观察合并的单元格的个数，有几个合并属性对应的值就几
      4. 将合并属性放到合并单元格的第一个，
      5. 找到多出来的单元格所对应的位置，将其注释
• 表单标签

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

+ action: 提交的路径
+ method: 提交方式
  - get
    1. 用来获取数据
    2. 安全度不高
    3. get传送数据一般较小，在2kb以下
  - post
    1. 一般发送数据
    2. 安全度高
    3. post传输数据量较大，一般不受限制
+ 文本输入框
```html
  <input type="text" value="默认值" placeholder="提示信息">
```  
+ 密码输入框
```html
 <input type="password" placeholder="提示信息" value="默认值">
```  
+ 提交按钮 提交到form对应的action仲
```html
 <input type="submit" value="按钮文本">
```
+ 重置按钮 将输入框中的值清空，默认值不能清空
```html
<input type="reset" value="按钮文本">
```
+ 普通按钮 不带任何功能的按钮
```html
<input type="button" value="普通按钮">
```

初识css