One last thing I'd like to talk about with br and
p, I'll show you right now. Let's let's make this all be
one line again, okay? So I update this and we have
one line. If we, we can put a br tag in the
middle of this. We don't actually have to have the line
breaks in our HTML. So when I click Update, we, we get
our, our line break no matter how the HTML is formatted. So,
we can format this however we want, put all of these spaces
in here. And when we update this, it'll always come out the
same. There's an example. All this white space turns into turns into one single
space. All of these new lines here, turn into one
single space. You know, this text space is really, you know, you get
the idea. Okay. Why do we have two different ways of making
new lines? Why do we have a br tag and a
p tag? The answer is because the br tag is what
we call inline, and the p tag, is what we call
block. Now, so what the br tag was actually doing was
just ending a line. So when we have some text and
we put a br in the middle of it, it just
basically says the line ends here and this guy wraps to
the next line. The p tag works differently. The p tag
actually makes an invisible box. So when we have HTML
looks like this, this creates an actual box. So instead
of just rendering text, blank line, what this is actually
rendering is something sort of like this. Here, we've got
two lines of text and there's actually this invisible box
around text. And that's what the p tag does, is
it makes this invisible box. And this invisible box can
actually have height, and it can have width, where inline elements
are just text. So the example over here would be
more like this. So it's just two lines of text and
there's really just a little new line here. There's nothing nothing
fancy going on. And the difference between inline and block elements
will come up a fair amount later in this course
and it's just it's important to know that there's a distinction
and they have kind of a different behavior. So far, all
of the elements we've learned other than p are inline elements.
So, inline elements are b, em, even img is
an inline element. And we saw how, before, our our little Hipmunk image appeared
right in the middle of the text. That's because it's inline. And
so far, the only block element we've learned is the p element.
Una última cosa que me gustaría hablar sobre br y p.
Les mostraré ahora mismo. Hagamos esto un sola línea de nuevo.
Ok? Actualizo esto y tenemos
una sola línea. Si podemos colocar una etiqueta br en
el medio, no tendríamos que tener el salto
de línea en nuestro HTML. Así, cuando hago click a Actualizar,
obtendremos el salto de línea sin importar cómo el HTML está formateado.
Así, podemos formatear esto como sea que deseemos, colocar todos
estos espacios aquí. Y cuando actualicemos esto, siempre será lo mismo.
Aquí un ejemplo. Todos estos espacios en blanco se vuelven un
solo espacio. Todas estas líneas nuevas aquí, se vuelven una
sola. Sabes, este espacio de texto es realmente, tu sabes, ya
tienes la idea. Ok, ¿Por qué tenemos dos formas diferentes de crear
nuevas líneas? ¿Por qué tenemos una etiqueta br y una
etiqueta p? La respuesta es porque la etiqueta br es lo que
llamamos inline, y la etiqueta p es lo que llamamos
block. Así, lo que la etiqueta br estaba haciendo era
sólo terminando una línea. Así, cuando tenemos algo de texto y
colocamos un br en el medio, está
diciendo básicamente que la línea termina aquí y que este conecta con
la siguiente línea. La etiqueta p funciona diferente. La etiqueta p
realmente crea una caja invisible. Así cuando tengamos HTML
como este, esta creando una caja. Así, en vez de
solo renderizar texto, una línea en blanco, lo que realmente está haciendo
es renderizar algo como esto. Aquí, tenemos
os líneas de texto y realmente hay una caja invisible
alrededor del texto. Y eso es lo que la etiqueta p hace,
crea una caja invisible. Y esta caja invisible puede
tener altura, y puede tener ancho, cuando los elementos
inline son sólo texto. Así el ejemplo aquí sería
más como esto. Son solo dos líneas de texto y
solo hay una pequeña línea nueva aquí. No hay nada
complicado ahí. Y la diferencia entre elementos inline y block
vendrá luego en este curso
y sólo es importante saber que hay una distinción
y que tienen comportamientos diferentes. Hasta ahora,
todos los elementos que hemos aprendido, además de p, son etiquetas inline.
Así que, las etiquetas inline son: b, em, hasta img es una
etiqueta inline. Y vimos como, antes, nuestra imagen de Hipmunk aparecía
justo en el medio del texto. Eso es porque es inline. Y
hasta ahora, el único elemento block que hemos aprendido es el elemento p.
最後にとについてもう1つお話します
もう一度これを1行にして
UPDATEボタンを押すと表示も1行ですね
は文の途中に挿入することができます
HTML上で文を改行する必要はありません
UPDATEボタンを押すとHTML上の表示とは関係なく
文は改行して表示されます
実はこのようにたくさんスペースを入れても
レンダリング後の表示はまったく同じになります
つまりこれらのスペースは
1つのスペースに変換されるのです
新しく行をいくら追加しても
1つのスペースに変換されます
この部分全体が1つのスペースになっています
分かりますよね
複数の行を作る方法がなぜ2通りあるのか?
なぜとがあるのか?
その理由はがインライン要素と呼ばれるもので
がブロック要素と呼ばれるものだからです
の役割は単に行を終わらせることだけです
つまりテキストの途中にを挿入すると
ここで行が終わって残りは次の行であることを示します
の役割はそれとは異なり
目に見えない箱を作るようなものです
なのでHTMLでこのように記述すると
見えない箱を作り出します
なので単にテキストと空行を作るのではなく
イメージとしてはこのようになります
この2行のテキストの間に見えない箱が存在するのです
この見えない箱を作り出すのが
の役割ということになります
この箱は幅と高さを指定することができます
それに対してインライン要素は単なるテキストで
2行あるテキストの間に新しい行を作るだけで
何も特別なことは起こりません
インライン要素とブロック要素の違いは
今後のレッスンでかなり登場します
ですのでタグにはこの2つの区別があり
振る舞いが異なることを理解しておいてください
今までに紹介した要素はすべてインライン要素です
もももインライン要素です
シマリスの画像はテキストの途中に表示されましたよね
それはがインライン要素だからです
これまででブロック要素だったのはだけです
关于 标签和 标签还有最后一点需要说明
现在就展示给你 我们把整个文本再变回一行
更新一下 文本又变成了一行
如果我们把 标签放在文本中间
其实就不需要在 HTML 中添加换行符了
点击 Update(更新)后
无论 HTML 是什么格式 文本都会换行
这里我们可以随意设置格式 添加很多空格
点击更新后 效果都是一样的
在这个例子中 所有这些很多空格都变成了一个空格
所有这些新出现的行也变成了一个单一的空格
这个文本空格确实是很烦人…… 你明白我的意思
为什么会有两种不同的方法来进行换行呢?
为什么既有 标签又有 标签呢?
这是因为 标签被称为内联元素
而 标签被称为块元素
标签实际上就是结束一行
这里有一些文本
当我们在文本中间插入一个 标签时
从本质上讲 就是表示这一行在这里结束 这些文本转到下一行
而 标签的功能则不同
标签实际上是创建一个看不见的文本框
像这样的 HTML 就是创建了一个文本框
与仅仅呈现出文本和空格的方式不同
这样做呈现出的结果是这样的
两行文本 在这行文本外面有一个看不见的文本框
这就是 标签产生的效果
它创建出了这个看不见的文本框
这个看不见的文本框有高度 宽度
而内联元素只有文本
因此这里的例子大多数是这样的 仅有两行文本
有一些新出现的行 再没有其他特别的东西了
内联元素与块元素的区别
将在本课程后续章节中进行讲解
目前重要的是要知道两者是有差别的
它们有不同的行为方式
到目前为止 除了 标签之外 我们所学的其他所有元素都是内联元素
内联元素有 标签 标签
标签也是内联元素 我们之前看到过 Hipmunk 图片如何出现在文本中间
那是因为 是内联元素
目前为止 我们学过的唯一的块元素是 标签