菜单 搜索
首页 前端知识 后端程序员必备前端知识—html

后端程序员必备前端知识—html

2024-05-20 14:05:36 前端知识 前端哥 780 547 我要收藏

在这里插入图片描述

文章目录

  • 一、HTML介绍
    • 1.概念
    • 2.运行方式
    • 3.快速入门
    • 4.注意事项
    • 5.html基本结构
  • 二、HTML标签
    • 1.html标签/元素说明
    • 2.html标签注意事项和细节
    • 3.font字体标签
    • 4.字符实体
    • 5.标题标签
    • 6.超链接标签
    • 7.无序列表ul/li
    • 8.有序列表ol/li
    • 9.图像标签(img)
      • 绝对/相对路径知识点
    • 10.表格标签
      • 跨行跨列表格
    • 11.表单标签
      • （1）基本语法
      • （2）应用案例
      • （3）input标签
      • （4）select/option/textarea标签
      • （5）表单综合案例
      • （6）表单格式化
      • （7）表单提交注意事项
    • 12.div标签
    • 13.p标签
    • 14.span标签
  • 课后作业
    • 作业1
    • 作业2

一、HTML介绍

1.概念

（1）HTML（HyperText Mark-up Language）即超文本标计语言，可以展示的内容类型很多

（2）HTML文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等

（3）HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容

2.运行方式

（1）本地运行，即在本地计算机上直接打开HTML文件

（2）远程访问，即用户通过互联网访问远程服务器上的HTML文件

3.快速入门

​ 运用idea，编写hello.html，运行效果如下：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 是注释，快捷键为：Ctrl + / 
<!--hello.html-->
<!--文档类型说明: 使用html-->
<!DOCTYPE html>
<!--使用语言的地区 en表示英国美国(en-US简写成en)-->
<html lang="en">
<!--html头-->
<head>
    <!--charset文件的字符集-->
    <meta charset="UTF-8">
    <!--文件标题-->
    <title>html快速入门</title>
</head>
<!--body体，主体部分-->
<body>
    <!--内容-->
    hello, world!
</body>
</html>

4.注意事项

（1）HTML文件不需要编译，直接由浏览器进行解析执行

（2）可以选择的浏览器，是你电脑已有的浏览器，如果选择了电脑没有的浏览器，会报错

在这里插入图片描述

5.html基本结构

在这里插入图片描述

二、HTML标签

1.html标签/元素说明

（1）html标签用两个尖括号"<>"括起来

（2）html标签一般是双标签，如

和

前一个标签是起始标签，后一个标签为结束标签

（3）两个标签之间的文本是html元素的内容

（4）某些标签称为"单标签"，因为它只需单独使用就能完整地表达意思，如


如果要进行换行，需要使用浏览器能够识别的标签，即
标签，而不是在内容中按回车，插入换行符

（5）html元素指的是从开始标签到结束标签的所有代码

在这里插入图片描述

2.html标签注意事项和细节

（１）标签不能交叉嵌套

（２）标签必须正确关闭

（３）注释不能嵌套也不报错

（４）html语法不严谨，有时候标签不闭合，属性值不带""也不报错

<!--tag_detail.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html标签使用细节</title>
</head>
<body>
<!--    1.不能交叉嵌套-->
<!--    <div><span></div></span> 错误用法-->
<!--    2.标签必须正确关闭-->
    <span>jack</span>
<!--    3.注释不能嵌套-->
<!--    4.html语法不严谨，有时候标签不闭合，属性值不带""也不报错-->
    <font color="red">张飞</font>
    <font color=royalblue>关羽</font>
    <br/>
</body>
</html>

3.font字体标签

  • font标签是字体标签，可以用来修改文本的字体、颜色、大小（尺寸）
  • 注意：标签的属性顺序不做要求
  • 应用实例：创建font.html，在网页上显示北京，并修改字体为微软雅黑，颜色为蓝色

在这里插入图片描述

<!--font.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font字体标签</title>
</head>
<body>
    <!--1.color属性 修改颜色-->
    <!--2.face属性  修改字体-->
    <!--3.size属性  修改文本大小-->
    <font size="40px" face="微软雅黑" color="blue" >北京</font>
</body>
</html>

4.字符实体

  • 在网页上显示一些特殊的符号，称为字符实体（也叫符号实体）

  • 常用的特殊字符：

    （1）< ：&lt

    （2）> ：&gt

    （3）空格：&nbsp

  • 应用实例：创建char-entity.html，将

    标签以文本的形式显示在页面

