HTML <tr>标记详解：功能、属性与应用

html
ppt
需积分: 34 19 下载量 155 浏览量 更新于2024-08-14 收藏 3.69MB PPT 举报
在HTML的学习中， "<tr>标记"是表格（table）结构中的一个关键元素，它代表表格中的行(row)。在创建和设计网页时，理解这个标记及其相关的属性至关重要。以下是一些关于<tr>标记的重要知识点： 1. 属性： - **Width** 和 **Height**: 用于设置单元格的宽度和高度，允许开发者控制表格单元格的尺寸，以便更好地布局内容。 - **valign** 或 **vertical-align**: 控制单元格内文本或图像的垂直对齐方式，如居上、居中或居下。 - **Border**: 可以设置单元格的边框宽度，增强表格的视觉效果。 - **Bgcolor** 或 **background-color** / **background**: 设置单元格背景色，用于区分内容和背景。 - **bordercolor**: 控制单元格边框的颜色。 2. HTML基础知识： - HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，通过标签组合来定义网页的结构和内容。 - 客户端（Client）指的是用户端的计算机，负责浏览网页；www表示万维网；element、value、request/response、standard、document和attribute是与网页元素和交互相关的术语。 3. 表单和表格： - form标签用于创建交互式表单，用户可以通过输入字段提交数据； - table用于创建表格，包括rows（行）和columns（列），方便展示数据或布局信息； - 其他如background、color、title等属性用于设置元素的外观和行为。 4. 浏览器和Web技术： - HTTP（HyperText Transfer Protocol）是互联网数据传输的基础协议； - Webpage、webservers、webclients和webbrowser分别指网页、网络服务器、客户端浏览器以及不同的浏览器类型，如IE、Netscape Navigator和MyIE等； - HTMLtags指的是所有可用的HTML标记，如<tr>。 5. 用户获取资源过程： 用户通过浏览器访问互联网，输入网址（URL）后发送HTTP请求，服务器接收到请求后返回响应，包含HTML文档，浏览器解析并渲染这些内容到用户的屏幕上。 6. 网络基础： - 网络按照范围分为WAN、MAN和LAN，按结构分为总线型、星型、环形和网状等； - 网络拓扑结构描述了网络设备之间的物理连接方式。 学习HTML时，理解<tr>标记的用法及其属性设置，结合HTML的基本概念、表单与表格元素，以及网络和浏览器的工作原理，对于创建和优化网页至关重要。通过实践和掌握这些知识点，可以有效地构建和管理自己的静态个人网站。

HTML+CSS+JS-入门基础ppt课件.ppt

2022-11-19 上传
HTML 中的表格使用<table>标签，例如：<table><tr><td>单元格1</td><td>单元格2</td></tr></table>。 HTML 中的表单使用<form>标签，例如：<form><input type="text" name="username" /><input type="submit" ...

html教学ppt课件

2013-06-05 上传
"HTML_表格.ppt"将深入讲解如何使用`<table>`标签创建和格式化表格，包括行 `<tr>`、列 `<td>` 和表头 `<th>` 的用法，以及如何设置表格边框、对齐方式等。 "HTML_图片.ppt"会介绍如何插入和管理网页中的图像，包括...

html标记语言课件PPT教案.pptx

2021-10-20 上传
对称标记如`<html>`、`<head>`和`<body>`，它们有开始和结束标签，如`<html>`和`</html>`。单独标记，如`<br>`，没有对应的结束标签。HTML文档通常以`<!DOCTYPE html>`声明开始，告知浏览器文档使用的是HTML5标准。 ...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书首页</title> </head> <body>
图书信息表
title auth pushdate
</body> </html>、

2023-05-29 上传
<tr> <th>title</th> <th>auth</th> <th>pushdate</th> </tr> <tr> <!--########## Begin ##########--> <th>JavaScript高级程序设计</th> <th>Nicholas C.Zakas</th> <th>2013-03-01</th> <!--#########...

用以下表格，人工构建一个html文件，文件的body标签里只有一个table标签：
歌名作者时间
白月光与朱砂痣大籽2021
晴天周杰伦2003
Love StoryTaylor Swift2009
梦幻丽莎发廊五条人2016

