html语言

已于 2024-03-14 10:43:32 修改
阅读量560 收藏 10
点赞数 22
文章标签： html 前端 java
于 2024-03-10 13:08:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzzob/article/details/136599630
版权
文章详细介绍了HTML和CSS如何创建和设计表格，包括使用``,``,`
`,``等标签，并展示了如何使用CSS控制表格样式，如边框、颜色和跨列/行的样式。同时，还展示了一个实际的卢本伟课程表实例。 摘要由CSDN通过智能技术生成

表格

1. `<table>`：table
2. `<tr>`：table row
3. `<th>`：table header cell
4. `<td>`：table data cell
5. `<thead>`：table head

6. `<tbody>`：table body
7. `<tfoot>`：table foot

表格制作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浙江师范大学官网</title>
    <link rel="stylesheet" href="style1.css">
    <style>
        table {
            border: 2px solid rgb(185, 240, 240); 
            background-color: #e0e0e0; 
            margin: 0 auto;
            width: 1000px;
            height: 200px;
            border-collapse: collapse; 
        }
        td {
            background-color: white; 
            border: 5px double rgb(185, 240, 240); 
            padding: 4px; 
        }
        .blue-row td{
            background-color: rgb(26, 173, 218);
            color: white;
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        #t1 {
            margin: 0 auto;
            text-align: center; 
        }
        
    </style>
</head>
<body style="background-color: white;">
    <table class="table">
        <tr class="blue-row">
            <td colspan="6" style="text-align: center;" >各种食物含糖指数</td>
        </tr>
        <tr>
            <td >食物种类</td>
            <td>低GI(55以下)</td>
            <td>中GI(56-69)</td>
            <td>高GI(70以上)I</td>

        </tr>    
        <tr>
            <td rowspan="3">主食</td>
            <td>糙米 黑米</td>
            <td>糙米饭 红米饭</td>
            <td>糯米饭 白饭</td>
        </tr>
        <tr>
            <td>粉丝 意粉 通心粉 全蛋面</td>
            <td>乌冬面</td>
            <td>普通小麦面</td>
        </tr>
        <tr>
            <td>裸麦粒面包</td>
            <td>彼得包 牛角包</td>
            <td>白面包 馒头</td>
        </tr>
        <tr>
            <td>生果类</td>
            <td>橙 苹果 雪梨 奇异果 提子 沙 葡萄柚 士多啤梨</td>
            <td>蜜瓜 香蕉 木瓜 芒果</td>
            <td>西瓜 荔枝 龙眼</td>
        </tr>
        <tr>
            <td>豆类</td>
            <td>黄豆 绿豆 眉豆 红腰豆 扁豆类</td>
            <td>焗豆</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="4">资料来源:中国食物成分表</td>
        </tr>
    </table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生课表查询</title>
    <link rel="stylesheet" href="style.css">
    <style>
        table {
            border: 2px solid rgb(185, 240, 240);
            background-color: #e0e0e0;
            margin: 0 auto;
            width: 2000px;
            height: 1000px;
            border-collapse: collapse;
            empty-cells: show;
            font-size: 20px;
        }
        td {
            background-color: white; 
            border:solid  2px  black;
        }
        .blue-row td{
            background-color: rgb(26, 173, 218);
            color: rgb(3, 3, 3);
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
        #t1 {
            margin: 0 auto;
            text-align: center; 
        }
        
    </style>