在这里插入图片描述

<!--char-entity.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符实体</title>
</head>
<body>
    jack
<!--    浏览器会将<hr />解析成一条线-->
    <hr />
    smith
    &lt;hr/&gt;<br/>
    smith1 smith2         hsp<br/>
    smith1 smith2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hsp
</body>
</html>
  • 字符实体一览表

在这里插入图片描述

5.标题标签

标题使用<h1> - <h6>标签进行定义，<h1>定义最大的标题，<h6>定义最小的标题
  • 应用实例：演示标题1到标题6

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    <!--align属性: 对齐属性-->
    <!--left: 左对齐(默认)-->
    <!--center: 居中-->
    <!--right: 右对齐-->
    <h1>标签1</h1>
    <h2>标签2</h2>
    <h3 align="center">标签3</h3>
    <h4>标签4</h4>
    <h5>标签5</h5>
    <h6 align="right">标签6</h6>
</body>
</html>

6.超链接标签

  • 超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件、甚至一个应用程序

  • 应用实例：创建link.html，链接到搜狐网站
    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
    <!--a标签: 超链接标签
    href属性: 设置连接的地址
    target属性: 设置那个目标进行跳转
        _self: 表示当前页面(默认值), 即使用当前页替换目标页
        _blank: 表示打开新页面来进行跳转
    -->
    <a href="http://www.sohu.com">搜狐</a><br/>
    <a href="http://www.sohu.com" target="_blank">搜狐2</a><br/>
    <!--点击超链接, 打开邮件-->
    <a href="mailto:1942305430@qq.com">联系管理员</a>
</body>
</html>

7.无序列表ul/li

  • 基本语法

    <ul typr="属性值">
    <li>列表内容</li>
</ul>
<ul>设定符号款式，其值有三种（默认为type="disc"），如下：
type="disc"    列项符号为实心圆点
type="circle"  列项符号为空心圆
typr="square"  列项符号为空心正方形

  • 应用实例

在这里插入图片描述

<!--ul_li.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表ul/li</title>
</head>
<body>
    <!--ul: 表示无序列表-->
    <!--li: 列表项-->
    <!--type属性: 指定列表项前的符号-->
    <h1>五虎将</h1>
    <ul type="square">
        <li>关羽</li>
        <li>张飞</li>
        <li>赵云</li>
        <li>马超</li>
        <li>黄忠</li>
    </ul>
</body>
</html>

8.有序列表ol/li

  • 基本语法

    <ol type="属性值" start="起始值">
	<li>列表内容</li>
</ol>
注：
（1）<ol>称为顺序列表标签，<li>则用以表示列表项目，称编号列表
（2）<ol type="i" start="4"></ol>
	type设定数目款式，其值为五种（默认为start="1"）
（3）i可以取以下值中的任意一个：
  1 阿拉伯数字 1, 2, 3, ...
  a 小写字母 a, b, c, ...
  A 大写字母 A, B, C, ...
  i 小写罗马数字 i, ii, iii, ...
  I 大写罗马数字 I, II, III, ...

  • 应用实例
    在这里插入图片描述

<!--ol_li.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表ol/li</title>
</head>
<body>
    <!--ol: 表示有序列表-->
    <!--li: 列表项-->
    <!--type属性: 指定列表项前的符号-->
    <h1>五虎将</h1>
    <ol type="">
        <li>关羽</li>
        <li>张飞</li>
        <li>赵云</li>
        <li>马超</li>
        <li>黄忠</li>
    </ol>
</body>
</html>

9.图像标签(img)

  • img标签可以在html页面上显示图片

  • 应用实例：使用img标签显示一张风景照
    在这里插入图片描述

    <!--img.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--
    img标签: 图片标签，用来显示图片
    src属性: 可以设置图片路径
    width属性: 设置图片的宽度
    height属性: 设置图片的高度
    border属性: 设置图片边框大小
    alt属性: 设置当指定路径找不到图片时，用来替代显示的文本内容
    相对路径: 从工程名开始算
    绝对路径: 盘符:/目录/文件名
-->
    <!--./imgs/1.png表示当前路径下的imgs文件夹下的1.png-->
    <!--在进行图片缩放时，建议指定width 或 height即可，浏览器或按比例缩放-->
    <img src="./imgs/1.jpg" width="400"> <br/>
    <img src="./imgs/1.jpg" height="150" border="10px"> <br/>
    <img src="./imgs/2.jpg" alt="找不到图片">
