文章目录
前言主要以实操的形式为大家讲解。 一、古诗一首当我们把带格式的古诗放进body里面1.换行标签2.h标签3.p标签4.居中5.文本格式化标签标签6.特殊字符7.pre标签我们现在就可以达到我们的理想效果了 二.图像标签2.1图像标签的属性特别强调一下路径2.2可参考的CC0资源(图片素材)网站 三.HTML特殊字符符号大全总结前言
提示:这里可以添加本文要记录的大概内容:
本次主要讲解html文本标签部分,常用的标签
主要以实操的形式为大家讲解。
一、古诗一首
两相思 【宋】李禺枯眼望遥山隔水,往来曾见几心知?壶空怕酌一杯酒,笔下难成和韵诗。途路阻人离别久,讯音无雁寄回迟。孤灯夜守长寥寂,夫忆妻兮父忆儿。
当我们把带格式的古诗放进body里面
这个结果就十分差强人意。
我们的理想效果:
1.换行标签
咱们一步一步来,我们先达到换行的效果,我们只需要在需要换行的地方加上<br / >
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>两相思 <br>【宋】李禺 <br>枯眼望遥山隔水,往来曾见几心知?<br>壶空怕酌一杯酒,笔下难成和韵诗。<br>途路阻人离别久,讯音无雁寄回迟。<br>孤灯夜守长寥寂,夫忆妻兮父忆儿。<br></body></html>
结果如下:
这样我们就实现了换行的效果,一个br标签就是一次换行,如果我们在第一句诗后多加一个br标签,相当于多换了一行。
2.h标签
标题标签是成对存在的一共有六种分别是
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
标题标签顾名思义,就是让里面的内容达到标题的效果,独占一行&加粗加大显示,它的行间距要比br要大。
3.p标签
p标签依旧顾名思义,就是让里面的内容达到段落的效果,具有换行的效果默认占据一行,段落之间区隔要大于正文间距。语义就是段落。
<p> </p>
4.居中
标签是具有属性的,它的书写方式是key,键值对。
align=“center”,我们需要把它写到标签里
以段落标签为例:
<p align="center"> </p>
5.文本格式化标签标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s>
6.特殊字符
7.pre标签
它可以保留空格和换行,并把字体变成等宽字体。
<pre> </pre>
我们现在就可以达到我们的理想效果了
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><h1 align="center">两相思</h1> <p align="center">【宋】李 禺<br/></p><p align="center">枯眼望遥山隔水,往来曾见几心知?<br>壶空怕酌一杯酒,笔下难成和韵诗。<br>途路阻人离别久,讯音无雁寄回迟。<br>孤灯夜守长寥寂,夫忆妻兮父忆儿。<br> </p><pre align="center">两相思 【宋】李禺枯眼望遥山隔水,往来曾见几心知?壶空怕酌一杯酒,笔下难成和韵诗。途路阻人离别久,讯音无雁寄回迟。孤灯夜守长寥寂,夫忆妻兮父忆儿。</pre></body></html>
如果我们想要一条贯穿的直线,就像我们古诗课本中的。<hr / >可以达到我们的要求。
二.图像标签
引入图像所用标签
<img src=" " alt=" " title=" " width=" " height=" ">
2.1图像标签的属性
属性采用键值对格式:key = “value”src: 要显示图片的路径.alt: 图片没有加载成功时的提示.title: 鼠标悬浮时的提示信息.width: 图片的宽,也可以设置为浏览器宽度的百分比height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
如果在宽或高填写一个值(数字或百分比),图片会按比例放大或者缩小。这里数字的单位是px,百分比指的是浏览器的宽度和高度的占比。如果我们同时指定宽和高,图片很很可能显示不完全(失真)。
特别强调一下路径
相对路径
以引用文件所在位置为参考基础,而建立出的目录路径
同一级路径:位于HTML文件同一级
下一级路径: /
上一级路径: …/
如果按照我们的习惯,在html文件所在目录中,有images文件夹,里面放有logo.png,我们要引入的话<img src="images/logo.png">如果在html同一目录下,有一logo2.png文件,我们引入<img src="logo2.png">
绝对路径
是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始路径
或者网络上的绝对路径地址
<!-- 绝对路径方式1 --> <img src="D:/weilai/images/logo.png"><!-- 绝对路径方式2 --><img src="/images/logo.png">
2.2可参考的CC0资源(图片素材)网站
/zh-cn/cn/zh///https://stocksnap.io/
三.HTML特殊字符符号大全
大家可以直接参考这篇博客/x650007/article/details/19777
而且都是可复制的,作者有心了。
总结
还是那这首古诗
<!DOCTYPE html><html><head><meta charset="utf-8"><title>两相思</title></head><body><h1 align="center"><img src="tuzi.jpg" ><br />两相思 </h1><p align="center">【宋】李 禺<br/></p><p align="center">思妻诗<b>【顺读】</b><br/>枯眼望遥山隔水,往来曾见几心知?<br/>壶空怕酌一杯酒,笔下难成和韵诗。<br/>途路阻人离别久,讯音无雁寄回迟。<br/>孤灯夜守长寥寂,夫忆妻兮父忆儿。</p><pre align="center">思夫诗 <u><i>【倒读】</i></u>儿忆父兮妻忆夫,寂寥长守夜灯孤。迟回寄雁无音讯,久别离人阻路途。诗韵和成难下笔,酒杯一酌怕空虚。知心几见曾来往,水隔山遥望眼枯。</pre><p align="center"><img src="tuzi.jpg" width="500px" title="冬" alt="冬"/></p><hr /></body></html>