6.HTML基础——br标签

br标签

作用

在HTML中实现换行

格式

< br >

注意点

  1. 多个br标签可以连续使用,使用多少个br标签就会换多少行;
  2. 由于HTML的作用就是用来给文本添加语义,而br标签的语义是不另起段落换行,而在企业开发中一般情况下需要换行都是因为需要另起一段,所以在企业开发中很少使用br标签;
  3. 如果是没有描述完的,但需要换行就用< br >;如果这一段已经描述完了,需要换行,就用< p >
<!--
如何在HTML中换行?
可以使用br标签
1.br标签的作用:换行
2.br标签的格式:<br>
3.br标签的注意点:
  -多个br标签可以连续使用,使用多少个br标签就会换多少行
  -由于HTML的作用就是用来给文本添加语义,而br标签的语义是不另起段落换行,而在企业开发中一般情况下需要换行都是因为需要另起一段,所以在企业开发中很少使用br标签
-->
<!--只设置了img标签的src属性<br><br>-->
<!--<img src="2021.png"><br>-->
<!--设置了img标签的src、width和height属性<br>-->
<!--<img src="2021.png" width="400" height="500"><br>-->
<!--设置了ing标签的src、width属性<br>-->
<!--<img src="2021.png" width="500" ><br>-->
<!--设置了img标签的src、width和title属性<br>-->
<!--<img src="2021.png" width="500" title="这个是图片"><br>-->
<!--设置了img标签的src、width和alt属性<br>-->
<!--<img src="20211.png" width="500" alt="对不起,你需要查看的图片不见了"><br>-->

<p>只设置了img标签的src属性</p>
<p><img src="2021.png"></p>
<p>设置了img标签的src、width和height属性</p>
<p><img src="2021.png" width="400" height="500"></p>
<p>设置了ing标签的src、width属性</p>
<p><img src="2021.png" width="500"></p>
<p>设置了img标签的src、width和title属性</p>
<p><img src="2021.png" width="500" title="这个是图片"></p>
<p>设置了img标签的src、width和alt属性</p>
<p><img src="20211.png" width="500" alt="对不起,你需要查看的图片不见了"></p>

### HTML 基本标签概述 HTML 使用一系列预定义的标签来构建网页文档。这些标签不仅帮助浏览器理解如何展示页面内容,还赋予了文档结构化的意义。 #### 文档类型声明 为了确保浏览器按照指定的标准解析页面,每份 HTML 文件通常以 `<!DOCTYPE html>` 开头[^2]。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> </body> </html> ``` #### 结构性标签 ##### `<html>`, `<head>`, 和 `<body>` 这三个标签构成了一个完整的 HTML 页面框架: - `<html>` 定义整个 HTML 文档。 - `<head>` 包含元数据(如字符集、样式表链接等),不会直接显示给用户。 - `<body>` 是页面主体部分,包含了所有可见的内容。 ```html <html> <head> <!-- 头部信息 --> </head> <body> <!-- 可见内容 --> </body> </html> ``` #### 行内与区块级元素 ##### 换行标签 `<br/>` `<br/>` 用于在同一段落内部强制换行,属于自闭合标签,在某些情况下可以改善文本布局[^1]。 ```html <p>这是第一行<br/> 这是第二行。</p> ``` ##### 超链接标签 `<a>` 创建指向其他资源的超链接,使用 `href` 属性指明目标 URL 地址[^5]。 ```html <a href="https://example.com">访问 Example 网站</a> ``` #### 排版类标签 ##### 段落标签 `<p>` 用来包裹一段文字,形成独立的一段话。 ```html <p>这是一个简单的段落示例。</p> ``` ##### 标题标签 `<h1>` 至 `<h6>` 从最高级别的 `<h1>` 到最低级别 `<h6>` 不同等级别的标题,有助于层次分明地组织文章内容。 ```html <h1>主标题</h1> <h2>副标题一</h2> <h3>子标题二</h3> ... <h6>最小子标题六</h6> ``` #### 版面控制标签 ##### 分隔符标签 `<div>` 和 `<span>` 虽然两者都可以作为容器使用,但它们之间存在显著差异:`<div>` 默认为块状显示模式;而 `<span>` 更适合应用于短语或少量文本内的样式调整[^3]。 ```html <div style="text-align:center;"> 这里是一些居中的文本。<span>特别强调的部分</span> </div> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值