web前端学习笔记（三）

最新推荐文章于 2023-01-10 16:46:09 发布
最新推荐文章于 2023-01-10 16:46:09 发布
阅读量123 收藏
点赞数
分类专栏： 前端学习 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37973756/article/details/111825404
版权

web前端学习笔记（三）

HTML 第二天目标

能够利用表格、列表和表单完成注册页面的综合案例

  • 能出说表格用来做什么的
  • 能说出列表用来做什么的
  • 能说出表单用来做什么的

为了让我们页面显示的更加整齐，我们需要学习三个表（表格、表单、列表）

在这里插入图片描述

表格 table(会使用)

目标：

  • 理解：
    • 能说出表格用来做什么的
    • 表格的基本结构组成
  • 应用：
    • 能够熟练写出n行n列的表格
    • 能简单的合并单元格
      ​在这里插入图片描述

表格作用：

表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。

因为它可以让数据显示的非常的规整，可读性非常好。

特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。

ps: 这些地方用表格，你会觉得生活还是那么美好。。。。忍不住想说 PPAP i hava a pen

1. 创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

要深刻体会表格、行、单元格他们的构成。

在上面的语法中包含基本的三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

  1. table用于定义一个表格标签。

  2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。

  3. td 用于定义表格中的单元格，必须嵌套在标签中。

  4. 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。

able基本结构
总结：

  • 表格的主要目的是用来显示特殊数据的
  • 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
  • <tr></tr>中只能嵌套<td></td> 类的单元格
  • <td></td>标签，它就像一个容器，可以容纳所有的元素

2. 表格属性

表格有部分属性我们不常用，这里重点记住 cellspacing 、 cellpadding。

我们经常有个说法，是三参为0， 平时开发的我们这三个参数 border cellpadding cellspacing 为 0

案例1：

在这里插入图片描述

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
   <tr>  <td>刘德华</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>张学友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>刘晓庆</td> <td>女</td> <td>63</td>  </tr>
</table>

3. 表头单元格标签th

  • 作用：
    • 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
  • 语法：
    • 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

在这里插入图片描述
案例2：

​ 效果图

在这里插入图片描述
​代码：

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
		<tr>  
			<th>姓名</th> 
			<th>性别</th>
			<th>电话</th>
		</tr>
		<tr>
			<td>小王</td>
			<td>女</td>
			<td>110</td>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>120</td>
		</tr>	
	</table>

pink老师 一句话说出他们:

th 也是一个单元格 只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗

4. 表格标题caption

定义和用法

<table>
   <caption>我是表格标题</caption>
</table>

**注意： **

  1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
  2. caption 标签必须紧随 table 标签之后。
  3. 这个标签只存在 表格里面才有意义。你是风儿我是沙

案例3：

根据要求完成以下案例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小说排行榜</title>
</head>
<body>
	<table border="1" width="500" height="249" align="center" cellspacing="0">
        <caption> <h3>小说排行榜</h3> </caption>
		<tr> 
			<th>排名</th>  
			<th>关键字</th>  
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>  
            <th>相关链接</th>    
		</tr>
		<tr> 
			<td>1</td>  
			<td>鬼吹灯</td>  
            <td><img src="images/down.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>  
		</tr>
		<tr> 
			<td>2</td>  
			<td>盗墓笔记</td>  
            <td><img src="images/down.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>  
        </tr>
        <tr> 
			<td>3</td>  
			<td>红楼梦</td>  
            <td><img src="images/up.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>  
        </tr>
        <tr> 
			<td>4</td>  
			<td>水浒传</td>  
            <td><img src="images/up.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>  
        </tr>
        <tr> 
			<td>5</td>  
			<td>鬼吹灯</td>  
            <td><img src="images/down.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>  
        </tr>
        <tr> 
			<td>6</td>  
			<td>鬼吹灯</td>  
            <td><img src="images/down.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>  
        </tr>
	</table>
</body>
</html>

5. 表格结构标签

1.<thead> </thead>： 用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签！
2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
3. 以上标签都是放到table标签中。

5. 合并单元格(难点)

合并单元格是我们比较常用的一个操作，但是不会合并的很复杂。

5.1 合并单元格2种方式

  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”

5.2 合并单元格顺序

**合并的顺序我们按照 先上 后下 先左 后右 的顺序 **

跟我们以前学习汉字的书写顺序完全一致。

5.3 合并单元格三步曲

  1. 先确定是跨行rowspan还是跨列合并colspan
  2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ： <td colspan="3"> </td>
  3. 删除多余的单元格

6. 总结表格

