HTML常用文本标签及图片处理

最新推荐文章于 2024-12-08 19:03:19 发布

i336677d

最新推荐文章于 2024-12-08 19:03:19 发布

阅读量1.6k

点赞数 38

分类专栏： html前端文章标签： html 前端

本文链接：https://blog.csdn.net/i336677d/article/details/135628667

版权

html前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本标签，如换行、标题样式、居中对齐、预定义文本格式（如pre）、图片处理方法（包括图片目录创建、尺寸调整、alt属性和路径设置），以及如何使用CC0协议获取免费图片和设置favicon。

摘要由CSDN通过智能技术生成

一.HTML常见标签

1.换行标签（单标签）---- 上一行最后处 <br/>

2.标题加粗（双标签）--- <h1> 标题<h1/>

3.居中对齐（双标签）----align=" "

标题：<h1 align="right/left/center"> 标题 </h1>

<h1></h1>、<p></p>包围的内容默认自动前后换行，有行间距，独自占据一行

正文：<p align="right/left/center"> 正文 <br/> </p>

对应网页效果图:

网页效果：

4.预定义文本格式--pre--可保留原文本的空格和换行符、变为等宽字体

（p标签则不保留空格和换行符）

对比一下pre和上述格式标签运行结果，发现区别为pre其文本到左侧距离为固定值不变

如果想让下面pre这段文本也居中对齐，同理<pre align="center">

同样方式h1居中突出标题

5.加粗符号（bold）-----<b></b> 不同于h1,b标签加粗后字体间距不变

倾斜符号（itallic）-----<i></i>

下划线符号（underline）---<u></u>

删除符号---<s></s>

6上角标------.sup（superscript）

下角标------sub（subscript）

eg:

7.特殊字符（预留字符）

添加空格------不换行的空格  

html中不能使用小于号<和大于号>避免被误认为标签,

如果想正确显示预留字符，必须在html源代码中使用字符实体

字符实体举例：

HTML源代码	显示结果
<	<
>	>
&	&
"	"
®	®注册商标
©	©版权
™	™商标
&ensp;	半个空白位
&emsp;	一个空白位
	不换行的空白位

还有很多特殊符号，用的时候Crtl F、Crtl C、Ctrl V

8.水平分割线------A<hr/>B

二.图片处理

1.建立图片目录

下载图片后crtl C

右击左侧文件夹--新建--目录images--右击新建目录--crtl V

2.插入图片

选择图片后ctrl S 运行，成功插入图片，但图片貌似太大啦

3.改变图片大小：使用<img src=" " width=" xx% ">

此时宽度随拖动页面而改变，但始终保持40%的效果

width 后写出固定值eg:400px,即可固定宽度

px------pixel（像素）

4.使鼠标滑过图片时显示图片主旨：title=" "

图片未能正常加载时显示标签：alt=" "

5.引入图片的两种路径：

相对路径：./ 图片在此网页所在的相同文件夹的文件里可查找到

绝对路径：

右击图片---新的标签页打开---查看网址（完整路径）

6.找到好看的图片--CC0（知识共享组织Creative Common ）

除CC0外6种不同的CC协议：

cc0支持网站

https://www.pexels.com/zh-cn

https://www.freeimages.com/cn

https://pixabay.com/zh/

https://www.splitshire.com

https://stocksnap.io/

iconfront下载图标

部分图片来源网站许可协议

https://www.pexels.com/zh-cn/license/

https://pixabay.com/zh/service/license/

https://unsplash.com/license

7.收藏夹图标或网站图标

（1）favicon制作图标（favicon.ico）

（2）制作好的ico图标复制粘贴到根目录上

（3）<head>部分加入<link rel=" icon" type=" " href=" 文件名，即favicon.ico"/>