欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML学习笔记

程序员文章站 2022-05-15 20:26:05
...

HTML学习笔记（四）

一.HTML 块

HTML块有两个标签：

<div>	定义文档中的分区或节。
<span>	定义 span，用来组合文档中的行内元素。

可以通过 div 和span将 HTML 元素组合起来。
div元素块级元素，它可用于组合其他 HTML 元素的容器。
它没有特定的含义，浏览器会在其前后显示折行。它的一个常见的用途是文档布局，它取代了使用表格(table)定义布局的方法。

span元素是内联元素，可用作文本的容器。
它也没有特定的含义，与CSS共同使用时可用于为部分文本设置样式属性。

二.HTML 类

div是分类块级元素，设置div元素的类，使我们能够为相同的div元素设置相同的类。
span分类行内元素，设置 span 元素的类，能够为相同的span元素设置相同的样式。
举个例子看一下这两个标签的作用：

<html>
<head>
<style>.sentence {background-color:black;color:white;margin:20px;padding:20px;}	span.red {
    color:red;
}
</style>
</head>
<body>
<h1>我<span class="red">最喜欢的</span>文章</h1>

<div class="sentence">
<h2>滕王阁序</h2>
<p>落霞与孤鹜齐飞，<span class="red">秋水共长天一色。</span></p>
</div>

<div class="sentence">
<h2>岳阳楼记</h2>
<p>先天下之忧而忧，<span class="red">后天下之乐而乐。</span></p>
</div>

</body>
</html>

看看实际运行情况：
HTML学习笔记
以上就很好的体现了分类和分块。

三.HTML 布局

网站常常以多列显示内容（就像杂志和报纸）。
div 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
那么接下来我们尝试使用div元素做一个页面布局：

<html>
<head>
<style>
#header { background-color:black;
        color:white;text-align:
        center;padding:5px;}
#nav { line-height:30px;
		background-color:#eeeeee;
    	height:300px;width:100px;
    	float:left;padding:5px;}
#section { width:350px;
    	float:left;
    	padding:10px;}
#footer { background-color:black;
   	 	color:white;
    	clear:both;
    	text-align:center;
   		padding:5px;}
</style>
</head>
<body>

<div id="header">
<h1>HTML学习</h1>
</div>

<div id="nav">
元素<br>
属性<br>
标题<br>
</div>

<div id="section">
<h2>笔记</h2>

<p>
好好学习，天天向上。
</p>
</div>

<div id="footer">
欢迎访问The Dream-seeker的博客
</div>

</body>
</html>

下面就是布局的页面：
HTML学习笔记

相关标签： HTML学习笔记 html

上一篇： 多尔衮为什么不废掉福临自己当皇帝呢？

下一篇： 油炸小土豆怎么去皮，学习这个小步骤，从此不再烦恼

推荐阅读