zoukankan      html  css  js  c++  java
  • 9.1.3 前端

    body标签

    想要在网页上展示出来的内容一定要放在body标签中。 把我们之前海燕那一段HTML代码贴过来,保存到一个HTML格式的文件中。

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>前端学习</title>
        </head>
        <body>
            <h1>关雎</h1>
            <p>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</p>
            <p>参差荇菜,左右流之。窈窕淑女,寤寐求之。</p>
            <p>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</p>
            <p>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</p>
            <p>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</p>
        </body>
    </html>

    使用浏览器打开,看一下效果

    文本样式标签

    文本样式标签主要用来对HTML页面中的文本进行修饰,比如加粗、斜体、线条样式等...

    <b></b>:加粗
    <i></i>:斜体
    <u></u>:下划线
    <s></s>:删除线
    <sup></sup>:上标
    <sub></sub>:下标

    直接上代码

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>文本格式标签</title>
    </head>
    <body>
    
        <div>前端html</div>
        <div><b>前端html - 加粗</b>- 正常字体</div>
        <div><i>前端html - 斜体</i>- 正常字体</div>
        <div><u>前端html - 下划线</u>- 正常字体</div>
        <div><s>前端html - 删除线</s>- 正常字体</div>
        <div><sup>前端html - 上标</sup>- 正常字体</div>
        <div><sub>前端html - 下标</sub>- 正常字体</div>
    
    </body>
    </html>

    将上面的代码保存成html文件,然后用浏览器打开看一下实际的显示效果:浏览器运行结果

    表示强调的标签

    我们已经学习了展示段落的p标签和展示标题的h1~h6标签,现在如果想在一段文字中特别强调某几个字,这时候就可以用到<em><strong>标签。

    这两个标签都是表示强调,但是两者在强调的语气上有区别:<em>表示强调,<strong>表示更强烈的强调。 在浏览器中<em>默认会用斜体表示,<strong>会用粗体来表示。两个标签相比,我们通常会推荐大家使用<strong>表示强调。

    例如:电商网站的折扣数字,通常都使用<strong>标签来表示强烈的强调。

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>淘宝</title>
        </head>
        <body>
            <p>淘宝</p>
            <em>强调</em>
            <strong>更强烈的强调</strong>
        </body>
    </html>

    也就是加粗了字体。

    表示引用的标签

    <blockquote>通常用来展示大段的文本引用。

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>路飞学城</title>
        </head>
        <body>
            <p>关关雎鸠,在河之洲。窈窕淑女,君子好逑。参差荇菜,左右流之。窈窕淑女,寤寐求之。求之不得,寤寐思服。悠哉悠哉,辗转反侧。参差荇菜,左右采之。窈窕淑女,琴瑟友之。参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。。</p>
            <blockquote>
                关关雎鸠,在河之洲。窈窕淑女,君子好逑。参差荇菜,左右流之。窈窕淑女,寤寐求之。求之不得,寤寐思服。悠哉悠哉,辗转反侧。参差荇菜,左右采之。窈窕淑女,琴瑟友之。参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。。
            </blockquote>
        </body>
    </html>

    运行结果,从结果来看引用标签会有首尾缩进、

    从上图中可以看出和普通的<p>标签相比,<blockquote>标签中的内容会有首尾缩进的效果。

    表示代码的标签

    表示简短的单行代码可以使用<code>标签,如果是带有缩进的大段代码就要使用<pre>标签了。<pre>标签会保留源文档中的格式(回车、空格)。

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>JD商城</title>
        </head>
        <body>
            <p>单行代码:</p>
            <code>
                print("Hello world! from xxx")
            </code>
            <p>代码块(多行代码):</p>
            <pre>
                while True:
                age = input("猜猜看啊:").strip()
                try:
                    age = int(age)
                    if age > 10 or age < 10:
                        print("傻逼了吧,错了!")
                    else:
                        print("厉害了我的哥!")
                        break
                except ValueError:
                    print("你TM的输错了!")
            </pre>
        </body>
    </html>

    运行结果

    表示地址的标签

    在网页上经常会有公司的联系地址信息,这个时候就需要用到<address>标签了。

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>前端架构</title>
        </head>
        <body>
            <p>前端架构:</p>
            <address>
                南京市鼓楼区,紫峰大厦24楼
            </address>
        </body>
    </html>

    运行

  • 相关阅读:
    php友好格式化时间
    GraphicsMagick为图片添加水印
    Kali Linux下破解WIFI密码挂载usb无线网卡的方法
    用nginx做反向代理来访问防外链图片
    Nginx反向代理的目录访问问题
    Cookie存储中文报错:java.lang.IllegalArgumentException: Control character in cookie value or attribute.(转)
    4.0之后的hibernate获取sessionFactory
    Servlet的延迟加载和预加载
    hibernate注解(转)
    web项目路径问题
  • 原文地址:https://www.cnblogs.com/caimengzhi/p/8603353.html
Copyright © 2011-2022 走看看