zoukankan      html  css  js  c++  java
  • HTML 5--adding paragraphs

    <p>

    <details>

    <summary>

    示例:

     1 <!doctype html><html>
     2 <head>
     3 </head>
     4 <body>
     5     <h1> BookYourHotel </h1>
     6     <h2>  Rating of the Hotels</h2>
     7     <h6>Local Sight Seeing</h6>
     8     <p>Welcome to BookYourHotel site</p>
     9     <p> Leave the Nitty Gritty of hotel booking on us.</p>
    10     <details>
    11         <p>We provide standard rooms,triple or family rooms.deluxe rooms, and suite</p>
    12     </details>
    13     <details>
    14         <summary>Categories of Rooms:</summary>
    15         <p> We provide standard rooms triple or family rooms, deluxe rooms, and suite</p>
    16     </details>
    17 </body>
    18 </html>

    显示结果如下:

    使用

    <details>:
    自动定义:”详细信息“

    <summary>:
    自定义命名:详细信息

    点击展开:

    <div>默认为块级元素

    <span>  默认为行级元素

    (默认可调整,可以强制改变)

    特别标记:

    <p>demo of <span style="color:blue;font -wei :bold">span</span> tag.</p>

     1 <!doctype html><html>
     2 <head>
     3 </head>
     4 <body>
     5     <h1> BookYourHotel </h1>
     6     <h2>  Rating of the Hotels</h2>
     7     <h6>Local Sight Seeing</h6>
     8     <p>Welcome to BookYourHotel site</p>
     9     <p> Leave the Nitty Gritty of hotel booking on us.</p>
    10     <details>
    11         <p>We provide standard rooms,triple or family rooms.deluxe rooms, and suite</p>
    12     </details>
    13     <details>
    14         <summary>Categories of Rooms:</summary>
    15         <p> We provide standard rooms triple or family rooms, deluxe rooms, and suite</p>
    16     </details>
    17     <p>demo of <span style="color:blue;font -wei :bold">span</span> tag.</p>
    18 </body>
    19 </html>

     测试结果:

    对字体的修改:

    <b>

    <i>

    <u>

    <li>

    <br>

    <hr>

     1 <!doctype html><html>
     2 <head>
     3 </head>
     4 <body>
     5     <h1> BookYourHotel </h1>
     6     <h2>  Rating of the Hotels</h2>
     7     <h6>Local Sight Seeing</h6>
     8     <p>Welcome to BookYourHotel site</p>
     9     <p> Leave the Nitty Gritty of hotel booking on us.</p>
    10     <details>
    11         <p>We provide standard rooms,triple or family rooms.deluxe rooms, and suite</p>
    12     </details>
    13     <details>
    14         <summary>Categories of Rooms:</summary>
    15         <p> We provide standard rooms triple or family rooms, deluxe rooms, and suite</p>
    16     </details>
    17     <p>demo of <span style="color:blue;font -wei :bold">span</span> tag.</p>
    18     <p><b>hotel booking frim the cimfort of your home.</b></p>
    19     <p><i>hotel booking frim the cimfort of your home.</i> </p>
    20     <p><u>hotel booking frim the cimfort of your home.</u> </p>
    21     <p><li>hotel booking frim the cimfort of your home.</li> </p>
    22     <p><i>hotel booking frim the cimfort of your home.</i> </p>
    23 </body>
    24 </html>

     测试结果:

    <ol>列表项:

    <!doctype html><html>
    <head>
    </head>
    <body>
        <h1> BookYourHotel </h1>
        <h2>  Rating of the Hotels</h2>
        <h6>Local Sight Seeing</h6>
        <p>Welcome to BookYourHotel site</p>
        <p> Leave the Nitty Gritty of hotel booking on us.</p>
        <details>
            <p>We provide standard rooms,triple or family rooms.deluxe rooms, and suite</p>
        </details>
        <details>
            <summary>Categories of Rooms:</summary>
            <p> We provide standard rooms triple or family rooms, deluxe rooms, and suite</p>
        </details>
        <p>demo of <span style="color:blue;font -wei :bold">span</span> tag.</p>
        <p><b>hotel booking frim the cimfort of your home.</b></p>
        <p><i>hotel booking frim the cimfort of your home.</i> </p>
        <p><u>hotel booking frim the cimfort of your home.</u> </p>
        <p><li>hotel booking frim the cimfort of your home.</li> </p>
        <p><i>hotel booking frim the cimfort of your home.</i> </p>
        <ol>
            <li>ranked 1</li>
            <li>ranked 2</li>
            <li>ranked 3</li>
            <li>ranked 4</li>
        </ol>
    </body>
    </html>

    测试结果:

    样式可以改变:

    利用代码:

     1 <!doctype html><html>
     2 <head>
     3 </head>
     4 <body>
     5 <ol reversed="reversed">
     6         <li>ranked 1</li>
     7         <li>ranked 2</li>
     8         <li>ranked 3</li>
     9         <li>ranked 4</li>
    10     </ol>
    11     
    12 <ol type="a">
    13         <li>ranked 1</li>
    14         <li>ranked 2</li>
    15         <li>ranked 3</li>
    16         <li>ranked 4</li>
    17     </ol>
    18     </body>
    19 </html>

    测试结果:

  • 相关阅读:
    Javascript进阶篇——(函数)笔记整理
    Javascript进阶篇——(流程控制语句)笔记整理
    Javascript进阶篇——(数组)笔记整理
    Javascript进阶篇——(JS基础语法)笔记整理
    Javascript基础学习笔记
    wamp安装
    JavaScript语法作业
    0721JS
    css复习内容
    盒子模型
  • 原文地址:https://www.cnblogs.com/Catherinezhilin/p/8794592.html
Copyright © 2011-2022 走看看