体效果
<h1></h1> 标题字(最大)
<h6></h6> 标题字(最小)
<h1 align="center"></h1>
<strong></strong> 粗体字(突出强调)
<b></b> 粗体字(bold:粗体)
<i></i> 斜体字(italic:斜体)
<u></u> 底线,文本添加下划线:(underline:下划线)
<strike></strike>或<s></s> 横线,相当于加删除线文本 <del></del> HTML5
等宽文字标签:对于等宽文字设置多数情况用在英文文字显示中
<tt></tt> 打字体,类似打字机或者等宽的文本效果。
<code></code> 等宽文字设置内容(定义计算机代码文本)
<samp></samp> 等宽文字设置内容(定义样本文本)
<kbd> 定义键盘文本。
<sup></sup> 文字上标字体标签(super)
<sub></sub> 文字下标字体标签(subscipt)
<address></address> 设置地址文字(可定义一个地址,比如电子邮件地址。您应当使用它来定义地址、签名或者文档的作者身份。)
<font></font> 编辑网页文字样式
<font face="" size="" color=""></font>
face属性可以用于设置文字的名称,可以是宋体、隶书、楷体等;
size属性用于设置字号的大小(单位:字号),从 1 到 7 的数字,或h1-h6。浏览器默认值是3。
color用于设置字体的颜色
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
手册上没有
<ruby></ruby>和<rt></rt> 设置文字标注标记
实例:
<ruby>当代最可爱的人<rt>志愿军</rt></ruby>
全栈攻城狮-每日更新原创IT编程技术及日常实用视频。
主要内容:这是HTML课程的第四课,主要讲解HTML的文字标签和格式标签。在今天我们做一个属于自己的简历。
在上一节中主要讲解了HTML的标题标签(h1~h7)以及加粗、斜体、下划线、上下标等格式的标签。上节请戳→HTML电脑编程03 标题物理字体标签的使用,大学生学编程
HTML
font标签通过字面意思来看,就是字体的意思。是的这是一个用来显示文字的标签。不过值得说的是,这个文字可以通过属性的方式,指定颜色和字体大小。比如:
font标签的写法
效果:
font标签的显示效果
从书写的HTML代码可以看出,font标签包括两个参数:
color(字体的颜色):颜色的值可以为英文,也可以为RGB数值。
size(字体的大小):通过数字1~7可以控制字体的大小。
face(文字的显示字体):这个属性可以设置显示的字体。如可以写为:face="楷体"
在HTML中包括两种颜色体系。一种就是直接写颜色的英文,如:red(红色)、blue(蓝色)、green(绿色)等。
不同颜色
另外一种颜色体系是RGB。由R(Red)、G(Green)、B(Blue)三种颜色组成。相信小时候很多人都知道两种不同的颜料,可以转换为不同的颜色。RGB就是通过红绿蓝不同的明暗程度。来表示所有的颜色的。
RGB
RGB中的每一个颜色都是以六位十六进制进行表示。数值越大颜色越深。如:000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#号。
段落标签为p。会为里面的文字自动分段显示:
p标签自动分段
换行标签为br,这是个单标签。写法为:<br/>。
br标签的形式
效果:
换行标签的效果
默认情况下,HTML的文档排列形式为自上而下,自左而右。标签包括行级标签和块级标签。如果想要对块级标签进行换行,你就需要使用br标签。
下面是几个标签,大家直接Sublime中写入看一下效果哦。在以后就直接使用啦
居中预格式化标签
节我们来讲字体样式,之前我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签,但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。
接下来我们会给大家介绍下面这几个属性的使用:
通过学习上述这几个 CSS 属性,我们可以实现给 HTML 中的文字设置字体、大小、风格、倾斜、加粗等。
font-family 属性用于设置一个元素的字体,字体就是像宋体、楷体等。
通过 font-family 属性,可以同时声明多种字体,字体之间使用逗号分隔。根据字体的调用原则,会优先调用第一种字体,如果没有找到,则会尝试调用下一个字体,如果都找不到则调用默认字体。
示例:
例如为下面这个 <p> 标签中的文本设置字体:
<p>Hello,侠课岛</p>
可以使用标签选择器,然后在 font-family 属性中设置:
p{
font-family:'Times New Roman','sans-serif', 宋体, 楷体;
}
在声明字体时,我们应该分别声明英文字体和中文字体,且英文字体的声明应该在中文字体之前。因为绝大部分中文字体里包含英文字母,但是不是很好看,而英文字体里不包含中文字符。所以如果我们不希望用中文字体来显示英文,就一定要记得先声明英文字体。先声明的会先调用。
常用英文字体:Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。
常用中文字体:宋体 SimSun、黑体 SimHei、微软雅黑 Microsoft YaHei、仿宋 FangSong、楷体 KaiTi 等。
font-size 属性用于设置字体的大小,常用的单位为 px,即像素。
px 是 Pixel 的缩写,是可以在数字显示设备上显示和表示的数字图像或图形的最小单位。像素是数字图形中的基本逻辑单元,像素也称为图像元素。
示例:
例如我们来看下面这段代码(其他HTML结构代码没有展示出来):
<body>
<h1>断句</h1>
<p>近水楼台先得月,向阳花木易为春。</p>
</body>
在浏览器中的演示效果为:
然后此时,我们通过 font-size 来将其中的 <h1> 标签中的字体设置为 14px,<p> 标签中的字体设置为 20px:
h1{
font-size: 14px;
}
p{
font-size: 20px;
}
在浏览器中演示效果就变为了下图所示:
很明显,通过 CSS 中的 font-size 属性可以设置任意标签中的字体大小。
font-style 设置字体的风格,可以将字体设置成斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。
此属的常用属性值如下所示:
示例:
将下面三个 <p> 中的内容设置为不同的字体风格,可以使用类选择器:
<body>
<p class="normal">将字体设置为标准的字体样式</p>
<p class="italic">将字体设置为斜体的字体样式</p>
<p class="oblique">将字体设置为倾斜的字体样式</p>
</body>
CSS 样式代码:
.normal {
font-style:normal;
}
.italic {
font-style:italic;
}
.oblique {
font-style:oblique;
}
在浏览器中演示效果如下所示:
font-weight 属性用于设置显示元素的文本中所用的字体加粗。
此属性的常用属性值如下所示:
示例:
将下面的 <p> 标签的粗细分别设置为 normal、bold、700、900:
<p class="w1">将字体设置为:normal</p>
<p class="w2">将字体设置为:bold</p>
<p class="w3">将字体设置为:700</p>
<p class="w4">将字体设置为:900</p>
CSS 样式代码:
.w1 {
font-weight: normal;
}
.w2 {
font-weight: bold;
}
.w3 {
font-weight: 700;
}
.w4 {
font-weight: 900;
}
在浏览器中演示效果:
font 属性用于在一个声明中设置所有的字体属性,各个属性之间使用空格隔开。也就是上述几个属性的综合简写属性。
如果我们使用 font 属性来设置字体样式,设置顺序分别是:font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不设置其中的某个值,未设置的属性会使用其默认值。
示例:
<p class="p1">草长莺飞二月天,拂堤杨柳醉春烟。</p>
<p class="p2">留连戏蝶时时舞,自在娇莺恰恰啼。</p>
CSS 样式代码:
.p1{
font: italic bold 20px 'sans-serif', 楷体;
}
.p2{
font: bold 14px 'Arial', 宋体;
}
在浏览器中演示效果:
注意,在使用 font 属性时,font-size 和 font-family 的值是必需的,如果没有设置这两个属性值,则不会生效。
本节学习的几个属性值都是 CSS 中最基本的属性,特别是 font-size 属性,我们会经常用到。一般浏览器会有一个默认的字体大小,例如 16px,而编写页面时如果我们希望大部分页面内容正文字体大小为 12px 或 14px,就会在 <body> 标签上设置,这样就不用一个个标签去设置。
*请认真填写需求信息,我们会在24小时内与您取得联系。