标签：表格 范本 标签 HTML 个人主页 超链接 设置 模仿 图片
实验目的
本次实验为设计型实验
- 了解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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。