8.5前端之Html样式和文本格式化

样式属性<style>

style 属性用于改变 HTML 元素的样式

背景颜色

background-color 属性为元素定义了背景颜色：

    <body style="">
        <h1 style="">This is a title</h1>
        <p style="" contenteditable="true">This is a paragraph</p>
    </body>

字体、颜色、尺寸

font-family定义元素中文本的字体系列：

color定义元素中文本的字体颜色：---注意color的用法

font-size定义元素中文本的字体尺寸：

<body>
    <h2 style="font-family: '微软雅黑';">This is another title of the html</h2>
    <p style="font-family: '微软雅黑'; color: blue; font-size: 20px;" contenteditable="true">This is another paragraph</p>
</body>

文本对齐

text-align 属性规定了元素中文本的水平对齐方式：

<body>
    <h3 style="font-family: '微软雅黑'; text-align: center;">In the middle of this article</h3>
    <p style="font-family: '微软雅黑'; text-align: left;">In the left of this article</p>
    <p style="font-family: '微软雅黑'; text-align: right;">In the right of this article</p>
</body>
文本格式化

文本格式化和文本预格式化的区别

文本格式化不会保留文本中的空格，文本预格式化会保留：

        <b>This is a bold</b>
        <br />
        <big>This is another word</big>
        <br />
        <em>This is emphasized(adj.加强的)</em>
        <br />
        <i>This is italic(adj.斜体的)</i>
        <br />
        <small>This text is small</small>
        <br />
        This text contains
        <sub>subscript(adj.下标的)</sub>
        <br />
        This text contains
        <sup>superscript(adj.标在上方的)</sup>
        <p>这是<del style="font-family: '微软雅黑';" contenteditable="false">删除字</del>这是<ins style="" contenteditable="true">插入字</ins></p>

文本格式化的标签：

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。

文本预格式化：

        <pre style="text-align: left;">
            这是预格式文本，他不会省略掉  空格
            适合用于来写代码内容
        </pre>
        <pre>
    /*循环输入map键值对*/
        while (true){
            System.out.println("输入Key:");
            BufferedReader buff = new BufferedReader(new InputStreamReader(System.in));
            try {
                Key = buff.readLine();
            }catch (IOException e){
                System.out.println("这是在输入Key的时候抛出的异常!!!");
                System.out.println(e.getMessage());
                e.printStackTrace();
            }
            if (!Key.equals("")){
                System.out.println("输入Value:");
                BufferedReader buff1 = new BufferedReader(new InputStreamReader(System.in));
                try {
                    Value = buff1.readLine();
                }catch (IOException e){
                    System.out.println("这是在输入Value的时候抛出的异常!!!");
                    System.out.println(e.getMessage());
                    e.printStackTrace();
                }
                if (!Value.equals("")){
                    //Map里面有内容--->将上面内容放入Map中
                    map.put(Key, Value);
                }else {
                    break;
                }
            }else {
                break;
            }
        }
        </pre>
<!--预格式化标签内的内容会保留其原有的格式-->

计算机输出标签

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。 
        <code>计算机代码</code>
        <!--这个标签不会像预格式化标签一样保留代码的格式-->
        <br />
        <code>System.out.println("Hello World")</code>
        <hr />
        <kbd>Keyboard Input--->键盘输入</kbd>
        <br />
        <kbd accesskey="Enter">Enter</kbd>
        <hr />
        <tt>Teletype text--->电传文本</tt>
        <br />
        <tt>This is a content about article</tt>
        <hr />
        <samp>Sample text--->手机文字输入的软件</samp>
        <br />
        <samp>This is a text</samp>
        <hr />
        <var>
            var i = getElementId();
        </var>
        <hr />
        <dfn>定义项目</dfn>

引用、引用和术语定义

标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。
缩写和首字母缩写

结合title属性来使用，鼠标放到缩写上可显示全部的内容：

        <abbr title="etcetera(adj.附加物)">etc</abbr>
        <br />
        <acronym title="https://www.cnblogs.com/JunkingBoy/">www</acronym>

地址引用：

        <address>
            MyBlogs is<a href="https://www.cnblogs.com/JunkingBoy/">Click to my blogs</a><br />
            Visit us at:<br />
            Example.com<br />
            Box 564, Disneyland<br />
            USA
        </address>

定义文字方向：--->结合属性(dir)使用：

        <bdo dir="rtl">
            假亦真时真亦假
            <p style="text-align: left;">对于上面的内容你必须思考他是从左往右的还是从右往左的</p>
        </bdo>

长引用和短引用：--->区别在于短引用会加个" "引号

        <strong>下面是短的内容引用：</strong>
        <span style="font-family: '微软雅黑';color: red; font-size: xx-large;"><q contenteditable="true">请往这看</q></span>

定义引用、引证：

        <img src="../Picture/Big.gif" width="300" height="300" alt="This is a GIF" />
        <p><cite>The Scream</cite>是一直大大的皮卡丘动图</p>

样式分类

基于内容的样式

  • <abbr>--->缩写

  • <acronym>--->首字母缩写

  • <cite>--->定义引用、引证

  • <dfn>--->定义一个定义项目

  • <em>--->定义着重文字

  • <kbd>--->定义文字方向

  • <samp>--->定义计算机代码样本

  • <strong>--->定义加重语气

  • <var>--->定义变量

物理样式

  • <b>

  • <big>

  • <i>

  • <samll>

  • <strike>

  • <sub>

  • <sup>

  • <tt>

It's a lonely road!!!