您的位置: 首页  >  IT文章  >  02-html标签&表格&表单

02-html标签&表格&表单

分类: IT文章 • 2023-10-31 17:47:07

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

相关推荐