<!-- border: 1px double rgb(185, 240, 240); !-->
<!-- style="background-color: white;" !-->
<body style="text-align: center;">
    <table class="table" >
        <tr class="blue-row">
            <td colspan="9" style="text-align: center;font-size:  40px;" >卢本伟的课表</td>
        </tr>
        <tr>
            <td>时间段</td>
            <td>节次</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td rowspan="5">上午</td>
            <td class="font_time">
                1<br>
                08:00<br>
                08:40
            </td>
            <td rowspan="2" class="random-color" >多媒体技术与应用<br>25-215</td>
            <td rowspan="2" class="random-color">Web开发技术<br>29-106</td>
            <td></td>
            <td rowspan="3" class="random-color">智能感知技术<br>20-107</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="font_time">2<br>08:45<br>09:25</td>
            <td rowspan="3" class="random-color">数据库原理及应用<br>29-106</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">3<br>09:40<br>10:20</td>
            <td></td>
            <td rowspan="3" class="random-color">操作系统<br>23-527</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">4<br>10:35<br>11:15</td>
            <td></td>
            <td rowspan="2" class="random-color">操作系统<br>20-109<br>9-16</td>
            <td rowspan="2" class="random-color">操作系统<br>23-527</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">5<br>11:20<br>12:00</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="4">下午</td>
            <td class="font_time">6<br>14:00<br>14:40</td>
            <td rowspan="3" class="random-color">多媒体技术与应用<br>20-109<br>8-13</td>
            <td rowspan="4" class="random-color">软件项目实训<br>20-102</td>
            <td></td>
            <td rowspan="3" class="random-color">计算机网络<br>23-109</td>
            <td rowspan="3" class="random-color">数字电路<br>24-407</td>
            <td>&#x0020;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">7<br>14:45<br>15:25</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td class="random-color">大学生性健康教育</td>
        </tr>
        <tr>
            <td class="font_time">8<br>15:40<br>16:20</td>
            <td rowspan="2" class="random-color">大学体育—定向运动</td>
            <td>&nbsp;</td>
            <td class="random-color">走进创业<br>1-8</td>

        </tr>
        <tr>
            <td class="font_time">9<br>16:30<br>17:10</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="4">晚上</td>
            <td class="font_time">10<br>18:00<br>18:40</td>
            <td rowspan="2" class="random-color">软件工程基础<br>23-213</td>
            <td></td>
            <td></td>
            <td rowspan="3" class="random-color">计算机网络<br>20-109<br>9-16</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>

        </tr>
        <tr>
            <td class="font_time">11<br>18:45<br>19:25</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">12<br>19:40<br>20:20</td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="2" class="random-color">软件工程基础<br>20-206<br>9-16</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="font_time">13<br>20:30<br>21:10</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    <div style="text-align: right; margin-top: 20px;">
        <a href="index.html" class="vertical-text" style="color: #007bff;">返回主页</a>
    </div>
    <script>
        // 生成随机颜色值
        function getRandomColor() {
            var r = Math.floor(Math.random() * 128) + 90; // 红色范围在128-255之间
            var g = Math.floor(Math.random() * 128) + 128; // 绿色范围在128-255之间
            var b = Math.floor(Math.random() * 128) + 128; // 蓝色范围在128-255之间
            return 'rgb(' + r + ',' + g + ',' + b + ')';
        }   

        // 应用随机颜色到元素背景
        var elements = document.querySelectorAll('.random-color');
        elements.forEach(function(element) {
            element.style.backgroundColor = getRandomColor();
        });
    </script>
