html5入门

最新推荐文章于 2022-02-13 17:18:50 发布
最新推荐文章于 2022-02-13 17:18:50 发布
阅读量94 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36943809/article/details/103543838
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游网</title>
</head>
<body>

<!--采用table来完成布局-->
<!--最外层的table，用于整个页面的布局-->
<table width="100%" align="center">
    <!-- 第1行 -->
    <tr>
        <td>
            <img src="image/top_banner.jpg" width="100%" alt="">
        </td>
    </tr>

    <!-- 第2行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="image/logo.jpg" alt="">
                    </td>
                    <td>
                        <img src="image/search.png" alt="">
                    </td>
                    <td>
                        <img src="image/hotel_tel.png" alt="">
                    </td>
                </tr>
            </table>

        </td>
    </tr>

    <!-- 第3行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr bgcolor="#ffd700" align="center" height="45" >
                    <td>
                        <a href="">首页</a>
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>

                    <td>
                        门票
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第4行 轮播图 -->
    <tr>
        <td>
            <img src="image/banner_3.jpg" alt="" width="100%">
        </td>
    </tr>

    <!-- 第5行 旅游精选-->
    <tr>
        <td>
            <img src="image/icon_5.jpg" alt="">
            旅游精选
            <hr  color="#ffd700" >
        </td>
    </tr>

    <!-- 第6行 -->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td>

                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第7行 国内游 -->
    <tr>
        <td>
            <img src="image/icon_6.jpg" alt="">
            国内游
            <hr  color="#ffd700" >
        </td>
    </tr>

    <!-- 第8行 -->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td rowspan="2">
                        <img src="image/guonei_1.jpg" alt="">
                    </td>

                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>

                <tr>
                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>


                </tr>
            </table>
        </td>
    </tr>

    <!-- 第9行 境外游 -->
    <tr>
        <td>
            <img src="image/icon_7.jpg" alt="">
            境外游
            <hr  color="#ffd700" >
        </td>
    </tr>

    <!-- 第10行 -->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td rowspan="2">
                        <img src="image/jiangwai_1.jpg" alt="">
                    </td>

                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="" height="100%">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>

                <tr>
                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>

                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>


                </tr>
            </table>
        </td>
    </tr>
    <!-- 第11行 -->
    <tr>
        <td>
            <img src="image/footer_service.png" alt="" width="100%">
        </td>
    </tr>

    <!-- 第12行 -->
    <tr>
        <td align="center" bgcolor="#ffd700" height="40">
            <font color="gray" size="2">
                XXXXXXXXXXXXXXXXXXXXXXX有限公司
                版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备xxxxxxxx
            </font>
        </td>
    </tr>

</table>


