HTML基础——格式化文本与段落

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JEYMING/article/details/80286215

<!--
    格式化文本与段落
        --文本格式化、段落格式化、整个页面排版格式化
            ---文本格式化:字体标记、文字修饰标记
            ---段落格式化:段落标记、换行标记、水平分割线标记
    2018.01.03
-->
<html>
    <head>
        <meta charset="UTF-8" />
        <title>格式化文本与段落</title>
    </head>
    <body>
        <!--
        3.1 Web页面初步设计
        3.1.1 向Web页面添加文字信息
        3.1.2 标题字标记
            <h></h> 标记中h是Heading简称;
            h后面数字越大字体越小;
            align属性是定义标题字的对齐方式,分别是left、center、right、justify;左对齐、居中、右对齐、两端对齐
        -->
        <h1 align="center">Web前端开发技术</h1>
        <h2 align="left">Web前端开发技术</h2>
        <h3 align="center">Web前端开发技术</h3>
        <h4 align="right">Web前端开发技术</h4>
        <h5 align="justify">Web前端开发技术</h5>
        <h6 align="center">Web前端开发技术</h6>
        <!--
        3.1.3 添加空格与特殊符号
                显示结果    说明      符号代码
                ---------------------------------
                            显示空格    &nbsp;
                <           小于      &lt;
                >           大于      &gt;
                &           &符号     &amp;
                "           双引号     &quot;
                ©           版权符号    &copy;
                ?           注册商标    &reg;
                *           乘号      &times;
                ÷           除号      &divide;
        -->
        <p>&nbsp;&nbsp;&nbsp;&nbsp;新浪科技讯 北京时间11月21日凌晨消息,台湾市场研究机构Digitimes Research周二发布报告称,预计2013年全年平板电脑销售量将会到2.1亿台,超过笔记本的年度销售量。</p>
        <br />
        <hr color="blue">
        <p align="center">版权所有&copy;新浪公司</p>
        <!--
        3.2 格式化文本标记
        3.2.1 文本修饰标记
            标记              说明
            ------------------------------------
            <b></b>             定义粗体
            <i></i>             定义斜体
            <u></u>             定义下划线
            <del></del>         定义删除线
            <sup></sup>         定义上标
            <sub></sub>         定义下标
            <strong></strong>   定义着重文字(与<b></b>效果相同)
            <em></em>           定义加重语气(与<i></i>效果相同)
            <small></small>     变小字号
            <big></big>         变大字号

        3.2.2 计算机输出标记
            标签              说明
            ------------------------------------
            <code></code>       定义计算机代码
            <kbd></kbd>         定义键盘码
            <samp></samp>       定义计算机代码样本
            <tt></tt>           定义打字机代码
            <var></var>         定义变量
            <pre></pre>         定义预格式文本

        3.2.3 引用和术语标记
            标记              说明
            ------------------------------------
            <addr></addr>       定义缩写
            <address></address> 定义地址
            <blockquote></blockquote>   定义长的引用
            <cite></cite>       定义引用、引证
            <q></q>             定义短的引用语言
            <dfn></dfn>         定义一个定义项目

        3.2.4 字体Font标记
            <font></font>
            属性  值                   说明
            -------------------------------------
            size    +1-+7,1-7,-1--7 文本大小
            color                       文本颜色
            face                        文本字体
        -->
        <hr color="blue">
        <h3 align="center">文本修饰标记应用</h3>
        <hr size="2" color="red">
        <center>
            <comment>文本修饰标记应用</comment><br />
            <b>我爱北京天安门!</b><br />
            <i>北京天安门太阳升</i><br />
            <u>啦啦啦啦啦啦啦</u><br />
            <del>好好好!</del><br />
            X<sup>2</sup>+2X+5=0<br>
            X<sub>1</sub>=2<br>
            <small>我爱北京天安门!</small><br />
            <big>我爱北京天安门!</big><br />
            <strong>我爱北京天安门!</strong><br />
            <em>我爱北京天安门!</em><br />
        </center>
        <hr color="red">
        <center>
            <comment>计算机输出标记应用</comment>
            <h5>计算机输出标记应用</h5>
            <hr size="2" color="blue" />
            <code>Computer code</code><br />
            <kbd>Keyboard input</kbd><br />
            <tt>Teletype text</tt><br />
            <samp>Sample text</samp><br />
            <var>Computer variable</var><br />
            <p><b>注释:</b>这些标签用于显示计算机/编程代码.</p>
        </center>
        <hr color="red">
        <center>
            <comment>引用、术语标记应用</comment>
            <h5>引用、术语标记应用</h5>
            <hr color="blue" size="2">
            这是缩写:The<abbr title="People 's Republic of China"> PRC </abbr>was founded in 1949.
            <address>
                地址:Witten by <a href="mailto:[email protected]">Donald Duck</a>.<br />
                Visit us at:<br>
                Example.com<br />
                Box 564,Disneyland<br />
                USA
            </address>
            <h4>这里是长的引用请注意,浏览器在blockquote元素前后添加了换行,并增加了外边距。:</h4>
            <blockquote>
                This is a long quotation.This is a long quotation.This is a long quotation.THis is a long quotation.This is a long quotation.
            </blockquote>
            <cite>引用、引证</cite>
            <h4>请注意,浏览器在引用的周围插入了引号</h4>
            <p>Here comes a short a short quotation:<q>This is a short quotation</q></p>
            <dfn>定义项目</dfn>
        </center>
        <hr color="red">
        <center>
            <strong>文本样式为黑体,颜色#000fff,大小-1~-7</strong>
            <font face="黑体" size="-1" color="#000fff">1字</font>
            <font face="黑体" size="-2" color="#000fff">2字</font>
            <font face="黑体" size="-3" color="#000fff">3字</font>
            <font face="黑体" size="-4" color="#000fff">4字</font>
            <font face="黑体" size="-5" color="#000fff">5字</font>
            <font face="黑体" size="-6" color="#000fff">6字</font>
            <font face="黑体" size="-7" color="#000fff">7字</font><br />
            <strong>文本样式为宋体,颜色#ff0066,大小1~7</strong>
            <font face="宋体" size="1" color="#ff0066">1字</font>
            <font face="宋体" size="2" color="#ff0066">2字</font>
            <font face="宋体" size="3" color="#ff0066">3字</font>
            <font face="宋体" size="4" color="#ff0066">4字</font>
            <font face="宋体" size="5" color="#ff0066">5字</font>
            <font face="宋体" size="6" color="#ff0066">6字</font>
            <font face="宋体" size="7" color="#ff0066">7字</font><br />
            <strong>文本样式为隶书,颜色#ff0066,大小-1~-7</strong>
            <font face="隶书" size="+1" color="#ff0066">1字</font>
            <font face="隶书" size="+2" color="#ff0066">2字</font>
            <font face="隶书" size="+3" color="#ff0066">3字</font>
            <font face="隶书" size="+4" color="#ff0066">4字</font>
            <font face="隶书" size="+5" color="#ff0066">5字</font>
            <font face="隶书" size="+6" color="#ff0066">6字</font>
            <font face="隶书" size="+7" color="#ff0066">7字</font><br />
        </center>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/JEYMING/article/details/80286215
今日推荐