</body>
</html>

绝对/相对路径知识点

  • 在web中路径分为相对路径和绝对路径两种

  • 相对路径： . 表示当前文件所在的目录

    ​ …表示当前文件所在的上一级目录

    文件名：表示当前文件所在目录的文件，相当于./文件名./可以省略

  • 绝对路径：正确格式是htttp:// IP地址:port /工程名/资源路径，如: http://localhost:63342/html/imgs/1.jpg

    ​ 错误格式是盘符:/目录/文件名

10.表格标签

  • 基本语法

    <table border="边框宽度" cellspacing="空隙大小" cellpadding="填充大小">
</table>

  • 应用案例：显示3行3列的表格

    在这里插入图片描述

<!--table.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--
    table标签: 表格标签
    border: 设置表格标签
    width: 设置表格宽度
    height: 设置表格高度
    align: 设置表格相对于页面的对齐方式
    cellspacing: 设置单元格间距
    tr: 行标签 th: 表头标签 td:单元格标签
    align: 设置单元格文本对齐方式
    b标签: 加粗标签
-->
    <table width="500" border="6" align="center">
        <tr>
            <th>名字</th>
            <th>住址</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>第1行第1列</td>
            <td>第1行第2列</td>
            <td>第1行第3列</td>
        </tr>
        <tr>
            <td>第2行第1列</td>
            <td>第2行第2列</td>
            <td>第2行第3列</td>
        </tr>
        <tr>
            <td>第3行第1列</td>
            <td>第3行第2列</td>
            <td>第3行第3列</td>
        </tr>
    </table>
</body>
</html>

跨行跨列表格

在这里插入图片描述

<!--table2.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列表格</title>
</head>
<body>
<!--
    合并项: colspan="列数"
    合并行: rowspan="行数"
    cellspacing: 指定单元格间的空隙大小（0表示没有空隙）
    bordercolor: 指定表格边框的演示
    border: 表格边框
    width: 表格的宽度

     思路: 1.先把整个表格的完整行和列, 展示出来5*3
          2.再使用合并的技术, 来处理
          3.如果是16进制的颜色, 前面#
-->
    <table border="1" width="500" cellspacing="0" bordercolor=#F2C9F8>
        <tr>
            <td colspan="3" align="center">星期一菜谱</td>
        </tr>
        <tr>
            <!--合并行, 跨行row-->
            <td rowspan="2">素菜</td>
            <td>青草茄子</td>
            <td>花椒扁豆</td>
        </tr>
        <tr>
            <td>小葱豆腐</td>
            <td>炒白菜</td>
        </tr>
        <tr>
            <td rowspan="2">荤菜</td>
            <td>油焖大虾</td>
            <td>海参鱼翅</td>
        </tr>
        <tr>
            <td>红烧肉<img src="./imgs/2.png" width="100"></td>
            <td>烤全羊</td>
        </tr>
    </table>
</body>
</html>

11.表单标签

（1）基本语法

<form action="url" method=*>
	...
	...
	<input type=submit> <input type=reset>
</form>
星号*部分可以为GET, 也可以是POST(默认是get)
url表示定位一个web资源的路径, method主要有两种get, post

在这里插入图片描述

（2）应用案例

在这里插入图片描述

<!--form_login.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<!--
    1.form 表示表单
    2.action 提交到哪个页面
    3.method 提交方式, 常用get和post
    4.input type=text 输入框
    5.input type=submit 提交按钮
    6.input type=reset  重置按钮

    小技巧: 为了让"密码"与上面的汉字对齐, 输入全角的空格即可
-->
    <h1>登录系统</h1>
    <form action="ok.html" method="get">
        用户名:<input type="text" name="username"><br />
        密　码:<input type="text" name="username"><br />
        <input type="submit" value="登录"> <input type="reset" value="重置">
    </form>
</body>
</html>

<!--ok.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
</head>
<body>
    <h1>恭喜你, 登录成功!</h1>
</body>
</html>

（3）input标签

在这里插入图片描述

（4）select/option/textarea标签

在这里插入图片描述

（5）表单综合案例

在这里插入图片描述

