20230210----重返学习-line box及表格元素及表单元素

已于 2023-03-22 00:03:49 修改
阅读量130 收藏
点赞数
分类专栏： 重返学习 文章标签： 学习 css css3
于 2023-02-10 23:48:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/128978956
版权
文章介绍了如何在HTML的ul>li列表中设置边框，并探讨了line-height、vertical-align属性以及CSS布局心得。接着讲解了表格元素的结构与样式，包括表格的合并以及表格属性与CSS样式的关系。最后提到了表单的基础元素如input、button、label等，以及表单数据提交的相关概念。
摘要由CSDN通过智能技术生成

day-004-four学习

复习

ul>li有序列表每一项设置边框

要在ul>li有序列表每一项设置边框

  • 思路实际上就每个子元素都设置边框，之后用相邻兄弟选择器或通用兄弟选择器清掉重叠的边框线。
    • 这个思路也可以用在ol>li无序列表及dl>dt/dd自定义列表。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>页签标签</title>
  <style>
    li{
      border: 1px solid rgb(255,255,0);
    }
    li~li{
      border-top-width: 0;
    }
  </style>
</head>
<body>
  <ul>
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
    <li>第4项</li>
  </ul>
</body>
</html>

line-height行高

定义

line-height就是当前元素内部内容每一行基线与基线之间的高度。

它的值会继承到子元素身上。

默认值约为1.2，不过不同浏览器不一样，一般是1.0到1.5之间。

继承性
  • 从父级继承到自身时，只会继承父级具体的数字或px像素。
    • 但是继承之后的计算，还是相对于自身font-size属性。
line-height和height和font-size的区别
  • height指的是元素的整体高度
  • line-height指的是一行文字所占据的高度
  • font-size指的是一个文字的高度

vertical-align

如果一个块元素没有设置具体的height，那么它是由内容撑起来的，即多行文本中每一行的行高加起来的。

vertical-align 用来指定inline行内元素或table-cell表格单元格元素的垂直对齐方式。

  • vertical-align 只对行内元素、行内块元素和表格单元格元素生效，不能用它垂直对齐块级元素。

top-line顶线与middle-line中线与base-line基线与bottom-line底线与line-box行内盒子与line-boxes行盒等概念

顶线中线基线底线行盒等概念

  • 父级元素基线一直都在。
    • 元素的vertical-align只是让元素自身的top-line顶线与middle-line中线与base-line基线与bottom-line底线等概念与父级元素基线进行各种对齐。
  • 图片默认基线是底部
  • 文本的baseline基线是字母x的下方
  • inline-block行内块元素默认的baseline基线是该行内块元素margin-bottom的底部，没有margin就是盒子底部
  • inline-block行内块元素内部有文字的时候，其baseline基线就是其内部最后一行文本x的下方

vertical-align可选值

  • baseline 把元素自身基线与父级元素基线对齐。
  • top 把元素及其后代元素的顶部和当前line-boxes行盒顶部对齐。
  • middle 把元素自身中心点与当前line-boxes行盒基线加上x-height一半高度的线对齐。
    • middle是行内级盒子的中心点与父盒子基线加上x-height一半的线对齐，x一半的位置不在中线上，因为大部分字体都是文本下沉的。
  • bottom 把元素及其后代元素的底部跟当前line-boxes行盒底部对齐。

CSS布局心得-层级最简与样式快速查找

  • 布局时，层级能最简就尽量要最简。
  • 查看样式时，一般先不点击，先初步看提示的文案。想看详细，再点击样式。
  • 点击后，如果不对。定位到的标签的父级或子级去找。

css布局层级最简与快速查看样式

Emment语法

  • 元素标签
    div → <div></div>
  • 元素内写文本
    div{文本} → <div>文本</div>

表格元素

