Catherine_zhilin

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

 

 

<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>

 

测试结果:

 

posted on 2018-04-11 11:20  kkkshiki  阅读(216)  评论(0编辑  收藏  举报