HTML+CSS基礎入門-第三天上(HTML-格式標記)

<br>強制換行標記

描述

讓後面的文字,圖片,表格等等,顯示在下一行。

代碼:

    <body>
        尊敬的領導 <br/> 我是Bree
    </body>

顯示結果爲:

換行標記

<p>換段落標記

描述

換段落,由於多個空格和回車在html中會被等效爲一個空格,所以html中要換段落就要用<p>,<p>段落中也可以包含<p>。

代碼:

    <body>
        <p>
        第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
        </p>
        <p>
        第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段
        </p>
    </body>

顯示結果:

段落標記

<center>居中對齊標記

描述

讓段落或者文字相對於福標記居中顯示

代碼

    <body>

        <center>文字居中顯示</center>

        <p>
            <center>
                段落居中顯示段落居中顯示段落居中顯示段落居中顯示段落居中顯示段落居中顯示段落居中顯示段落居中顯示段落居中顯示段落居中顯示
            </center>
        </p>

    </body>

顯示結果

居中顯示

<pre>預格式化標記

描述

預留預先編排好的格式

代碼

    <body>

        第一句        第二句
        <pre>第一句        第二句</pre>

    </body>

顯示結果

預格式化標記

<li>列表項目標記

描述

每一個列表使用一個lt;li>標記

代碼

    <body>
        <li>第一個列表</li>
        <li>第二個列表</li>
        <li>第三個列表</li>
        <li>第四個列表</li>
        <li>第五個列表</li>
    </body>

顯示結果

列表項目標記

<ul>無序列表標記

描述

通常跟<li>一起用

代碼

    <body>
        <ul>
            <li>第一個列表</li>
            <li>第二個列表</li>
            <li>第三個列表</li>
            <li>第四個列表</li>
            <li>第五個列表</li>
        </ul>
    </body>

顯示結果

這裏寫圖片描述

<ol>有序列表標記

描述

可以顯示特定的一些順序

格式

<ol  type=“符號類型”>
<li  type=“符號類型”></li>
<li  type=“符號類型”></li>
</ol>

有序列表的type屬性值

  • 1:阿拉伯數字123等等,默認的type的屬性值
  • A:大小字母A,B,C等等
  • a:小寫字a,b,c等等
  • I:大寫羅馬數字
  • i:小寫羅馬數字

value

制定一個新的數列起始值

列表可以進行嵌套

代碼

<body>
        <ol type="A">
            <li type="1">第一個列表</li>
            <li type="1" value="3">第二個列表</li>
            <li type="1">第三個列表</li>
            <li type="1">第四個列表</li>
            <li type="1">第五個列表</li>
        </ol>

        <ol type="1"> 
            <li type="1">   A
                <ol type="A">
                    <li type="A">第一個列表</li>
                    <li type="A" >第二個列表</li>
                    <li type="A">第三個列表</li>
                    <li type="A">第四個列表</li>
                    <li type="A">第五個列表</li>
                </ol>
            </li>

            <li type="1" >第二個列表</li>
            <li type="1">第三個列表</li>
            <li type="1">第四個列表</li>
            <li type="1">第五個列表</li>
        </ol>
    </body>

顯示結果

這裏寫圖片描述

<dl> <dt> <dd>定義型列表

使用場合

對列表進行剪短的說明

代碼

    <body>
        <dl>
            <dt>軟件說明</dt>
            <dd>簡單介紹軟件的功能及基本應用</dd>
            <dt>軟件界面</dt>
            <dd>用於選擇軟件的外觀</dd>
        </dl>
    </body>

顯示結果

這裏寫圖片描述

<hr>水平分割線標記

描述

段落之間的分割線

代碼

    <body>
        段落分割線上邊
        <hr/>
        段落分割線下邊
    </body>

顯示結果

這裏寫圖片描述

<div>層標記

描述

也成爲分區顯示標記,用來編排一大段的HTML段落,也可以用於格式化表,和<p>很相似,層可以多層嵌套使用。

代碼

    <body>

        <div>
            段落分割線上邊
            <hr/>
            段落分割線下邊
        </div>

        <div>
            段落分割線上邊
            <hr/>
            段落分割線下邊
        </div>
    </body>

顯示結果

這裏寫圖片描述

發佈了32 篇原創文章 · 獲贊 0 · 訪問量 9975
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章