实验目的

本次实验为设计型实验

• 了解HTML相关知识与概念：W3C、HTML、CSS与JS的关系等
• 熟悉HTML文档结构和语法：HTML基本组成、文档标准结构、HTML头部信息
• 掌握HTML文本标记：标题、段落、换行、分割线、字符实体等的使用 掌握HTML图片的相关标签及其基本用法
• 掌握超链接（文字超链接、图片超链接、页面内链接）的一些基本用法 熟悉HTML中表格的用途、标签和一些特殊表格的创建 掌握三种
• 列表（有序列表、无序列表、定义列表）的标签以及基本用法。

实验内容

1.在网页开头使用锚链接在较长的网页实现页面内页首、页中、页尾的跳转

<a href="#header">页面首部</a>
<a href="#middle">页中</a>
<a href="#footer">页尾</a>
<a name = "header"></a>等

2.设置一级标题并居中显示

3.设置二级标题（个人资料）并居中显示，然后用<hr/>设置分割线，使用<p>标签另起一段，并采用lorem*number来增加文本字数

4.设置二级标题（个人图片爱好墙）并居中显示，然后用<hr/>设置分割线。居中设置文字超链接、图片超链接，其中采用相对路径的方式向网页中插入图片并通过width= %来调整图片大小。

<a name = "middle"></a>
   <center>
   <h2>个人爱好图片墙</h2>
   </center>
   <hr/>
   <center>
       <a href="https://weibo.com/u/1860563805?is_all=1" >图片来源跳转</a>
   <br>
       <a href="https://weibo.com/u/1860563805?is_all=1"target="_blank"><img src="mypicture.jpg" alt="图片墙"  width="50%"/></a>
   </center>

5.设置二级标题（大二课程列举），在table标签里设置表格边框，通过caption标签显示表格名称，然后用tr,th,td标签来完成表格。将此步所有内容居中显示。

<center>
       <h2>大二课程列举</h2>
       <table border="1">
              <caption>课程信息及所需学时</caption>
       <hr/>
              <tr>
              <th>course name</th>
              <th>total time</th>
              <th>teacher</th>
              </tr>
              <tr>
              <td>web</td>
              <td>72</td>
              <td>langgang</td>
              </tr>

6.设置二级标题（每周课程排序），然后用<hr/>设置分割线，使用ol、li标签创建有序列表，并在ol标签里定义type属性为I改变符号样式。

   <center>
        <h2>每周课程排序</h2>
        <hr/>
        <ol type="I">
            <li>Web</li>
            <li>Data Structures</li>
            <li>Python</li>
            <li>Physics</li>
            <li>Politics</li>
            <li>P.E.</li>
       </ol>
 </center>
    <a name = "footer"></a>

结论（结果）

通过运行vscode中的代码，出现一个个人主页，包含锚链接、一二级标题，还有一些居中文本，并且插入图片设置超链接，实现网页的跳转；创建表格和列表，从而实现个人主页的简单设计。

小结

通过本次实验，了解熟悉了HTML文档结构和语法，掌握HTML文本标记、图片、表格、列表等相关标签的简单使用。除此之外，还掌握了锚链接的创建使用实现了页面内跳转；学会利用lorem*数字来增加文本长度等。

标签：表格,范本,标签,HTML,个人主页,超链接,设置,模仿,图片
来源： https://blog.csdn.net/qq_45943210/article/details/123145851