关于HTML常用元素的学习
目录
课上，我们学习了一些列表和布局方式
无序列表&有序列表
我们继续完成上周记录中，团队代码的部分。
我们用无序表介绍了小组的成员，用有序表介绍了两位指导教师。
截图展示
从这里可以看到，无序表使用小圆点进行标记，有序表从1开始按照顺序进行标记。
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>我们小组的成员是：</h3>
<ul>
<li>单政瑶</li>
<li>成员二</li>
<li>成员三</li>
<li>成员四</li>
<li>成员五</li>
</ul>
<h3>我们小组的指导老师是：</h3>
<ol>
<li>指导教师一</li>
<li>指导教师二</li>
</ol>
<a href="index.html">返回主页</a>
</body>
</html>
HTML区块
利用区块添加关于选题的介绍
截图展示
代码展示
<div id="container" style="width:500px">
<div id="header" style="background-color:skyblue;text-align:center">
<h1 style="margin-bottom:0;">“我们的选题”</h1></div>
<div id="menu" style="background-color:#FFD700;height:100px;width:100px;float:left;">
<b>套餐种类</b><br>
一日<br>
两日<br>
三日</div>
<div id="content" style="background-color:#EEEEEE;height:100px;width:400px;float:left;">
<b>行程安排</b><br>
路线一<br>
路线二<br>
路线三</div></div>
<div id="footer" style="background-color:skyblue;clear:both;width:500px;text-align:center;">
“小队队名”</div>
</div>
HTML表格
或者选择表格进行展示，加上边框更加清晰
截图展示
代码展示
<table border="1" style="border-color: black;">
<tr>
<td>一日</td>
<td>路线一</td>
<td>价格</td>
</tr>
<tr>
<td>两日</td>
<td>路线二</td>
<td>价格</td>
</tr>
</table>
CSS的尝试
图片展示
代码展示
代码来自于菜鸟教程，我放到HBuilder X中尝试了一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>
关于css部分的小插曲与不太懂的问题：
在新建中，显示能够创建css格式的文件，但是当我把代码粘贴到文件后，无论怎么操作都无法运行。
后来我创建了tryy.html文件，代码可以正常运行，显示网页。
所以我想向各位大佬请教一下，css文件跟我们所学的部分有关联吗？
总结
三周的网课学习马上就要结束了，我们将重返校园，同大家一起学习。我网课在家的学习生活多多少少还是有些懒散，希望回到学校后，等打起精神，在与同学相互交流中，多学习更多的知识，按照教程有条不紊的继续推进。
flag：我再也不周三晚上做作业了，后面几周一定在保证质量的同时，尽早完成。