Web前端第一季(HTML):四:课时 10 : 109-预格式标签和字体标签+课时 11 : 110-修饰标签

最新推荐文章于 2022-08-01 10:05:52 发布
最新推荐文章于 2022-08-01 10:05:52 发布
阅读量183 收藏 1
点赞数
分类专栏： HTML5 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40544338/article/details/120945203
版权

目录

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

1.SIKI学院:我参考此视频实操

1.w3school官网:当做字典使用

1.菜鸟教程：当做字典使用

三.注意

四.操作:1:成功:课时 10 : 109-预格式标签和字体标签

1.pre:预格式标签:功能:文本编辑器中是什么格式，网页中显示就是什么格式，字体大小、换行、空格等都是一致的

1.功能；

1.查看字体格式:font格式

 四.操作:成功:课时 11 : 110-修饰标签

1.运行结果

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

1.SIKI学院:我参考此视频实操

登录 - SiKi学院 - 生命不息，学习不止！

  1. 我参考此视频实操

1.w3school官网:当做字典使用

w3school 在线教程

1.菜鸟教程：当做字典使用

菜鸟教程 - 学的不仅是技术，更是梦想！

三.注意

四.操作:1:成功:课时 10 : 109-预格式标签和字体标签

1.pre:预格式标签:功能:文本编辑器中是什么格式，网页中显示就是什么格式，字体大小、换行、空格等都是一致的

1.<font >功能；

  1. color：①直接修改字体颜色②属性可以是十六进制的颜色编号
  2. size：字体是1到7，最大是7，超过了也是7大小
  3. face：字体类型

 

<!-- pre:预格式标签:功能:文本编辑器中是什么格式，网页中显示就是什么格式，字体大小、换行、空格等都是一致的 -->
<pre>
  你好，我是xzy
</pre>

<!-- <font >：功能；
1.color：①直接修改字体颜色②属性可以是十六进制的颜色编号
2.size：字体是1到7，最大是7，超过了也是7大小
3.face：字体类型
-->
<p align="justify"> 你好，我是<font color="red">xzy</font></p>

<p align="justify">你好，我是<font color="#ff2ff1">xzy</font></p>

<p align="justify">你好，我是<font color="#ff2ff1" size="7">xzy</font></p>

<p align="justify">你好，我是<font color="#ff2ff1" size="7" face="幼圆">xzy</font></p>

1.查看字体格式:font格式

 

 四.操作:成功:课时 11 : 110-修饰标签

1.运行结果

<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>
	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<!--我是注释-->
</head>
<body>

<!-- <p></p>这是段落标签 -->

<!-- 
align:对齐
right：右对齐
center：居中对齐
justify：自适应 
-->

<!-- align:属性名字； 双括号里面属性内容 -->
<p align="right">2020年3月，亚马逊禁止《我的奋斗》上架。 [1]</p>
<p align="center">2020年3月，亚马逊禁止《我的奋斗》上架。 [1]</p>
<p align="justify">2020年3月，亚马逊禁止《我的奋斗》上架。 [1]</p>

<!-- pre:预格式标签:功能:文本编辑器中是什么格式，网页中显示就是什么格式，字体大小、换行、空格等都是一致的 -->
<pre>
pre:预格式标签:功能:文本编辑器中是什么格式，网页中显示就是什么格式，字体大小、换行、空格等都是一致的
</pre>

<!-- <font >：功能；
1.color：①直接修改字体颜色②属性可以是十六进制的颜色编号
2.size：字体是1到7，最大是7，超过了也是7大小
3.face：字体类型
-->
<p align="justify"> 你好，<font color="red">color 是字体颜色，可以直接写英文</font></p>

<p align="justify">你好，<font color="#ff2ff1">color 是字体颜色，可以是16进制</font></p>

<p align="justify">你好，<font color="#ff2ff1" size="7">size 是 字体大小，最大为7</font></p>

<p align="justify">你好，<font color="#ff2ff1" size="7" face="幼圆">face 是字体种类</font></p>

<!-- b:加粗，也可以写成strong -->
<p align="justify"> 你好， <b>b 是 加粗</b></p>
<p align="justify"> 你好， <strong>strong 是 加粗</strong></p>

<!-- i:倾斜 -->
<p align="justify"> 你好， <i>i是倾斜</i></p>
<!-- em:倾斜 -->
<p align="justify"> 你好， <em>em 是 倾斜</em></p>

<!-- sup是上标 -->
<p align="justify"> 你好， 2<sup>2</sup>，sup是上标</p>
<!-- sub是下标 -->
<p align="justify"> 你好， 2<sub>2</sub>，sub是下标</p>
<p align="justify"> 你好， 2<sub>[1]</sub>，sub是下标,[1]论文中经常出现</p>

</body>
</html>

 

 

