web前端日常更新 7.14

最新推荐文章于 2024-07-25 09:00:00 发布

呵呵＆

最新推荐文章于 2024-07-25 09:00:00 发布

阅读量108

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/m0_72174649/article/details/125792662

版权

今天的主要内容是表格，直接开整：

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，

表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单

在网页中也可以来创建出不同的表格。

1、在HTML中，使用table标签来创建一个表格

2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr

3、在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

4、table标签里有自带的属性： border="1" width="40%" align="center"

5、rowspan用来设置纵向的合并单元格

6、colspan横向的合并单元格

有一些情况下表格是非常的长的

这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签

thead 表头永远在表格的头部

tbody 表格的主体永远在表格中间

tfoot 表格的底部永远在表格底部

用来区分表格不同的部分，顺序，浏览器会自动调整

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

通过table > tr 无法选中行需要通过tbody > tr

（1）input来创建一个文本框，

type属性是text

name属性：提交内容的名字

如果希望表单项中的数据会提交到服务器中，必须指定一个name属性

value属性值：作为文本框的默认值显示

用户名

（2）input创建一个密码框

type属性值是password

name属性：提交密码的名字

密码

（3）input创建一个单选按钮

- type属性：radio

- name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择

- value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器

- checked="checked"属性默认选中

性别 <input type="radio" name="gender" value="male" id="male" />男 <input type="radio" name="gender" value="female" checked="checked" id="female" />女 <br /><br />

（4）input创建一个多选框

-type属性:checkbox

-checked="checked"属性默认选中

爱好

<input type="checkbox" name="hobby" value="zq" />足球 <input type="checkbox" name="hobby" value="lq" />篮球 <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球

(5)select来创建一个下拉列表

-name属性设置给select，

-value属性设置给option

-selected="selected"，将选项设置为默认选中

你喜欢的明星

在下拉列表中使用option标签来创建一个一个列表项

</select>

（6）textarea创建一个文本域

自我介绍 <textarea name="info"></textarea>

（7）input创建一个提交按钮，点击后表单就会提交

-type属性值：submit

-value属性：指定按钮上的文字

（8）创建一个重置按钮，type="reset"

点击重置按钮以后表单中内容将会恢复为默认值

（9）创建一个单纯的按钮，

这个按钮没有任何功能，只能被点击

（10）button标签来创建按钮

方式和使用input类似，它是成对出现的标签，使用起来更加的灵活

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      /*需求一、设置表格的宽度，表格居中，边框 */
      table{
        width: 400px;
        margin: 0 auto;
        border: 1px solid red;
        /* border-spacing:0px ; */
        border-collapse: collapse;
        background-color: pink;

      }
      /*需求二：设置内部边框*/
      tr,td,th{
        border: 1px solid red;
      }
      tr:nth-child(2n+1){
        background-color: sandybrown;
      }
      tr:hover{
        background-color: green;
      }
      td{
        height: 50px;
        text-align: center;
        /* vertical-align: middle; */
      }

      /* 需求三： 设置表格的边框，要单线边框 */
        /* 方法一 */
        /*  border-spacing:0px ; */
        /*方法二*/
        /* border-collapse [kə'læps] 设置行和单元格的边是否合并
            如果设置了边框合并，则border-spacing自动失效
              可选值
                separate  默认值，不合并
                collapse  合并边框    
          */
      /*需求四：设置背景色样式*/
      /*需求五： 设置隔行变色 tr:nth-child(even)*/
      /*需求六： 鼠标移入到tr以后，改变颜色*/
      /* 需求七：调整td文字在表格中的位置  vertical-align、text-align*/
    </style>
  </head>
  <body>
    <!--table是一个块元素-->
    <table>
      <tbody>
        <tr>
          <!--
            可以使用th标签来表示表头中的内容，
              它的用法和td一样，不同的是它会有一些默认效果
          -->
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>住址</th>
        </tr>
        <tr>
          <td>1</td>
          <td>孙悟空</td>
          <td>男</td>
          <td>花果山</td>
        </tr>
        <tr>
          <td>2</td>
          <td>猪八戒</td>
          <td>男</td>
          <td>高老庄</td>
        </tr>
        <tr>
          <td>3</td>
          <td>沙和尚</td>
          <td>男</td>
          <td>流沙河</td>
        </tr>
        <tr>
          <td>4</td>
          <td>唐僧</td>
          <td>男</td>
          <td>女儿国</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

input属性补充

1: autocomplete="off" 关闭自动补全

2: readonly 设置为只读，不能修改

3: disabled 设置为禁用

4: autofocus 自动获取焦点

5: placeholder 提示内容