HY的前端web周记2 3.11_web前端开发周记200字-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51167539/article/details/114796367

本文记录了作者在信息管理创新实践课程中学到的HTML新功能，如无序列表、有序列表、图片插入和链接创建。此外，还介绍了HTML的div和table布局，并对CSS有了初步认识，表达了对前端开发尤其是布局和排版理解的加深。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HY的前端web周记2 3.11

引子
一、一些HTML元素/功能（2）
二、两种HTML页面布局
三.CSS
总结

引子

信息管理创新实践第二课，继续学习了html的一些功能语法，学习了div table两种布局方式，初步了解了CSS的一些操作和应用

一、一些HTML元素/功能（2）

无序列表和有序列表：

<ul>	
		<li>姓名：华宇<br></li>
			<li>年龄：20<br></li>
		<li>	班级：信管192<br></li>
			<li>爱好：🏀<br>	</li>
			<li>偶像：Harden JAY</td></li>

这是无序列表

<ol><li>
		
	总有一支锚，能拴住我们飘泊在人海里的心。<br>
	那支锚或许就是某个人，<br>
	能让其他人都变成背景，能让内心充满温暖与安宁，<br>
	能让艰辛都变得有意义。<br>
	每个人都应该有这支锚，TA会帮我们了解，<br>
	即使人潮熙攘，缘分生灭，过客如云，<br>
	我们仍能守住良善，锁住心魔，保存信仰</li>
	<li>我想真正的成熟应该并不是追求完美，<br>
	而是直面自己的缺憾，这才是生活的本质。<br>
	罗曼罗兰说过的，这个世上只有一种真正的英雄主义，<br>
	那就是认清生活的真相，并且仍然热爱他</li>
	</ol>

以上是无序列表
这是有序列表

以上是有序列表

插入图片：

<img src="file:///D:/test/自我介绍华宇/img/1.jpg" width="200px">

在这里插入图片描述

链接到另一个网站：
-<a href="https://blog.youkuaiyun.com/qq_51167539">这是我的优快云 blog,点击可进入</a>

二、两种HTML页面布局

div(分块)和table（表格）

<div id="container" style="width:300px">

<div id="header" style="background-color:#aaaa7f;">
<h1 style="margin-bottom:0;color：">华宇个人信息</h1></div>

<div id="menu" style="background-color:#9fc4c8;height:170px;width:100px;float:left;">
<b>一<sub>些</sub><br>
关<sub>于</sub><br>
我<sub>的</sub><br>
你<sub>感</sub><br>
兴<sub>趣的</sub></b></div>
<div id="content" style="background-color: bisque;height:170px;width:200px;float:left;">
	<a href="喜欢的文字.html">喜欢的文字</a><br>
	<br>
	<br>
		<a href="基本信息页.html">基本信息页</a>
</div>

在这里插入图片描述
注：以上是div模式


```html
<table width="500" border="1">
	<tr>
	<td colspan="2" style="background-color:#b4cfff;">
	<h1>基本信息页</h1>
	</td>
	</tr>
	
	<tr>
	<td style="background-color:#a4ffed;width:100px;vertical-align:top;">
	<i>这是<br>
		我的
		<br>基本
		<br>信息<i>
	</td>
	<td style="background-color:#e2dcdb;height:200px;width:400px;vertical-align:top;">
		<ul>	
		<li>姓名：华宇<br></li>
			<li>年龄：20<br></li>
		<li>	班级：信管192<br></li>
			<li>爱好：🏀<br>	</li>
			<li>偶像：Harden JAY</td></li>
		<img src="../img/2.jpg" width:"40px">
	</tr>
	
	<tr>
	<td colspan="2" style="background-color:#faffe0;text-align:center;">
	<a href="HY.html">return</a></td>
	</tr>
	</table>

在这里插入图片描述
以上是table

三.CSS

body
{
	background-color:#d0e4fe;
}
h1
{
	color:orange;
	text-align:center;
}
p
{
	;
}
</style>
</head>

<body>

<h1>CSS 实例!</h1>
<p>这是一个段落。</p>

在这里插入图片描述

总结

这一周对前端开发有了进一步的了解，特别是布局和对页面的排版的把握加深了。css还不算太了解，慢慢来！冲！