第二章 博客静态网页1

 制做一个网页首先肯定总体布局分析设计

HTML中<div></div>：划分页面的区域，布局

<div id="box">   
	<div id="banner"></div>  <!-- 头部：横幅的图片区域 banner  -->
	<div id="menu“></div> <!-- 头部：导航栏区域 menu -->
	<div id="main"> <!-- 中间主要的部分 main -->
  		<div id="left"> </div>
  		<div id="right"></div>
	</div>  
	<div id="footer"></div> <!-- 最下面尾部的区域：footer -->
</div>

CSS 样式中的：如何使用样式、设置 div 的样式（宽、高、背景、 div 并排）

@charset "utf-8";
#box{
	width:1024px;/* 设置id是box的div，高度为1014px */
	height:1300px;
	margin:0 auto;/*居中*/
	background-color:#C00;
}

引用方式 - 外链式： <link href ="style.css" rel ="stylesheet" type="text/ css " />    //href="css的地址"

HTML中的新使用的标签：图片<img>、超连接<a>、列表<ul><li>

图片标签<img>：<img>标签属于单标签：<img />

< img > 标签有两个必要的属性：

src 属性：图像文件的路径

alt 属性：图片说明。当图片找不到不能显示时，会显示这个文字内容

<img src="images/bg.jpg" alt="这是个人图片" />

超连接标签<a>：

成 对出现 <a></a> 、用于从一个页面跳转到另外一个页面

<a>最重要的属性href，跳转的链接目标。若没有目标，可用#表示空连接

<a href=“http://www.baidu.com”>去百度</a>
<a href=“#”>哪也不去</a>

列表标签<ul><li>：成对出现<ul></ul>、<li></li>、<ol></ol>

列表分为无序列表和有序列表。无需列表用粗体圆点对项目标记，有序用数字。

<!– 有序列表 -->
<ol>
	<li><a href=“#”>阳光生活</a></li>
	<li><a href=“#”>校园梦想</a></li>
</ol>
<!– 无序列表 -->
<ul>
	<li><a href=“#”>阳光生活</a></li>
	<li><a href=“#”>校园梦想</a></li>
</ul>