3.html实现网页布局

html实现网页布局

- 1.HTML头部元素
- 2.HTML 区块
- 3.HTML 布局
- - 演示代码:
- 4.十二分法

1.HTML头部元素

①<title>：网页标题信息，会显示在搜索引擎结果页面中
②<style>：定义样式文件引用地址，也可以在<style> 元素中直接添加样式来渲染 HTML 文档

③<meta>：元数据元素meta用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据

④<link>：定义文档与外部资源之间的关系。通常用于链接到样式表:

⑤<script>:用于加载脚本文件，如： JavaScript。<script>标签既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。

2.HTML 区块

(1)区块元素：

在浏览器显示时，通常会以新行来开始（和结束）如：<h1>, <p>, <ul>, <table>等

(2)内联元素：

在显示时通常不会以新行开始，如:<b>, <td>, <a>, <img>等

(3)<div> 元素
区块元素，可用于组合其他 HTML 元素的容器
没有特定的含义,浏览器会在其前后显示折行
与 CSS 一同使用，可用于对大的内容块设置样式属性
另一个常见的用途是文档布局

(4)<span> 元素
内联元素，可用作文本的容器
没有特定的含义
与 CSS 一同使用，可用于对文本设置样式属性

3.HTML 布局

使用<div>进行页面布局
实现一个下图所示的布局：

演示代码:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML布局</title>
	</head>
	<body>
		<!-- 设置整个背景颜色和大小 -->
		<div id = "all" style = "background-color:white; height:900px;width:1920px">
			 
            
			<!-- 设置标题栏 -->
			<div id = "header" style = "background-color:blue;height:100px;width:1920px;">
			标题栏
			</div>
          

			<!-- 设置左侧导航栏 -->
			<div id = "left" style = "background-color:red;height:800px;width:300px;float:left">
			左侧导航栏
			</div>


			<!-- 设置正文 -->
			<div id = "content" style = "height:700px;width:1620px;float:left">
			正文内容
			</div>



			<!-- 设置底部 -->
			<div id = "foot" style = "background-color:green;height:100px;width:1620px;float:left">
			底部信息
			</div>

		</div>
	</body>
</html>