Front End Editor-custom HTML templates

Source: Internet
Author: User

1. Webstorm Custom HTML Templates

We need to find a place to set up the template, steps like This:

    File and Code Templates, Editor, file--settings

  

Find this location, we will see this interface, in the right side of the navigation bar in the upper left corner of the top of a + sign we can start to create a template,

  

As shown, the name of the corresponding place is used to write the names of the HTML template, which will be convenient for us to choose which template, Extension is our template is what type of document, here is rightfully filled with html, blank area is to put the HTML template code, copy the code you have written to paste it up, and then click on the application submission to complete the Creation.

  Application Scenarios:

  

2. Hbuilder Custom HTML Templates

  

  HB Template creation relative to other editors it is very violent direct, then I will tell you what a violent law.

Hbuilder there is a folder to put the custom template, as long as you put the HTML template document in this folder is ok, is it very simple?

well, we need to know where this article is going! I have also written a specific step for everyone:

1, as usual to create html, pop up the creation of HTML window

2, in this window has a choice template module, the right side has a custom template typeface also underlined, learn the front-end code friends know that represents the function of the link, then, click on the Jump page

 

   

3, the Good page? How do I jump to a page folder? You look closely, it looks like the folder we are looking for.

4, put the template document to this price folder, which has not been completed, before putting the document to remove the Readme and then put the template document to this price folder, close the folders, and so on the next time you open this folder will automatically generate a readme.txt, If you are curious to click in, you will delete this folder.

  

  scenario: Create a new html, Select a template

3 . Visual Studio Code Custom HTML template

  User code snippets, preferences, top right corner File,->html.json file

  


Put the HTML template code, as follows

  

If more than one template is required, separate the template code fragments with commas

  

Template source:

"bootstrap document Basic structure": {"prefix": "boot", "body": ["<!DOCTYPE HTML>",            "<HTMLLang=\ "zh-cn\">"," \ t<Head>"," \t\t<MetaCharSet=\ "utf-8\">"," \t\t<Metahttp-equiv=\ "x-ua-compatible\"content=\ "ie=edge\">"," \t\t<Metaname=\ "viewport\"content=\ "width=device-width,Initial-scale=1,Maximum-scale=1,user-scalable=no\ ">"," \t\t<Metaname=\ "author\"content=\ "author's name \">"," \t\t<title>$</title>"," \t\t<Linkhref=\ "css/bootstrap.min.css\"rel=\ "stylesheet\">"," \t\t<style>" ," \t\t\t "," \t\t</style>"," \ t</Head>"," \ t<Body>" ," \t\t$2 "," \t\t<Scriptsrc=\ "js/jquery.min.js\"></Script>"," \t\t<Scriptsrc=\ "js/bootstrap.min.js\"></Script>"," \ t</Body>",            "</HTML>"]," Description ":" Bootstrap document basic structure "}

Application Scenarios:

  

4. Sublime custom HTML templates   

Sublime's Custom HTML template is almost the same as the Vscode usage, with no explanation here, or a cursory introduction to using

First of all, to find Snippets.json This file is located in the directory, the path is Preferences>browse packages, see if there is no Emmet Directory. If not, you may not have the Emmet plugin installed, and you will need to install it manually.

then, Open Snippets.json This file, start customizing the template, shortcut keys Open.

  

    

Front End Editor-custom HTML templates

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.