フロントエンド学習 1_html/css_WEB-ITnose

フロントエンドの知識を学び始めて、メモを取って記録してみましょう~

以前は学習に dw を使用していましたが、今のフロントエンド開発ツールは軽量かつ強力です。

一般的に使用されるフロントエンド ツールは以下に記録されています:

1. Sublime3: 通常、サードパーティのパッケージをインストールする必要があります
2. Atom: 非常に優れた継承
3. VS コード: スマート プロンプトは非常に強力です
4. ウェブストーム: 大規模向けプロジェクトの場合は、使用することをお勧めします
5. markman: マーキング/測定ツール (Adobe Air ベース)

ツールのインストール:

Sublime3 のインストール

公式 Web サイトのダウンロード アドレス: http://www.sublimetext.com/

プラグインをインストールする手順:

ステップ 1: プラグイン パッケージ マネージャーをインストールします: パッケージ コントロールがインストールされます

ショートカット キー Ctrl+~ を押して、名前付きの制御行を表示します ([表示] > [コンソールを表示])

パッケージ マネージャーをインストールし、コマンド実行ウィンドウに貼り付けるコード (オンライン ダウンロード パッケージなので、インターネットに接続した状態で操作します)

貼り付け:

(sublime3)

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

( sublime2)

import urllib2,os; 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( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

sublime を再起動

ステップ 2: サードパーティのプラグインをインストールする

ctrl＋shift+p (環境設定 > パッケージ コントロール) を押してコマンド パネルを開きます

インストールパッケージを入力して押してくださいEnter

検索するパッケージのキーワードを入力し、Enter を押してインストールします (左クリックしてサードパーティのパッケージをインストールします)

パッケージマネージャーの公式 Web サイト: https://packagecontrol.io

インストールする推奨の崇高なプラグイン:

1.ConvertToUTF8: ファイルエンコーディング変換の問題を解決します

2.Emmet: html、css、js を素早く書く神レベルのプラグイン

3.SublimeLinter: ハイライトエラーのあるコード行を削除し、コメントのハイライト表示もサポートします

4.ColorPicker: カラーピッカー

5.HTMLBeautify: HTML 書式設定プラグイン

6.AllAutoComplete: 自動プロンプト ...

以下の一般的なショートカット キー崇高で勝つ：

ショートカットキー：

ctrl+/：コメントctrl+ctrl+スクロールズームサイズ

ctrl+n new

ctrl+ctrl+eint新しい行の先頭に。

Ctrl+Shift+Enter: その逆です。

ctrl+shift+v インデントを維持したまま貼り付けます

ctrl+shift+d 現在の行をコピーします

ctrl+shift+↑ 行を上に移動します、 ↓ 同じことです

Shift+マウスの右ボタン 編集する複数の行を選択します同時に

ctrl+f 検索

ctrl+h 検索と置換

ctrl+[ 左のインデントを増やす

ctrl+] 右のインデントを増やす

ctrl+g: どの行にジャンプします

紹介される一つずつ。 。

atom 公式ウェブサイト: https://atom.io

ウェブストーム公式ウェブサイト: http://www.jetbrains.com