网页开发入门｜04 元素与样式

在前几节课的学习中，你可能尝试过将网页中的内容换行，会发现在HTML中明明换了行的内容，到浏览器中看居然没有换行？

换行难题？

让我们在workspace中创建一个新文件element.html，输入以下内容看看效果。

白日依山尽，
黄河入海流。

果然没有换行。

咱们回头来看一下上节课中，这段关于给图片添加超链接的代码。

<a href="hello.html">
	<img src="assets/icon.png">
</a>

还记得我们说「为了避免一行代码太长，并更加清晰的显示出标签间的包围关系，用这样写法更好」么？

显然HTML代码中的行，与在浏览器中看到的网页中实际的行并不是一一对应的。

通常在HTML的代码中进行换行，只是为了将代码的结构调整的更方便阅读，并不能实现换行。如果想要实现换行，要用到br标签，缩写自换行break。

白日依山尽，<br>黄河入海流。

换行标签br与图片标签img类似，既不能也不需要包围任何的文字，所以它只有开始标签没有结束标签。

当我们要开发的网页有大量换行需求时（通常也确实如此），如果在每个换行位置都使用一个br标签，也太不优雅了。

为此，我们可以使用HTML的中块级元素 Block element解决这个问题。每个块级元素会在网页中独占一行，相当于自带换行的效果，省去了输入br的麻烦。

等等，元素又是什么？

HTML中的元素

当我们使用标签将一段文字或者一个图片包围起来后，浏览器便可以根据标签的类型和属性，将其渲染出来，成为最终的网页的一部分。

相对网页整体而言，这一个个的组成部分，就被称作元素Element，网页就是有若干个元素组成的。

如果从HTML代码层面来定义的话，元素是指从开始标签到结束标签的全部内容，既包含了开始和结束标签本身，也包含了标签内的所有内容。

<a href="hello.html">此处</a>

👆上面这段代码是一个超链接元素。

如果一个标签只有开始标签，没有结束标签，如img标签，那么开始标签中的全部内容就是一个元素。

<img src="assets/icon.png">

👆上面这段代码是一个图片元素。

如果标签有嵌套，那么对外层的标签而言，里面的标签所组成的元素，称作子元素。外层的标签所组成这个更大的元素，就称作父元素。

<a href="hello.html">
	<img src="assets/icon.png">
</a>

👆在上面这段代码中，整个三行代码是一个超链接元素，第二行代码是一个图片元素。图片元素是超链接元素的子元素，超链接元素是图片元素的父元素。

即使标签中什么内容也没有，也同样是一个元素，称作空元素。

<div></div>

👆上面这段代码中用到的div标签，是分区division的缩写，div是最常用的一种块级元素。

空元素还可以简写为在开始标签末尾的>前加一个/，如<div/>。但是这样会导致后期要往空元素中添加内容时，还要改动原本的代码，将其恢复成<div></div>的写法。
在开发中有一个基本原则称作开闭原则，对扩展开放，对修改关闭，要尽最大的努力避免修改已有的代码，所以不推荐使用这种简写方式。

行内元素与块级元素

如上文说到，块级元素会在网页中独占一行，相当于自带换行的效果。让我们以div标签为例，看一下它是如何工作的。

<div>白日依山尽，</div>
<div>黄河入海流。</div>

相对于块级元素，我们之前已经接触到的 a，b，i， img都是一种行内元素Inline element，也有翻译为内联元素的。行内元素默认不会进行换行，如果需要换行的话，需要使用br标签。

元素的样式

看起来，好像使用div块级元素比使用br标签还要写更多的代码，并没有减轻什么工作量，我们为什么需要使用块级元素呢？

这是因为没有被任何标签包围的纯文本，并不是严格意义上的元素。而不是元素，就不能拥有样式Style！

我们之所以可以看到多姿多彩的网页，正是因为我们可以为元素设置样式：颜色、大小、边框、背景、阴影，甚至动画效果等等。

我们之前使用过的b，i标签就是为文字增加粗体和斜体样式的标签。

除了标签自带的样式以外，还可以使用style属性添加样式，绝大部分的标签都支持这一属性。

比如，使用下方的示例代码，可以为两行文字添加颜色color，分别为白色white和黄色yellow。

<div style="color: white">白日依山尽，</div>
<div style="color: yellow">黄河入海流。</div>

style属性里的内容，使用了对象式标记方法。

如果忘了什么是「对象式标记方法」，可以去回看本课程《01标记的力量》

每个样式的名称与取值之间使用:隔开，如果有多个需要标记的样式，可以按任意顺序写进style属性中，并使用;隔开。

比如，再将两行文字的背景颜色background-color 设为灰色gray。

<div style="color: white; background-color: gray">白日依山尽，</div>
<div style="color: yellow; background-color: gray">黄河入海流。</div>

可见，因为div是块级元素，会占据一整行，所以整行的背景色都变成灰色了。

这通常不是我们想要的效果，我们还可以为div元素设置宽度width。

<div style="color: white; background-color: gray; width: 100px">白日依山尽，</div>
<div style="color: yellow; background-color: gray; width: 100px">黄河入海流。</div>

不同的元素可以使用的样式不完全相同，比如行内元素不能拥有宽度，图片可以增加滤镜等等。我们将在后续的课程中陆续提到更多可以用的元素和样式，你也可以很容易的在网络上找到HTML标签的更详细的文档，比如w3cschool等。

我将本课程所有的代码托管在gitee上了，你可以点击这个链接，或到gitee.com上搜索弦五 网页开发入门，查看和获取本课程的全部代码。