微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > 使用 HTML 基本常用标签搭建简易静态页面网站及相关介绍
博主信息
博文 49
粉丝 0
评论 0
访问量 50624
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
使用 HTML 基本常用标签搭建简易静态页面网站及相关介绍
超超多喝水
原创
1118人浏览过

使用 HTML 基本常用标签搭建简易静态页面网站及相关介绍

首先配置一个自建表格界面，并引用外链图片，先做一个单页的静态页面，取名

NationalFootballTeam.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>国足12强赛赛程时间表</title>
  8.     <style>
  9.       /* 给表格添加一个边框，并将表格内所有文字进行居中 */
  10.       table,
  11.       tr,
  12.       th,
  13.       td {
  14.         border: 1px solid hotpink;
  15.         text-align: center;
  16.       }
  17.       /* 给标题做一个字体加粗 */
  18.       caption {
  19.         font-weight: bolder;
  20.       }
  21.       /* 配置回到顶部漂浮窗的字体横向居中,宽高,背景色,固定定位布局,具体定位位置,圆角 */
  22.       .top {
  23.         text-align: center;
  24.         height: 36px;
  25.         width: 116px;
  26.         background-color: hotpink;
  27.         position: fixed;
  28.         left: 768px;
  29.         top: 324px;
  30.         border-radius: 6px;
  31.       }
  32.       /* 配置回到顶部漂浮窗的字体垂直居中，字体颜色改为白色，改为定位元素，去掉下划线 */
  33.       .top > p {
  34.         bottom: 10px;
  35.         color: white;
  36.         position: relative;
  37.         text-decoration: none;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <!-- 设置表格 -->
  43.     <div class="table">
  44.       <!-- 用cellspacing优化表格的边框 -->
  45.       <table cellspacing="0;">
  46.         <!-- 配置标题 -->
  47.         <caption>
  48.           国足12强赛赛程时间表
  49.         </caption>
  50.         <!-- 设置表头 -->
  51.         <thead>
  52.           <tr>
  53.             <!-- thead里面的单元格使用th表示，可以自动居中加粗 -->
  54.             <th>时间</th>
  55.             <!-- 使用colspan进行列合并，但是需要注意，需合并的列，要与下方的列的个数对应 -->
  56.             <th colspan="4">主客场情况</th>
  57.           </tr>
  58.         </thead>
  59.         <!-- 填充表体内容 -->
  60.         <tbody>
  61.           <tr>
  62.             <td>2021年9月2日</td>
  63.             <td>澳大利亚</td>
  64.             <td>vs</td>
  65.             <td>中国</td>
  66.             <td>客场</td>
  67.           </tr>
  68.           <tr>
  69.             <td>2021年9月7日</td>
  70.             <td>中国</td>
  71.             <td>vs</td>
  72.             <td>日本</td>
  73.             <!-- 使用rowspan进行行合并，但是需要注意，需合并的行，要与下方的行的个数对应 -->
  74.             <td rowspan="2">主场</td>
  75.           </tr>
  76.           <tr>
  77.             <td>2021年10月7日</td>
  78.             <td>中国</td>
  79.             <td>vs</td>
  80.             <td>越南</td>
  81.           </tr>
  82.           <tr>
  83.             <td>2021年10月12日</td>
  84.             <td>沙特阿拉伯</td>
  85.             <td>vs</td>
  86.             <td>中国</td>
  87.             <td>客场</td>
  88.           </tr>
  89.           <tr>
  90.             <td>2021年11月11日</td>
  91.             <td>中国</td>
  92.             <td>vs</td>
  93.             <td>阿曼</td>
  94.             <td rowspan="2">主场</td>
  95.           </tr>
  96.           <tr>
  97.             <td>2021年11月16日</td>
  98.             <td>中国</td>
  99.             <td>vs</td>
  100.             <td>澳大利亚</td>
  101.           </tr>
  102.           <tr>
  103.             <td>2022年1月27日</td>
  104.             <td>日本</td>
  105.             <td>vs</td>
  106.             <td>中国</td>
  107.             <td rowspan="2">客场</td>
  108.           </tr>
  109.           <tr>
  110.             <td>2022年2月1日</td>
  111.             <td>越南</td>
  112.             <td>vs</td>
  113.             <td>中国</td>
  114.           </tr>
  115.           <tr>
  116.             <td>2022年3月24日</td>
  117.             <td>中国</td>
  118.             <td>vs</td>
  119.             <td>沙特阿拉伯</td>
  120.             <td>主场</td>
  121.           </tr>
  122.           <tr>
  123.             <td>2022年3月29日</td>
  124.             <td>阿曼</td>
  125.             <td>vs</td>
  126.             <td>中国</td>
  127.             <td>客场</td>
  128.           </tr>
  129.         </tbody>
  130.         <tfoot>
  131.           <tr>
  132.             <td>统计</td>
  133.             <td colspan="4">主场：5，客场：5</td>
  134.           </tr>
  135.         </tfoot>
  136.       </table>
  137.     </div>
  138.     <!-- 用#加id的值，作为a标签的href属性的值，做两个锚点链接，使得能跳转到下面下方查看相关内容 -->
  139.     <div class="search"><a href="#details">查看详细情况</a></div>
  140.     <div class="search"><a href="#grouping">查看分组情况</a></div>
  141.     <!-- 锚点一 -->
  142.     <div id="details">
  143.       <img src="https://i0.hdslb.com/bfs/article/7dc92730ed4b6d5ee041cc1c3083ec2a42a786c6.jpg" alt="详细情况" />
  144.     </div>
  145.     <!-- 锚点二 -->
  146.     <div id="grouping">
  147.       <img src="https://i0.hdslb.com/bfs/article/47ce041e996b9091f6ceed1ba3b1e9bce139c2a4.jpg" alt="分组情况" />
  148.     </div>
  149.     <!-- 设置一个悬浮窗，使得可以随时点击回到顶部，a标签的href属性的值设置为#，可以直接跳转回顶部 -->
  150.     <a href="#">
  151.       <div class="top">
  152.         <p>回到顶部</p>
  153.       </div>
  154.     </a>
  155.   </body>
  156. </html>

建立网站主页面，此处调用了淘宝、hao123、网易、腾讯外链及自建的内链，并将 php 中文网的图片及链接加在下导航作为底部

  1. <!-- 文档类型 -->
  2. <!DOCTYPE html>
  3. <!-- 根元素，通常也叫root,这里的lang表明了语言使用的是中文 -->
  4. <html lang="zh-CN">
  5.   <head>
  6.     <!-- 设置字体编码格式，一般常用UTF-8 -->
  7.     <meta charset="UTF-8" />
  8.     <!-- 兼容老版本，基本弃用 -->
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  10.     <!-- 设置视口：可视窗口   content设置宽度为设备宽度    initial-scale设置代码比例为代码一比一比例 -->
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  12.     <style>
  13.       /* 初始化配置*/
  14.       :root {
  15.         margin: 0;
  16.         padding: 0;
  17.         box-sizing: border-box;
  18.         font-size: 10px;
  19.       }
  20.       /* 设置背景色，将字体大小恢复至16px */
  21.       body {
  22.         background: cornflowerblue;
  23.         font-size: 1.6rem;
  24.       }
  25.       /* 上导航按钮栏使用flex横向布局，去掉ul的小点 */
  26.       .menu {
  27.         display: flex;
  28.         place-content: space-around;
  29.         list-style-type: none;
  30.       }
  31.       /* 设置字体居中及每个区块的宽高，将该元素设置为定位元素 */
  32.       li {
  33.         text-align: center;
  34.         height: 5rem;
  35.         width: 20rem;
  36.         position: relative;
  37.       }
  38.       /* 给menu下的a标签设置白色字体、去掉下划线、定位元素、垂直居中 */
  39.       .menu > li > a {
  40.         color: white;
  41.         text-decoration: none;
  42.         position: relative;
  43.         top: 1.45rem;
  44.       }
  45.       /* 设置鼠标经过menu下的a标签的时候，字体变为蓝色 */
  46.       .menu > li > a:hover {
  47.         color: blue;
  48.       }
  49.       /* 给内容区设置宽度100%，高度80%的可视窗口，背景改回白色  */
  50.       .main-main iframe {
  51.         width: 100%;
  52.         height: 760px;
  53.         background: white;
  54.       }
  55.     </style>
  56.     <title>网站后台</title>
  57.   </head>
  58.   <body>
  59.     <!-- 首先搭建网站的基本主架构，用三个div块元素将页面分为上中下三块 -->
  60.     <!-- 上导航 -->
  61.     <div class="main-header">
  62.       <!-- 使用无序列表配置上导航菜单栏 -->
  63.       <ul class="menu">
  64.         <!-- 每个无序列表中放一个a标签，将目标链接放进href属性中，并将target的值设置为内容区iframe的name值，使得点击该元素时，会在内容区的iframe中展示相关内容 -->
  65.         <li><a href="https://www.qq.com/" target="main">腾讯网首页</a></li>
  66.         <li><a href="https://www.taobao.com/" target="main">淘宝网</a></li>
  67.         <li><a href="https://www.hao123.com/" target="main">hao123</a></li>
  68.         <li><a href="NationalFootballTeam.html" target="main">国足12强赛赛程时间表</a></li>
  69.         <li><a href="https://www.163.com/" target="main">网易</a></li>
  70.       </ul>
  71.     </div>
  72.     <!-- 内容区 -->
  73.     <div class="main-main">
  74.       <!-- 将内容区iframe默认的src改为srcdoc，并在后面输入需要展示的文本内容，并将默认的边框设置为0，设置好name属性，让上面的a标签组成的按钮可以正常使用 -->
  75.       <iframe srcdoc="请点击上方链接打开相关内容" frameborder="0" name="main"></iframe>
  76.     </div>
  77.     <!-- 下导航 -->
  78.     <div class="main-footer">
  79.       <div class="address">
  80.         <!-- 加一个友情链接的文本 -->
  81.         <span>友情链接：</span>
  82.         <!-- 在a标签中加入php中文网的图片，点击跳转php中文网 -->
  83.         <a href="https://www.php.cn/"><img src="https://www.php.cn/static/images/logo.png" alt="php中文网" /></a>
  84.       </div>
  85.     </div>
  86.   </body>
  87. </html>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录