3.html实现网页布局

小阿宁的猫猫

已于 2022-09-14 19:02:16 修改

阅读量6k

点赞数 14

分类专栏： # HTML WEB 文章标签： html 前端

于 2022-07-04 15:57:05 首次发布

本文链接：https://blog.csdn.net/dyjkl/article/details/125601779

版权

WEB 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

html实现网页布局

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>进行页面布局
实现一个下图所示的布局：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ketmZyGW-1656920865906)(D:\md图片\1656859890572.png)]$

演示代码:

<!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>