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

已于 2022-07-20 23:51:52 修改
阅读量359 收藏
点赞数 1
文章标签： html
于 2022-07-20 18:21:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Brooke_w/article/details/125890195
版权

标签和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插件的使用，欢迎大家沟通讨论

Brooke_w
关注
Html的发展介绍及基础标签的学习使用
weixin_53027472的博客
07-18 313
本篇文章主要讲述了html的历史发展、页面结构和基本标签的使用
HTML5和CSS3 WEB技术开发
最新发布
张晨光老师的播客
01-02 6480
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
快速开发html插件emmet（小白需知）
关注我！带你一路 "狂飙" 到底！
09-14 418
ul>li*6咱先不说为什么出不来，这个我......（点点点就是不想说了）平时我们在做开发的时候你也知道程序猿都很懒惰所以就有了一个叫的插件，是不是想说你没有安装过？放心这个工具绝大部分的编辑器都内置了。hbuilderXNotepad++VS code等等。
初始HTML常用三种列表及六种Emmet插件
qq_52796714的博客
07-19 288
HTML常用三种列表及六种插件
编写html用vs插件,VSCode插件推荐-html快速生成插件-emmet
weixin_29724477的博客
06-17 1678
对于许多刚接触前端的小伙伴来说，整个页面的HTML标签属实令人头疼。哪怕是有了 IDE (或者代码编辑器自带)的代码补全功能，写一个上千行 HTML 代码的页面也是一件令人烦躁的事情。接下来小编带来的这款插件，能让你用短短的一句指令快速生成一个 HTML 结构，没错，他就是大名鼎鼎的 emmet 语法插件。emmet 语法插件并不是 VSCode 专属，在很多代码编辑器中都有这款插件(比如 sub...
Emmet语法（快速生成HTML与CSS的方法）
qq_40551957的博客
01-31 230
Emmet语法 生成HTML Tab补充生成/KaTeX parse error: Expected 'EOF', got '#' at position 32: …+兄弟关系 表达式：标签名./#̲属性名{内容$}*个数 无空格 生成css 简写·加tab W200 H5 Text-indent2 格式化 a) 右键，格式化 b) Shift alt f c) 自动格式化： 文档-首选项-emmet.Include-用户-添加”editor.formatOnSave”:true和”editor.form
Emmet工具：Html/CSS快速编写语法
Hey_Sarah
10-25 2426
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具，它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度。如果你也使用Sublime进行前端开发，在Sublime中安装插件即可使用Emmet，以下为Html/CSS快速编写语法。
Sublime text emmet插件
04-27
总结来说，Sublime Text 中的 Emmet 插件是前端开发者提高工作效率的强大工具，它通过简短的缩写方式，帮助我们快速生成复杂的HTML和CSS结构。熟练掌握 Emmet 的各种技巧和高级用法，能让你在编写代码时更加游刃有余...
15. 使用VsCode的Emmet插件，快速编写HTML5、CSS3代码模板
介绍VsCode和Emmet插件 ## 1.1 VsCode简介 在当前的软件开发领域中，Visual Studio Code (简称 VsCode) 是一款由微软开发的轻量级跨平台集成开发环境。它支持多种编程语言和工具，具有丰富的扩展生态系统，拥有...
notepad++集成emmet
05-03
1. **代码片段扩展**：在输入少量字符后，按Tab键，Emmet会将其扩展为完整的HTML标签。例如，输入`div`并按下Tab键，将生成`<div></div>`；输入`ul>li*3`，则会生成一个包含三个列表项的无序列表。 2. **层级嵌套**...
一篇简单、详细、易懂的有关论坛发帖的文章（详细全代码）
why0925123的博客
08-11 1382
一篇关于论坛发帖的博客，简单易懂讲解详细。 代码齐全！直接可用 ！
PHP+HTML简单实现BBS论坛与回帖
nk90875的博客
01-29 1515
本文主要讲述如何通过PHP+HTML简单实现BBS论坛和发帖/回帖的功能，这是提取我们php项目的部分内容。主要内容包括： 1.通过JavaScript和Iframe实现局部布局界面 2.PHP如何定义类实现访问数据库功能 3.实现简单的BBS论坛和发帖/回帖功能 由于这个项目是十个人在寒假完成，所以采用了SAE搭建在线的后台数据库，其他人在通过Apache本地设计网页、访问数据库的方法实现，相当于简单的BS三端访问。 ...
Html中style标签是做什么的
热门推荐
Zirui0503的博客
05-22 1万+
一、style标签的定义及用法 在html中，style标签是使用来定义html文档的样式信息，在该标签中你可以规定浏览器怎样显示html文档内容。 除了使用style标签来为元素添加样式外，我们还可以使用link标签来引入外部样式文件 scoped属性是html5中新增的属性，如果没有设置"scoped" 属性，那么style标签必须位于head标签中。 二、style标签语法格式 语法格式说明： type属性是style标签必须属性，用来规定样式表的MIME类型，唯一的值为：text/css； 一个h
html论坛网页
liuzhe的博客
05-06 1万+
今天我们就模仿论坛做一个简单的论坛网页 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模拟论坛</title> <style type="text/css"> /*对网页进行第二次修饰*/ body{font-siz...
HTML：如何让style显示在网页上，让用户自己修改样式
heycn112的博客
10-02 1147
我们平时在HTML里写样式的时候，一般都是把样式标签放在head里面的，而head的属性就是隐藏，修改成display: block; 也是没有用的。 那么怎样让style标签显示呢？ 很简单，将style标签从head拿出来就可以了= = 下图：我将style放在body里，然后给style标签添加样式 display: block; （只要是标签，理论上都可以修改样式!!!） 看看效果 再多敲个单词，就可以让用户自己编辑样式了 看看效果： ...
java样式input下滑波浪线_input的各种样式
weixin_32513585的博客
02-26 384
输入框景背景透明：鼠标划过输入框，输入框背景色变色：style="width: 106; height: 21"onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">输入字时输入框边框闪烁(边框为小...
html修改弹窗样式,自定义弹窗Style样式_html/css_WEB-ITnose
weixin_35565325的博客
06-04 1494
由于系统默认alert弹出窗口不能自定义样式，有可能不符合网站的风格，虽然网上应该有很多这样的JS但是还是自己写的比较放心，顺便练习一下对DOM的操作支持IE6下的SELECT不能遮罩的问题，谷歌支持圆角，IE6下就比较丑了，四四方方的，不过可以自定义自己喜欢的样式听取建议后，修改了position:fixed, IE6下用hack处理了。点击看效果:点击模拟Alert弹出框点击模拟Alert弹出...
关于Emmet在vscode中的设置
码农键盘上的梦
08-16 2514
由于emmet已在vscode中内置，在没有自己安装相关插件以及进行一些设置的情况下，emmet的功能其实也是可以用的，输入一段可展开的代码，vscode会自动跳出一个后面带有“Emmet Abbreviation”的提示栏，点击提示栏/回车/Tab都可以展开缩写代码。一开始我觉得好像不用去专门在vscode中设置emmet插件，因为默认的emmet插件的功能也可以满足一开始简单的码字需求。然后在设置上方的搜索栏中直接输入emmet，于是我们就找到了关于emmet的相关设置；...
emmet插件使用(Css)
海贼王
04-27 1926
emmet插件使用(Css) 渐变 输入lg(left,#fff50%,#000),会生成如下代码 background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000)); background-image: -webkit-linear-gradient(left, #f
HTML5入门：Sublime Text 安装与Package Control及Emmet插件实战
HTML5_day01的内容着重于Sublime Text的基础配置和Emmet插件的实用技巧，这对于学习和提升HTML5开发效率来说是非常重要的基础知识。通过掌握这些工具，开发者能够更高效地编写和维护复杂的网页结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值