标梵举例HTML运用小例子
头部信息
<head>
<title>第一个网页</title>
</head>
语法解释
HTML 文档头部信息放在 <head>标签 内，本部分主要提供相关信息给浏览器。<head> 标签包括众多子标签，本例子中只提供了最必须的网页标题信息 <title>标签 。
Logo 及导航
<div id="header">
<h1>网站logo <h1>
<div id="nav"><!--nav start-->
<h2>首页</h2>
<h2>博客</h2>
<h2>留言板</h2>
</div><!--nav end-->
</div><!--header end-->
语法解释
首先定义一个 id="header" 的 <div>标签 用以容纳网站 Logo 及导航条
网站logo 以 <h1> 标签定义
再定义一个 id="nav" 的 <div> 标签用于容纳导航条
主要内容
<div id="content">
<div id="sidebar">
<h3>文章分类</h3>
<h3>最新文章</h3>
</div><!-- sidebar end-->
<div id="main-content">
<h3>文章题目</h3>
<p>文章具体内容</p>
</div><!--main-content end-->
</div><!--content end-->
语法解释
首先定义一个 id="content" 的 <div> 标签用以容纳页面主要内容
定义左侧分类列表 id="sidebar" <div> 标签
最后定义 id="main-content" 的 <div> 标签用于展示页面主体基本内容
页脚
<div id="footer">
<hr />
<p>网页底部内容</p>
</div><!--footer end-->
页脚部分包含友情链接以及版权信息等。
页面布局预览
最终我们要布局成如下的样子：
完整代码
完整代码如下：
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>网站logo <h1>
<div id="nav"><!--nav start-->
<h2>首页</h2>
<h2>博客</h2>
<h2>留言板</h2>
</div><!--nav end-->
</div><!--header end-->
<div id="content">
<div id="sidebar">
<h3>文章分类</h3>
<h3>最新文章</h3>
</div><!-- sidebar end-->
<div id="main-content">
<h3>文章题目</h3>
<p>文章具体内容</p>
</div><!--main-content end-->
</div><!--content end-->
<div id="footer">
<hr />
<p>网页底部内容</p>
</div><!--footer end-->
</div><!--container end-->
</body>
</html>
说明
所有标签元素都嵌入 <html></html> 根标签中
<body></body> 标签包含了除 <head></head> 外的其他页面主体元素
定义 id="container" 的 div 标签容纳所有正文内容
本文来源:标梵互动(https://www.biaofun.com/)