整合营销服务商

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

免费咨询热线:

html基础必备-分隔标记,前端小白一看就会

节、分区和分割线

这些标记用于将页面分成多个部分。熟练地掌握这些标记将意味着构建出具有良好的结构和布局的页面,使其更加友好和易于阅读。

分区 - <div> </div>

div标记定义了HTML文件中的一个部分或分区。它通常包含需要组合在一起的标题、段落、表格或其他元素。通过设置<div class="">与css一起使用来设置网页某个部分的显示。

段落 - <p> </p>

p标记用来定义文本的段落,就像你在书中看到的那样,一旦文本达到屏幕边缘就会自动折到下一行。当另一个<p>标记用于开始下一个段落时,浏览器将在段落之间添加一些空白。p标记具有以下属性:

  • align="" - 段落中文本的对齐方式:left, center or right
  • width="" - 段落将占据页面的固定宽度或百分比,默认为100%

内联 - <span> </span>

span标记用于将内联元素组合在一起,例如句子中的几个单词,以便仅对这些单词应用css样式。span标记可以在div和p标记中使用,因为它不会创建新的块。

换行 - <br>

br标记相当于一个回车符,用于在新行开始文本。一行中的多个<br>标记将在网页上创建一个很大的垂直空间。

水平分隔线 - <hr>

hr标记通常被称为HTML行分隔符标记,创建一条通常用于视觉上分隔页面的水平线。它具有以下属性:

  • width="" - 线条将占用固定宽度,默认100%宽度
  • color="" - 线条颜色
  • noshade - 取消3D外观,创建一条平的实线分隔线

不换行 - <nobr> </nobr>

出于某种原因,你希望文本在一条直线上继续,而不是在屏幕的边缘换行,可以使用nobr。注意:这将迫使用户向右滚动以查看行的其余部分,这是一种糟糕的设计。

例子

下面是以上标记的示例:

浏览器显示内容如下所示:

当内容的主题发生变化时,使用 <hr> 标签进行分隔:

<h1>HTML</h1>

<p>HTML 是用于描述 web 页面的一种语言。</p>

<hr>

<h1>CSS</h1>

<p>CSS 定义如何显示 HTML 元素。</p>


浏览器支持

所有主流浏览器都支持 <hr> 标签。


标签定义及使用说明

<hr> 标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。

<hr> 元素被用来分隔 HTML 页面中的内容(或者定义一个变化)。


HTML 4.01 与 HTML5之间的差异

在 HTML5 中,<hr> 定义内容中的主题变化,并显示为一条水平线。

在 HTML 4.01 中,<hr> 标签仅仅显示为一条水平线。

在 HTML 4.01 中,所有的布局属性都 已废弃。在 HTML5 中不再支持这些属性。请使用 CSS 来为 <hr> 元素定义样式。


HTML 与 XHTML 之间的差异

在 HTML 中,<hr> 标签没有结束标签。

在 XHTML 中,<hr> 标签必须被正确地关闭,比如 <hr />。


属性

属性描述
alignleftcenterrightHTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的对齐方式
noshadenoshadeHTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的颜色呈现为纯色。
sizepixelsHTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的高度。
widthpixels%HTML5 不支持。HTML 4.01 已废弃。 规定 <hr> 元素的宽度。

全局属性

<hr> 标签支持 HTML 的全局属性。


事件属性

<hr> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

iv 、span 没有特殊语义 ,但是网页布局中非常重要的2个标签

  • 缩写

division ,分割,分区

在我们的网页布局中,会有很多div 来组合网页

span, 跨度,范围

  • 语法

<div>

商品展示

<span>价格</span>

</div>