您的位置：首页 > Web前端

跟着小黑学Java-2-前端-HTML基础-容器、文字控件

2018-01-10 13:44 316 查看

上一篇文章，我们从直观上先认识了一下HTML文件，并创建了第一个HTML文件。本篇开始，我们来一起充实这个网页。在我们平时经常浏览的网页中有各种各样的内容，到底是怎么产生的和排布的，我们来一起逐一学习。因为内容和样式密不可分，本篇开始，我们也会慢慢接触网页中的另一个重要文件CSS文件。简单理解就是HTML文件提供网页中的内容，而CSS文件则是控制这些内容的样式，样式概念如果没有接触过，可以这样理解，我们上篇的例子中在页面上写了“HTML我来了！”这几个汉字，如果我想改变这几个字的大小、颜色、甚至摆放的位置怎么办？通过CSS就可以做到，具体做法本篇会讲到。

利用Dreamweaver创建的第一个HTML文件，里面有几个重要的标签，细心观察有几个是成对出现的。我们把HTML文件可以形象的理解为一个放东西的大容器。只是这个容器内放的东西是我们在网页上看到的各种内容。比如，文字、图片、动画、按钮等等。

我们创建的HTML文件第一行有很长一段代码，是一个声明，告知浏览器文件使用的哪种规范，可以后面理解。
<html></html>：这对标签大家可以理解为本页面最大的一个容器，所有内容都放在这对标签内。同时这对标签也告知了浏览器，这个文件是一个HTML文件。
<head></head>：这对标签大家可以形象的理解为头部，例如控制网页标题的这对标签<title>无标题文档</title>就放在head内。当然可放在head内的内容还有很多，后面应用到时会进行介绍。而这句<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />是用来控制页面内容编码格式的，现在也可以选择性理解。
<body></body>：这对标签大家可以理解为身体，是存放网页主体内容的大容器。也是我们编写HTML静态页面的主战场。

下面介绍两个常用展示文字的标签，这里要理解一下行容器和块容器。对比一篇文章来说，行容器就是内容在同一行内，不会自动换行，相对的块容器可以包含多行。而且，两个块容器放在一起会自动分列在两行。单独的文字无法添加样式，但放在容器内，就可给容器添加样式，来控制容器内的内容。
<span></span>：可存放文字的行内容器
<p></P>：可存放文字的块容器

我们来用一个例子直观对比一下这两个标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>learn2</title>
</head>
<body>
<span>行内容器1</span>
<span>行内容器2</span>
<p>块容器1</p>
<p>块容器2</p>
</body>
</html>

标记1处是通过更改<title></title>中的内容实现。

标记2处结合代码，我们发现行内容器，就算是分行编写的，内容也只会展示在同一行内。

标记3处我们可以看到块级容器会和其他容器之间自动换行展示。

在标签容器上可以直接添加CSS样式来控制标签里内容的样式，下面举个例子来看看几种文字的样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>learn2</title>
</head>
<body>
<span>行内容器1</span>
<span>行内容器2</span>
<p>块容器1</p>
<p>块容器2</p>

<p style="font-size:18px;">控制文字大小</p>
<p style="font-size:18px; color:#FF0000">控制文字大小、颜色</p>
<p style="font-size:18px; color:#FF0000; font-weight:bold">控制文字大小、颜色、加粗</p>
<p style="font-size:18px; color:#FF0000; font-weight:bold; font-style:italic">控制文字大小、颜色、加粗、倾斜</p>
<p style="font-size:18px; color:#FF0000; font-weight:bold; font-style:italic; font-family:'宋体'">控制文字大小、颜色、加粗、倾斜、宋体</p>
</body>
</html>

字体上还存在其他的样式，可以自己添加上看看效果，我所举得样式例子也有很多选项，比如字体大小、粗细等等，可以换几个值看看效果。要注意不同样式之间用分号分割，结合代码例子和效果图，多尝试理解一下。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航