网站改版业务,嵌入式培训推荐,手工活外包加工网,wordpress新闻编辑器注意#xff1a;手机#xff08;APP#xff09;打开#xff0c;内容显示更佳#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划#xff08;** 博主会监督你并且教你写文章 **#xff09;的拉到最下面#xff08;PC端Web打开#xff09;加博主即可#xff0c;目…注意手机APP打开内容显示更佳不会的私聊博主即可 想要拿代码或加入学习计划** 博主会监督你并且教你写文章 **的拉到最下面PC端Web打开加博主即可目录也在最下面。 参加1_bit博主前端学习计划发文时再头部记得机上本专栏链接示例如下 我已加入 1_bit 博主的免费前端 站起来 学习计划专栏链接https://blog.csdn.net/a757291228/category_11609526.html
一、表格的使用
1.1 文字样式
1_bit上一节咱们学习了表格的样式这一节咱们来学习文字和图片的样式。上一节我们通过表格知道了样式设定需要通过一些特定的属性在这一节文字的样式和图片的样式也是通过对应的属性进行更改的。
小媛通过上一节的学习我觉得我已经知道了样式的使用只要知道属性和对应值的给予基本上就可以了。
1_bit是这样的咱们现在已经学习过了标题标签 h咱们只需要给一个属性 align 就可以使其对其例如居中 center、左对齐 left、右对齐 right就如同以下示例所示。
h1 aligncenter张小凡的有趣人生/h1
p aligncenter我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣.../p1_bit此时这个页面内容将会居中显示。
小媛是不是也可以设置 left、right 属性
1_bit对的是不是很简单
小媛是的。
1.2 字体
1_bit我们还可以设置字体使用 face 属性例如如下示例。
h1 aligncenter张小凡的有趣人生/h1
p aligncenterfont face黑体我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣.../font
/p小媛咦这个 font 是什么标签
1_bit这个 font 是字体标签咱们可以使用 font 标签设置其内部文本的字体、颜色、大小例如下面这个示例。
h1 aligncenter张小凡的有趣人生/h1
p aligncenterfont face黑体 size5 colorred我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣.../font
/p小媛哇明白了感觉可以做彩虹色的文本显示了。
1_bit哈哈哈你可以试试。咱们还可以设置上标 sup标签 和下标 sub标签例如下面代码示例。
h1 aligncenter张小凡的有趣人生/h1
p aligncenterfont face黑体 size5 colorred我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣.../fontp我的快乐就像font color快乐sup999/sup*高兴sub999/sub/font一样/p
/p小媛哈哈哈很有意思我学会了。
1.3 删除线、斜体、加粗
1_bit当然还可以使用删除线标签 s 、斜体标签 i 以及加粗标签 b。
h1 aligncenter张小凡的有趣人生/h1
p aligncenterfont face黑体 size5 colorred我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣.../fontp我的快乐就像font color快乐sup999/sup*高兴sub999/sub/font一样/pp我的快乐就像sfont color快乐sup999/sup*高兴sub999/sub/s/fontb一样/bi一样/i/p
/p1.4 不换行
小媛还有什么文字的操作方法吗
1_bit还可以设置某行不换行使用 nobr 标签其中 br 标签是换行那么 nobr 就是不换行例如。
h1 aligncenter张小凡的有趣人生/h1p aligncenterfont face黑体 size5 colorrednobr我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣...我的人生很有趣啊很有趣啊很有趣呀很有趣...要说怎么有趣呢就是很有趣很有趣很有趣.../nobr/fontp我的快乐就像font color快乐sup999/sup*高兴sub999/sub/font一样/pp我的快乐就像sfont color快乐sup999/sup*高兴sub999/sub/s/fontb一样/bi一样/i/p/p小媛明白了。
1_bit那么接下来咱们就看看图片标签的使用方法吧。
小媛好勒。
二、图片
2.1 基础图片标签的使用
接下来咱们就开始学习图片标签 img 的使用吧。
好勒之前已经有过一点的学习了。
图片标签是使用 img能够使用常规的图片格式例如 jpg、gif、png等一张简单的图片显示如下示例。
img src./img/1.png其中 src 表示当前图片的来源其值是对应的路径。一般来说如果没有限制整个图片的宽高那么将会使图片在网页中呈现原图比例大小的显示有时候在网页中过大此时可以给予 height 和 width 高宽设置具体的大小例如如下示例。
img width100 height100 src./img/1.png2.2 图片边框
那可以加边框吗
当然可以了例如如下示例使用 border 为图片增加边框。
img border10 width100 height100 src./img/1.png2.3 图片水平垂直距离
如果有多张图片我们可以设置其图片的 水平间距 hspace 或者 垂直间距 vspace例如如下代码。
img hspace60 vspace60 border10 width300 height300 src./img/1.png
img hspace60 vspace60 border10 width300 height300 src./img/1.png
img hspace60 vspace60 border10 width300 height300 src./img/1.png
img hspace60 vspace60 border10 width300 height300 src./img/1.png
img hspace60 vspace60 border10 width300 height300 src./img/1.png
img hspace60 vspace60 border10 width300 height300 src./img/1.png
img vspace60 hspace60 border10 width300 height300 src./img/1.png
img vspace60 hspace60 border10 width300 height300 src./img/1.png
img vspace60 hspace60 border10 width300 height300 src./img/1.png
img vspace60 hspace60 border10 width300 height300 src./img/1.png
img vspace60 hspace60 border10 width300 height300 src./img/1.png
img vspace60 hspace60 border10 width300 height300 src./img/1.png我突然想起来有时候鼠标移动到图片上将会显示文字这个怎么做
2.4 图片悬浮文本
这个只需要添加一个 title 标签就可以了例如如下示例。
img title别看了这是一张图片 hspace60 vspace60 border10 width300 height300 src./img/1.png明白了还有一个我记得有时候图片显示不出来会显示一个文字这个怎么做 这个只需要加一个 alt 属性就可以了例如如下示例。
img alt飞机 title别看了这是一张图片 hspace60 vspace60 border10 width300 height300 src./img/1.png原来如此。
2.5 图片文本对齐
咱们图片和文字一起出现的时候还可以添加对应的对齐方式例如如下代码示例。
ptop 对齐——文字之中img aligntop alt飞机 title别看了这是一张图片 hspace60 vspace60 border10 width50 height50 src./img/1.png出现了一张图片
/ppmiddle 对齐——文字之中img alignmiddle alt飞机 title别看了这是一张图片 hspace60 vspace60 border10 width50 height50 src./img/1.png出现了一张图片
/ppbottom 对齐——文字之中img alignbottom alt飞机 title别看了这是一张图片 hspace60 vspace60 border10 width50 height50 src./img/1.png出现了一张图片
/p原来如此明白了。
目录
【前端就业课 第一阶段】HTML5 零基础到实战九列表 【前端就业课 第一阶段】HTML5 零基础到实战八表单详解 【前端就业课 第一阶段】HTML5 零基础到实战七文字及图片样式 【前端就业课 第一阶段】HTML5 零基础到实战六表格详解 【前端就业课 第一阶段】HTML5 零基础到实战五基础元素 【前端就业课 第一阶段】HTML5 零基础到实战四伪类与伪元素 【前端就业课 第一阶段】HTML5 零基础到实战三一篇文CSS基础入门 【前端就业课 第一阶段】HTML5 零基础到实战二超链接 【前端就业课 第一阶段】HTML5 零基础到实战一基础代码结构详解
