HTML基礎第三課(圖片,段落,列表,超鏈接,標題標籤)

一、常用標籤

1.標題標籤
a.一些屬性:
display:block(顯示爲塊級)
inline(顯示爲行級)
none(不顯示)
font-weight:bold(設置爲粗體)
normal(設置爲正常字體)

b.標題標籤h1~h6 雙標籤 塊級標籤 
    <!-- h1最好只出現一次,用於網頁的logo部分 -->
    <!-- h2常用於二級標題,也就是子模塊的標題部分 -->
    <!-- h4~h6不常用到 -->
    <h1>我是一級標籤</h1>
    <h2>我是2級標籤</h2>
    <h3>我是3級標籤</h3>
    <h4>我是4級標籤</h4>
    <h5>我是5級標籤</h5>
    <h6>我是6級標籤</h6> 
3.超鏈接標籤
a: 行高 line-height文本在區域內上下居中
   line-height:該區域的高度
   border-radius:左上 右上 右下 左下
b:超鏈接 a 雙標籤 行級標籤 
    <!-- href="" 指定標籤跳轉的地址 -->
    <!-- 不能爲空鏈接地址,可以寫一個#或者三個# -->
    <!-- target="_blank" 指定標籤跳轉的方式(重新打開一個頁面) -->
    <!-- a標籤的四種形態 -->
    <!-- 愛恨法則 love & hate -->
    <!-- 默認狀態:link-->
    <!-- 訪問過的狀態:visited -->
    <!-- 懸浮的狀態: hover-->
    <!-- 點擊的狀態:active -->
    <a href="https://www.baidu.com" target="_blank"> 點擊我去百度</a>
    <a class="test" href="#"> 我是超級鏈接標籤</a>
    <a href="#"> 我是超級鏈接標籤</a>
3.列表標籤
a.列表屬性
list-syle-type: 符號|none;
b.列表種類
<!-- 1:有序列表:組合標籤 雙標籤 塊級 ol li -->
    <ol>

        <li>我是列表項1</li>
        <li>我是列表項2</li>
        <li>我是列表項3</li>
        <li>我是列表項4</li>
        <li>我是列表項5</li>
    </ol>
<!-- 無序列表 組合標籤 雙標籤 塊級 ul li -->
<ul>
        <li>我是列表項1</li>
        <li>我是列表項2</li>
        <li>我是列表項3</li>
        <li>我是列表項4</li>
        <li>我是列表項5</li>
    </ul>
    <!-- 自定義標籤:字典標籤 塊級 dl dt dd -->
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
4.段落標籤

a.屬性
首行縮進:text-indent:;

eg:
/*瀏覽器默認字體大小14px*/
/*em:幾個文字的位置*/
text-indent:2em;
<!-- 段落標籤 p 雙標籤 塊級 -->
    <!-- 塊標籤,不可以嵌套div,最好不要嵌套其他的塊級標籤 -->
    <p>我是段落標籤我是段落標籤我是段落標籤我是段落標籤我是段落標籤我是段落標籤我是段落標籤
    我是段落標籤我是段落標籤我是段落標籤我是段落標籤我是段落標籤我是段落標籤我是段落標籤我是
    是段落標籤我是段落標籤我是段落標籤我是段落標籤我是段落標籤我是段落標籤
    </p>
5.圖片標籤
<!-- 圖片標籤 單標籤 比較特殊 ,可以設置尺寸,有行級標籤的特點。 -->
    <!-- src=""指定引入圖片的地址 -->
    <!-- alt=""圖片內容的描述 -->
    <img src="tu.png" alt="">
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章