网站首页编程语言正文

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

上一篇：Kafka3.0 消费者事务与数据积压
下一篇：ubutu虚拟机和主机共享同一网络

网站首页 编程语言 正文

html标签和style的使用及Emmet插件

标签和style的使用及Emmet插件

标签案例

列表标签

1有序列表ol

2无序列表ul

3自定义列表

style属性

Emmet插件

相关推荐

网站首页编程语言正文