</body>
</html>
yzzob
关注
  • 22
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html语言详细介绍
jcf52的博客
03-16 5363
一.html介绍 HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。 HTML是由WEB的发明 者 Tim Berners-Lee （蒂姆·伯纳斯·李）和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言（SGML）的应用。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如 ， 等)。 使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTM
HTML语言高级
What's more
05-09 925
表格标签帧标签表单标签头元素分区标签
HTML- 01：HTML 语言简介
weixin_43734992的博客
04-11 4142
本教程原出处：网道 本教程文档在原作基础上进行了一定的补充、修改和完善，以满足个人学习、工作中的需要，亦可作为个人口袋书使用。 本教程文档中的原文部分，其版权仍归原作者所有。 本教程文档仅作个人学习、教学和工作使用，任何他人、或机构、组织不得恶意传播、复制本文档，或将本教程文档用做商用 HTML 语言简介 概述 HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。 HTML 的全名是“超文本标记语言”（HyperText Mar
html语言代码大全,html常用代码大全 寻找最全的HTML语言代码大全
weixin_35871529的博客
05-30 4448
注释代码，不会在页面上显示字体效果...标题字(最大)...标题字(最小)...粗体字...斜体字...斜体字(强调)...底线...删除线(表示删除)...字体颜色...样式控制字体大小区断标记水平线(换行)... 水域(段落)...置中连接格式外部连结外部连结(另开新窗1.结构性定义 文件类型 (放在档案的开头与结尾) 文件主题 (必须放在「文头」区块内) 文头 (描述性资料，像是「主题」) ...
html语法
return_min的博客
10-17 1509
HTML HTML简介 HTML是用来制作网页的语言 HTML:HyperText MarkUp Language 超文本标记语言 超文本：超：超链接 包含超链接的文本 标记语言： 标记：标签 语言：制作网页的语言 一个网页是有多个标签组成的 语法介绍 html是由浏览器来解析，所以不需要安装任何编译环境 Html文档的基本结构： <!DOCTYPE html> ...
HTML语言概述
04-21
HTML语言概述及语言细节。HTML版本的演变 HTML1.0-2.0——HTML 3 ——HTML 4——HTML 4.01——HTML 5 从HTML4始由W3C组织统一制定规范 W3C：世界万维网联盟（ World Wide Web Consortium ） XHTML 1.0 符合XML标准的...
计算机病毒与防护：HTML语言下.ppt
06-10
* * * * * * * * 目录页 HTML语言下 HTML的属性 HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。 属性总是以名称/值对的形式出现，比如：name="value"。 属性总是在 HTML 元素的开始标签中规定。 一...
学习html语言.zip
01-05
学习html语言学习html语言学习html语言学习html语言学习html语言 学习html语言学习html语言学习html语言学习html语言学习html语言 学习html语言学习html语言学习html语言学习html语言学习html语言 学习html语言学习...
html语言学习
08-03
第一章初识HTML；第二章添加各种网页元素；第3 章表格的使用；第4 章框架结构页面的制作；第5 章使用表单；第6 章CSS 技术；
清华大学html语言教程
04-09
网页工具版
HTML前端
2302_77125952的博客
06-15 559
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。提供许多标签，不同标签功能不同，网页就是通过这些标签描述出来的，最终由浏览器解释运行我们看到的网页。HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。<标签 属性=“ ”/>完成一个特定的设置功能，没有标签体 换行标签。<开始标签>标签名</结束标签> 闭合标签（双标签）标签中可以有属性：可以标签属性。table标签：表格标签。tr标签：表格中的行。td标签：表格单元格。
HTML---盒子模型
Dreamkidya的博客
06-16 1121
盒子模型在网页设计中扮演着至关重要的角色，它是控制元素布局和样式的基础。本文将详细解析盒子模型的概念、结构和应用，帮助读者更好地掌握这一概念。无论您是初学者还是有经验的开发者，了解盒子模型都是必不可少的。通过深入了解盒子模型，您将能够更加灵活地控制网页元素的外观和布局，提升网页设计的效果和体验。让我们一起探究盒子模型的奥秘，为您的网页设计增添更多可能性作者建议:学习知识在于深度理解，多动手、多动脑，总能更快地领悟。不要仅仅停留在阅读代码的层面，亲自动手敲打一遍，会带来更丰富的收获。
HTML初体验
linux423的博客
06-14 543
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
HTML星空特效
兔子王
06-19 3668
100行代码实现HTML星空特效。
HTML静态网页成品作业(HTML+CSS)——故宫介绍网页(4个页面)
weixin_42283461的博客
06-22 147
HTML静态网页成品作业(HTML+CSS)——故宫介绍网页(4个页面)
HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)（表格布局）
weixin_42283461的博客
06-21 214
HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)（表格布局）
HTML静态网页成品作业(HTML+CSS)——新媒体专业介绍介绍网页(1个页面)
weixin_42283461的博客
06-18 245
HTML静态网页成品作业(HTML+CSS)——新媒体专业介绍介绍网页(1个页面)
HTML(18)——浮动
最新发布
m0_74386799的博客
06-22 513
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
【html】用html5+css3+JavaScript制作一个计数器
weixin_56334307的博客
06-17 410
文件，你应该就能看到一个简单的计数器，每次点击按钮时，计数就会加一。将这三个文件放在同一个文件夹中，并在浏览器中打开。
vscode html语言识别
01-19
VSCode 是一款功能强大的代码编辑器，有着很好的 HTML 语言识别能力。它通过智能的语法分析和代码提示功能，能够准确地识别 HTML 标签和属性，帮助开发者快速编写和编辑 HTML 文件。 在 VSCode 中，当编写 HTML 代码时，编辑器会自动识别并显示不同的 HTML 标签，比如`<div>`、`<p>`、`<img>` 等，并会自动补全相应的闭合标签，提高了开发效率。此外，VSCode 还会根据 HTML 的语法规则来进行语法高亮显示，方便开发者更好地区分不同的代码元素。 另外，VSCode 还提供了丰富的代码提示功能，当输入 HTML 标签或属性时，编辑器会自动弹出相关的建议，帮助开发者快速完成代码编写。这样，即使是对 HTML 不是很熟悉的开发者也能快速编写出符合规范的 HTML 代码。 总之，VSCode 在 HTML 语言识别方面表现出色，它通过智能的语法分析和代码提示功能，为开发者提供了很好的编码体验，让他们更加高效地编写和编辑 HTML 文件。这也是它成为开发者首选的代码编辑器之一的原因之一。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值