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

學無先后，達者為師

網站首頁 編程語言 正文

html標簽和style的使用及Emmet插件

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

標簽和style的使用及Emmet插件

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

標簽案例

六個標簽

  • div????塊
  • span????行內元素 不會換行
  • p????段落????比div多了上下外邊距 16px
  • &nbsp； ?普通空格 網頁值只能識別單個連續的普通空格
  • &emsp； ?一個當前字體大小（中英文）
  • br????換行 沒有結束標簽（開始標簽與結束標簽中不需要寫入內容 則可以省略結束標簽）每一個標簽都有默認樣式 br看不見樣式 有換行效果
  • hr????水平分割線
  • h1-h6????六級標題 換行 加粗 字體大小更改 一級標題字體最大
    ?????? 四級標題和普通文本大小一致
    代碼如下 
!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>標簽案例</title>
</head>

<body>
<div>這是一個div </div>
    <span>這是一個span標簽</span>
    <p>&emsp;這是一個p標簽</p>
    <br>
    <hr>
    <h1>這是一級標題</h1>
    <h2>這是二級標題</h2>
    <h3>這是三級標題</h3>
    <h4>這是四級標題</h4>
    <h5>這是五級標題</h5>
    <h6>這是六級標題</h6>
    </body>

</html>

列表標簽

6個列表標簽

  • ul????無序列表
  • ol????有序列表 有序號，上下邊距為(margin)16px 左側內補(padding)40px 圓心/序號出了li范圍
  • li???列表項目 默認樣式：相當于div 自帶實心圓點(::marker偽元素) 不會單獨存在
  • ol或ul???默認序號、原點都在左側內補區域內 dl 自定義列表
  • dt????自定義列表項 相當于li
  • dd????自定義列表項目說明ol或ul默認序號、原點都在左側內補區域內

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>這是一個項目</li>
        <li>這是一個項目</li>
        <li>這是一個項目</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>這是一個項目</li>
        <li>這是一個項目</li>
        <li>這是一個項目</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    字體的粗細
display: block(塊元素div)/inline(行內元素span)
border: 1px solid(直線) red(顏色) 邊框 (寬度  線型  顏色)            dotted(虛線)
margiin: 10px   外邊距
padding: 10px   內補
只有塊元素可以給寬高

測試代碼如下

<!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;">文字的大小粗細</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 ;">內補與外邊距</span>
    <div
        style="margin:  60px; padding: 30px ; width: 500px ; height: 500px; border: 5px dotted blue ; font-size: 50px ;  ">
        內補與外邊距</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插件

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

測試代碼如下

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

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

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

欄目分類
最近更新