Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用 HTML 基本常用标签搭建简易静态页面网站及相关介绍
Blogger Information
Blog 49
fans 0
comment 0
visits 38186
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用 HTML 基本常用标签搭建简易静态页面网站及相关介绍
超超多喝水
Original
832 people have browsed it

使用 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>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post