大家好，我是新媒之声广告工作室的大白，今天给大家带来的是HTML5简单教学第一章（第二节）。

今天给大家带来的东西比较多；

br 换行标签实属单标签，br换行标签就如同我们编辑文本是点击的回车键，让它换到下一行。

HTML5 <br/>标签用来对文档中的文本进行换行的处理，请参考下面的这个例子：

以下代码标记一个换行：

<p> 使用 br 元素<br>在文本中<br>换行。 </p>

text-align是什么

前端CSS的text-align是用于设置文本对齐方式，它具有一下几个属性：left、center、right、justify。

展示案例

其中left、center、right属性顾名思义，设置文本向左边对齐、居中对齐、向右边对齐。

重点介绍justify属性

text-align:justify可以实现文本两端对齐。首先展示问题部分：

在图片中我们可以发现，因为文字大小的关系无法满足满行左右对齐，因此很不美观。我们使用text-align:justify可以保证除了最后一行外的文字两端对齐（简单来说单独一行是没有效果的）。

浮动布局

• 相关CSS属性

float
- left：元素向左浮动
- right：元素向右浮动
- none：默认值。元素不浮动，并会显示在其在文本中出现的位置
- inherit：从父元素继承 float 属性的值

浮动的缺点

1.父级不能被撑开，在父级设置的属性就没办法正常显示

2.margin和padding值不能正常被显示

初学css的新手朋友经常会遇到一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢，其实方法有3种：1、通过添加css的“vertical-align:middle;”；2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；3、把文字和图片分别放入不同的div中。上面三种方法都可以让图片和文字在同一行显示，下面我们用实例来应用一下。

button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部（button的高度包含边框的高度，而文本框text则不包含边框高度。）

表单是网页中的重要元素，以及高频率出现的元素，如何把表单做的漂亮非常重要。首先我们需要解决一个实际的问题，就是文本框与按钮不对齐的问题。这个看似简单的问题追究到底可以发现很多我们未尝想到的原理。按钮(button)的高的解析问题导致了不对其问题的根本原因。下面演示正确的代码示范。