整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML里h1~h6标签和p标签里的内容不会自动换行?

-p标签内文字在界面内是换行显示的,但是在网页中不换行,问题怎么用现有学习的知识解决.

上图中单纯的在p标签内换行,但是没有显示换行,怎么用初学经验解决

1-1 使用标题标签h1~h6实现换行

1-2 用p标签断开,实现换行

1-3用换行标签 br 实现换行

1-4用分割线实现换行

(仅是学习总结,相信还有其他的办法,但是现阶段html还没有学到,后期再加~)

古诗文文字示例

筹笔驿

抛掷南阳为主忧,北征东讨尽良筹。

时来天地皆同力,运去英雄不自由。

千里山河轻孺子,两朝冠剑恨谯周。

唯余岩下多情水,犹解年年傍驿流。

示例截图如下(去掉一些自己测试写的东西主要的留下了刚好能截全)

(仅为个人自学的一点点思考,如有错漏,欢迎留言指正,还有许多的问题呈现,敬请期待~~~)

TML 段落

段落是通过 <p> 标签定义的。

实际例子

<p>This is a paragraph</p>
<p>This is another paragraph</p>

注释:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素

提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。)

不要忘记结束标签

即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:

实际例子

<p>This is a paragraph
<p>This is another paragraph

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释:在未来的 HTML 版本中,不允许省略结束标签。(现在开发已经不允许了)

提示:通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始,并在何处结束,不论对您还是对浏览器来说,都会使代码更容易理解。

HTML 折行(换行)

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

<p>This is<br />a para<br />graph with line breaks</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

<br> 还是 <br />

你会发现 <br> 与 <br /> 很相似。

在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。

即使 <br> 在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。

对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

知识总结

标签 描述

<p> 定义段落。

<br /> 插入单个折行(换行)。

如果您觉得有用,麻烦点个赞,支持一下!!

欢迎提问与建议。

、什么是HTML

HTML简介

HTML是用来描述网页的一种语言,它是一种超文本标记语言,由一套标记标签组成,在制作网页时,HTML使用标记标签来描述网页。

发展史


HTML:Hyper Text Markup Language超文本标记语言

超文本标记语言—在1993年6月互联网工程工作小组工作案发布(并非标准)

HTML2.0—1995年11月作为RFC1866发布,在RFC2854于2000年6月发布之后被宣布过时。

HTML3.2—1996年1月14日,W3C推荐标准

HTML4.0—1997年12月18日,W3C推荐标准

HTML4.01(微小改进)—1999年12月24日,W3C推荐标准,2000年5月15日发布基本严格的HTML4.01语法,是国标标准化组织和国际电工委员会的标准

XHTML1.0—发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布

XHTML1.1—2001年5月31日发布

XHTML2.0是W3C的工作草案,由于改动过大,学习这个新技术的成本过高而最终胎死腹中,因此,现在最常用的还是XHTML1.0标准。

目前最新的版本为HTML5,它是2004年被提出,2007年被W3C接纳并成立新的HTML工作团队,

2008年1月22日公布HTML5第一份正式草案,

2012年12月17日HTML5规范正式定稿,

2013年5月6日,HTML5.1正式草案公布。

HTML 5作为最新版本,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立,提供了许多新的网页功能,如使用网页实现动态渲染图形、图表、图像和动画,以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度

HTML的优势

  • 各大浏览器厂商对H5的支持
  • 市场的需求
  • 跨平台

二、HTML的基本结构

  • <html>......</html> HTML文档的开始和结束标记。
  • <head>……</head> 头控制标记,不在界面上进行展示,子标签可设置SEO优化的一些内容以及设置网页的编码。
  • <title>……</title>:设置浏览器的窗口上标题。
  • <body>……</body>:页面可见内容。

三、HTML的基本标签

  • 标题标签

h1~h6


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>标题标签</title>

</head>

<body>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

<h7>这是七级标题</h7>效果怎么显示不出来呢???

<h1>这是一级标题</h1>

</body>

</html>

浏览器预览效果


  • 段落标签和换行标签

p标签为段落标签,br标签为换行标签


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>段落和换行标签</title>

</head>

<body>

<h1>北京欢迎你</h1>

<p>北京欢迎你,<br>为你开天辟地</p>

<p>北京欢迎你,<br/>有有勇气就会有奇迹</p>

</body>

</html>


浏览器预览效果图


  • 水平线标签

hr标签为水平线标签


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>水平线标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了半年的积蓄,<br>漂洋过海来看你</p>

<hr/>

</body>

</html>


浏览器预览效果图


  • 字体样式标签

em为斜体标签,strong为字体加粗标签


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>字体样式标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>,<br>

<em><strong>漂洋过海</strong></em>来看你

</p>

<hr/>

</body>

</html>


浏览器预览效果图

  • 注释和特殊符号

注释使用:<!--被注释的内容-->

大于号:> great than的缩写

小于号:< less than的缩写

双引号:""

版权符号:©

空格:


源代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>注释和特殊符号</title>

</head>

<body>

<pre>

注释使用:<!--被注释的内容-->

大于号:> great than的缩写

小于号:< less than的缩写

双引号:""

版权符号:©

空格:

</pre>

<!-- 我是被注释的内容,我只留给你们看,不会在页面上显示 -->

5<10>6 <br>

"我是被双引号引起来的内容"<br>

©自由职业开发者公司<br>

我是 测试 空 格的

</body>

</html>


浏览器预览效果图


以上就是HTML的简单入门,后续带大家更深入的了解HTML