HTML代码重写后格式不在了

最近我在重写网页的HTML代码时遇到了一个问题，就是重写后页面的格式不再跟原先一样了。

	!DOCTYPE html>
    	html>
    	head>
    title>
    我的网页/title>
    	/head>
    	body>
    h1>
    欢迎来到我的网页/h1>
    p>
    这是一段正文。/p>
    img src="myimage.jpg" alt="我的图片">
    	/body>
    	/html>
    

以上是原先的HTML代码。我想要改变网页的样式，所以我对它进行了修改。

	!DOCTYPE html>
    	html>
    	head>
    title>
    我的网页/title>
    	/head>
    	body>
    div class="wrapper">
    	header>
    h1>
    欢迎来到我的网页/h1>
    	/header>
    	main>
    p>
    这是一段正文。/p>
    img src="myimage.jpg" alt="我的图片">
    	/main>
    /div>
    	/body>
    	/html>

修改后的代码中，我将网页分为了三个部分：头部、主体和底部。我还新增了一些div标签，并加入了一些class属性。原本的段落和图片元素也改为了在main标签中，而不是直接在body标签中。

可是当我在浏览器中预览修改后的网页时，发现原本的格式都不见了，而且页面看起来也变得混乱了。

经过查找资料，我发现原因是我没有给新增的div标签和main标签添加样式。我需要在CSS样式表中添加以下代码：

	.wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
	}
		main {
    margin-top: 20px;
	}
    

这段代码会给.wrapper类和main标签添加样式，让它们按照我预期的方式在网页中显示。

通过这次经历，我开始更加重视网页中的HTML代码和CSS样式表之间的紧密联系。在修改HTML代码时，一定要同时注意相应的样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！