table的基础元素

  • <table></table>元素，唯一必选[1,1]，表格主体。
    • <caption></caption>元素，可选但最多一个[0,1]，表格标题，但实测写多个也是可以的
    • <colgroup></colgroup>元素，零个到多个[0,]，配合col元素用来定义表中的一组列表的样式。
      • <col/>元素，零个到多个[0,]，用于控制底下对应列的样式。
    • <thead></thead>元素，可选但最多一个[0,1]，表格的列头行，但实测写多个也是可以的。
      • <tr></tr>元素，零个到多个[0,]，表示一行。
        • <th></th>元素，零个到多个[0,]，加粗并居中。
        • <td></td>元素，零个到多个[0,]，普通单元格。
    • <tbody></tbody>元素，零个到多个[0,]，表格的主体行。
      • <tr></tr>元素，零个到多个[0,]，表示一行。
        • <th></th>元素，零个到多个[0,]，加粗并居中。
        • <td></td>元素，零个到多个[0,]，普通单元格。
    • <tfoot></tfoot>元素，可选但最多一个[0,1]，表格的汇总行，但实测写多个也是可以的。
      • <tr></tr>元素，零个到多个[0,]，表示一行。
        • <th></th>元素，零个到多个[0,]，加粗并居中，标题单元格。
        • <td></td>元素，零个到多个[0,]，普通单元格。
    • <tr></tr>元素，零个到多个[0,]，表示一行。
      • <th></th>元素，零个到多个[0,]，加粗并居中。
      • <td></td>元素，零个到多个[0,]，普通单元格。

从标签语义化来说，最好是使用<thead></thead>等元素，方便浏览器的搜索引擎以及一些扩展。

不过从快速开发及最简层级的角度出发，只使用<tr></tr>元素也是可以，样式的设置要来得方便。

表格样式

<table></table>元素的属性

<table></table>元素的属性，不建议使用。尽量用css样式来达到同样效果。

  • border : 已废弃但还能用，使用像素，定义了表格边框的大小如果设置为1，表示表格具有1px大小的边框。

    <table border="1"></table>

    等价于

    <table></table>
<style>
  table {
    border: 1px solid #000;
  }
  th,
  td {
    border: 1px solid #000;
  }
</style>

  • cellpadding : 已废弃但还能用，这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边

    <table cellpadding="22"></table>

    等价于

    <table></table>
<style>
  th,
  td {
    padding: 22px;
  }
</style>

  • cellspacing : 已废弃但还能用，使用百分比或像素从水平和垂直方向上定义了两个单元格之间空间的大小。

    <table cellspacing="20"></table>

    等价于

    <table></table>
<style>
  table {
    border-spacing: 20px;
  }
</style>

  • width : 已废弃但还能用，定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。

    <table width="20"></table>

    等价于

    <table></table>
<style>
  table {
    width: 20px;
  }
</style>
<table></table>元素的style样式

  • border-collapse: collapse; 合并边框线

    <table></table>
<style>
  table {
    border-collapse: collapse;
  }
</style>

  • table-layout:fixed 宽度平均分布

    • 前提: table要设置具体的宽度

      <table></table>
<style>
  table {
    width: 700px;
    table-layout: fixed;
  }
</style>

<td></td>普通单元格与<th></th>标题单元格的表格合并

  • colspan:设置向右跨列，那个单元格需要向右占据多少个单元格就给谁设置。
  • rowspan：设置向下跨行,那个单元格需要向下占据多少个单元格就给谁设置。
    • 如果下方是一个单元格的初始开头，那么下方单元格就会向后移动。
    • 如果下方不是一个单元格的初始开头，那么下方单元格就不会向后移动，并且该单元格位于下方单元格图层的下方。
单元格合并例子

  • 例子一:

    <table border="1" style="width: 600px;table-layout: fixed;">
  <tr>
    <td rowspan="2">1-1</td>
    <td>1-2</td>
    <td>1-3</td>
    <td>1-4</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td colspan="3">3-2</td>
    <td>3-3</td>
    <td>3-4</td>
    <td>3-5</td>
    <td>3-6</td>
  </tr>
