字体font标记&段落与排版标记（萌新必看）

最新推荐文章于 2024-08-11 10:30:00 发布

尐╋猪

最新推荐文章于 2024-08-11 10:30:00 发布

阅读量5.4k

点赞数 9

分类专栏：前端文章标签： html html5 css css3 安全

本文链接：https://blog.csdn.net/qq_45623543/article/details/109129516

版权

前端专栏收录该内容

18 篇文章 4 订阅

订阅专栏

《个人学习笔记五》

字体font标记

在不指定任何样式的情况下，IE浏览器会把字体显示为3号、黑色、宋体。因此设计网页时，根据需要更改不同段落的字体。HTML5中可以试用CSS中的字体属性代替。
1.基本语法
< font face="" size="" color="" >…< /font>
2.属性说明
font标记的属性、值及其说明

属性	值	说明
size	+1~+7 ， 1~7 ， -1~-7	正数字越大字号越大，负数字越大字越小
color	rgb（r，g，b）如果不（r%，g%，b%）#rrggbb或#rgb colorname	规定文本的颜色。可以试使用rgb函数、十六进制、颜色英文名称来表示
face	字体1,，字体2，字体3…字体n	face属性可以有多个值，用逗号隔开。字体使用方式我从左到右依次选用。如果前面字体不存在，则使用后面一个字体。若都不存在，则默认使用“宋体”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <font face="黑体" size="-1" color="#000fff">-1字</font>
    <font face="黑体" size="-3" color="#000fff">-3字</font>
    <font face="黑体" size="-5" color="#000fff">-5字</font>
    <font face="黑体" size="-7" color="#000fff">-7字</font>
    <br>
    <font face="宋体" size="2" color="#ff0066">2字</font>
    <font face="宋体" size="4" color="#ff0066">4字</font>
    <font face="宋体" size="6" color="#ff0066">6字</font>
    <br>
    <font face="黑体" size="+1" color="#ff0066">1字</font>
    <font face="黑体" size="+3" color="#ff0066">2字</font>
    <font face="黑体" size="+5" color="#ff0066">5字</font>
    <font face="黑体" size="+7" color="#ff0066">7字</font>
</body>

</html>

显示结果：
在这里插入图片描述

段落与排版标记

段落p标记
段落p标记用来开始一个段落，它是一个块级标记，该标记中不能再包含其他的任何块级元素。
换行br标记（行内元素不会自动换行，需要用换行标记）
水平分割线hr标记（用一条水平线将页面按功能用途进行分割）
< hr>标记的属性及说明

属性	说明
width	设置水平线宽度
size	设置水平线高度
color	设置水平线高度
align	设置水平线对齐方式

拼音/音标注释ruby标记&rt/rp标记
ruby标记定义ruby注释（中文注音或字符）。ruby与rt一同使用。ruby标记由一个或多个字符（需要一个解释/发音）和一个提供信息的rt标记组成，和包括可选的rp标记，定义当浏览器不支持ruby标记时显示的内容。
ruby标记用它将需要注释或注音的文字内容包裹住。
rt标记这里放置音标或注释，这个标纪要放在需要注释的文本后面。
rp标记是为了防备那些不支持ruby的浏览器，主要用来放置括号。对于支持这个标记的浏览器，rp标记的CSS样式{display：none；}，也就是不可见。

预格式化pre标记
在HTML中会利用成对的< pre>< /pre>标记对网页上文字段落进行格式化，浏览器会完整保留设计者在源文件中定义的格式，包括各种空格、缩进以及其他特殊格式。

练习事例代码及结果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p>这是一段话，中间省略100个字</p>
        <p align="left">这是一段话，中间省略100个字</p>
        <p align="center">这是一段话，中间省略100个字</p>
        <p align="right">这是一段话，中间省略100个字</p>
    </div>
    <hr color="blue">
    <br>
    <div><br> 这是一段话，中间我想断开一下<br>然后我在继续</div>
    <hr color="yellow">
    <p>分割线</p>
    <hr color="red" width="600px" size="5" align="right">
    <p>分割线</p>
    </div>
    <div>

        <ruby>
            中<rp>(</rp><rt>zhong</rt><rp>)</rp>
            国<rp>(</rp><rt>guo</rt><rp>)</rp>
            人<rt>ren</rt>
            民<rt>min</rt>
            
         </ruby>
    </div>
    <hr color="green">
    <div>
        <pre>
            春晓

            孟浩然
            春眠不觉晓，
                      处处闻啼鸟。
            夜来风雨声，
                      花落知多少。          
        </pre> </div>
</body>

</html>