【前端02_HTML】基本标签:表格、输入框Input、Label、列表等

文章目录

  • 基本标签
    • 表格 Table
      • 表格属性
      • 表格结构化
    • 输入 Input *
      • 种类
      • H5 新加种类
      • disable 和 readonly 的区别
    • Label
    • 列表
      • 如何去掉列表默认样式(li 前的点)
      • 有序列表 ol
      • 无序列表 ul
      • 自定义列表 dl
      • 基本标签的示例


基本标签

表格 Table

表格加载 速度慢效率低,尽量不用(可能在制作火车时间表上使用)
通常的格式为:table 声明表格,tr 表格的行,td 表格的列

在这里插入图片描述

<table border="1">
      <tr>
          <td width="300">
			  <input type="checkbox">网站建设与传播td><td>
              <input type="checkbox">电子商务
		  td>
      tr>
      <tr>
          <td><input type="checkbox">数字化展馆td>
          <td><input type="checkbox">多媒体互动td>
      tr>
table>

几组 tr 就是几行,几组 td 就是几列。


表格属性

  • Cellspacing:单元格与单元格的间距
  • Cellpadding:单元格与文字的间距
  • Border:给表格加边框,通常值为1
  • Bordercolor:边框颜色
  • Colspan:跨列合并
  • Rowspan:跨行合并
  • Align=“center” 位置规定
  • 表格结构化

    thead:表格头
    tbody :表格体,自己不写的话谷歌浏览器会帮我们写
    tfoot :表格尾注解
    caption :标题,用来注释表格的用途


    输入 Input *

    一般输入 input 要写在 form 里,组成一个块儿,用来给后台传数据的功能。
    Form:表格提交

    其中 action 是说明提交的位置,method 是提交的方法,一般有两种方法 Post 和 Get

    种类

    • 最普通的

    • 密码输入框 ,输入密码时会变成小星星
      placeholder是框里面浅灰色的提示语。

    • 重置 ,只能在form里使用

    • 提交 ,只能在form里使用

    • 图片按钮

    • 单选框 Radio

      "radio" name="sex">male
      "radio" name="sex">female
      
    • 多选框 Checkbox
      name 让多个多选框组成一组

      "checkbox" name="habit"> 唱
      "checkbox" name="habit"> 跳
      "checkbox" name="habit"> rap
      
    • 提交文件

    • 按钮
      这里的disabled是 禁止点击 的意思

    H5 新加种类

    以下是 H5 新加的 input 标签使用方法

    • 邮箱格式限制

      其中Aotofocus的意思是 打开网页光标直接定位在这个输入框上
    • 只能输入网页
      其中Required是== 必填项,提交form的时候这个框框必须有东西!==
    • 只能填数字
    • 颜色
    • 月份
    • 日期
    • 滑竿
      这个不一样的浏览器 样式 不一样的

    disable 和 readonly 的区别

    • 通常 disable 是input 不能用了
    • readonly是只读
    • 这两个都是不能改变input框的值
    • 区别在于:当你用表单提交的时候,大家可以实验一下的代码,观察URL中的参数变化
    
    <form action="" method="">
       <input type="text" name="name" value="王二" readonly>
       <input type="submit" value="提交">
    form>
    
    
    <form action="" method="">
       <input type="text" name="name" value="王二" disabled>
       <input type="submit" value="提交">
    form>
    

    Label

    label 尽量与 input 组合使用,点击 label ,就会取 input 框中的焦点。不过 label 中的 for 属性要写成 input 的 id 名字

    <label for="name">用户名label>
        <input type="text" id="name">
    

    样式如下:
    【前端02_HTML】基本标签:表格、输入框Input、Label、列表等_第1张图片


    列表

    如何去掉列表默认样式(li 前的点)

    list-style:none;

    	//去掉列表默认样式例子:
    	
      "list-style-type: none">
    • 1231

    有序列表 ol

    每个 li 前面都有数字序列
    在这里插入图片描述

    无序列表 ul

    每个 li 前面是黑点,有三级样式,后面的都是黑色方块
    【前端02_HTML】基本标签:表格、输入框Input、Label、列表等_第2张图片

    自定义列表 dl

    • dl 声明自定义列表
    • dt 声明列表的表头
    • dd 是每个列的每个元素
      如下所示

    基本标签的示例

    • 富文本编辑器:就是各种标签的集合

    你可能感兴趣的:(【前端】笔记,萌新,前端,教学,Table,Input)

    商品类目 虚拟