以前は、Eclipse や myeclispe などの IDE 開発ツールを使用して Web フロントエンド スタイルを作成していましたが、今は HTML のものを書きたいだけなので、開いて書き込める軽量のエディターを探しています。自由に使えるので、空き時間の学習に便利です。私はオンラインでたくさんのエディタを探しましたが、最終的には $70 の小型エディタである Sublime Text に落ち着きました。このソフトウェアは発売されてから長いですが、インターネット上にもチュートリアルが散在していますが、学習を始めたばかりなので、学習メモとしても使用でき、便利です。この記事では、Sublime を使用して HTML ファイルを作成することに焦点を当てます。
間違いがあれば修正してください！
1. Sublime Text2 のインストールとローカリゼーション
Sublime Text2 Baidu ネットワーク ディスクのダウンロード (無制限の試用版が利用可能ですが、多くの有能な人々が正規版をサポートしてくれることを願っています)リンク: http://pan.baidu. com/s/1dDJcRxn パスワード: bywe
中国語パッケージ Baidu ネットワークディスクのダウンロード
リンク: http://pan.baidu.com/s/1mgkYFGk パスワード: 6o9z
中国語の方法: ソフトウェアを実行し、メニューをクリックして [設定] - > パッケージの参照 開いたディレクトリの親ディレクトリにパッケージ フォルダがあります。パッケージ -> デフォルトで、ダウンロードした中国語圧縮パッケージのデフォルト フォルダ内のファイルを同じ名前のファイルに置き換えます。
2. Sublime Text2 のいくつかの主要なインターフェイス設定とショートカット キー
左のディレクトリ バー (閉じる/開く): [表示] -> [サイドバー] -> [サイドバーを非表示] (一度クリックして開き、[閉じたらタブ] をクリックします)テキストは変更されていません。これは中国語の問題であるはずです)右側のミニビュー (閉じる/開く): 表示 -> ミニマップを非表示
3. Sublime Text2 プラグインのインストール
Sublime がたくさんありますただし、これらのプラグインを簡単にインストールするための前提条件は、パッケージ コントロール コントロールをインストールすることです。これをインストールする最も簡単な方法は、Sublime のテキスト コンソールを使用することです。コンソールには、Ctrl+` ショートカットまたは [表示] -> [コンソールの表示] メニューからアクセスします。開いたら、Sublime のバージョン (この記事は Sublime Text2) に対応する Python コードをコンソールに貼り付けます。Sublime Text2 インストール Package Control に対応する Python コードは次のとおりです:
import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')参考資料: https://packagecontrol.io/installation#st2
4. 編集中のファイルを素早く参照するためのショートカット キーSublime Text2 ブラウザを開きます
Package Control をインストールしたら、さまざまなプラグインを簡単にインストールできます。たとえば、質問 4 では、「ブラウザで編集中のファイルをすばやく開くことができるプラグイン」をインストールする方法を説明します。 HTML ファイルを編集できることを確認します。このプラグインはブラウザーで表示されます:1. 「ctrl+shift+p」でコマンド パネルを開きます
2. 」と入力してフルネームで開きます（パッケージのインストール） プラグインパネルをインストールし、最初のパッケージコントロール：パッケージのインストールを選択すると、しばらくするとプラグインをインストールするための入力パネルが表示されます
3. 「ブラウザで表示」と入力した後、マウスの左ボタンをクリックするか Enter キーを押してインストールします
4. SublimeText2 の左下隅にあるステータス バーを確認して、インストールが成功したかどうかを確認します
インストール後、方法を見てみましょう使用するには:
1. Sublime Text2 を開き、メニュー バー: [設定]->[パッケージ設定]->[ブラウザで表示]->[設定]-[ユーザー]
2.「[ ]」に次のコードを入力します。は自分で設定したショートカットキー、赤文字2はコンパイル中のファイルを実行するショートカットキーに対応するブラウザ、その他のFirefox-firefox、apple-safari
注: 先頭と末尾の「[ ]」は使用できません削除しないと、Sublime を開くときにエラーが報告されます。コードがない場合でも、空の「[ ]」記号を残す必要があります。そうしないと、エラーが報告されます。
5. Sublime Text2 プラグイン Emmet の使用 (HTML ファイルの開始コードを素早く生成)一部の IDE 開発ツールを使用して HTML ファイルを作成すると、標準のヘッダー ファイル コードが自動的に生成されますが、Sublime が必要な場合は、この効果を実現するには、プラグインが必要です。連携するには、ここでインストールするプラグインは Emmet と呼ばれます。インストール方法は上記と同じです。
Emmet プラグインをインストールした後、ファイルを作成し、Sublime > ファイル > 新しいファイルを開き、この時点で作成されたファイルは Sublime フォームの右下隅にあるプレーン テキスト ファイルです。右下隅のプレーンテキストと同時に、ポップアップファイルタイプリストで HTML タイプを選択すると、空の HTML タイプのファイルが作成されます。
エクスペリエンスを開始します:html:4t
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body>10 </html>
html:4s
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body>10 </html>
html:xt
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body>10 </html>
html: 5
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body>10 </html>
6. 他の文書の引用
デスクトップ上の同じフォルダー内にあれば、CSSファイルなど以下の記述を参照することができます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
