基本标签 | 学习笔记

简介: 快速学习基本标签

开发者学堂课程【零基础学前端 HTML+CSS:基本标签 】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/398/detail/5110


基本标签

内容介绍:

一、段落 ( p ) 标签和水平线 ( hr ) 标签

二、示例

三、换行 ( br ) 标签、空格标签、注释

四、示例

 

一、段落 ( p ) 标签和水平线 ( hr ) 标签

段落 ( p ) 标签

< p > 标签在 HTML 页面中创建段落,它是成对出现。

水平线 ( hr ) 标签

< hr > 标签在 HTML 页面中创建水平线,它是单个出现,使用水平线(< hr > 标签)来分隔文章中的小节是一个办法。

image.png

 

二、示例

新建一个 hr.html 文件

输入

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

<p>段落4</p>

image.png

再来在四个段落上打上 hr

<p>段落1</p><hr>

<p>段落2</p><hr>

<p>段落3</p><hr>

<p>段落4</p><hr>

如图在加入 < hr > 后每个段落中间会加入水平线

image.png

在 HTML 里是没有换行概念,所有换行都是由 < P > 标签和 < br > 标签组成。

 

三、换行( br ) 标签、空格标签、注释

换行 ( br ) 标签

< br >:在 HTML 页面显示为换行,它是单个出现。

空格标签

在 HTML 页面显示为空格

注释

<!-- -->:其间的内容为注释,可以提高 HTML 页面的可读性,使代码更容易被人理解。

 

四、示例

在代码中增加文字你好中国

<p>段落1</p>

<hr>

<p>段落2</p>

<hr>

<p>段落3</p>

<hr>

<p>段落4</p>

<hr> 

你好中国

image.png

如果此时在你好中国中间输入回车

你好

中国

则此时在页面上显示为你好和中国中间存在一个空格,而不是回车,如果想换行或者换段,则需要在你好和中国之间输入 < br >,需改为你好< br >中国

image.png

继续修改代码,加入你好 ;中国

<p>段落1</p>

<hr>

<p>段落2</p>

<hr>

<p>段落3</p>

<hr>

<p>段落4</p>

<hr>

你好<br>中国<br>

你好 &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 中国

image.png

想多空多少格,那么一个字符长度就是一个 &nbsp 的一个占位符

如果想要在最后一行加入注释,则

你好&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 中国<!--空白的标识符 -->

刷新页面后显示与刚才一样

image.png

但是网页源代码中存在

总结:

换行是 <br>,&nbsp  空白的字符,充当空格使用,HTML 里边默认是没有多空格存在。注释是<!-- -->

相关文章
|
7月前
|
Kubernetes Perl 容器
k8s标签
k8s标签
|
3月前
|
前端开发 BI
前端基础(十)_标签分类(行级标签、块级标签、行块标签)
本文阐述了HTML标签的分类,包括行级标签、块级标签和行块标签,并展示了如何使用CSS的display属性实现标签类型之间的转换。
72 3
|
5月前
|
Kubernetes 算法 调度
k8s 标签-2
k8s 标签-2
33 2
|
7月前
with标签
with标签
47 2
|
7月前
|
前端开发 JavaScript
基础标签应用
基础标签应用
49 2
|
分布式计算 图计算 Spark
打标签_完成| 学习笔记
快速学习打标签_完成
打标签_完成| 学习笔记
|
图计算 开发者
打标签_生成标签| 学习笔记
快速学习打标签_生成标签
打标签_生成标签| 学习笔记
|
Dubbo Java 应用服务中间件
标签解析|学习笔记
快速学习标签解析,介绍了 Dubbo 在启动过程中如何解析配置文件。
标签解析|学习笔记
|
数据采集 前端开发 开发者
标签的语义化及标题标签|学习笔记
快速学习标签的语义化及标题标签
112 0
标签的语义化及标题标签|学习笔记
|
数据采集 搜索推荐 开发者
h1到h6标签|学习笔记
快速学习h1到h6标签