<!--form_login.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单综合案例</title>
</head>
<body>
    <!--
        form标签就是表单
        input type=text 是文件输入框, value设置默认显示内容
        input type=password 是密码输入框, value设置默认显示内容
        input type=radio 是单选框, name属性可以对其进行分组
        checked="checked" 表示默认选中input

        type=checkbox 是复选框, checked="checked"表示默认选中

        input type=reset 是重置按钮, value属性 是按钮上的文本
        input type=submit 是提交按钮, value属性 是按钮上的文本
        input type=button 是按钮, value属性 是按钮上的文本
        input type=file 是文件上传域
        input type=hidden 是隐藏域
        当我们要发送某些信息，而这些信息不需要用户参与, 就可以使用隐藏域(提交的同时发送给服务器

        select标签 是下拉列表框
        option标签 是下拉列表框中的选项
        selected="selected" 设置默认选中

        textarea 表示多行文本输入框(起始标签和结束标签是默认值)
        rows属性 设置可以显示几行的高度
        cols属性 设置每行可以显示几个字符宽度

        注意:　1.一定要给input元素设置name属性, 否则, 数据提交不到服务器
              2.checkbox是复选框, 如果希望是同一组, 保证name属性一致
              3.checkbox、select、radio 提交的数据是value属性的值
    -->
    <form action="ok.html" method="get">
        用户注册信息<br/>
        用户名称: <input type="text" name="username"><br/>
        用户密码: <input type="password" name="pwd1"><br/>
        确认密码: <input type="password" name="pwd2"><br/>
        请选中你喜欢的运动项目:
        <input type="checkbox" name="sport" value="basketball">篮球<br/>
        <input type="checkbox" name="sport" value="football" checked>足球<br/>
        <input type="checkbox" name="sport" value="handball" checked>手球<br/>
        请选中你的性别:
        <input type="radio" name="gender" value="male">男<br/>
        <input type="radio" name="gender" value="female" checked>女<br/>
        请选中你喜欢的城市:
        <select name="city">
            <option>--选择--</option>
            <option value="cd">成都</option>
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
        </select><br/>
        自我介绍:
        <textarea rows="6" cols="30"></textarea><br/>
        请选择你的文件(头像)<input type="file" name="myfile" value="选择文件"><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

（6）表单格式化

在这里插入图片描述

<!--form_format.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>
<body>
    <form action="ok.html" method="get">
        用户注册信息<br/>
        <table>
            <tr>
                <td>用户名称:</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>用户密码:</td>
                <td><input type="password" name="pwd1"><br/></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="pwd2"><</td>
            </tr>
            <tr>
                <td>请选中你喜欢的运动项目:</td>
                <td><input type="checkbox" name="sport" value="basketball">篮球
                    <input type="checkbox" name="sport" value="football" checked>足球
                    <input type="checkbox" name="sport" value="handball" checked>手球</td>
            </tr>
            <tr>
                <td>请选中你的性别:</td>
                <td><input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female" checked>女</td>
            </tr>
            <tr>
                <td>请选中你喜欢的城市:</td>
                <td>
                    <select name="city">
                        <option>--选择--</option>
                        <option value="cd">成都</option>
                        <option value="bj">北京</option>
                        <option value="sh">上海</option>
                        <option value="gz">广州</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我介绍:</td>
                <td><textarea rows="6" cols="30"></textarea></td>
            </tr>
            <tr>
                <td>请选择你的文件(头像)</td>
                <td><input type="file" name="myfile" value="选择文件"></td>
            </tr>
            <tr>
                <td><input type="submit" value="提交"/></td>
                <td><input type="reset" value="重置"/></td>
            </tr>
        </table>
    </form>
</body>
</html>
  • 表单用来提交数据，表格用来显示数据

（7）表单提交注意事项

  • action属性 设置提交的服务器地址/资源

  • method属性 设置提交的方式GET(默认值)或POST

  • 表单提交的时候，数据没有发送给服务器的三种情况：

    ① 表单的某个元素项（如: text, password）没有name属性值

    ② 单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器

    ③ 表单项不在提交的form标签中，即忘记把表单元素加到里面

  • checkbox、select、radio 提交的数据是value属性的值

  • checkbox是复选框，可提交多个值, 但是name是统一的，如：都为sport，sport=XX&sport=XX

  • 提交的数据，一定要放在form标签内，否则数据不会提交

  • Get请求的特点

    ① 浏览器地址栏中的地址是: action属性[+?+请求参数]

    ​ 请求参数的格式是：name=value&name=value

    ② 不安全

    ③ 它有数据长度的限制（不同浏览器的规定不一样，一般2k）

  • POST请求的特点

    ① 浏览器地址栏中只有action属性值, 提交的数据是携带在http请求中，不会显示在地址栏，

    ② 相对与GET请求要安全，因为数据藏在请求体里

    ③ 理论上没有数据长度的限制

在这里插入图片描述

在这里插入图片描述

12.div标签

(1) <div>标签可以把文档分割为独立的, 不同的部分
(2) <div>是一个块级元素, 它的内容自动地开始一个新行
  • 应用案例

在这里插入图片描述

<!--div.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>
<body>
    hello world
    <div>
        <h3 style="color: blue">This is a h3</h3>
        <a href="http://www.baidu.com">go to 百度</a>
    </div>
</body>
</html>

13.p标签

(1) <p>标签定义段落
(2) p元素会自动在其前后创建一些空白
  • 应用案例

在这里插入图片描述

<!--p.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p标签</title>
</head>
<body>
    hello world
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
</body>
</html>

14.span标签

(1) span标签是内联元素, 不像块级元素（如:div标签、p标签）有换行的效果
(2) 如果不对span应用样式，span标签没有任何的显示效果
(3) <span>标签经常用于对网页中的特定文本进行样式化
(4) 语法: <span>内容</span>
  • 应用案例

在这里插入图片描述

<!--span.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
</head>
<body>
<!--
    1.span标签是内联元素(内嵌元素、行内元素), 没有换行效果
    2.如果不对span应用样式，span标签没有任何的显示效果
    3.使用span标签往往是为了单独去控制某个关键的内容

-->
    你的购物车有<span>10</span>件商品<br/>
    你的购物车有<span style="color: red; font-size: 40px">10</span>件商品
</body>
</html>

课后作业

作业1

需求：编写代码，创建homework01.html显示如下网页

在这里插入图片描述

<!--homework01.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工表格</title>
    <!--简单体验CSS-->
    <style type="text/css">
        /*设置表格边框，去掉空隙*/
        table, tr, td, th {
            border: 2px solid blue;
            border-collapse: collapse;

        }
        /*设置表格的背景色，表格文字居中*/
        table {
            background-color: #CCCCCC;
            text-align: center;
        }
    </style>
</head>
<body>
    <!--做成块,一起居中-->
    <div align="center">
        <h1>雇员薪资信息</h1>
        <table border="1" width="600">
        </table>
            <tr>
                <th>编号</th>
                <th>名字</th>
                <th>性别</th>
                <th>薪水</th>
                <th>职位</th>
                <th>email</th>
            </tr>
            <tr>
                <td>111</td>
                <td>张三</td>
                <td>男</td>
                <td>8000.00</td>
                <td>程序员</td>
                <td>zhangsan@163.com</td>
            </tr>
            <tr>
                <td>112</td>
                <td>李四</td>
                <td>男</td>
                <td>9000.00</td>
                <td>经理</td>
                <td>lisi@163.com</td>
            </tr>
            <tr>
                <td>113</td>
                <td>王五</td>
                <td>男</td>
                <td>5000.00</td>
                <td>清洁工</td>
                <td>wangwu@163.com</td>
            </tr>
        </table>
    </div>
</body>
</html>

作业2

需求：编写代码，创建homework02.html显示如下网页

在这里插入图片描述

<!--homework02.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
    <style type="text/css">
        table, tr, td {
            border: 1px #3678EF solid;
            text-align: center;
        }
        table {
            
            border: 2px #3678EF solid;
        }
    </style>
</head>
    <!--分析: 有8行8列-->
<body>
    <table border="1" width="600">
        <tr>
            <td>项目</td>
            <!--跨5列-->
            <td colspan="5">上课</td>
            <!--跨2列-->
            <td colspan="2">休息</td>
        </tr>
        <tr>
            <td>星期</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
        <!--跨4行，下面的单元格就没有了-->
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <!--跨4行-->
            <td rowspan="4">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>政治</td>
            <td>英语</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>计算机</td>
        </tr>
        <tr>
            <!--跨2行-->
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>地理</td>
            <td>计算机</td>
            <!--跨2行-->
            <td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
    </table>
</body>
</html>

 <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>化学</td>
        <td>语文</td>
        <td>体育</td>
        <td>计算机</td>
        <td>英语</td>
        <td>计算机</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>英语</td>
        <td>体育</td>
        <td>历史</td>
        <td>地理</td>
        <td>计算机</td>
    </tr>
    <tr>
        <!--跨2行-->
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>地理</td>
        <td>计算机</td>
        <!--跨2行-->
        <td rowspan="2">休息</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
    </tr>
</table>
```
转载请注明出处或者链接地址：https://www.qianduange.cn//article/8932.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！