Smart_zy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html pre标签样式,<pre>标签的基本样式设置
weixin_33186395的博客
06-11 4857
断行在html中，换行符无法在一般标签内作为布局控制显示，包括xml实体和 均表现为white-space，仅用于断字【1】。一般情形下，可使用标签断行；但需要从原始xml文本读取内容时，处理实体转义要麻烦一些，此时可使用标签。标签意为 preserve，保留内部文本的换行和空格【2】。样式若在项目中使用了样式框架，则预定义样式可能不能满足标签的特殊需求。此时可清除继承样式后，自行设置必要的样式...
＜pre＞标签内文字的字体字号及换行等样式定义
(ง •_•)ง
11-25 3407
.demo pre { /*字体样式*/ font-family: micsoft yahei; font-size: 16px; line-height: 2; color: #FFF; /*定义宽度*/ width: 800px; margin: auto; padding: 10px; /*背景色*/ background: #000; /*pre文字自动换行*/ white-space: pre-wrap; wh
pre标签的样式
weixin_39037804的博客
09-17 6836
　　你可能正在使用 <pre> 标签。这是一个 HTML 中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一...
css——pre标签
肖的博客
10-31 4921
预格式化文本，一般用来存放计算机代码等可以用 1：保留空白同时折行： pre { white-space: pre-wrap; } 2：既不折行也无滚动条，保持默认的容器宽度，但是允许它在交互的时候展开： pre:hover, pre:focus { width: min-content; } ...
财务信息化 第一课时 XXXX-03-03.pptx
最新发布
12-15
通过这第一课时的学习，学员将了解到财务信息化的基本框架，掌握用户和权限管理的核心概念，为后续更深入的财务系统操作打下坚实的基础。同时，理解系统管理员和账套主管的角色差异，有助于在实际工作中更好地进行...
高考总复习政治练习：必修四第二单元第四课课时跟踪练-11页.pdf
11-22
高考总复习政治练习：必修四第二单元第四课课时跟踪练-11页.pdf
高考总复习政治练习：必修一第一单元第一课课时跟踪练-10页.pdf
11-22
高考总复习政治练习：必修一第一单元第一课课时跟踪练-10页.pdf
PPT：第六单元课题6-3二氧化碳和一氧化碳第一课时.ppt
10-22
PPT：第六单元课题6-3二氧化碳和一氧化碳第一课时.ppt
高考总复习政治练习：必修一第三单元第七课课时跟踪练-10页.pdf
11-22
高考总复习政治练习：必修一第三单元第七课课时跟踪练-10页.pdf
页面标签pre和code标签添加高亮的样式
m0_49304996的博客
04-14 2959
pre和code标签代码块高亮显示 基于 highlight.js 美化详情页的代码片段 （1） 下载此插件到项目中如果(yarn或node基于自己环境决定) yarn add highlight.js@10.6.0 -D npm i highlight.js@10.6.0 -D （2）.在main.js 引入即可 import 'highlight.js/styles/default.css' // 代码高亮的样式 它会自动给页面标签pre和code标签添加高亮的样式 ...
css中字体的大小怎么设置,css样式中怎么设置字体大小
热门推荐
weixin_42709044的博客
08-04 3万+
在css样式中，可以利用“font-size”属性来设置字体大小，只需给文本元素设置“font-size:值;”样式即可。font-size属性用于设置字体大小，实际上设置的是字体中字符框的高度，其实际字符字形可能比框高或矮(通常会矮)。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。css样式中，可以通过设置“font-size”属性来设置字体...
html pre预格式文本是啥意思
Crosoe的笔记——菜鸟，求指导！
05-20 1679
html中的预格式标签<pre>
小新正在敲代码
02-24 6589
pre标签中的文本会被保留空格和换行符，这点是其最大的特点。我们知道在html的其他的标签中空格和换行都是被忽略的。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pre</title> </head> <body> <div> aaa aaa
HTML学习之——预格式文本
论程序员的自我修养的博客
02-22 8416
    对于 HTML，无法通过在 HTML代码中添加额外的空格或换行来改变输出的效果。     当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。      这种情况下可使用换行标签进行换行或者使用预格式文本。      那么什么是预格式文本呢？      预格式文本也是一...
Web前端笔记(标签)
W15105879792的博客
08-01 363
学习笔记
html给字体设置大小,如何设置html字体大小
weixin_28982089的博客
06-09 1万+
html字体大小的设置方法：1、在font标签中使用size属性设置，语法“”，随着size的值越大，显示的字体就会越大；2、使用“font-size”属性，语法“font-size:值”，值越大，字体就越大。本教程操作环境：windows7系统、CSS3&&HTML4版、Dell G3电脑。在HTML中，通常使用font标签来设置字体的样式，而用size属性来设置字体大小如下图所...
web前端入门到实战：背景颜色、背景图片、背景填充
软件开发-前端开发-IT
10-06 1万+
一、背景 1.如何设置标签的背景颜色 （1）在CSS中有一个background-color：属性值；，就是专门用来设置标签的背景颜色。 （2）取值：具体单词、RGB、RGBA、十六进制 例子： <style> .p1{ background-color: red; } .p2{ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值