(一)模仿范本创建一个个人主页

实验目的

本次实验为设计型实验

  • 了解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背景 播放视频作为背景


下一篇:HTML编码转换