第一个html代码

最新推荐文章于 2023-01-15 19:14:40 发布

叹！

最新推荐文章于 2023-01-15 19:14:40 发布

阅读量635

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/qq_44721518/article/details/107142023

版权

笔记专栏收录该内容

50 篇文章 4 订阅

订阅专栏

html5的代码格式如下：

<!DOCTYPE html><!--告诉浏览器要一个doctype来触发标准模式-->
<html><!--语法开始-->
<head>
<title>第一个网页</title><!--头部信息，如<title>标签定义的网页标题-->
</head>
<body>
<p>hello world</p><!--主题信息，包括网页显示的内容-->
</body>
</html><!--语法结束-->

将页面分为上、中、下三部分。上面显示导航；中间又分为两部分，左边显示菜单，右边显示文本内容；下面显示页面版权信息。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html;charset = utf-8">
<title></title>
<style type = "text/css">
#header,#siderLeft,#siderRight,#footer{
   border:solid 1px #666;
   padding:10px;
   margin:6px;
}
#header{width:500px}
#siderLeft{
    float:left;
	width:60px;
	height:100px;
}
#siderRight{
    float:left;
	width:406px;
	height:100px;
}
#footer{
    clear:both;
	width:500px;
}
</style>
</head>
<body>
<div id = "header">导航</div>
<div id = "siderLeft">菜单</div>
<div id = "siderRight">内容</div>
<div id = "footer">底部说明</div>
</body>
</html>

效果如下：
在这里插入图片描述
优化版：

<!DOCTYPE html>
<html>
<head>
<meta charset = utf-8">
<title></title>
<style type = "text/css">
header,nav,article,footer{
   border:solid 1px #666;
   padding:10px;
   margin:6px;
}
header{width:500px}
nav{
    float:left;
	width:60px;
	height:100px;
}
article{
    float:left;
	width:406px;
	height:100px;
}
footer{
    clear:both;
	width:500px;
}
</style>
</head>
<body>
<header>导航</header>
<nav>菜单</nav>
<article>内容</article>
<footer>底部说明</footer>
</body>
</html>

效果图同上。

叹！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一个html代码

将页面分为上、中、下三部分。上面显示导航；中间又分为两部分，左边显示菜单，右边显示文本内容；下面显示页面版权信息。<!DOCTYPE html><html><head><meta http-equiv = "Content-Type" content = "text/html;charset = utf-8"><title></title><style type = "text/css">#header,#si
复制链接

扫一扫