Emmet 網頁開發界的超跑

在這個速度的時代,網頁也擁有非常多加速開發的工具,例如今天要介紹的這個外掛「Emmet」,他支援的開發軟體也相當多,也就是不管腳踏車、機車還是房車,都可以裝上這個超跑的引擎,廢話不多說,先讓大家知道他如何節省網頁開發的時間,如果我們在網頁上要輸入以下的HTML結構:

<div>
    <ul>
       <li><a href="#">選項1</a></li>
       <li><a href="#">選項2</a></li>
       <li><a href="#">選項3</a></li>
       <li><a href="#">選項4</a></li>
       <li><a href="#">選項5</a></li>
       <li><a href="#">選項6</a></li>
    </ul>
</div>

在我們安裝好Emmet之後,僅需輸入以下的縮寫,再按下Tab鍵,即可以產生如上述般的HTML結構:

div>ul>li*6>a[#]{選項$}

仔細看看應該不難發現HTML標籤名稱的部分都在縮寫裡面,只是利用>來區隔每一層,如果要多個同樣的標籤可以用*後來輸入個數,標籤內的屬性值是利用[ ]來包住,{ }是標籤內的值。

是不是很神奇呀?趕快到Emmet的官方網頁下載或直接利用你的網頁編輯器來安裝這個外掛吧!

Emmet 官方網站截圖
Emmet 官方網站截圖

官方網站提到Emmet的特色有六點,分別是:

  • HTML from CSS:如果你已經對CSS的選取器有概念,那就已經知道Emmet該如何去縮寫你的HTML代碼。
  • Dynamic snippets:在使用縮寫的時候,只要稍微更動一些名稱,就可以得到截然不同的結果。
  • Ultra-fast coding:快速的編寫模式,可以快速選取標籤、移動游標、產生上一層或下一層結構。
  • Customizable:可以透過編輯JSON檔案來客製化一些程式碼。
  • Platform for new tools:透過編輯開放的程式碼,可以產生新的使用模式。
  • Highly portable:高度輕便可攜。

Emmet支援的網頁編輯器也非常多,如下圖所示:

Emmet 支援的網頁編輯器

Emmet 支援的網頁編輯器

快速鍵:

(快速鍵的部分有可能跟原先的編輯器或電腦的一些應用程式有衝突而無法使用)

  • Tab:展開縮寫
  • Ctrl+Alt+→:將游標移動到下一個可以輸入屬性或值的地方。
  • Ctrl+Alt+←:將游標移動到上一個可以輸入屬性或值的地方。
  • Ctrl+D:選取一整個標籤(包含標籤的起始與結束)。
  • Shift+Ctrl+.:選取下一個標籤或屬性。
  • Shift+Ctrl+,:選取上一個標籤或屬性。
  • Ctrl+/:將選取的部分變成註解。

使用的部分功能相當多,可以參考官方網頁中的文件介紹,或是繼續閱讀馬老師針對Emmet的後續介紹。

You may also like...

7,609 Responses

  1. JasonUnsoG表示:

    http://casinositeleri25.com/# deneme bonusu veren casino siteleri

  2. Robertjep表示:

    Explore Blockchain Networks with Chainlist
    In the ever-evolving realm of blockchain technology, finding and connecting to the right network can be daunting. Chainlist is here to simplify that process, offering users a comprehensive directory of various blockchain networks.
    chainlist base
    What is Chainlist?
    Chainlist is a user-friendly platform designed to help you connect easily to different blockchain networks. It ensures you can access the required network settings, thereby facilitating the process of connecting your wallet to these networks reliably.

    Features of Chainlist
    Comprehensive Listings: Access an extensive list of blockchain networks.
    Easy Connection: Connect to networks directly through your wallet interface with just a few clicks.
    Up-to-date Information: Keep up with the latest network updates and technical details.
    Why Use Chainlist?
    Chainlist offers a seamless experience for users who need to navigate the myriad of blockchain networks available today. Whether you are a developer, a crypto enthusiast, or someone new to the crypto space, Chainlist provides:

    Accessibility: Simplifies accessing various networks without needing deep technical knowledge.
    Efficiency: Save time by using Chainlist’s straightforward interface to find and connect to networks.
    Reliability: Depend on updated settings to ensure smooth transitions between networks.
    How to Use Chainlist
    Using Chainlist is intuitive. Here’s a simple guide to get started:

    Visit the Chainlist website.
    Browse through the list of available networks.
    Find your preferred network and click ‘Add to Wallet’.
    Follow any additional prompts to complete the connection.
    Once you’re connected, you can start exploring the decentralized applications (dApps) and services that the blockchain network offers.

    Conclusion
    With Chainlist, accessing the blockchain world is no longer overwhelming. Its user-centric platform reduces complexity, making it an invaluable tool for anyone looking to explore or develop on different blockchain platforms. From seamless wallet integration to accurate network data, Chainlist paves the way for blockchain accessibility and innovation.

    Check out today and start your journey into the decentralized future.

  3. http://www.airlines-inform.ru/personal/user/?UID=73969 [url=https://www.acomics.ru/-promokodherbru]https://www.acomics.ru/-promokodherbru[/url] .

  4. Внимание, игроки!

    Готовы попасть в пространство интернет-развлечений и выиграть настоящие деньги? Тогда вам к нам! Список лучших превосходных казино 2025

    Наш telegram-аккаунт — ваш гид в окружение лучших онлайн-игр в России! Мы подготовили топ-10 надежных игровых сайтов, где вы сумеете развлекаться на финансы и вывести свои призы без трудностей.

    Что вас ждет:

    Честные рекомендации и рейтинги рейтинг казино онлайн с выводом от действительных участников. Отличная имя всякого площадки гарантирована временем и пользователями. Бесплатная запись и скорый доступ на каждой площадках. Активные дубликаты для входа к вашему излюбленному игровому сайту в любое час. Мобильный софт для комфортной развлечения там желаете.

    Почему нас?

    Надежные и проверенные игровые площадки с отличными критериями для игры. Безопасность ваших информации и транзакций гарантирована. Свежие обновления и новости пространства интернет-игр в России.

  5. BradleyEdino表示:

    yeni deneme bonusu veren siteler yat?r?ms?z deneme bonusu veren siteler yat?r?ms?z deneme bonusu veren siteler

  6. Wilbertacild表示:

    Understanding Convex Finance
    Convex Finance is an innovative platform designed to enhance yield farming in the decentralized finance (DeFi) space. It allows users to maximize their rewards without the need for technical expertise.

    What is Convex Finance?
    Convex Finance is a DeFi platform that builds on top of , optimizing the way liquidity providers and stakers can earn rewards. By using Convex, users can increase the efficiency and profitability of their investments.
    convex finance
    Key Features of Convex Finance
    Enhanced Rewards: Users can earn boosted rewards on their staked assets by utilizing the Convex platform.
    Decentralized and Secure: Built on top of the existing Curve protocol, ensuring a high level of trust and security.
    User-Friendly Interface: Designed to be easy for both new and experienced DeFi users to navigate.
    Why Choose Convex Finance?
    There are several compelling reasons to choose Convex Finance for your yield farming needs. Whether you’re new to DeFi or an experienced investor, Convex offers unique benefits:

    Higher Yields: By pooling your resources, Convex helps maximize the potential returns on your investments.
    Gas Fee Efficiency: Transactions through Convex are optimized to reduce costs, making it a more efficient choice.
    Community-Driven: Convex evolves based on user feedback, ensuring that the platform continues to meet the needs of its community.
    Getting Started with Convex Finance
    Starting with Convex Finance is straightforward:

    Visit the .
    Connect your compatible crypto wallet.
    Select the pools you want to stake in and boost your earnings.
    For more detailed instructions, referring to the section will provide deeper insights and troubleshooting support.

    Conclusion
    Convex Finance revolutionizes the way users interact with DeFi, offering enhanced yields while maintaining a focus on security and simplicity. By leveraging the capabilities of Convex, investors can confidently optimize their yield farming strategies.

    Boost Your Earnings with Convex Finance Staking
    Are you looking to maximize your returns on cryptocurrency investments? Discover the potential of Convex Finance Staking today. This innovative platform offers you the opportunity to earn more by staking popular tokens like CRV, achieving enhanced yields while gaining additional benefits.

    What is Convex Finance?
    is a cutting-edge decentralized finance (DeFi) protocol that optimizes returns for Curve Finance users. It allows liquidity providers and CRV stakers to earn trading fees, boosted CRV, and take part in Convex liquidity mining.

    Why Choose Convex Staking?
    Here’s why Convex Finance should be your go-to platform for staking:

    Boosted Yields: Earn higher returns by leveraging your CRV tokens and engaging in liquidity mining.
    No Withdrawal Fees: Enjoy the flexibility to withdraw your funds without incurring additional costs.
    Rewards and Bonuses: Benefit from various incentives, including platform rewards and additional bonuses for loyal stakers.
    How to Start Staking on Convex Finance
    Follow these simple steps to start maximizing your crypto profits with Convex Finance:

    Connect Your Wallet: Use a compatible wallet like MetaMask to link your account to the platform.
    Stake Your CRV: Deposit your CRV tokens into Convex to start earning boosted rewards.
    Claim Your Rewards: Monitor your earnings and claim your rewards at your convenience.
    Explore More Benefits
    Aside from staking, Convex Finance offers a unique opportunity to participate in liquidity pools and yield farming initiatives. These options provide you with multiple avenues to enhance your total returns on investments.

    Start Staking Today
    Visit the official website to learn more about which pools and strategies offer the best returns. Take action today and secure your financial future with Convex Finance’s powerful staking solutions.

    Understanding Convex Finance: Boost Your DeFi Earnings
    As decentralized finance (DeFi) continues to grow, Convex Finance emerges as a powerful tool for users looking to optimize their Curve Finance (CRV) earnings. Whether you’re a seasoned crypto enthusiast or a newcomer, understanding how Convex Finance works can significantly enhance your income from DeFi investments.

    What is Convex Finance?
    Convex Finance is a platform that allows liquidity providers (LPs) and CRV stakers to earn higher returns without locking CRV. It achieves this by leveraging specific tokenomics to maximize yield earnings for users, while simplifying the staking process.

    How Convex Finance Works
    Here’s a breakdown of how Convex Finance operates:

    Increased Yield: Convex offers LPs additional rewards on top of the incentives already provided by Curve Finance. This maximizes your DeFi returns.
    Platform Flexibility: Unlike traditional staking, Convex Finance enables users to stake either LP tokens or CRVs without enduring long lock-up periods.
    Reward Distribution: Participants earn not just from Curve rewards but also receive a share of fees distributed by the platform, further increasing potential earnings.
    Benefits of Using Convex Finance
    There are several reasons to consider using Convex Finance:

    Efficient Yield Optimization: Convex Finance combines yields from multiple sources, providing a streamlined way for users to maximize their earnings.
    Lower Commitment: Users can earn rewards without the need for long lock-up periods, maintaining greater liquidity and flexibility.
    Community Support: With an active community and ongoing development, Convex Finance regularly updates its platform features to ensure high performance and security.
    Getting Started with Convex Finance
    To begin using Convex, you’ll need to connect a compatible crypto wallet and deposit your Curve LP tokens. Once connected, you can decide on the best strategy for your investment needs, benefiting from the enhanced yields available on this innovative DeFi platform.

    Overall, Convex Finance represents an evolving landscape in decentralized finance, offering a compelling option for maximizing CRV earnings with minimal staking constraints. Explore this platform to leverage its full potential and take advantage of the thriving DeFi ecosystem.

  7. Leroyoxign表示:

    Бесплатное программное обеспечение для видеонаблюдения на ПК для распознавания лиц поддерживает все типы IP камер. Это комплексное решение, включающее VMS и CMS, позволяет записывать и просматривать RTSP-видеопотоки, а также управлять большим количеством IP-камер с единой платформы. Встроена видеоаналитика на основе ИИ, которая обнаруживает объекты в кадре, распознает автомобильные номера и лица, а также выявляет признаки дыма и огня.
    функция распознавания лица

  8. VincentRop表示:

    Welcome to DeFiLlama: The DeFi Data Powerhouse
    In the ever-evolving world of decentralized finance, staying informed is crucial. DeFiLlama stands out as a comprehensive platform offering in-depth analytics and insights into the DeFi ecosystem. Whether you’re a seasoned investor or new to DeFi, DeFiLlama provides the tools and data you need to make informed decisions.
    defillama app
    Why Choose DeFiLlama?
    DeFiLlama excels in delivering unbiased, reliable data that the crypto community can trust. Here’s why it’s a favorite among DeFi enthusiasts:

    Complete Transparency: DeFiLlama offers an open data approach, ensuring transparency and accuracy in all metrics provided.
    Extensive Coverage: With data on a wide array of DeFi protocols, it provides the most comprehensive DeFi analytics available.
    User-Friendly Interface: Navigate easily through DeFiLlama’s clear layout and access the data you need quickly.
    Regular Updates: Stay current with frequent updates, delivering the latest DeFi data.
    Explore Key Features
    Total Value Locked (TVL): One of the most important metrics in the DeFi space, TVL indicates the amount of assets locked in DeFi protocols. DeFiLlama tracks TVL across multiple chains, providing a comprehensive view of where value is being generated.

    Protocol Rankings: Discover which DeFi protocols are leading the pack. DeFiLlama’s rankings help you track the top-performing projects across various chains.

    Chain Analysis: Beyond individual protocols, DeFiLlama offers insights into how different blockchain networks compare in terms of ecosystem growth and performance.

    Community and Collaboration
    DeFiLlama believes in the power of community feedback and collaboration. They continuously improve their offerings based on community input, ensuring the platform meets the evolving needs of its users.

    Join the growing community of DeFi enthusiasts who trust DeFiLlama for their data needs.

    Start Your DeFi Journey Today
    Whether you’re new to DeFi or looking to deepen your understanding, DeFiLlama is your go-to resource for data that helps drive decisions. Dive into the world of decentralized finance with all the information you need at your fingertips.

    Visit today and explore the future of finance!

  9. Josephcum表示:

    Welcome to CBridge: Your Gateway to Cross-Chain Transactions
    In the rapidly-evolving world of cryptocurrencies, CBridge stands out as a powerful solution for seamless cross-chain transfers. If you are new to the concept, or simply looking to enhance your crypto experience, CBridge offers a robust platform that ensures fast, cost-effective, and secure transactions across multiple blockchain networks.
    celer network
    What is CBridge?
    CBridge is a revolutionary bridge infrastructure designed to facilitate transfers of cryptocurrencies across different blockchain networks. By leveraging the latest in blockchain technology, CBridge allows users to seamlessly move their digital assets between diverse ecosystems without the complexities often associated with such processes.

    Key Features of CBridge
    High-Speed Transactions: CBridge ensures that cross-chain transfers are completed as quickly as possible, reducing waiting times significantly.
    Cost-Effective Solutions: Enjoy lower transaction fees compared to traditional bridges, making it an economical choice for all users.
    Security and Privacy: With enhanced security protocols, CBridge maintains the integrity of transactions and protects user data.
    User-Friendly Interface: An intuitive platform that simplifies navigation, making it accessible even to beginners.
    How Does CBridge Work?
    The process is straightforward: users initiate a transaction from their preferred blockchain, select the destination network and currency, and confirm the transfer. CBridge handles the rest, ensuring the digital assets are converted and securely transmitted to the target blockchain.

    Benefits of Using CBridge
    CBridge not only simplifies the process of moving assets but also opens opportunities for users to explore diverse blockchain applications. Whether you are a trader, investor, or a blockchain enthusiast, CBridge offers a strategic advantage by fostering a truly interconnected crypto ecosystem.

    Conclusion
    In a world where flexibility and connectivity are key, CBridge offers the optimal solution to unlock new potentials in cross-chain transactions. Its commitment to speed, cost-efficiency, and security makes it an invaluable tool for anyone engaged in the cryptocurrency space.

  10. DavidTouts表示:

    https://slotsiteleri25.com/# slot oyunlar? puf noktalar?

  11. AndreLig表示:

    Welcome to DeBank: Your Premier DeFi Portfolio Manager
    In the ever-evolving world of decentralized finance (DeFi), managing and tracking your digital assets is crucial. DeBank offers an innovative solution for users to seamlessly manage their DeFi investments, providing a comprehensive overview of their digital portfolio.
    debank search
    Why Choose DeBank for Your DeFi Needs?
    DeBank simplifies the complex landscape of DeFi by offering tools and insights that empower users to make informed decisions. Here’s why you should consider using DeBank:

    Comprehensive Asset Management: Track all your DeFi investments in one place for a holistic view of your financial health.
    Portfolio Optimization: Enhance your investment strategy with the help of detailed analytics and insights.
    Security and Privacy: Enjoy peace of mind knowing your data is protected with top-tier security protocols.
    Key Features of DeBank
    DeBank stands out with its robust set of features designed to accommodate both novice and experienced investors alike:

    Real-time Data Tracking: Stay updated with live data feeds that keep you informed about market trends and price changes.
    Wallet Integration: Connect multiple crypto wallets to manage and view your assets seamlessly.
    Customizable Dashboard: Tailor your dashboard to display the metrics and assets that matter most to you.
    Getting Started with DeBank
    Setting up your DeBank account is a straightforward process:

    Create an Account: Sign up with your email or integrate with your crypto wallet.
    Connect Your Wallet: Securely link your existing crypto wallets to start tracking your investments.
    Explore the Dashboard: Customize your interface to monitor your DeFi activities effectively.
    DeBank offers an intuitive and user-friendly platform that caters to the diverse needs of DeFi enthusiasts. Whether you’re looking to track your assets or optimize your investment strategy, DeBank provides the tools and insights needed to succeed in the DeFi space.

    Join the DeFi Revolution with DeBank
    As the DeFi market continues to expand, staying ahead is crucial. DeBank equips you with the knowledge and tools to harness the full potential of decentralized finance. today and take control of your financial future!

  12. ThomasZep表示:

    Welcome to Bungee Exchange
    In the dynamic world of cryptocurrency, the ability to exchange currencies securely and efficiently is crucial. Bungee Exchange offers a seamless platform that caters to both beginners and experienced traders alike.
    bungee bridge
    Why Choose Bungee Exchange?
    Bungee Exchange stands out as a top choice for currency swaps due to its:

    User-Friendly Interface: Designed with simplicity in mind, the platform allows users to navigate with ease.
    Robust Security Measures: Your transactions are protected with state-of-the-art security protocols.
    Wide Range of Supported Currencies: Bungee Exchange supports a variety of cryptocurrencies to meet diverse trading needs.
    Key Features
    Here are some key features that make Bungee Exchange an attractive choice:

    Instant Transactions: Benefit from quick processing times that facilitate rapid exchanges.
    Competitive Exchange Rates: Receive favorable rates that maximize the value of your trades.
    24/7 Customer Support: Access reliable support whenever you need assistance or have queries.
    How to Use Bungee Exchange
    Getting started with Bungee Exchange is straightforward. Follow these steps:

    Sign Up: Create an account by providing your email and setting a secure password.
    Verify Identity: Complete the KYC process to ensure safety and compliance.
    Select Exchange Pair: Choose the currencies you wish to swap.
    Confirm Transaction: Review the details and confirm your trade to initiate the exchange.
    Conclusion
    Whether you are a seasoned trader or just getting started, Bungee Exchange offers a streamlined platform for effective cryptocurrency swaps. With its emphasis on security, user-friendliness, and efficiency, you can trade with confidence. Discover the potential of Bungee Exchange today and take control of your cryptocurrency transactions with ease.

  13. JasonUnsoG表示:

    https://slotsiteleri25.com/# en kazancl? slot oyunlar?

  14. FrankEmine表示:

    Deneme Bonusu Veren Siteler: en guvenilir casino siteleri – Casino Siteleri

  15. вывод из запоя в ростове на дону вывод из запоя в ростове на дону .

  16. ThomasOdoke表示:

    What is Curve Finance?
    Curve Finance is a decentralized exchange platform designed to facilitate low-cost, low-slippage trades of stablecoins and other assets. Built on the Ethereum network, Curve.fi optimizes trading and liquidity provision, making it a popular choice among decentralized finance (DeFi) users.
    curve finance
    How Does Curve Finance Work?
    Curve Finance employs an automated market maker (AMM) model, which eliminates the need for traditional order books. Instead, it uses liquidity pools to match trades and provide liquidity. This system is particularly effective for stablecoin exchanges, where price fluctuations are minimal.

    Key Features of Curve Finance
    Low Slippage: By focusing on stablecoins, Curve minimizes price volatility during trades.
    Efficient Trading: Curve’s AMM model enables quick and efficient transactions.
    Liquidity Incentives: Users providing liquidity earn rewards in the form of trading fees and CRV tokens.
    Benefits of Using Curve Finance
    Curve Finance offers numerous benefits for users looking to optimize their cryptocurrency trading experience:

    Competitive Rates: By reducing slippage and transaction fees, Curve provides a cost-effective solution for stablecoin trades.
    Decentralized Control: Users benefit from the security and autonomy of a decentralized network.
    Yield Farming Opportunities: Beyond trading, users can engage in yield farming, earning additional income by supplying liquidity.
    How to Get Started with Curve Finance
    To begin using Curve, you need an Ethereum wallet, such as MetaMask, and some ETH to cover gas fees. Here’s a quick guide to get you started:

    Connect your Ethereum wallet to Curve.fi.
    Select a trading pair from the available liquidity pools.
    Enter the amount you wish to trade or provide as liquidity.
    Confirm the transaction and pay the necessary gas fees.
    By following these simple steps, you can start taking advantage of the low-cost, low-slippage trades that Curve Finance offers.

    Conclusion
    Curve Finance is a robust platform for anyone looking to engage in efficient cryptocurrency trading. With its focus on stablecoins and low slippage, Curve.fi provides users with an optimized trading experience backed by the security of decentralized finance. Whether you’re a trader or a liquidity provider, Curve Finance offers tools and incentives to enhance your DeFi journey.

  17. DavidTouts表示:

    http://slotsiteleri25.com/# guvenilir slot siteleri

  18. вывод из запоя на дому ростов на дону вывод из запоя на дому ростов на дону .

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。