标签名定义说明
<table></table>表格标签就是一个四方的盒子
<tr></tr>表格行标签行标签要再table标签内部才有意义
<td></td>单元格标签单元格标签是个容器级元素，可以放任何东西
<th></th>表头单元格标签它还是一个单元格，但是里面的文字会居中且加粗
<caption></caption>表格标题标签表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan合并属性用来合并单元格的
  1. 表格提供了HTML 中定义表格式数据的方法。
  2. 表格中由行中的单元格组成。
  3. 表格中没有列元素，列的个数取决于行的单元格个数。
  4. 表格不要纠结于外观，那是CSS 的作用。
  5. 表格的学习要求： 能手写表格结构，并且能简单合并单元格。

表格的相关属性：
在这里插入图片描述

不会写代码的ppl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-table表格详解
主营前端方向，技术栈是vue
11-17 2万+
table表格(结构设置tr行、td列，rowspan纵合并colspan横合并,spacing边距collapse边框合并，thead表头tbody表体tfoot表底，补充)
html表格
LIJIWEI0611的博客
08-22 244
表格 table 表格作用： 较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。 因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。 1. 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。 创建表格的基本语法： <table> &l...
每日知识总结
m0_73801853的博客
09-19 301
thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody。每个表格均有若干行（由`tr`标签定义），每行被分割为若干单元格（由`td `标签定义）。**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。现在，用于显示、展示数据。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。
HTML表格的使用
qq_43668733的博客
01-10 268
HTML表格的使用
HTML-----第二章表格及样式
BUG专业户
05-20 3293
表格 CSS样式入门 基础选择器
web前端学习笔记以及代码
最新发布
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
web前端基础学习笔记
01-08
web前端基础知识学习笔记，内含有HTML、CSS、JavaScript的基础知识的总结，可以帮助大家学习
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript...2.4、使用 console.log()三、JS语法1、JavaScript 变量2、JavaScript 标识符3、JavaScript 数据类型4、JavaScript 关键词四、JS函数1
web前端学习笔记.docx编程资料
04-06
web前端学习笔记.docx
网页图标和表格的应用
09-23
介绍表格的属性和用法，有代码以及效果展示，容易理解。
bootstrap 中tr td一般用什么来代替_这你敢信，用python在前端页面写一个计算器
weixin_31910545的博客
01-20 190
1. brythonBrython(Browser Python)是在浏览器中运行的Python 3的实现，具有 DOM 元素和事件的接口,它的目标是代替javascript。虽然我不认为brython可以替代javascript在前端交互地位，但是，对于并不复杂的页面功能，如果你对学习javascript并不感兴趣，那么可以考虑使用brython。这样，前端后端都可以统一为python...
前端基础-html-表格的标题和表头单元格标签
FR的博客
02-18 2257
<!-- 表格的标题和表头单元格标签 场景：在表格中表示整体大标题和一列小标题 其他标签： caption：表格大标题 说明：表示表格整体大标题，默认在表格整体顶部居中位置显示 th:表头单元格 说明：表示一列小标题，通常用表格第一行，默认内部文字加粗并居中显示 注意点： caption标签书写在table标签内部 t...
HTML表格table
weixin_58139900的博客
09-15 2016
表格简介 表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。 类比：excel表格&网页中的表格 表格的作用 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系) 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局 表格基本标签 ..
Html：正确给table表格加边框
热门推荐
彭世瑜的博客
04-17 4万+
【代码】Html：正确给table表格加边框。
HTML系列之表格标签
老__L的博客
10-25 5808
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，使用 figcaption 元素替代 caption；
html网页中表格的各种应用
Roben_的博客
10-30 579
第六周布置了前五周的作业 复杂程度循序渐进，没听课的我根据一些博客做了一下。 作业1 <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>作业1</title> </head> <body> <table border="2" width="400" cellpadding="30" bordercolor="#7ff
html5中表格的各种属性以及应用详细介绍
狗剩的博客
11-13 5918
第七章 表格的应用 1   认识表格 1、 表格的构成：表单控件、提示信息、表单域 2、 创建表单：  中的所有内容都会被提交给服务器 各种表单控件   2   表单属性 1、 action属性：用于指定接收并处理表单数据的服务器程序的url地址 （可以说绝对路径或相对路径，还可以是e-mail） 2、 method属性：用于设置表单的提交方式 1)      get：
html的tr和td标签
Mr. David 专栏
12-01 1万+
 tr 标签——代表HTML表格中的一行 <br />1） tr 标签是成对出现的,以<tr>开始,</tr>结束 <br />2）属性 <br /> ——Common -- 一般属性 <br /> 1》align ：代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现) <br /> 2》valign ：代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | base
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值