Web Front-end
HTML Tutorial
Install Subline Text 3 and its plug-in_html/css_WEB-ITnose on windows7
Install Subline Text 3 and its plug-in_html/css_WEB-ITnose on windows7
1. Download address: http://www.sublimetext.com/3
Please choose the appropriate installation version according to your platform
Installation completed Finally, set the TAB key to 4 spaces (Preferences??>Settings-User):
{ "tab_size": 4, "translate_tabs_to_spaces": true, "font_size": 11, "ignored_packages": [ "Vintage" ]}
2. Install the Plug-in Manager (Package Control)
Click the view??>show console menu on the menu bar, then paste the Python code into your text console,
press enter key and wait a few minutes.
Python code:
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)The above installation method is relatively simple, there is also a manual installation method, please check the official website: https://packagecontrol.io/installation #st3
3. Install the Emmet plug-in (very convenient for writing html code)
Usage example
Example 1: Enter html:5, and then press tab key, you will get the following code:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body></body></html>
Example 2: Enter div#test, and then press the tab key, you will get the following code:
<div id="test"></div>
Example 3: Enter div.test*5, and then press the tab key, you will get the following code:
<div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div>
Example 4: Enter div>h2 ul>li*5, and then press the tab key, you will get the following code:
<div> <h2></h2> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>
More detailed usage introduction:
After talking about so many benefits, let’s introduce how to install it?
Press the ctrl shift p key combination, or click Preferences??>Package Control
As shown below;
Enter install package
Confirm
Enter emmet
After the installation is successful, the following prompt will appear. Restart the editor and continue to complete the installation. .
4. Install LESS and SASS plug-ins
Take installing the SASS plug-in as an example. Follow the steps to install the emmet plug-in. Similarly, we can first Install SASS, and then install SASS Build, as shown in the figure:
Similar to LESS installation, install LESS first, then install LESS BUILD.
5. Install the HTML-CSS-JS Prettify plug-in
The plug-in installation is the same as above. You will encounter a problem here. When executing Pretty Code, the following box will pop up. :
Prompt, the installation path of nodejs cannot be found (nodejs needs to be installed), click ok and modify it, as shown in the figure:
6. sublime text 3 3083 registration code
----- BEGIN LICENSE -----Andrew WeberSingle User LicenseEA7E-855605813A03DD 5E4AD9E6 6C0EEB94 BC99798F942194A6 02396E98 E62C9979 4BB979FE91424C9D A45400BF F6747D88 2FB8807890F5CC94 1CDC92DC 8457107A F151657B1D22E383 A997F016 42397640 33F41CFCE1D0AE85 A0BBD039 0E9C8D55 E1B89D5D5CDB7036 E56DE1C0 EFCC0840 650CD3A6B98FC99C 8FAC73EE D2B95564 DF450523------ END LICENSE ------
Note : When installing the plug-in, sometimes It will be very slow, and even prompts: thare are no packages available for installation
Solution: You need to add: IPv4 address sublime.wbond.net to the HOSTS text of the computer, such as: 192.168.1.51 sublime.wbond.net
For details, please see: http://stackoverflow.com/questions/25105139/sublime-text-2-there-are-no-packages-available-for-installation
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?
Mar 04, 2025 pm 12:32 PM
The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
How to efficiently add stroke effects to PNG images on web pages?
Mar 04, 2025 pm 02:39 PM
This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
