您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > HTML

快速编写HTML / CSS代码的方法,您掌握了吗?

时间:2019-10-08 15:46:53  来源:  作者:

在章中,我介绍了一种使用类似css的选择器语法的快速编写html代码的新方法-一组用于高速HTML和CSS编码的便捷工具。

您花费多少时间编写HTML代码:所有这些标记,属性,引号,花括号等。如果您选择的编辑器具有代码补全功能,则您会更轻松,但是您仍然需要进行大量键入操作。

但是,如果您不仅可以使用CSS选择器来样式化和访问元素,还可以生成代码怎么办?例如,如果您可以写这个呢?

										div#content>h1+p

…并将其视为输出?

快速编写HTML / CSS代码的方法,您掌握了吗?

 

现在,让我们看看这些工具是如何工作的。

展开缩写

扩展缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能有些混乱。为什么不将其称为“ CSS选择器”呢?好吧,第一个原因是语义上的:“选择器”意味着选择某些内容,但是在这里,我们实际上是在生成某些内容,编写了较长代码的较短表示。其次,除了引入一些新的运算符之外,它仅支持真正的CSS选择器语法的一小部分。

以下是受支持的属性和运算符的列表:

  • E元素名称(div,p);
  • E·ID元素具有标识符(div#content,p#intro,span#error);
  • E.class使用类的元素(div.header,p.error.critial)。您可以结合类和ID,也:div#content.column.width;
  • E> N子元素(div>p,div#footer>p>span);
  • E + N同级元素(h1+p,div#header+div#content+div#footer);
  • E * N元素乘法(ul#nav>li*5>a);
  • E $ * N项目编号(ul#nav>li.item-$*5);

如您所见,您已经知道如何使用:只需编写一个类似CSS的简单“缩写”,就像这样……

							div#header>img.logo+ul#nav>li*4>a

…然后调用“扩展缩写”操作。

有两个自定义运算符:元素乘法和项目编号。例如,如果要生成五个<li>元素,则只需编写li*5。它将重复所有后代元素。如果您需要四个<li>元素,<a>每个元素中都有一个,则只需编写li*4>a,它将生成以下输出:

快速编写HTML / CSS代码的方法,您掌握了吗?

 

当您想用其索引标记重复的元素时,使用最后一个项目编号。假设你想生成三个<div>的元素item1,item2和item3类。您可以写这个缩写div.item$*3:

快速编写HTML / CSS代码的方法,您掌握了吗?

 

只需在要显示索引的class或ID属性中的任意位置添加一个美元符号,即可。所以这…

 div#i$-test.class$$$*5

将被转换为:

快速编写HTML / CSS代码的方法,您掌握了吗?

 

您会看到在输入a缩写时,输出为<a href=“”></a>。或者,如果您编写img,输出为<img src=“” alt=“” />。

快速编写HTML / CSS代码的方法,您掌握了吗?

 



Tags:HTML   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
问:如何用 JS 一次获取 HTML 表单的所有字段 ?考虑一个简单的 HTML 表单,用于将任务保存在待办事项列表中: <form> <label for="name">用户名</label> <input type="text...【详细内容】
2020-10-12  Tags: HTML  点击:(76)  评论:(0)  加入收藏
再见HTML ! 用纯Python就能写一个漂亮的网页我们在写一个网站或者一个网页界面的时候,需要学习很多东西,对小白来说很困难!比如我要做一个简单的网页交互:天啊,听听头都大呢!其实...【详细内容】
2020-07-09  Tags: HTML  点击:(62)  评论:(0)  加入收藏
在学习一门编程语言之前,了解它的特性,带着对特性的好奇和疑问去学习是最快最好的学习方法。就像你知道某个地方有很多宝藏,带着藏宝图去寻找宝藏,你一定会大有收获的。编程语...【详细内容】
2020-06-05  Tags: HTML  点击:(62)  评论:(0)  加入收藏
有好多次,别人说我算不上程序员,因为我在用HTML + CSS编程。我非常伤心,因为别人都不认为我是开发人员。我们讨论了好几个小时,网上也有很多关于这个话题的讨论。但仍然还有人否认这一点,那么就让我们在本文中好好探讨一番...【详细内容】
2019-12-16  Tags: HTML  点击:(79)  评论:(0)  加入收藏
HTML 是什么? 表示超文本标记语言(Hyper Text Markup Language) 描述了网页的结构 由一些列元素组成 元素告诉浏览器如何显示内容,由标签表示 标签标记了“标题”,“段落”,“表”...【详细内容】
2019-12-12  Tags: HTML  点击:(102)  评论:(0)  加入收藏
本篇文章给大家带来的内容是关于html meta标签使用及属性的详细分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。自学前端开始,我对meta标签接触不多,主要把...【详细内容】
2019-11-04  Tags: HTML  点击:(111)  评论:(0)  加入收藏
项目中经常会出现点击跳转锚点的方法,比如给一个a标签一个href=“#锚点”,然后要跳的锚点给个id=“锚点”,这样就实现简单的跳转,但是这样在url地址栏后面都会出现一个诸如www.s...【详细内容】
2019-10-23  Tags: HTML  点击:(102)  评论:(0)  加入收藏
在章中,我介绍了一种使用类似CSS的选择器语法的快速编写HTML代码的新方法-一组用于高速HTML和CSS编码的便捷工具。您花费多少时间编写HTML代码:所有这些标记,属性,引号,花括号等...【详细内容】
2019-10-08  Tags: HTML  点击:(144)  评论:(0)  加入收藏
和 JavaScript、CSS 相比,HTML 经过三十多年的发展,似乎逐渐走进无人问津的角落,如何才能让 HTML 再次回到人们视野的中心。...【详细内容】
2019-09-10  Tags: HTML  点击:(156)  评论:(0)  加入收藏
offsetHeight, offsetWidthHTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。HTMLElement.offsetWidth 是一...【详细内容】
2019-09-02  Tags: HTML  点击:(186)  评论:(0)  加入收藏
▌简易百科推荐
此文由掘金@天行天忌授权发布,前端晚间课对其内容进行微改。 HTML,超文本标记语言,是一种用于创建网页的标准标记语言。自从引入 HTML 以来,它就一直用于构建互联网。与 JavaScr...【详细内容】
2021-11-23  前端晚间课    Tags:HTML6   点击:(327)  评论:(0)  加入收藏
HTML是什么?超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“...【详细内容】
2021-11-05  人生三部曲丶    Tags:HTML   点击:(40)  评论:(0)  加入收藏
一、iframe标签 自己编写的页面中如果要引用外部的页面的话,可以使用iframe标签来实现。为了更好地理解举个例子,前面几篇中我们都是在index.hmtl中编写代码。如果有个需求是...【详细内容】
2021-11-03  HillelDu    Tags:html   点击:(29)  评论:(0)  加入收藏
我们倾向于使用HTML与CSS、JavaScript等,使我们的网站或博客看起来更有吸引力,但你知道仅HTML就有很多实用的秘密,可能会派上用场,帮助你设计一个华丽的网站?下面是一些很酷的HTM...【详细内容】
2021-08-13  杭州程序员小张    Tags:HTML   点击:(90)  评论:(0)  加入收藏
meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。 1、声明文档使用的字符编码<meta charset=&#39;utf-8&#39;>以下设置更为详细:<meta http-equiv="Content-...【详细内容】
2021-08-12  简易编程    Tags:meta标签   点击:(91)  评论:(0)  加入收藏
本节我们讲HTML表单标签,当你在网页输入框提交一个数据,这条数据一般是提交给了服务器,然后服务器根据请求返回你想要的数据,这个你输入信息的输入框或者提交的按钮就是HTML表...【详细内容】
2021-06-25  科技现象    Tags:HTML   点击:(141)  评论:(0)  加入收藏
背景日常工作中,项目编程免不了需要使用配置文件,早期yaml出现之前,大部分配置文件采用xml形式,但是以xml格式储存的数据要比以其他格式(如json、yaml)储存占有的空间要大得多,因为...【详细内容】
2021-06-21  爱读书的程序员    Tags:yaml   点击:(265)  评论:(0)  加入收藏
XML; 是什么? Extensible Markup Languare 可扩展标记型语言 为什么要有XML? 1.HTML的标签是固定的,不可以改变,也不可以进行一个&middot;&middot;&middot;扩展 2.HTML语法松散...【详细内容】
2021-06-01  LeviT    Tags:XML   点击:(193)  评论:(0)  加入收藏
同事跟我说他用jQuery取不到页面上隐藏元素input的值,他的html页面大概内容如下。<!DOCTYPE html><html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/...【详细内容】
2021-05-18  IT洞察者    Tags:Html   点击:(220)  评论:(0)  加入收藏
HTML5语义化与新特性什么是HTML语义化?表示选择合适的标签(语义化标签)便于开发者阅读和写出更优雅的代码为什么要使用语义化标签?1). 在没有CSS样式的情况下,页面整体也会呈现...【详细内容】
2021-03-02      Tags:HTML   点击:(236)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条