zoukankan      html  css  js  c++  java
  • html:文字处理(样式、上下标、标注、地址、等宽)

    1、标题大小、背景、空格、添加横线、特殊字符

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>唐诗</title>
        </head>
    
        <body bgcolor="aquamarine" >
            <h1 align="middle">将进酒</h1>
            <h4 align="left">唐.李白</h4>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;
    君不见,黄河之水天上来,奔流到海不复回。
    君不见,高堂明镜悲白发,朝如青丝暮成雪。
    人生得意须尽欢,莫使金樽空对月。
    天生我材必有用,千金散尽还复来。
    烹羊宰牛且为乐,会须一饮三百杯。
    岑夫子,丹丘生,将进酒,杯莫停。
    与君歌一曲,请君为我倾耳听。
    钟鼓馔玉不足贵,但愿长醉不复醒。
    古来圣贤皆寂寞,惟有饮者留其名。
    陈王昔时宴平乐,斗酒十千恣欢谑。
    主人何为言少钱,径须沽取对君酌。
    五花马,千金裘,呼儿将出换美酒,
    与尔同销万古愁</p>
    <hr size="2px" align="center">
    <center>版权所有&copy;Li bai All rights reserved.</center>    
        </body>
    </html>

    知识点总结:

    (1)标题字按照字体大小分为六级。

    (2)在body标记中,可以设置背景图片background,背景颜色bgcolor等。

    (3)&nbsp;可以在文字间添加空格。

    (4)<hr>为单标记,用于在页面中添加横线,可以通过修改属性改变横线的粗细和位置。

    (5)特殊字符:html特殊字符有很多,通过相应的代码替代。如:@:&copy;等

    2、文字样式

    字体的大小和颜色的设置:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>唐诗</title>
        </head>
    
        <body bgcolor="aquamarine" >
            <h1 align="middle">将进酒</h1>
            <h4 align="left">唐.李白</h4>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;
    <font face="黑体" size="4" color="blue">
    君不见,黄河之水天上来,奔流到海不复回。
    君不见,高堂明镜悲白发,朝如青丝暮成雪。
    人生得意须尽欢,莫使金樽空对月。
    天生我材必有用,千金散尽还复来。
    烹羊宰牛且为乐,会须一饮三百杯。
    岑夫子,丹丘生,将进酒,杯莫停。
    与君歌一曲,请君为我倾耳听。
    钟鼓馔玉不足贵,但愿长醉不复醒。
    古来圣贤皆寂寞,惟有饮者留其名。
    陈王昔时宴平乐,斗酒十千恣欢谑。
    主人何为言少钱,径须沽取对君酌。
    五花马,千金裘,呼儿将出换美酒,
    与尔同销万古愁</font></p>
    <hr size="2px" align="center">
    <center>版权所有&copy;Li bai All rights reserved.</center>    
        </body>
    </html>

    通过<font></font>标记,可以通过size 、color关键字设置文字的大小和颜色。

     3、文字的修饰

    粗体、斜体、下划线、删除线:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
        </head>
    
        <body bgcolor="aquamarine">
            <h1 align="middle">文字的修饰</h1>
    
            <p>
                <center>
                    <b>我是粗体文字</b><br>
                    <u>我是带有下划线的文字</u><br>
                    <i>我是斜体文字</i><br>
                    <del>我是具有删除线的文字</del>
                </center>
            </p>
        </body>
    
    </html>

    4、上标、下标

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
        </head>
    
        <body bgcolor="aquamarine">
            <h1 align="middle">上标和下标</h1>
    
            <p>
                <center>
                    <font size="6">
                        x<sup>2</sup><br> x
                        <sub>1</sub>
                    </font>
                </center>
            </p>
        </body>
    
    </html>

    5、设置文字标注

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
        </head>
    
        <body bgcolor="aquamarine">
            <h1 align="middle">文字标注</h1>
    
            <p>
                <center>
                    <font size="6">
                    <ruby>网页设计与开发<rt>html</rt></ruby>
                    </font>
                </center>
            </p>
        </body>
    
    </html>

    6、设置地址文字

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
        </head>
    
        <body bgcolor="aquamarine">
            <h1 align="middle">地址文字</h1>
    
            <p>
                <center>
                    <font size="6">
                    <address>34299a@qq.com</address>
                    </font>
                </center>
            </p>
        </body>
    
    </html>

    7、(行间)等宽文字

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
        </head>
    
        <body bgcolor="aquamarine">
            <h1 align="middle">等宽文字</h1>
    
            <p>
                <center>
                    <font size="6">
                        <h1>静夜思</h1>
                <tt>床前明月光,疑是地上霜。</tt><br>
                <tt>举头望明月,低头思故乡。</tt>
                    </font>
                </center>
            </p>
        </body>
    
    </html>

  • 相关阅读:
    X 如何在mysql客户端即mysql提示符下执行操作系统命令
    X MySQL UNDO表空间独立和截断 ,mysql undo 的历史
    X Mysql5.7忘记root密码及mysql5.7修改root密码的方法
    X mysql密码的安全策略ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
    二分法查找
    elasticsearch API
    logstash的基础
    elasticsearch的基础
    Linux的进程管理
    Linux的网卡配置
  • 原文地址:https://www.cnblogs.com/zhai1997/p/11405566.html
Copyright © 2011-2022 走看看