Emmet生成标签内容

274 未经授权,禁止转载了解课程
课程介绍
讨论{{interaction.discussNum ? '(' + interaction.discussNum + ')' : ''}}
适合人群
初级工程师,学生,前端开发
你将会学到
本课程将介绍如何使用前端开发小工具Emmet来实现快速的前端代码输入, 帮助你快速专业的书写HTML和CSS代码相关代码
课程简介

课程介绍


Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具


基本上,大多数的开发编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你开发效率,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展,对于程序员来说这样很麻烦

Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS风格的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员工具

很多知名的IDE或者编程开发工具都支持Emmet




下载和安装

  1. Emmet为大部分流行的编辑器都提供了安装插件

    • Sublime Text

    • Eclipse/Aptana

    • TextMate

    • Coda

    • Espresso

    • Chocolat

    • Komodo Edit

    • Notepad++

    • PSPad

    • textarea

    • CodeMirror

    • Brackets

    • NetBeans

    • Adobe Dreamweaver


  2. 在线编辑器的支持:

    • JSFiddle

    • JS Bin

    • CodePen

    • ICEcoder

    • Divshot

    • Codio


  1. 第三方插件的支持

    下面这些编辑器的插件都是由第三方研发者所提供的,所以可能并不支持所有Emmet的功能和特性。

    • SynWrite

    • WebStorm

    • PhpStorm

    • Vim

    • HTML-Kit

    • HippoEDIT

    • CodeLobster PHP Edition

    • TinyMCE




在本套课程中,为了方便大家学习和练习,我们提供了一个在线的编辑工具供大家使用和联系, 地址如下:


Emmet在线输入练习器: http://igeekbar.com/igclass/code/new.htm


展开更多
发布
头像

{{ item.user.nick_name }} {{ EROLE_NAME[item.user.identity] }}

置顶笔记
讨论图
{{ item.create_time }}回复
  • 删除

    是否确认删除?

    确认
    取消
  • {{ item.is_top == 1 ? '取消置顶' : '置顶'}}

    已有置顶的讨论,是否替换已有的置顶?

    确认
    取消
{{ tag.text}}
头像
{{ subitem.user.nick_name }}{{ EROLE_NAME[subitem.user.identity] }}
{{ subitem.create_time }}回复
删除

是否确认删除?

确认
取消
发布
{{pageType === 'video' ? '讨论区抢占沙发,可获得双倍学分' :'讨论区空空如也,你来讲两句~'}}
发布
{{tips.text}}
{{ noteHeaderTitle }} 笔记{{ hasMyNote ? '我的笔记' : '记笔记' }}
{{ hasMyNote ? '我的笔记' : '记笔记' }}
优质笔记
更新于:{{ $dayjs.formate('YYYY-MM-DD HH:mm:ss', item.last_uptime*1000) }}
头像
{{ detail.username }}

公开笔记对他人可见,有机会被管理员评为“优质笔记”

{{ noteEditor.content.length }}/2000

公开笔记
保存
提问

讲师收到你的提问会尽快为你解答。若选择公开提问,可以获得更多学员的帮助。

记录时间点
记录提问时视频播放的时间点,便于后续查看
公开提问
提交