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

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

       利用Dreamweaver创建的第一个HTML文件，里面有几个重要的标签，细心观察有几个是成对出现的。我们把HTML文件可以形象的理解为一个放东西的大容器。只是这个容器内放的东西是我们在网页上看到的各种内容。比如，文字、图片、动画、按钮等等。
       我们创建的HTML文件第一行有很长一段代码，是一个声明，告知浏览器文件使用的哪种规范，可以后面理解。
：这对标签大家可以理解为本页面最大的一个容器，所有内容都放在这对标签内。同时这对标签也告知了浏览器，这个文件是一个HTML文件。
：这对标签大家可以形象的理解为头部，例如控制网页标题的这对标签就放在head内。当然可放在head内的内容还有很多，后面应用到时会进行介绍。而这句是用来控制页面内容编码格式的，现在也可以选择性理解。
：这对标签大家可以理解为身体，是存放网页主体内容的大容器。也是我们编写HTML静态页面的主战场。
       下面介绍两个常用展示文字的标签，这里要理解一下行容器和块容器。对比一篇文章来说，行容器就是内容在同一行内，不会自动换行，相对的块容器可以包含多行。而且，两个块容器放在一起会自动分列在两行。单独的文字无法添加样式，但放在容器内，就可给容器添加样式，来控制容器内的内容。
：可存放文字的行内容器

：可存放文字的块容器
我们来用一个例子直观对比一下这两个标签

	
		
		
	
	
		行内容器1 
		行内容器2
		
块容器1
		
块容器2
	

标记1处是通过更改中的内容实现。
标记2处结合代码，我们发现行内容器，就算是分行编写的，内容也只会展示在同一行内。
标记3处我们可以看到块级容器会和其他容器之间自动换行展示。

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

	
		
		
	
	
		行内容器1 
		行内容器2
		
块容器1
		
块容器2
		
		
控制文字大小
		
控制文字大小、颜色
		
控制文字大小、颜色、加粗
		
控制文字大小、颜色、加粗、倾斜
		
控制文字大小、颜色、加粗、倾斜、宋体
	

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