2023-03-28 上传
<tr> <td>歌名</td> <td>作者</td> <td>时间</td> </tr> <tr> <td>白月光与朱砂痣</td> <td>大籽</td> <td>2021</td> </tr> <tr> <td>晴天</td> <td>周杰伦</td> <td>2003</td...

关系 姓名 备注
父亲 李乾 即李敬[24]
母亲 婴敷 益寿氏[24]
儿子 李宗 为魏将，封于段干[25]
孙子 李注 [25]
曾孙 李宫 [25]
设置css样式

2023-05-31 上传
<tr> <th>关系</th> <th>姓名</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>父亲</td> <td>李乾</td> <td>即李敬[24]</td> </tr> <tr> <td>母亲</td> <td>婴敷</td> <td>益寿氏[24]</td> ...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>酒店管理系统</title> <link rel="stylesheet" href="style.css"> </head> <body>

酒店管理系统

<main>

酒店客房管理

ID 类型 价格 编辑
1 单人房 ¥200 <button class="edit-btn">编辑</button>
2 双人房 ¥300 <button class="edit-btn">编辑</button>
3 豪华房 ¥500 <button class="edit-btn">编辑</button>

添加客房

<form>
<label for="room-id">ID：</label> <input type="number" id="room-id" required>
<label for="room-type">类型：</label> <input type="text" id="room-type" required>
<label for="room-price">价格：</label> <input type="number" id="room-price" required>
<button type="submit">添加</button> </form>
</main> <script src="script.js"></script> </body> </html>给代码逐行加上注释
2023-05-24 上传
<tr> <!-- 创建表格行 --> <th>ID</th> <!-- 创建表格头部单元格 --> <th>类型</th> <th>价格</th> <th>编辑</th> </tr> </thead> <tbody> <!-- 设置表格内容 --> <tr> <td>1</td> <!-- 创建表格单元格，...

修改代码使鼠标移入哪一栏显示对应图片<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body>
女靴 女包
雪地靴 男包
冬裙 登山鞋
呢大衣 皮带
毛衣 围巾
棉服 皮衣
女裤 男毛衣
羽绒服 男棉服
牛仔裤 男靴
<script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("tr td")mouseenter(function(){ $("img").prop("src","../images/女靴.jpg") }) }) </script> </body> </html>

2023-06-09 上传
<tr> <td>女靴</td> <td rowspan="9"><img id="product-img" src="../images/女靴.jpg"></td> <td>女包</td> </tr> <tr> <td>雪地靴</td> <td>男包</td> </tr> <tr> <td>冬裙</td> <td>登山鞋</td> </...

angular中，<nz-layout> <nz-divider [nzText]="'and'"></nz-divider></nz-layout>。其中 <nz-divider横线为什么不显示？

2024-11-19 上传
在Angular中，`<nz-divider>`组件通常用于展示分割线，但是在这段HTML代码里， `<nz-divider>`标签被嵌套在了`<tbody>`标签内部，并且在其外层包围着`<nz-layout>`和`<tr>`元素的循环部分`*ngFor`。这样的结构可能...

优化代码<uni-tr v-for="item in Now" :key="item.id" v-if="item.calltime>timenow && item.part === 0"> <uni-td align="center">{{ item.num }} {{ item.name }}</uni-td> <uni-td align="center">小部位-激光脱毛</uni-td> <uni-td align="center">{{ item.room }}号诊室</uni-td> <uni-td align="center">已叫号</uni-td> </uni-tr> <uni-tr v-for="item in Now" :key="item.id" v-if="item.calltime==null && item.part === 0"> <uni-td align="center">{{ item.num }} {{ item.name }}</uni-td> <uni-td align="center">小部位-激光脱毛</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">等待中</uni-td> </uni-tr> <uni-tr v-for="item in smallNull" :key="item"> <uni-td align="center">---</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">---</uni-td> </uni-tr>

2023-06-06 上传
<uni-td align="center" v-else>---</uni-td> <uni-td align="center" v-if="item.calltime != null">{{ item.room }}号诊室</uni-td> <uni-td align="center" v-else>---</uni-td> <uni-td align="center" v-if...
深夜冒泡
  • 粉丝: 16
  • 资源: 2万+
上传资源 快速赚钱

最新资源