整合营销服务商

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

免费咨询热线:

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。注意:这将迫使用户向右滚动以查看行的其余部分,这是一种糟糕的设计。

例子

下面是以上标记的示例:

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

、标签的分类:双标签和单标签

双标签:就是成对出现的,类似于这种 <html> </html>

单标签:就是可以单个使用的,类似于 <br> 换行标签 或 <hr>水平线标签。

二、标签属性的作用:

标签的属性是用来定义文字或字符的 颜色、宽高、粗细、大小、等,这个是标签属性的作用。


三、标签属性的特性:

1、每一个标签都有自己的属性,单标签和双标签都有。

2、一个标签可以有多个属性。

3、每个属性都有对应的值,值要用单或双引号引起来。

4、多个属性之间使用空格隔开。

5、属性没有顺序之分。

6、字体属性值,必须是系统可以识别的字体,一般为系统自带字体。

7、HTML5 中 font 属性已经弃用。

源代码:↓

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!--网页抬头-->

<title>中央气象局</title>

</head>

<body>

<!--水平线的宽度是500像素,这个width就是标签属性-->

<hr width="500">

<!--下面这个是多个标签属性,多个属性之间用空格隔开-->

<font color="red" face="黑体" size="7">标签属性</font>

</body>

</html>

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

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

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

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

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

1-4用分割线实现换行

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

古诗文文字示例

筹笔驿

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

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

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

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

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

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