</table>

    table内部的td或th合并

    可以看到基础的合并规则。

  • 例子二:

    <table border="1" style="width: 600px;table-layout: fixed;">
  <tr>
    <td>1-1</td>
    <td rowspan="3" style="background-color: skyblue;color: red;">1-2向下跨行，总三行。如果下方是一个单元格的初始开头，那么下方单元格就会向后移动。如果下方不是一个单元格的初始开头，那么下方单元格就不会向后移动，并且该单元格位于下方单元格图层的下方。</td>
    <td>1-3</td>
    <td>1-4</td>
  </tr>
  <tr>
    <td colspan="4" style="background-color: pink;color: yellow;">2-12-1向右跨列，总四列，这个会优先显示。</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td>2-5</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
    <td>3-5</td>
    <td>3-6</td>
  </tr>
</table>

    可以看到如果横向与纵向冲突的情况。

表单元素

表单在网页中就是将本地数据提交给远程的服务器。

目前则主要是用表单元素来收集用户的输入，之后处理这些数据如校验之类的，再用AJAX传给后端。

表单基础元素

<form></form>标签
  • 为用户创建html表单，并且可以向服务器发送数据。

    • action : 表单提交的地址。

        <form action="1.html"></form>
<input/>元素

  • type="text" : 普通文本输入框text

    <input type="text" value="普通文本输入框text"/>

  • type="password" : 密码输入框password

    <input type="password" value="密码输入框password">

  • type="radio" : 单选框radio

    <input type="radio" value="单选框radio">

  • type="checkbox" : 多选框checkbox

    <input type="checkbox" value="多选框checkbox">

  • type="button" : 普通按钮button

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

  • type="reset" : 重置按钮reset

    <input type="reset" value="重置按钮reset">

  • type="submit" : 提交按钮submit

    <input type="submit" value="提交按钮submit">
<input/>元素常见属性
  • type: 决定<input/>元素的类型。
  • name: 要提交数据时的name名
  • value: input标签的内容及值
  • autofocus: 自动获取光标，一般用来提示用户从那开始输入
  • autocomplete: on/off 自动补全数据
    • 可以设置在form上，设置表单内所有标签的自动补全设置。
    • 但要设置name属性后才能使用。
  • checked: 默认选中，适用于input标签元素的默认选中
  • readonly: 只读
    • 提交时依旧会提交对应的name数据
  • disabled: 禁用
    • 提交时不会提交对应的name
  • required: 校验必填项是否非空
  • placeholder: 提示文字
<button></button>元素

<button></button>元素被点击后依旧会自动提交当前所在表单，和<input type="submit"/>差不多。

备注

readonly与disabled的区别

  • disabled不会提交
    • 应用场景，后台返回的数据要放在页面上与可修改属性放在一起时。

绑定单选框

  • 在单选框元素上设置name属性，name属性值相同时，都为同一组。
  • 在单选框元素上设置value属性，选中后该单选框的值就是该value属性值。

绑定多选框

  • 在多选框元素上设置name属性，name属性值相同时，都为同一组。
  • 在多选框元素上设置value属性，选中后该单选框的值就是value属性值。
<label></label>标签
  • 使用方法：用<label></label>标签把文字包括起来，让里面的for属性值和表单上面id属性值一致即可。
    • 之后点击该<label></label>标签，就相当于点击中了对应id属性值的表单元素。
  • 绑定的表单元素也可以包含在该<label></label>标签内部。

其它标签

<select></select>与<option></option>下拉框

<select></select>元素属性

  • name 设置要提交数据时的name名

<option></option>元素

  • <option></option>元素代表下拉框列表的每一项显示出来的值
  • <select></select>元素最终提交的内容是通过<option></option>元素的value属性
    • 如果<option></option>元素的value属性不设置，那么它会直接用<option></option>元素里的文本值
  • selected属性 设置下拉框的默认选中
