生成html5代码--笔记回顾

最新推荐文章于 2024-03-23 18:05:29 发布
最新推荐文章于 2024-03-23 18:05:29 发布
阅读量214 收藏
点赞数
分类专栏： HTML css文本和字体 css 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47000934/article/details/109275355
版权
css 同时被 3 个专栏收录
10 篇文章 2 订阅
订阅专栏
HTML
9 篇文章 0 订阅
订阅专栏
css文本和字体
5 篇文章 0 订阅
订阅专栏

生成html5代码--笔记回顾

1、生成html5代码

!+回车
html:5+回车
（vscode）

2、生成子代的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- 子代结构：div > p > span > strong -->
  <!-- div>p>span>strong -->
  <div>
    <p>
      <span>
        <strong></strong>
      </span>
    </p>
  </div>

</body>
</html>

3、生成兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- 兄弟结构：h2+div+p -->
  <h2></h2>
  <div></div>
  <p></p>
</body>
</html>

4、子代+兄弟结构练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- emment:div>h2+a+p>span -->
  <div>
    <p>
      <h2></h2>
      <a href=""></a>
      <span></span>
    </p>
  </div>
</body>
</html>

5、生成多个元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- 生成多个元素：div>p*5 -->
  <div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>

  <!-- div>p*3+div*3 -->
  <div>
    <p></p>
    <p></p>
    <p></p>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

6、生成上一个层级

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- *多个和^上一层级 -->

  <!-- emmet:div>p>span+h2+a -->
  <div>
    <p>
      <span></span>
      <h2></h2>
      <a href=""></a>
    </p>
  </div>
<!-- 等效 -->
  <!-- emmet:div>p>span^h2+a -->
  <div>
    <p><span></span></p>
    <h2></h2>
    <a href=""></a>
  </div>

  <!-- emmet:div>p>span^^h1+strong -->
  <div>
    <p><span></span></p>
  </div>
  <h1></h1>
  <strong></strong>
</body>
</html>

7、对元素进行分组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- emmet:div>p>span^^h1+strong -->
  <div>
    <p><span></span></p>
    <h2></h2>
    <a href=""></a>
  </div>
  <h1></h1>
  <strong></strong>

  <!-- emmet:div>(p>span)+h2+a -->
  <div>
    <p><span></span></p>
    <h2></h2>
    <a href=""></a>
  </div>

  <!-- emmet:(div>(p>span)+h1+a)+h1+strong -->
  <div>
    <p><span></span></p>
    <h2></h2>
    <a href=""></a>
  </div>
  <h1></h1>
  <strong></strong>
</body>
</html>

8、生成元素的属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- div#main -->
  <div id="main"></div>
  <!-- div.box -->
  <div class="box"></div>
  <!-- div[title] -->
  <div title=""></div>
  <!-- div[title="title1"] -->
  <div title="title1"></div>

  <!-- emmet:div#main>div.box+p.p1+span.title^div#footer>div.box2 -->
  <div id="main">
    <div class="box"></div>
    <p class="p1"></p>
    <span class="title"></span>
  </div>
  <div id="footer">
    <div class="box2"></div>
  </div>

  <!-- emmet:div#header.box1[title="title1"] -->
  <div id="header" class="box1" title="title1"></div>
</body>
</html>

9、生成元素的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- emmet:div{我是div元素} -->
  <div>我是div元素</div>

  <!-- emmet:div#main.box{我是div元素} -->
  <div id="main" class="box">我是div元素</div>
</body>
</html>

10、生成结构有数字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- 1.属性结构有数字 -->
  <!-- emmet:div.box$*4 -->
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>

  <!-- 2.内容中有数字 -->
  <!-- emmet:div>p{文字内容$}*5} -->
  <div>
    <p>文字内容1</p>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
  </div>
  
  <!-- 练习 -->
  <!-- ul>li.item$*5 -->
  <!-- ul>li.item$$$*5 -->
</body>
</html>

