HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签

简介: HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签

HTML的基本知识(二)——段落标签、强制换行标签、水平线标签、图片标签

博主建了一个学习群 感兴趣的小伙伴可以加入一起学习交流      点我进群     一起学习交流!(群里有许多的学习资料,我做过的一些网页我都上传在群里了,需要的直接下载就可以了)


1、 段落标记标签

<p>   内容  </p>
属性:
    align="left(默认值:居左)|center(居中)|right(居右)" 
<p align="center"> 这是一个段落标签</p>
        <p>这是一个段落标签</p>
        <p>这是一个段落标签</p>
        <p>这是一个段落标签</p>
        <p>这是一个段落标签</p>

2、强制换行标签:

<br/>
思考思考思考思考<br/>
小妹妹家常菜尺寸<br/>
吃奶粉房价肥牛饭<br/>

3、水平线

<hr/> 单标记 用于创造水平线
    hr元素可用于分隔内容
    <hr color="" width="" size="" align="">
HTML默认单位为像素,可以省略
例如:
<hr color="red" width="500px" size="2px" align="right"/>

属性:

color:设置水平线的颜色

width:设置水平线的宽度

size:设置水平线的高度

align:设置水平线的对齐方式(默认居中)可取值left|right|center

<p>哈哈哈哈哈</p>
<hr color="red" width="500px" size="2px" align="right"/>
<p>哈哈哈哈哈</p>
<hr color="red" width="500px" size="2px" align="right"/>
<p>哈哈哈哈哈</p>

4、图片标签

常见的图片格式:

jpg jpge :不支持背景透明

png:支持背景透明图

gif:支持动图

2、

src:路径,必须属性

alt:图片不能正常显示给予提示

title:鼠标悬停给予提示

width:宽度,宽高设置一个属性,另外一个等比例缩放

height:高度 -->

<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=892704614,1758507844&fm=26&gp=0.jpg"
    alt="zhangyishan" title="啊哈哈哈"/>


<img src="https:dstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=892704614,1758507844&fm=26&gp=0.jpg"
    alt="zhang" title="啊哈哈哈"/>


相关文章
|
8月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
315 19
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
562 49
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
214 1
利用html2canvas插件自定义生成名片信息并保存图片
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
392 5
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
存储 移动开发 前端开发
|
8月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
8月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
8月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成