<textarea></textarea>多行文本框

<textarea></textarea>元素是多行文本输入框，右下角可以放大缩小。

  • resize: none; 禁止重置尺寸，让右下角不能放大及缩小。
  • outline: none; 清掉文本框的外框线。
  • cols="100" 设置一行应该有多少个文字，即文本框有多少列。
  • rows="10" 设置文本框有多少行。

参考

  1. emment插件语法
  2. Emment常用语法
  3. 深入理解CSS中的line-height
  4. CSS中的行盒（line-boxes）和行内盒子（line-box） 推荐一定要看
方朝端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Atum2：Atum 2：重返沙滩-向Minecraft添加了全新的埃及主题尺寸
02-03
[Atum 2] 在下载 如何通过Maven获得Atum 2 添加到您的build.gradle中： repositories { maven { // url of the maven that hosts Atum 2 files ... } } dependencies { // compile against Atum 2 ...
NBA 2021-2022 赛季 阵容（2021.09.22）G--78页.pdf
09-22
【NBA 2021-2022 赛季 阵容解析】 在2021-2022赛季的NBA...湖人则构建了一支年龄结构合理、经验丰富的球队，试图重返巅峰。每个球队的运作都反映出对新赛季的期望和策略，球迷们可以期待这些球队在新赛季的精彩表现。
20230609----重返学习-react项目的细节
seetoyou的博客
06-09 432
手动输入/login地址push()Element/personalreplacereplace/personalreplacereplace。
20230526----重返学习-TaskOA任务管理系统-其它Hook
seetoyou的博客
05-26 698
搭建结构：DOM骨架antd组件库的运用按需加载与按需导入国际化-由英文化改为中文化核心组件Table表格组件列的构建及格式化处理表格的分页列的选择列的排序列的筛选Form表单数据的处理和收集规则校验及触发机制内置触发通过实例触发内置规则自定义规则实例及方法等Modal与Dialog对话框文件上传等操作搭好骨架写样式样式私有化的处理方案UI组件库中样式的修改那些提取为全局样式数据通信跨域配置。
php商城部分开发实战学习
网络安全学习
04-04 1514
水文一篇，可以复习一下html+css+js的基础知识，顺便学习一下php实现简单功能的代码 文章目录phpstudy一键配置环境入口文件导航部分制作logo中间部分数据库配置数据表的建立动态调用数据信息业务逻辑梳理session加入购物车其它 目的是了解如下几个重点： 前端页面的显示与布局 前后端参数传递的方法 session的使用 操作数据库 phpstudy一键配置环境 apache + php 5.6 + mysql 5.7 +phpmyadmin 4.8.5 入口文件 打开网站默认跳转的页面
网页设计与制作
充满焦虑的大学生
12-25 1221
写不下了，现在打字已经很卡了，虽然还有很多没有写，就这样吧。
20230404----重返学习-async与await-无限树形菜单-npm-终端窗口cmd控制台
seetoyou的博客
04-04 387
day-042-forty-two-20230404-async与await-无限树形菜单-npm-终端窗口cmd控制台 async与await async与await是Promise结合Generator函数的语法糖。 特性 async和await可以分开，一般不会分开。 async必须和函数一块使用，会返回一个Promise实例对象。 async function getData() { return 10; } console.log(getData()); getData() .th
面试题小结
abc的博客
09-19 790
面试题小结
简单的网页制作期末作业
热门推荐
qq_51611509的博客
01-05 4万+
话不多说，我用的软件是HBuilder制作的网页。样式是这样的 相信学过的都会做这个页面； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面跳转</title> <style type="text/css"> *{ /*margin: 0px; padding: 0px;*/ } h2{ col
【译著】第8章 SportsStore：导航与购物车 — 《精通ASP.NET MVC 3框架》
weixin_33979363的博客
06-19 550
C H A P T E R 8 ■ ■ ■ SportsStore: Navigation and Cart SportsStore：导航与购物车 In the previous chapter, we set up the core infrastructure of the SportsStore application. Now we will use the infrastru...
基于HTML+CSS+JavaScript仿淘宝购物商城设计毕业论文源码
网页设计与制作 | HTML+CSS+JS
05-23 890
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
20210302-申万宏源-万科A-000002-龙头重返荣耀，多元价值蕴藏.pdf
04-08
万科A（股票代码：000002）作为中国房地产行业的龙头企业，其业务范围广泛，包含住宅开发、物业管理、商业地产、物流地产及租赁住宅等多个领域。此次申万宏源的研究报告指出，万科在管理红利时代持续展现其行业领跑...
腾讯开悟-重返秘境模型（仅到终点）
09-01
平均分800左右
行业文档-设计装置-撞击试验平台.zip
08-21
航天机构则利用它来验证航天器在重返大气层时的耐受能力。 6. 安全与控制： 撞击试验涉及到极高能量的释放，因此安全措施至关重要。这包括设置安全防护装置、采用远程控制、进行风险评估和应急计划。同时，精准的...
UEFI学习笔记（五）：EDK II PCD的概念、类型、使用
qq_44189622的博客
09-11 496
如果在BIOS里面有一些模块是binary方式集成进来的而这些binary又需要用到PCD（用于Binary Release），那么这些Binary集成的要用到的PCD就必须要设置为。PCD的值存在memory里面，下次启动时，上次更改的值丢失了，每次启动都是从default值开始。是存在VPD空间的（在FLASH上，只读），一般是出厂配置。如果platform是从源码build出来的，没有binary在里面的时候，PCD用的都是。作用域在一个模块中（模块级的），可以在Binary Level进行修改。
如何用3个月零基础入门网络安全？_网络安全零基础怎么学习
2401_84466224的博客
09-11 676
我们知道计算机最早是在西方发明出来的，很多名词或者代码都是英文的，甚至现有的一些教程最初也是英文原版翻译过来的，而且一个漏洞被发现到翻译成中文一般需要一个星期的时间，在这个时间差上漏洞可能都修补了。”答案是否定的，黑客用的电脑,不需要什么高的配置,只要稳定就行.因为黑客所使用的一些程序,低端CPU也可以很好的运行,而且不占什么内存.还有一个,黑客是在DOS命令下对进行的,所以电脑能使用到最佳状态!观看学习近十年所有0day挖掘的帖，然后搭建环境，去复现漏洞，去思考学习笔者的挖洞思维，培养自己的渗透思维。
sheng的学习笔记-AI-规则学习（rule learning）
coldstarry的专栏
09-09 1002
机器学习中的“规则”(rule)通常是指语义明确、能描述数据分布所隐含的客观规律或领域概念、可写成“若……，则……”形式的逻辑规则。​“规则学习”(rule learning)是从训练数据中学习出一组能用于对未见示例进行判别的规则。一条规则形如：在数理逻辑中“文字”专指原子公式(atom)及其否定。与神经网络、支持向量机这样的“黑箱模型”相比，规则学习具有更好的可解释性，能使用户更直观地对判别过程有所了解。另一方面，数理逻辑具有极强的表达能力，绝大多数人类知识都能通过数理逻辑进行简洁的刻画和表达。
AdaBoost算法（AdbBoost Algorithm）—有监督学习方法、非概率模型、判别模型、非线性模型、非参数化模型、批量学习
最新发布
nanxiaotao的博客
09-11 661
AdaBoost算法（AdbBoost Algorithm）—有监督学习方法、非概率模型、判别模型、非线性模型、非参数化模型、批量学习
再入大气动力学与热保护系统
Hankey编写的书籍，专注于探讨在航天器重返地球大气层时所面临的空气动力学挑战。这本书由美国航空航天学会（AIAA）出版，并作为其教育系列的一部分。书中涵盖了地球大气层的描述、高超音速空气动力学的基本原理、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值