</body>
</html>
码上说话
关注
专栏目录
H5(html5)入门教程
DAIYA_JIE的博客
09-11 1万+
html零基础01
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
如何实现table在网页中的居中显示
小白学堂
04-06 7878
table里的内容居中的话直接 用align=center valign=middle就可以了， 但是要把整个table也居中，就必须再建一个页面大小的table， 把目标table当成其中的内容来对待才行，代码如下： <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="...
HTML08使用table完成网站布局
qq_42731393的博客
05-14 664
/* 为了避免繁琐的合并单元格，我们可以采取表格嵌套的方式处理。 我们将网页看成一个大表格，然后将网页分块，分块的网页可以用表格中的一行来完成 如果是一行一列可以使用<tr><td>...</td></tr> 如果是一行多列，可以使用表格嵌套<tr><td><table>.....</table></td></tr> */ ...
HTML5（入门）
热爱编程、热爱生活、热爱探索
01-18 9793
<!--1.我的第一个网页.html(为HTML文件名)--> <!DOCTYPE html> <!--表示浏览器的使用规范，一般默认都是html的规范,所以可不要--> <html lang="en"> <head> <!--网页标题--> <meta charset="UTF-8"> <!--告诉浏览器编码类型为字符型编码 常见的字符编码--> <title>网页一.
HTML5入门 之 单选按钮
weixin_45063703的博客
06-23 6181
前言 在上一表单程序中继续添加单选按钮操作 未完善，预计今晚解决 1.写入程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- --> <form action="" metho
HTML5入门 之下拉菜单
weixin_45063703的博客
06-23 5084
总结 select 和 option 的组合 如果想设置多组下拉菜单，需要添加一个optgroup 标签，并设置为label 属性作为提示文字 如果想设置默认选中状态，需要给对应的option 添加selected 属性，
HTML5基础知识
qq_46485137的博客
02-13 6751
一、初识HTML HTML：Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等 HTML5的优势： 跨平台、 W3C标准 World Wide Web Consortium（万维网联盟） 成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机...
HTML5入门(JQuery基础运用一)
flyinbed_的博客
05-07 3318
JQuery之JS框架下载运用由于公司需求需要转型前端。。。于是就有了接下来的H5入门笔记，边学边做笔记养成良好习惯。JQuery对一个新人来说真的是入门首选啊，简单高效，而且还自带兼容非常nice废话不多说先上 下载链接JQuery下载打开链接进入以下界面第一个 Download 下载第二 API 使用文档第三 Blog 博客第四 Plugins 插件第五 Browser Support 游览器...
HTML5入门之有序列表
热门推荐
YXGR
04-10 1万+
HTML5入门之有序列表有序列表说明语法演示------代码------效果属性reversed属性代码效果type属性代码效果start属性代码效果默认样式<ol><li>清除默认样式清除完效果 有序列表 说明 Ol标签——代表HTML有序列表，是ordered lists的缩写 Ol标签是成对出现的，以<ol>开始，</ol>结束，每一列使用&...
HTML5入门之无序列表
YXGR
04-10 2872
HTML5入门之无序列表无序列表说明语法演示------代码------效果属性默认样式<ul><li>清除默认样式清除完的效果 无序列表 说明 ul标签定义的是表格当中无序列表，表格当中的无序列表都是在<ul>标签之中，无序列表都是和<li>标签在一起使用的。普通的显示数据的时候，ul就是项目列表，li就是列表项。两个合起来就可以用来显示数据。 ...
HTML5 入门到精通PDF
02-23
HTML5 是超文本标签语言 (Hypertext Markup Language, HTML) 的最新版本，也是迄今为止最为激进的版本。本文介绍了各个领域的许多新特性。比较其引人注目的一些新功能
HTML5入门及基础01
08-27
HTML5入门及基础01，使用的工具是sublime，基础练习展示！
初学者必知的HTML 5入门级技巧
11-24
### 初学者必知的HTML 5入门级技巧详解 #### 一、新的Doctype声明 随着HTML 5的到来，Doctype声明变得极为简洁。在XHTML时代，我们需要使用一个非常冗长的Doctype声明： ```html <!DOCTYPE html PUBLIC "-//W3C//...
萌新的HTML5 入门指南
01-22
HTML5的发展改变了互联网技术趋势，前端热度依旧不减，所以对于应用开发人员前端技术也成了必备技能之一，本篇文章的目的是为了帮助萌新的入门指导，也同时希望能为老鸟起到一定查漏补缺的作用，那么让我们开始吧。...
ARCore（Android的增强现实）：ARCore性能优化与调试技巧.docx
最新发布
11-01
ARCore（Android的增强现实）：ARCore性能优化与调试技巧
停止维护 基于 ReactNative、Redux 的漫画.zip
11-01
停止维护 基于 ReactNative、Redux 的漫画
HIKVISION海康威视DS-7916N-E4 DS-7932N-E4录像机固件V3.4.106 build 200619
11-01
HIKVISION海康威视DS-7916N-E4 DS-7932N-E4硬盘录像机固件V3.4.106 build 200619版（2020年6月22日发布） 新版固件支持解绑萤石云功能。 注意： 设备升级有风险，请确认是否一定要升级设备。 请确认升级程序包是否适用于您的设备。 在设备升级过程中请勿断电。
2001-2023年上市公司企业平台生态嵌入数据含原始数据+计算代码+计算结果-最新出炉.zip
11-01
2001-2023年上市公司企业平台生态嵌入数据含原始数据+计算代码+计算结果-最新出炉.zip
HTML5入门详解与应用
"HTML5入门资料（PDF）" HTML5是Web开发领域的一个重大进步，它在HTML4的基础上引入了许多新特性，旨在提升网页的交互性、可访问性和媒体支持能力。HTML5的主要目标是使互联网应用程序更加丰富和功能强大，同时保持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值