日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語言 正文

html標(biāo)簽和style的使用及Emmet插件

作者：Brooke_w 更新時(shí)間： 2022-07-21 編程語言

標(biāo)簽和style的使用及Emmet插件

  • 標(biāo)簽案例
  • 列表標(biāo)簽
    • 1有序列表ol
    • 2無序列表ul
    • 3自定義列表
  • style屬性
  • Emmet插件

標(biāo)簽案例

六個(gè)標(biāo)簽

  • div????塊
  • span????行內(nèi)元素 不會(huì)換行
  • p????段落????比div多了上下外邊距 16px
  • &nbsp； ?普通空格 網(wǎng)頁(yè)值只能識(shí)別單個(gè)連續(xù)的普通空格
  • &emsp； ?一個(gè)當(dāng)前字體大?。ㄖ杏⑽模?/li>
  • br????換行 沒有結(jié)束標(biāo)簽（開始標(biāo)簽與結(jié)束標(biāo)簽中不需要寫入內(nèi)容 則可以省略結(jié)束標(biāo)簽）每一個(gè)標(biāo)簽都有默認(rèn)樣式 br看不見樣式 有換行效果
  • hr????水平分割線
  • h1-h6????六級(jí)標(biāo)題 換行 加粗 字體大小更改 一級(jí)標(biāo)題字體最大
    ?????? 四級(jí)標(biāo)題和普通文本大小一致
    代碼如下 
!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>標(biāo)簽案例</title>
</head>

<body>
<div>這是一個(gè)div </div>
    <span>這是一個(gè)span標(biāo)簽</span>
    <p>&emsp;這是一個(gè)p標(biāo)簽</p>
    <br>
    <hr>
    <h1>這是一級(jí)標(biāo)題</h1>
    <h2>這是二級(jí)標(biāo)題</h2>
    <h3>這是三級(jí)標(biāo)題</h3>
    <h4>這是四級(jí)標(biāo)題</h4>
    <h5>這是五級(jí)標(biāo)題</h5>
    <h6>這是六級(jí)標(biāo)題</h6>
    </body>

</html>

列表標(biāo)簽

6個(gè)列表標(biāo)簽

  • ul????無序列表
  • ol????有序列表 有序號(hào)，上下邊距為(margin)16px 左側(cè)內(nèi)補(bǔ)(padding)40px 圓心/序號(hào)出了li范圍
  • li???列表項(xiàng)目 默認(rèn)樣式：相當(dāng)于div 自帶實(shí)心圓點(diǎn)(::marker偽元素) 不會(huì)單獨(dú)存在
  • ol或ul???默認(rèn)序號(hào)、原點(diǎn)都在左側(cè)內(nèi)補(bǔ)區(qū)域內(nèi) dl 自定義列表
  • dt????自定義列表項(xiàng) 相當(dāng)于li
  • dd????自定義列表項(xiàng)目說明ol或ul默認(rèn)序號(hào)、原點(diǎn)都在左側(cè)內(nèi)補(bǔ)區(qū)域內(nèi)

1有序列表ol

代碼如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<ol>
        <li>這是一個(gè)項(xiàng)目</li>
        <li>這是一個(gè)項(xiàng)目</li>
        <li>這是一個(gè)項(xiàng)目</li>
    </ol>
    </body>

</html>

2無序列表ul

代碼如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<ul>
        <li>這是一個(gè)項(xiàng)目</li>
        <li>這是一個(gè)項(xiàng)目</li>
        <li>這是一個(gè)項(xiàng)目</li>

    </ul>
        </body>

</html>

3自定義列表

代碼如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
 <dl>
        <dt>11111</dt>
        <dd>11111的說明</dd>
        <dt>22222</dt>
        <dd>22222的說明</dd>
    </dl>
        </body>

</html>

style屬性

style=“屬性名:屬性值;屬性名:屬性值;”

color:red      文字的顏色  紅色
background-color:red     背景的顏色
font-size:2em     文字的大小
font-weight: bold 100-900    字體的粗細(xì)
display: block(塊元素div)/inline(行內(nèi)元素span)
border: 1px solid(直線) red(顏色) 邊框 (寬度  線型  顏色)            dotted(虛線)
margiin: 10px   外邊距
padding: 10px   內(nèi)補(bǔ)
只有塊元素可以給寬高

測(cè)試代碼如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span style="color:red ; background-color: greenyellow;">前景色與背景色</span>
    <span style="font-size: 50px;font-weight: 600;">文字的大小粗細(xì)</span>
    <hr>
    <div style="display: inline;">div變身span</div>
    <div style="display: inline;">div變身span</div>
    <hr>
    <span style="display: block;">span變身div</span>
    <span style="display: block;">span變身div</span>
    <hr>
    <span style="border: 4px solid rebeccapurple;">邊框演示</span>
    <hr>
    <span style="margin: 60px; padding: 30px ; width: 500px ; height: 500px; border: 5px dotted blue ;">內(nèi)補(bǔ)與外邊距</span>
    <div
        style="margin:  60px; padding: 30px ; width: 500px ; height: 500px; border: 5px dotted blue ; font-size: 50px ;  ">
        內(nèi)補(bǔ)與外邊距</div>




    <hr>

    <dl>
        <dt><i
                style="  width: 5px; height: 5px; display: inline-block; background-color: rebeccapurple; "></i><span>1</span>
        </dt>
        <dt><i
                style=" width: 5px; height: 5px; display: inline-block; background-color: rebeccapurple; "></i><span>2</span>
        </dt>
        <dt><i
                style=" width: 5px; height: 5px; display: inline-block; background-color: rebeccapurple; "></i><span>3</span>
        </dt>
    </dl>



</body>

</html>

Emmet插件

*???重復(fù)多少次 ?? div10
?>??嵌套 ?? ? div>p
{ } ??內(nèi)容 ?? div>{p}
$ ?? 遞增 ?? div10>{div$}
+ ?? 并列 ?? p+div
( ) ??整體 ?? (div+p)*2

測(cè)試代碼如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

<!-- div*5 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- p>span -->
<p><span></span></p>

<!-- p>{123} -->
<p>123</p>
<!-- div*5>{1$} -->
<div>11</div>
<div>13</div>
<div>13</div>
<div>14</div>
<div>15</div>

<!-- p+span+div+a -->
<p></p>
<span></span>
<div></div>
<a href=""></a>

<!-- (p+a)*2 -->
<p></p>
<a href="">111</a>
<p></p>
<a href="">222</a>


<!-- div>a*5 -->
<div><a href="">1111</a>
    <br>
    <a href="">222</a>
    <p></p>
    <a href="">333</a>
    <a href=""></a>
    <a href=""></a>
</div>
<!-- (ul>li*3>a)*2 -->
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
<!-- div>(ul>li*6>img+p>a)*2 -->
<div>
    <ul>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
    </ul>
    <ul>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
        <li>
            <img src="" alt="">
            <p><a href=""></a></p>
        </li>
    </ul>
</div>

總結(jié)
以上是html中標(biāo)簽的使用和style常用屬性總結(jié)及Emmet插件的使用，歡迎大家溝通討論

原文鏈接：https://blog.csdn.net/Brooke_w/article/details/125890195

欄目分類
最近更新