11、隐式标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- div是隐藏的标签 -->
  <!-- emmet:#main -->
  <div id="main"></div>

  <!-- emmet:.box -->
  <div class="box"></div>

  <!-- emmet: ul>li.item${列表元素$}*5 -->
  <!-- li可以隐藏 -->
  <!-- emmet: ul>.item${列表元素$}*5 -->
  <ul>
    <li class="item1">列表元素1</li>
    <li class="item2">列表元素2</li>
    <li class="item3">列表元素3</li>
    <li class="item4">列表元素4</li>
    <li class="item5">列表元素5</li>
  </ul>

  <!-- 练习 -->
  <!-- emmet:table>#row$*4>[clospan="2"] -->
  <table>
    <tr id="row1">
      <td colspan="2"></td>
    </tr>
    <tr id="row2">
      <td colspan="2"></td>
    </tr>
    <tr id="row3">
      <td colspan="2"></td>
    </tr>
    <tr id="row4">
      <td colspan="2"></td>
    </tr>
  </table>
</body>
</html>

12、CSS的emmet用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      /* emmet: w200+h200+m20+p30 */
      /* emmet: w200 */
      width: 200px;
      /* emmet: h200 */
      height: 200px;
      /* emmet: m20 */
      margin: 20px;
      /* emmet: p30 */
      padding: 30px;

      /* emmet: fz20  (font-size px)*/
      font-size: 20px;
      /* emmet: fz1.5   (font-size em)*/
      font-size: 1.5em;
      /* emmet: fw700  （font-weight）(默认无单位)*/
      font-weight: 700;
      /* emmet: lh50  (line-high)(默认无单位) */
      line-height: 50;
      /* emmet:  bgc */
      background-color: #fff;
      /* emmet: dib */
      display: inline-block;
    }

    /* emmet: m20-30-40-50  (上右下左) */
    /* emmet: m10px20px */
    /* emmet: p-10-20--30  (上右下左) */
    

  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
