使用 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>

更多相关文章

  1. 前端软件安装设置、Markdown和Emmet语法
  2. PHP header 的7种用法
  3. 用小鸟云服务器搭建网站常用的伪静态设置规则
  4. 学习笔记：php.ini的开发配置
  5. file本地文本传输协议为什么无法设置cookies
  6. nginx设置跨域
  7. canvas图片设置crossOrigin属性
  8. jQuery常用方法
  9. 仿jd手机端

随机推荐

  1. 在北京看场雪为什么这么难？
  2. 用python对2019年二手房价格进行数据分析
  3. 基于 Babel 的 npm 包的最小化设置 [每日
  4. 一文学懂 TypeScript 的类型 [每日前端夜
  5. 通过 Web 控制蓝牙设备：WebBluetooth入门
  6. 7个 Javascript 面试题及回答策略 [每日
  7. JavaScript 高阶函数快速入门 [每日前端
  8. 分享十张表的数据！大家一起玩！
  9. 2019年 Vue.js 报告中的亮点 [每日前端夜
  10. 用python重新定义【2019十大网络流行语】