html学习笔记（1）

最新推荐文章于 2024-07-24 16:53:23 发布

狗来了

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量346

点赞数

分类专栏： html 文章标签： html html换行影响

本文链接：https://blog.csdn.net/txl18767679670/article/details/101020548

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、p标签和h标签在源代码中的换行

<p>标签以及<h1>…标签都是自带换行的标签，及当两个相同标签并排时，网页效果也会是换行处理
例：

<html>
<body>

<h2>这是段落。</h2><h2>这是段落。</h2><h2>这是段落。</h2><h2>这是段落。</h2>
<h2>这是段落。</h2>
<p>这是段落。</p><p>这是段落。</p><p>这是段落。</p><p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

效果如图：
在这里插入图片描述

可见<h2>标签和<p>标签的换行效果和其在源代码中是否换行无关。其标签自带换行效果

二、i标签和b标签在源代码中的换行效果

例：


    <html>
<body>

<i>换行效果</i><i>换行效果</i><i>换行效果</i><i>换行效果</i>
<i>换行效果</i>
<i>换行效果</i>
<p>这是i标签和b标签分割符</p>
<b>换行效果</b>
<b>换行效果</b>
<b>换行效果</b>
<b>换行效果</b><b>换行效果</b><b>换行效果</b><b>换行效果</b><b>换行效果</b>

</body>
</html>

效果如图：
在这里插入图片描述
可见i标签与b标签的源代码内换行不会造成换行效果，但是会产生空格。
总结：p标签与h标签自带换行效果，代码内换行对展示效果没有影响
i标签与b标签没有自带换行效果，代码内换行会导致两个标签展示内容之间会出现一个空格，

三、<hr>标签的分割线作用

例：


    <html>
<body>
<b>展示hr标签的分割线作用</b><br/>
<i>我和你是一排的<hr>你和我是一排的<i>

</body>
</html>

狗来了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习笔记（1）

一、p标签和h标签在源代码中的换行<p>标签以及<h1>…标签都是自带换行的标签，及当两个相同标签并排时，网页效果也会是换行处理例：<html><body><h2>这是段落。</h2><h2>这是段落。</h2><h2>这是段落。</h2><h2>这是段落...
复制链接

扫一扫

专栏目录