Li敢敢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web开发人员最关注的6款HTML5代码生成器
stefan520的专栏
01-27 5441
在这篇文章中，小编为大家收集了6款Web开发中注度最高的HTML5代码生成器，希望能帮到Web开发者。 Initializr Initializr是一款HTML5模板生成器，帮助你快速启动基于HTML5模板的新项目。总之，Initializr 是制作 HTML5 网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会为你生成代码简洁的可定制的网
HTML5代码生成器
04-27
HTML5开发工具，简单写代码的程序，您觉得好用就下载吧!
生成html5页面,Initializr.com：生成HTML5格式页面
weixin_36415235的博客
06-04 177
Initializr.com：生成HTML5格式页面对于很多人来说，HTML5虽然听说了很多，但到底怎么回事还是不知道，而要创建HTML5格式的页面更是困难。或许HTML5并不需要很多网民知晓，但如果自己也能够犹如创建网页一样、创建个HTML5格式的页面，还是很想去试用下的，今天所介绍的网站Initializr.com所提供的服务就是帮助用户创建HTML5格式的页面。网站名称：Initializr...
html5代码生成工具
04-07
图形化布局 自动生成html页面 js文件 css文件
html5 代码生成 页面,HTML5学习# 制作HTML页面
weixin_42407741的博客
06-03 723
制作HTML页面1.2.1 创建首个HTML5页面.Size：在准备好的开发工具中，首先输入第一行HTML代码，如下：Size:这行代码定义了一个标签，形同一个声明，告诉浏览器要使用标准、兼容的模式来解析渲染这个HTML页面。只需记住，在制作所有HTML5页面时把它放到第一行即可。为HTML5页面，构建最基本的结构框架有两大块，一部分是页面的“头”，一部分是页面的“身体”，分别用和标签来指定。创建...
HeaderFirst读书笔记代码.zip
02-24
通过阅读和研究这个压缩包中的源码笔记，读者不仅可以回顾和巩固《HeaderFirst》一书中的知识点，还能看到这些理论如何在实际代码中落地，从而提升编程能力。同时，结合作者的博客文章，可以获得更全面的学习资源和...
javaweb高级编程源码-javaweb:javaweb高级编程源码笔记
05-22
2. **JSP（JavaServer Pages）**：JSP是Servlet的一种简化形式，允许开发者将HTML代码与Java代码混合编写，方便展示动态内容。JSP最终会被编译为Servlet执行。 3. **过滤器（Filter）**：过滤器可以拦截请求和响应...
reading-notes-master:这包含了我整个课程的笔记
03-20
这些笔记可能是Markdown格式，便于阅读和编辑，也有可能包含示例代码和项目文件，以便读者实践和理解。 总的来说，这是一个全面的软件开发学习资源，适合初学者逐步深入，同时也适合有一定经验的开发者回顾和巩固...
JSP初学者笔记 + 示例代码（绝对有用）
02-11
**JSP（Java Server Pages）** 是一种基于Java技术的动态网页开发技术，它允许开发者在HTML页面中嵌入Java代码，实现动态内容的生成。JSP 的出现主要是为了解决传统Servlet在视图展示上的不便，使得网页设计更加专注...
一些javaweb源码和笔记
08-30
接着，JSP（JavaServer Pages）是另一种常用的JavaWeb技术，它是HTML和Java代码的结合，主要用于创建动态网页。JSP页面在服务器上被转换成Servlet执行，提供了将业务逻辑和表现层分离的机制。JSP指令、脚本元素和EL...
html5静态网页制作代码
最新发布
weixin_63066890的博客
03-23 1003
效果图。
html模板生成工具_HTML5模板生成器，框架和工具
cune1359的博客
07-04 3094
尽管近年来网页设计行业的主要参与者一直在采用HTML5，但实际上在实际解决方案中使用它的人并不多，主要是因为缺乏时间或缺乏理解。 如果某一种语言正在一段时间内得到推广，则发烧友会通过创建HTML5模板生成器和框架来消除麻烦。 在Hongkiat，我们始终希望使您的开发工作尽可能轻松，因此下面是HTML5模板生成器和框架的列表，它们可以加快HTML5开发的速度，或帮助您缓解诸如浏览器兼容性之...
自动生成 html5 小页面
weixin_30363817的博客
05-12 196
StringBuilder htmltext = new StringBuilder(); try { //var readPath = Server.MapPath("~/Template/test.html"+templatePage); var readPath =...
Web开发者选择的最佳HTML5/CSS3代码生成器
yz18931904的博客
04-19 1025
英文原文：HTML5 and CSS3 Code Generators For Web Programmers 译文地址：http://codecloud.net/css3-code-generators-for-web-programmers-6672.html 本文将为大家分享几个Web开发者选择的最佳HTML5和CSS3代码生成器。 HTML5 和CSS3是一入门就能用的最好的语言，...
html5页面自动生成,自动生成 html5 小页面
weixin_39892447的博客
05-31 353
StringBuilder htmltext = new StringBuilder();try{//var readPath = Server.MapPath("~/Template/test.html"+templatePage);var readPath = Server.MapPath("~/Template/" + scModel.TemplateName);using (StreamR...
html5的页面生成标签
每天都要快乐
06-13 617
Html5的标准页面 正文部分
vscode 新建php模板,vscode怎么生成模板
weixin_39834984的博客
03-17 331
vscode怎么生成模板？vs code中设置html5 快速生成模板相关文章教程推荐：vscode教程按英文的！和h:5都可以快速生成html模板，但是找了半天都找不到如何修改模板设置。只好自己从snippets里重新编写了一个html5的模板，以免自己以后忘了。首先打开 snippets然后输入以下代码段：{// Place your snippets for html here. Each ...
有哪些不用编写代码就能轻松制作生成HTML5页面的工具
weixin_34168700的博客
06-11 896
　　个人认为现在市面上不用编写代码就能轻松制作生成 h5 页面的工具都是一些噱头，其大致都是套用现成的模板，替换里面的文字或者图片，作为一个开发者使用类似网站这些功能根本不能真正意义上达到自己想要的效果，目前这类工具以邀请函、生日卡、企业宣传等为主，以下是一些我了解到的网站仅做参考　　1、战鼓 https://www.zhangu365.com/?b_scene_zt=1　　　　这个网站部分免费 ...
16个HTML5 框架、模板以及生成工具
weixin_30455023的博客
01-17 589
网页设计通常需要预先考虑很多因素，而用户给你的时间又特别稀缺，如何提高效率其实是一个比较烦人的问题。一个可行方式就是使用预先准备好的框架和模板，HTML5框架、模板以及生成器是一个万灵丹似的解决方案，可以大大简化很多工作量。这里介绍一些比较实用的工具，不用介绍太多，看下面截图自然就明白。 Initializr Modernizr 52framework HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值