关于HTML的两个实例

简介: 例子一:使用HTML语言编写一个菜单代码如下: 菜谱 星期一菜谱 素菜 清炒茄子 花椒扁豆 小葱豆腐 炒白菜 ...

例子一:使用HTML语言编写一个菜单

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>菜谱</title>
</head>
<body>
<table border="1">
    <tr>
        <th colspan="5">星期一菜谱</th>
    </tr>
    <tr>
        <th rowspan="2">素菜</th>
        <th colspan="3">清炒茄子</th>
        <th>花椒扁豆</th>
    </tr>
    <tr>
        <th colspan="3">小葱豆腐</th>
        <th>炒白菜</th>
    </tr>
    <tr>
        <th rowspan="2">荤菜</th>
        <th colspan="3">油闷大虾</th>
        <th>海参鱼翅</th>
    </tr>
    <tr>
        <th colspan="3">红烧肉</th>
        <th>烤全羊</th>
    </tr>
</table>
</body>
</html>

例子二:使用HTML语言编写一个课程表

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
<table border="1">
    <tr>
        <th>项目</th>
        <th colspan="5" >上课</th>
        <th colspan="2">休息</th>
    </tr>
    <tr>
        <th>星期</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期日</th>
    </tr>
    <tr>
        <th rowspan="4">上午</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>英语</th>
        <th>物理</th>
        <th>计算机</th>
        <th rowspan="4">休息</th>
    </tr>
    <tr>
        <th>数学</th>
        <th>数学</th>
        <th>地理</th>
        <th>历史</th>
        <th>化学</th>
        <th>计算机</th>
    </tr>
    <tr>
        <th>化学</th>
        <th>语文</th>
        <th>体育</th>
        <th>历史</th>
        <th>地理</th>
        <th>计算机</th>
    </tr>
    <tr>
        <th>政治</th>
        <th>英语</th>
        <th>体育</th>
        <th>历史</th>
        <th>地理</th>
        <th>计算机</th>
    </tr>
    <tr>
        <th rowspan="2">下午</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>英语</th>
        <th>物理</th>
        <th>计算机</th>
        <th rowspan="2">休息</th>
    </tr>
    <tr>
        <th>数学</th>
        <th>数学</th>
        <th>地理</th>
        <th>历史</th>
        <th>化学</th>
        <th>计算机</th>
    </tr>

</table>
</body>
</html>
目录
相关文章
|
移动开发 前端开发 JavaScript
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(下)
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(下)
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(下)
|
2月前
|
XML 数据格式
HTML 实例解析
本文介绍了HTML中常见元素的使用方法,包括`&lt;p&gt;`、`&lt;body&gt;`和`&lt;html&gt;`等。详细解析了这些元素的结构和作用,并强调了正确使用结束标签的重要性。此外,还提到了空元素的使用及大小写标签的规范。
|
4月前
|
前端开发 Java 关系型数据库
通过HTML网页对mysql数据库进行增删改查(CRUD实例)
通过HTML网页对mysql数据库进行增删改查(CRUD实例)
239 0
|
7月前
HTML 实例
HTML 实例。
31 1
|
7月前
|
前端开发 JavaScript
HTML标签导读及实用代码实例
HTML标签导读及实用代码实例
48 0
|
7月前
|
机器学习/深度学习 前端开发 JavaScript
HTML基础 + 实例解析(速速来看!!!)
HTML基础 + 实例解析(速速来看!!!)
33 0
|
7月前
html中img图片进行等比例缩放的实例代码
HTML中,要修改img元素定义的图片的大小,且是等比例缩放,不改变宽和高的比值,那么可以采用只设置img元素属性中width和height中的任何一个,不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
161 1
|
7月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
251 0
|
Web App开发 移动开发 前端开发
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(上)
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
17607 11