Π Π°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° Emmet Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ Sublime Text 3
Π― ΡΡΠΏΠ΅ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» Emmet ΡΠ΅ΡΠ΅Π· Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ.
- ΠΠΎΠ³Π΄Π° Ρ Π½Π°Π±ΠΈΡΠ°Ρ
ul
ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Ρ Tab, Ρ ΠΏΠΎΠ»ΡΡΠ°Ρ<ul></ul>
. - ΠΠΎΠ³Π΄Π° Ρ Π½Π°Π±ΠΈΡΠ°Ρ
ul.class
ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Ρ Tab, Ρ ΠΏΠΎΠ»ΡΡΠ°Ρul.body_class
, Π½ΠΎ Ρ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π»<ul></ul>
.
Π§ΡΠΎ Ρ Π΄Π΅Π»Π°Ρ Π½Π΅ ΡΠ°ΠΊ?
Π― ΡΠΈΡΠ°Π» ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Ctl + E Π²ΠΌΠ΅ΡΡΠΎ Tab Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΡΠΈΠ³Π³Π΅ΡΠ½ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠΈ, Π½ΠΎ ΡΡΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π΄Π°Π΅Ρ.
sublimetext3 emmetΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΡΡΠΎΡΠ½ΠΈΠΊ draney Β Β 23 Π°Π²Π³ΡΡΡΠ° 2015 Π² 13:58
5 ΠΎΡΠ²Π΅ΡΠΎΠ²
- Sublime text ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ Emmet
ΠΠΎΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΏΡΠΎΡΡΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΠΈ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ Emmet ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠ΅Π³Π°ΠΌΠΈ Sublime Text 3 ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° Ρ Π½Π°Π±ΠΈΡΠ°Ρ ‘link’ ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Ρ TAB, Ρ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Ρ: <link rel=stylesheet href=> ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Emmet (.
- Sublime Text 2 + Emmet-ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ Emmet Π½Π° Sublime Text 2, ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ°ΠΉΠ»Π΅ CSS, Π½Π°ΠΆΠ°Π² TAB ΠΏΠΎΡΠ»Π΅: pos:r Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ position:relative ΠΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΠ»Π΅ : Π½Π΅ΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΠΈΡΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π²ΡΠ΅, ΡΡΠΎ Π±ΡΠ»ΠΎ Π΄ΠΎ : . ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ: Sublime Text 2 + Emmet — Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ…
7
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Ctrl + Space . ΠΡΠ»ΠΈ ΡΡΠΎ Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΡ ΠΊΠ»ΡΡΠ΅ΠΉ, ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ² ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π² ΡΠ°ΠΉΠ» ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΊΠ»ΡΡΠ΅ΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ, Π²ΡΠΏΠΎΠ»Π½ΠΈΠ² ΠΊΠΎΠΌΠ°Π½Π΄Ρ Preferences — > Key Bindings-User :
[
{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}
]
Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ "tab"
Π½Π° Π»ΡΠ±ΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΡ ΠΊΠ»Π°Π²ΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Saad Β Β 24 Π°Π²Π³ΡΡΡΠ° 2015 Π² 14:58
1
ΠΡΠΎΡΠΈΡΠ°Π² Π²Π°Ρ Π²ΠΎΠΏΡΠΎΡ, Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» Emmet Π² Π²Π΅ΡΡΠΈΡ Windows Sublime Text 3 ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΈ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΡΠΎΠΉ ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ. Π Ρ ΠΎΠ΄Π΅ ΠΏΠΎΠΈΡΠΊΠ° ΡΠ΅ΡΠ΅Π½ΠΈΡ Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ» ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
http:/ / docs.emmet.io / Π΄Π΅ΠΉΡΡΠ²ΠΈΡ / ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ-Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ°/#ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ-1272517661
Π Windows Ρ ΠΎΡΠΊΡΡΠ» Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Emmet ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ΅ΡΠ΅ΠΉΠ΄Ρ ΠΊ:
ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ > ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΠ°ΠΊΠ΅ΡΠ° > ΠΠΌΠΌΠ΅Ρ > ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ — ΠΠΎ Π£ΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ > ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΠ°ΠΊΠ΅ΡΠ° > ΠΠΌΠΌΠ΅Ρ > ΠΠΎΡΡΡΠΈΠ΅ ΠΠ»Π°Π²ΠΈΡΠΈ — ΠΠΎ Π£ΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠΎΠ³Π΄Π° Ρ Π·Π°ΠΊΡΡΠ²Π°Π» ΡΠ°ΠΉΠ»Ρ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΠΌΠ½Π΅ Π±ΡΠ»ΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΠ»Ρ Π½Π°ΡΡΡΠΎΠ΅ΠΊ. Π― Π½Π°ΠΆΠ°Π» OK, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΠ» Sublime Text 3.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Sublime Text 3 ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΠ»ΡΡ:
Π― ΡΠΎΠ·Π΄Π°Π» Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» html ΠΈ ΡΠΌΠΎΠ³ Π²Π²Π΅ΡΡΠΈ ul.class
Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ, ΠΈ ΠΎΠ½ ΡΠ°ΡΡΠΈΡΠΈΠ»ΡΡ Π΄ΠΎ <ul class></ul>
ΠΠ°Π±Π°Π²Π½ΠΎ, Π½ΠΎ Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π»ΡΡ Ρ ΡΠ°ΠΊΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Ρ Sublime Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Mac. ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Π½Π° Mac, Π²Ρ ΠΈΠ΄Π΅ΡΠ΅ Π² ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ > Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ° > Emmet …
1
Π― ΠΏΡΠΎΠ²Π΅ΡΡΡ, ΡΡΠΎ ΠΊΠ»ΡΡ ΠΠΌΠΌΠ΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — ctrl+e
, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡ Π΅Π³ΠΎ ΠΊ ΡΠ²ΠΎΠ΅ΠΌΡ Key Bindings - User
:
{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ wei zhu Β Β 08 ΡΠ΅Π½ΡΡΠ±ΡΡ 2016 Π² 04:19
- Sublime Text 3-Emmet shortcut for HTML 5 Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
ΠΠ΅Π΄Π°Π²Π½ΠΎ Ρ ΡΠΊΠ°ΡΠ°Π» sublime text 3 ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» emmet. ΠΡΠΎΠ±Π»Π΅ΠΌΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡ, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° Ρ ΠΏΠΈΡΡ ΠΊΠΎΡΠΎΡΠΊΠΈΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ HTML 5 ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Ρ tab, ΠΎΠ½ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
- sublime text 3 Emmet customization
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ST3 Ρ emmet (Windows 7 64-bit) ΠΈ Ρ ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ css Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ° ipad media. Π― Π½Π΅ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° Π½Π°ΡΡΡΠΎΠ΅ΠΊ emmet, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΆΠ΅ Ρ ΠΌΠΎΠ³Ρ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? Π― ΠΏΠΎΠΏΡΡΠ°Π»ΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ST3, Π½ΠΎ ΠΎΠ½ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΏΠΎΡΡΠΎΠΌΡ…
1
Π― ΠΏΠΎΠ΄Π΅Π»ΡΡΡ ΡΡΠΈΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΌΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ, Π½ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ 50 ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠΉ. ΠΡΠ±ΡΠΌΠΈ ΠΏΡΡΡΠΌΠΈ. ΠΠΎΡ ΡΡΠΎ Ρ ΡΠ΄Π΅Π»Π°Π», ΡΡΠΎ Π·Π°ΡΡΠ°Π²ΠΈΠ»ΠΎ ΠΌΠΎΡ ΡΠ°Π±ΠΎΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΠΌΠ΅Π½Ρ.
ΠΠ· ΠΎΡΠ²Π΅ΡΠ° @saadq’s ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅: [ //other ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΊΠ»ΡΡΠ΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π·Π΄Π΅ΡΡ, Π° Π·Π°ΡΠ΅ΠΌ
{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled. expand_abbreviation"}]}
]Π‘ΠΌΡΡΠ» Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅Π΄ Π½ΠΈΠΌ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, ΡΠ°ΠΊ ΡΡΠΎ Π»ΡΠ±Π°Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ°, ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΠ°Ρ Π΅Π³ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ°Π½Π° ΡΠ½ΠΎΠ²Π°.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Michael Iyke Β Β 23 ΠΌΠ°Ρ 2018 Π² 11:20
0
Π― ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΡΠΎΠΉ ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ. ΠΡΠΎΡΡΠΎ Π²ΡΡΠ°Π²ΠΈΠ» ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ Π² «Preferences -> Key Bindings β User:».
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
// put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [
{
"operand": "SCOPE_SELECTOR",
"operator": "equal",
"match_all": true,
"key": "selector"
},
// run only if there's no selected text
{
"match_all": true,
"key": "selection_empty"
},
// don't work if there are active tabstops
{
"operator": "equal",
"operand": false,
"match_all": true,
"key": "has_next_field"
},
// don't work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible --
// remove this section
{
"operand": false,
"operator": "equal",
"match_all": true,
"key": "auto_complete_visible"
},
{
"match_all": true,
"key": "is_abbreviation"
}
]
}
Github: ΡΠΌ. Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Ashish Singh Rawat Β Β 13 Π°Π²Π³ΡΡΡΠ° 2016 Π² 15:46
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
ΠΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ emmet Π² sublime text
Sublime 3 & Emmet
ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π³Π»ΡΠΏΡΠΌ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ, Π½ΠΎ Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π» Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΈ, ΠΏΠΎΡ ΠΎΠΆΠ΅, Π½Π΅ ΠΌΠΎΠ³Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ. Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ windows 8, Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» emmet Π² ΡΠ²ΠΎΠΉ sublime text 3, ΠΏΡΠΎΠ²Π΅ΡΠΈΠ» ΠΊΠΎΠ½ΡΠΎΠ»Ρ, ΠΈ ΠΎΠ½Π°,…
ΠΠ΅ ΡΠ΄Π°Π»ΠΎΡΡ Π½Π°ΠΉΡΠΈ Emmet Π² package control Π² Sublime Text 3
Π― ΠΏΡΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Emmet ΡΠ΅ΡΠ΅Π· Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ Π² Sublime Text 3, Π½ΠΎ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Ρ ΠΈΡΡ Π΅Π³ΠΎ, ΠΎΠ½ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ. ΠΡΡΡ ΠΈΠ΄Π΅ΠΈ? ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ, ΠΌΠ½Π΅ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΠ°?
Sublime text ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ Emmet
ΠΠΎΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΏΡΠΎΡΡΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΠΈ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ Emmet ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠ΅Π³Π°ΠΌΠΈ Sublime Text 3 ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° Ρ Π½Π°Π±ΠΈΡΠ°Ρ ‘link’ ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Ρ TAB, Ρ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Ρ: <link…
Sublime Text 2 + Emmet-ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ Emmet Π½Π° Sublime Text 2, ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ°ΠΉΠ»Π΅ CSS, Π½Π°ΠΆΠ°Π² TAB ΠΏΠΎΡΠ»Π΅: pos:r Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ position:relative ΠΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΠ»Π΅ : Π½Π΅ΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΠΈΡΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΈ…
Sublime Text 3-Emmet shortcut for HTML 5 Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
sublime text 3 Emmet customization
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ST3 Ρ emmet (Windows 7 64-bit) ΠΈ Ρ ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ css Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠ° ipad media. Π― Π½Π΅ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° Π½Π°ΡΡΡΠΎΠ΅ΠΊ emmet, ΡΠ°ΠΊ…
Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΏΠ»Π°Π³ΠΈΠ½Π° Sublime text 3 Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π°Π²ΡΠΎΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ emmet?
Π― Ρ ΠΎΡΠ΅Π» Π±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ emmet, Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΡΠ΅Π³ΠΎΠ² Π΄Π»Ρ html ΡΠ΅Π³ΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ h3>span .myclass, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ <div…
ΠΠ°ΠΊ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ CTRL+E Π² Sublime Text Emmet?
Π― Ρ ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Emmet-sublime Π² Sublime Text 3,Π½ΠΎ ΠΌΠ΅Π½Ρ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ Π½Π°ΡΡΡΠ°Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΡΡΠ»ΡΠΊΠΈ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π²ΡΠ΅, ΡΡΠΎ Ρ Ρ ΠΎΡΡ, — ΡΡΠΎ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΡΡΡΠ½ΡΡ Π½Π°ΠΆΠ°ΡΡ CTRL + e ΠΈ. ..
ΠΠ°ΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ Emmet Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° Π² Sublime Text 3?
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΠ°ΠΊΠ΅Ρ Emmet , ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ Π΄Π»Ρ Sublime Text 3 ΡΠ΅ΡΠ΅Π· Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ. Π― ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΡ Markdown Π² Sublime, ΠΈ Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ», ΡΡΠΎ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°ΠΉΠ»Ρ Markdown ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π±ΠΎΠ»ΡΡΠ΅,…
ΠΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Emmet ΠΏΠΎΡΠ»Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ
Π ΠΌΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΡΠ»Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Emmet Π² Sublime Text ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ.
ΠΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Emmet ΠΌΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ΅ ΡΡΡΡΠ°ΠΈΠ²Π°Π», ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΡΠ΅ΡΠΈΠ» ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Emmet ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ Π²ΡΡΡΠ½ΡΡ.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π½Π°ΡΠ°ΡΡ, Ρ ΠΎΡΠ΅Π» Π±Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Ρ Π±Π»ΠΎΠ³Π° Π΅ΡΡΡ ΡΠ΅Π»Π΅Π³ΡΠ°ΠΌ ΠΊΠ°Π½Π°Π» https://t.me/frontips, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ·Π½Π°Π²Π°ΡΡ ΠΎ Π²ΡΡ ΠΎΠ΄Π΅ Π½ΠΎΠ²ΡΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΈ ΡΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π΅ΠΌ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΡΠ΅ ΡΠ°Π·Π²ΠΈΡΠΈΠ΅ Π±Π»ΠΎΠ³Π° ΠΈ ΠΊΠ°Π½Π°Π»Π° ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΎΠΉ!
Π ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΡΠΌ ΠΊ ΡΠ΅ΠΌΠ΅ ΡΡΠ°ΡΡΠΈ π ΠΡΠΈΡΡΠ½ΠΎΠ³ΠΎ ΡΡΠ΅Π½ΠΈΡ!
Π‘Π½Π°ΡΠ°Π»Π° ΡΠ΄Π°Π»ΡΠ΅ΠΌ Emmet ΠΈΠ· Sublime Text — Π² ΡΠ°ΠΌΠΎΠΌ Sublime Text Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ Ctrl+Shift+P, Π²Π²ΠΎΠ΄ΠΈΠΌ rp
ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ½ΠΊΡ Package Control: Remove Package, Π΄Π°Π»Π΅Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΠΌ Emmet ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Π΅Π³ΠΎ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Emmet Π±ΡΠ΄Π΅Ρ ΡΠ΄Π°Π»Π΅Π½. ΠΠ°ΡΠ΅ΠΌ Π·Π°ΠΊΡΡΠ²Π°Π΅ΠΌ Sublime Text.
Π‘ΠΊΠ°ΡΠΈΠ²Π°Π΅ΠΌ Π°ΡΡ ΠΈΠ²: ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΡΡ Π²Π΅ΡΡΠΈΡ — Emmet
Π Windows 10 ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π΄Π»Ρ Sublime Text Π»Π΅ΠΆΠ°Ρ Π² ΡΠΊΡΡΡΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ AppData\Roaming\Sublime Text 3\Packages
Π§ΡΠΎΠ±Ρ Π΅Π΅ Π½Π°ΠΉΡΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Win+R ΠΈ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌ %appdata%
ΠΠ°Π»Π΅Π΅ ΠΈΡΠ΅ΠΌ AppData\Roaming\Sublime Text 3\Packages
Π ΠΏΠ°ΠΏΠΊΡ Package ΠΊΠΎΠΏΠΈΡΡΠ΅ΠΌ ΠΏΠ°ΠΏΠΊΡ emmet-sublime-master ΠΈΠ· ΡΠΊΠ°ΡΠ°Π½Π½ΠΎΠ³ΠΎ Π°ΡΡ ΠΈΠ²Π°
ΠΠ°ΡΠ΅ΠΌ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌ Sublime Text, ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½, ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΅ΡΠ»ΠΈ Π·Π°ΠΉΡΠΈ Π² ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ Preferences -> Package Settings ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π· Ctrl+Shift+P -> lp
-> Package Control: List Packages
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π²ΡΡΡΠ½ΡΡ Π»ΡΠ±ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ Sublime Text, Π΅ΡΠ»ΠΈ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π΅ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² ΡΠ°ΠΌΠΎΠΌ Sublime Text ΡΠ΅ΡΠ΅Π· Ctrl+Shift+P -> pi
-> Package Control: Install Package -> ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π°
ΠΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅ https://packagecontrol. io/
ΠΠ° ΡΠ°ΠΉΡΠ΅ ΠΈΡΠ΅ΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ HOMEPAGE: github.com, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π½Π° Github ΠΈ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅ΠΌ Π°ΡΡ ΠΈΠ² ΠΈ ΠΊΠΎΠΏΠΈΡΡΠ΅ΠΌ Π² ΠΏΠ°ΠΏΠΊΡ AppData\Roaming\Sublime Text 3\Packages
ΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½Ρ Π΅ΡΡΡ Ρ ΠΎΡΠΎΡΠ΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅/Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ Sublime Text
ΠΡΡΠ·ΡΡ, ΡΡΠ°ΡΠ°ΡΡΡ Π΄Π»Ρ Π²Π°Ρ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡ!
ΠΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ΡΡ, Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ³ΠΎ π
Telegram — https://t.me/frontips
VK — https://vk.com/frontips
sublime text emmet ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ
ΠΠ»Π°Π³ΠΈΠ½ emmet Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° sublime text ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΡΡΡΠΎ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ Π΄Π»Ρ html ΠΈcss.
ΠΠ»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π²ΠΎΡΠΊΠ»ΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π½Π°ΠΊ ΠΈ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ tab.
Π Π°ΡΠΏΠ°ΠΊΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΡΠ°ΡΡΠΈ
ΠΠ΅ΡΡΡΠΊΠ° Π΄ΠΈΠ²ΠΎΠ² Ρ emmet
Π‘ emmet ΡΠ΄ΠΎΠ±Π½ΠΎ Π²Π΅ΡΡΡΠ°ΡΡ Π΄ΠΈΠ²Ρ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ΅ΡΠ΅Π· ΡΠΎΡΠΊΡ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ° . Π΄ΠΎΠ±Π°Π²ΠΈΡ span Π½Π΅ Π² ul, Π° Π²ΡΡΠ΅ Π² Π΄Π΅ΡΠ΅Π²Π΅.
ΠΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠ°
ΠΡΠ»ΠΈ ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ .item1>(.item2+.item3), ΡΠΎ ΡΠ²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ Π΄Π²Π° item Π±ΡΠ΄ΡΡ ΠΈΠ΄ΡΠΈ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ.
.items1>(.item2+.item3)
.items1>(.item2+.item3) |
Π£ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΡ
ΠΡΠ»ΠΈ ΠΌΡ Ρ li ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΊΠ»Π°ΡΡ .class Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π·Π½Π°ΠΊ Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΠΈ $ ΠΈ ΡΠΌΠ½ΠΎΠΆΠΈΠΌ * Π½Π° 4. ul>li.class$*4.
ΠΡΠ΄Π΅Ρ ΡΠ΅ΡΡΡΠ΅ ΠΊΠ»Π°ΡΡΠ° Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ li.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠ³ΡΡΠ½ΡΡ ΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΡΠΊΠΎΠ±ΠΎΠΊ
ΠΠΎΠΏΡΡΡΠΈΠΌ ΠΏΠΈΡΠ΅ΠΌ ΡΡΡΠ»ΠΊΠ° Π½Π° Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°ΠΉΡ.
ΠΠ»Ρ emmet Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ a[href=βya.ruβ] ΠΈ tab ΡΠ°ΡΠΏΠ°ΠΊΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°.
Π‘Π²ΠΎΠ±ΠΎΠ΄Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ Π² ΡΠΈΠ³ΡΡΠ½ΡΡ ΡΠΊΠΎΠ±ΠΊΠ°Ρ .
ΠΠΈΡΠ΅ΠΌ Π΄ΠΈΠ² Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .text{ΡΠ΅ΠΊΡΡ}, ΡΠ°ΡΠΏΠ°ΠΊΡΠ΅ΠΌ.
a[href=’ya.ru’] .text{ΡΠ΅ΠΊΡΡ}
a[href=’ya. ru’] .text{ΡΠ΅ΠΊΡΡ} |
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ emmet Π² html
a link script:src img form input btn sect ol+ table+ c
a link script:src img form input btn sect ol+ table+ c |
ΠΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² sublime text ΠΈ Π½Π°ΠΏΡΠΎΡΠΈΠ² ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ tab.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ emmet Π² css
ΠΡΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ emmet ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ Π΄ΠΎΠ³Π°Π΄Π°ΡΡΡΡ, Π·Π°ΡΡΠΈΠ²Π°ΡΡ ΠΈΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ.
pos posa t r b l z fl d di dtc v ow cup mt mb p w h mh f fz ta tt lh bg bcg c bd lst ! @f @i cm trf
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
pos posa t r b l z fl d di dtc v ow cup mt mb p w h mh f fz ta tt lh bg bcg c bd lst ! @f @i cm trf |
Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ pug + gulp + sass + sublime text + emmet
20 Π€Π΅Π²ΡΠ°Π»Ρ 2020
posted in ΠΡΡΡΡΠΊΠ°, Π‘Π°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ |ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½Π΅Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π°ΠΆΠ΅ Π½Π° ΠΏΠΎΡΡ Π² Π±Π»ΠΎΠ³Π΅ β ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΠ³ΡΡΠ·ΠΈΠ»ΡΡ Π² ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ.
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ, ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ Π½Π°ΡΠΊΠ½ΡΠ»ΡΡ Π½Π° Π²ΠΈΠ΄Π΅ΠΎ FrontCoder-a Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ ΠΈ ΠΏΠΎΠ½Π΅ΡΠ»ΠΎΡΡ β¦
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π²Π°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΠ§ΠΠΠ¬ ΠΌΠ½ΠΎΠ³ΠΎ, ΠΈ Π²ΡΡ Π½Π° Π²Π΅Ρ Π·ΠΎΠ»ΠΎΡΠ°!
ΠΠ΄Π½ΠΎ Π΄Π΅Π»ΠΎ ΠΈΠ·ΡΡΠ°ΡΡ ΡΡΡ
ΡΡ ΡΠ΅ΠΎΡΠΈΡ, Π΄ΡΡΠ³ΠΎΠ΅ Π΄Π΅Π»ΠΎ Π²ΠΈΠ΄Π΅ΡΡ ΡΠ²ΠΎΠΈΠΌΠΈ Π³Π»Π°Π·Π°ΠΌΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠ½Π³, ΠΏΡΠΈΡΡΠΌ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΡΡΡΠΊΠ° Π½ΠΎ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΡ ΡΠ°Π±ΠΎΡΠΈΡ
ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΠΎ ΠΈΡ
ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅.
Π’Π°ΠΊ ΠΆΠ΅ Π°Π²ΡΠΎΡ Π΄Π°ΡΡ ΡΠΊΠ°ΡΠ°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°Π±ΠΎΡΠΈΠΉ Π½Π°ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ ΡΠ²ΡΠ·ΠΊΠΈ gulp + pug + sass
ΠΡΠ»ΠΈ ΠΊΡΠ°ΡΠΊΠΎ gulp β ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ (Π°Π²ΡΠΎΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠΎΠ² pug sass less slylus ΠΈ Π΄ΡΡΠ³ΠΈΡ
). ΠΠ΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π΄Π»Ρ ΠΊΠΎΠ΄ΠΈΠ½Π³Π° Ρ ΠΏΠΎΠΊΠ° ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΡΡ Π½Π° sublime text Ρ.ΠΊ. Ρ VS Code Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π»ΡΡ Ρ Π½Π΅ΡΠ΄ΠΎΠ±ΡΡΠ²Π°ΠΌΠΈ, ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΡΠΎ Π²ΡΠ±ΠΈΠ»ΠΎ β ΠΊΡΠΈΠ²ΠΎΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ emmet.
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ, Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Π²Π΅Π± ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠΎΠ² Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΊΠ°Π½Π°Π» FrontCoder-a, Π° ΡΠ°ΠΊ ΠΆΠ΅ Π΅Π³ΠΎ Π³ΡΡΠΏΠΏΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅ https://vk.com/frontcoder
Π’Π°ΠΊ ΠΆΠ΅ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ Π½Π°ΡΡΠΊΠ°Π» Π½Π° ΠΊΡΡΡΡ htmlacademy β ΠΏΡΠΈΠΌΠ΅Ρ https://htmlacademy. ru/courses/44/run/18
ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΎΡΠΈΠΈ Π±Π΅Π· Π²ΠΎΠ΄Ρ + ΡΡΠ°Π·Ρ ΠΆΠ΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠ°ΡΡΡ = ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ Π΄Π»Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ (ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠΎΠ²ΡΠ΅ΠΌ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ²)
PS
ΠΠ½Π΅ Π΅ΡΡ Ρ GIT ΠΎΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΡΠΆΠΈΡΡΡΡ, Π²ΡΡ ΡΡΠΊΠΈ Π½Π΅ Π΄ΠΎΡ
ΠΎΠ΄ΡΡ, Π΄Π° ΠΎΡΠΎΠ±ΠΎΠΉ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠΎΠΊΠ° Π½Π΅Ρβ¦
PPS
ΠΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ β ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ Π²ΠΈΠ΄Π΅ΠΎ Β«Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»ΡΒ» ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ Π½Π° gulp3 Π΄Π»Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ node.js ΠΈ Π½Π΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ
ΠΠ°ΠΏΠΈΡΡ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π° on 20.02.2020 at 10:04 and is filed under ΠΡΡΡΡΠΊΠ°, Π‘Π°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΈΡΠ°ΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ RSS-Π»Π΅Π½ΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ, ΠΈΠ»ΠΈ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠ΅ΠΊΠ±Π΅ΠΊ Ρ ΠΠ°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠ»Π°Π³ΠΈΠ½ Emmet Sublime — Π ΡΡΡΠΊΠΈΠ΅ ΠΠ»ΠΎΠ³ΠΈ
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π²ΠΎΠ·Π²ΡΡΠ΅Π½Π½ΡΡ
ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ emmet ΠΈΠ·-Π·Π° Π½Π΅ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΡ
ΡΡΡΠ°Π½ΠΎΠ²ΠΎΡΠ½ΡΡ
ΠΏΠ°ΠΊΠ΅ΡΠΎΠ².
Π‘Π½Π°ΡΠ°Π»Π° Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ Π²ΠΎΠ·Π²ΡΡΠ΅Π½Π½ΠΎΠ΅ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Π²ΠΌΠ΅ΡΡΠΎ Π·Π΅Π»Π΅Π½ΠΎΠΉ ΠΈ Π²Π·Π»ΠΎΠΌΠ°Π½Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ emmet.
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ Emmet:
Π² ΡΡΡΠΎΠΊΠ΅ ΠΌΠ΅Π½Ρ Perferences -> Package Control
ΠΏΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅ ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅pcip
, ΠΠ°ΠΉΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΎΡΠ½ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ, ΠΏΠΎΠΈΡΠΊemmet
ΠΠ°ΠΆΠΈΠΌΠ°Π΅ΠΌ Enter ΠΈ ΠΆΠ΄Π΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ.
ΠΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΡΡ Π²ΠΎΠ·Π²ΡΡΠ΅Π½Π½ΠΎΠ΅.
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ctrl + E Π½Π° ΠΊΠ»Π°Π²ΠΈΡΡ Tab:
Π ΡΡΡΠΎΠΊΠ΅ ΠΌΠ΅Π½Ρ Preferences -> PackageSettings -> Emmet -> KeyBindings -> User Π²ΡΡΠ°Π²ΡΡΠ΅[{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}]
, Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΡΠ΅ Π²ΠΎΠ·Π²ΡΡΠ΅Π½Π½ΠΎΠ΅.
ΠΠΎ ΡΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ, Π½ΠΎ Π±Π΅Π· ΠΎΡΡΡΡΠΏΠ°. Π§ΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΠ΄Π°Π»ΠΈΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ Π² ΡΡΡΠΎΠΊΠ΅ ΠΌΠ΅Π½Ρ Preferences -> PackageSettings -> Emmet -> KeyBindings -> User ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ:
// Press the tab indent a sufficient distance
{ "keys": ["tab"], "command": "reindent", "context":
[
{ "key": "setting. $", "match_all": true }
]
}
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΡΠ΅.
1. Π¨Π°Π³ΠΈ ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° HTML5:
ΠΠ²Π΅Π΄ΠΈΡΠ΅!, ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΆΠΌΠΈΡΠ΅ Tab ΠΈΠ»ΠΈ Ctrl + E, ΡΡΠΎΠ±Ρ Π±ΡΡΡΡΠΎ ΠΎΡΠΊΡΡΡΡ ΠΎΠ±ΡΡΡ ΡΡΡΡΠΊΡΡΡΡ HTML5.
2. Π§Π°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ:
Ctrl + P, ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠΈΡΠΊΠ°. Π ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΡΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ: 1. ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π° Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅, Π±ΡΡΡΡΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΠΏΠΎΠΈΡΠΊ Π² ΡΠ°ΠΉΠ»Π΅, 2. ΠΠ²Π΅Π΄ΠΈΡΠ΅ @ ΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°, Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΠΈΠΌΡ ΡΡΠ½ΠΊΡΠΈΠΈ Π² ΡΠ°ΠΉΠ»Π΅, 3. ΠΠ²Π΅Π΄ΠΈΡΠ΅: ΠΈ ΡΠΈΡΠ»Π°, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΡΡΡΠΎΠΊΠ΅ ΠΊΠΎΠ΄Π° Π² ΡΠ°ΠΉΠ»Π΅, 4. ΠΠ²Π΅Π΄ΠΈΡΠ΅ # ΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°, ΡΡΠΎΠ±Ρ Π½Π°ΠΉΡΠΈ ΠΈΠΌΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ.
Ctrl + Enter, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΡΡΡΡ ΡΡΡΠΎΠΊΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ.
Ctrl + Shift + Enter, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΡΡΡΡ ΡΡΡΠΎΠΊΡ ΠΊ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ.
Ctrl + Z, ΠΎΡΠΌΠ΅Π½Π°.
Ctrl + Y, ΡΡΠΎΠ±Ρ ΠΎΡΠΌΠ΅Π½ΠΈΡΡ ΠΎΡΠΌΠ΅Π½Ρ.
Ctrl +] ΠΈΠ»ΠΈ ΠΊΠ»Π°Π²ΠΈΡΠ° Tab, ΠΎΡΡΡΡΠΏ Π²ΠΏΡΠ°Π²ΠΎ.
Ctrl + [ΠΈΠ»ΠΈ Shift + Tab, ΠΎΡΡΡΡΠΏ Π²Π»Π΅Π²ΠΎ.
Ctrl + Shift + V, ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΠΎΡΡΡΡΠΏ ΠΏΡΠΈ Π²ΡΡΠ°Π²ΠΊΠ΅.
Alt + F3, Π²ΡΠ΄Π΅Π»ΠΈΡΠ΅ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ.
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ — Scotch.io
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΠΌΠΌΠ΅Ρ?
Π‘ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Emmet: Β«Emmet — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΡΡΡΠ°Π΅Ρ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ HTML ΠΈ CSSΒ». ΠΠΎΡΠΎΡΠΊΠΎ ΠΈ ΠΏΠΎ Π΄Π΅Π»Ρ. Emmet ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΡΠΈΡΡ Π²Π°Ρ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ°ΠΉΡΠΎΠ². Emmet ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π½ΡΡΠ΅ Π½Π°Π·ΡΠ²Π°Π»ΡΡ Zen Coding Π΄Π»Ρ ΡΠ΅Ρ ΠΈΠ· Π²Π°Ρ, ΠΊΠΎΠΌΡ Π·Π½Π°ΠΊΠΎΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅!
ΠΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΠΊΠΎΠ½Π΅Ρ ΡΡΠΎΠΉ ΡΡΡΠΎΠΊΠΈ ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΡ
. ΠΠ΅Π³ΠΊΠΈΠΉ ΡΡΡ!
Bonus : Π½Π°ΠΆΠΌΠΈΡΠ΅ tab
Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ HTML-ΠΊΠΎΠ΄, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Emmet.
ul.my-list> li * 3> a.item $
Emmet ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² ΠΎΡ Sublime Text (Π½Π°Ρ Π»ΡΠ±ΠΈΠΌΡΠΉ) Π΄ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Ace. ΠΡ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Emmet Π² Sublime, Π½ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π²ΠΎ Π²ΡΠ΅Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΡ .
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Emmet
Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Emmet, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΡ Emmet Github Available Actions. ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ ΠΠΌΠΌΠ΅ΡΠ° (ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΠ΅ΡΡ Π² ΡΠ°ΠΉΠ»Π΅ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° HTML):
- ΠΠΊΠ»Π°Π΄ΠΊΠ° Π Π°Π·Π²Π΅ΡΠ½ΠΈΡΠ΅ : Π²Π²Π΅Π΄ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄ Emmet ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΡ
- ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ :
ctrl
+alt
+Π²Π²Π΅Π΄ΠΈΡΠ΅
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΡΠ°Π·Π²Π΅ΡΠ½Π΅ΡΠ΅ ΠΊΠΎΠ΄, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΆΠ°ΡΡ , Π²ΠΊΠ»Π°Π΄ΠΊΡ
ΠΈ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉ HTML-ΠΊΠΎΠ΄ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ°ΡΡΡΠΌ, ΡΡΠ΅Π±ΡΡΡΠΈΠΌ Π²Π²ΠΎΠ΄Π°.ΠΡΠΎ ΠΎΡΠ΅Π½Ρ Π±ΡΡΡΡΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ HTML.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Emmet ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΡΡΡΡΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ Π½Π°Ρ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ ΡΠ΅Π±Ρ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΡΡΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅ΡΡ ΡΠ°ΠΉΡ.
Π§ΡΠΎ ΠΌΡ ΡΡΡΠΎΠΈΠΌ
ΠΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ 4 ΡΠ°Π·Π½ΡΡ ΡΠ°Π·Π΄Π΅Π»Π° , ΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π΄Π΅Π»ΠΎ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ Emmet.
ΠΠ·ΡΡΠΈΡΠ΅ Tailwind CSS Ρ Π½ΡΠ»Ρ- Basic HTML Foundation (Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ HTML ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ)
- ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ (Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ΅ΠΊΡΡ, ΡΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ)
- Jumbotron (Π±ΡΠ°ΡΡΡ ΠΈ ΡΠ΅ΡΡΡΡ)
- ΠΠ²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ (Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠ°)
HTML
ΠΠ±ΡΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π²ΡΡ ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΉΡΠΈ ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π²Π΅ΡΡ HTML ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. Π₯ΠΎΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π² ΡΡΠΎΠΌ Π½Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ ΡΡΡΠ°ΡΠ½ΠΎΠ³ΠΎ, ΠΌΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π΄ΡΠΌΠ°ΡΡ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°, ΡΡΠΊΠΎΠ½ΠΎΠΌΠ»Π΅Π½Π½Π°Ρ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ, ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. Π ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ², ΠΌΡ Π²ΡΠ΅ ΡΡΠ°ΡΠ°Π΅ΠΌΡΡ Π±ΡΡΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ, Π²Π΅ΡΠ½ΠΎ?
ΠΡΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π° Bootstrap 3.
ΠΠ΅Π·ΡΠΌΠ½ΠΎ Π±ΡΡΡΡΡΠΉ HTML
ΠΠ΅Π·ΡΠΌΠ½ΠΎ Π±ΡΡΡΡΡΠΉ HTML
ΠΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ Π»Π΅Π², ΠΏΡΠ΅ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π³Π°Π·Π΅Π»Ρ.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅β¦
ΠΡΠ²Ρ
ΠΡΠ΅Π½Ρ Π±ΡΡΡΡΠΎ. ΠΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π³ΠΎΠ»ΠΎΠ΄Π΅Π½.
ΠΠΌΠΌΠ΅Ρ
ΠΡΠ΅ Π±ΡΡΡΡΠ΅Π΅.ΠΡΠΎΠ±Π΅Π½Π½ΠΎ Π² ΡΡΠΊΠ°Ρ
ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°.
ΠΡ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΠΈ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Emmet Ρ ΡΠΎΠ»ΡΠΊΠΎ 1 ΡΡΡΠΎΠΊΠΎΠΉ .
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ Π½Π°Ρ Ρ ΡΠ΅ΠΌ-ΡΠΎ Π½ΠΎΠ²ΡΠΌ, ΡΡΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π°ΠΌ ΠΠΌΠΌΠ΅Ρ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Emmet ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΠΈ, ΠΊΠ°ΠΊ Π΄Π΅ΡΠ΅ΠΉ , Π±ΡΠ°ΡΡΠ΅Π² ΠΈ ΡΠ΅ΡΡΠ΅Ρ , ΡΠ΅ΠΊΡΡ , Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΈΡΠ»Π° ΠΈ Π΄Π°ΠΆΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ .
ΠΠ°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ HTML Ρ ΠΏΠΎΠΌΠΎΡΡΡ Emmet
HTML Starter
(ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ, Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ) Emmet ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ, ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠΈΠ΅ Π½Π° ΡΠ½ΠΈΠΏΠΏΠ΅ΡΡ. ΠΡΠΎΡΡΠΎ Π²Π²Π΅Π΄ΠΈΡΠ΅ html: 5
ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΡ
, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΡΡΡΠΈΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ HTML 5.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅!
ΠΠ²Π΅Π΄ΠΈΡΠ΅
html: 5
ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΡ- ΠΠΎΡΠ»Π΅
Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π°ΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° Bootstrap, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ: link [rel = «stylesheet» href = «// netdna.ul.nav.navbar-nav> li.menu — $ 3ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ ΡΡΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΎΡΠ²ΠΎΠΈΡΠ΅ ΠΊΠΎΠ΄ Emmet, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠ»Π΅ΡΠ΅ΡΡ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ½ΠΎ.
Jumbotron
(Π±ΡΠ°ΡΡΡ ΠΈ ΡΠ΅ΡΡΡΡ)ΠΠ°ΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΡΠΎΠΊΡΡΠΎΠΌ Π·Π΄Π΅ΡΡ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ° Π±ΡΠ°ΡΡΠ΅Π² ΠΈ ΡΠ΅ΡΡΠ΅Ρ (
+
). ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ.div.jumbotron.text-center> h2 + p + a # go-button.btn.btn-dangerous
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠ°Ρ
(Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠ°)Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΡ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π½Π° Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠ΅
()
.ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°Π·Π΄Π΅Π»Ρ ΠΊΠΎΠ΄Π° Π²ΠΌΠ΅ΡΡΠ΅.div.row.text-center> (div.col-sm-4> div.info-box> span.glyphicon.glyphicon-fire + h3 {Lions} + p) + (div. col-sm-8> div .info-box> span.glyphicon.glyphicon-send + h3 {Emmet} + p)
.ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠΎΡ ΡΠ°ΠΊ, Ρ Π½Π°Ρ Π΅ΡΡΡ Π²ΡΡ HTML-ΡΡΡΠ°Π½ΠΈΡΠ° Π²ΡΠ΅Π³ΠΎ Π·Π° 5 ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° . ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΡΠΎ Π±ΡΠ»ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π΄Π°ΠΆΠ΅ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ ΡΡΠΎ Π΄ΠΎ 1 ΡΡΡΠΎΡΠΊΠΈ!
ΠΠΎΠ½ΡΡ!
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ Π² 1 ΡΡΡΠΎΠΊΡ.
html: 5> div.container> (nav.navbar.navbar-inverse> div.navbar-header> a.navbar-brand {Crazy Fast} + ul.nav.navbar-nav> li * 2> a.menu- $ {ΠΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ $}) + (div.jumbotron.text-center> h2 {ΠΠ΅Π·ΡΠΌΠ½ΠΎ Π±ΡΡΡΡΡΠΉ HTML} + p + a # go-button.btn.btn-dangerous {ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅β¦}) + (div.row.text- ΡΠ΅Π½ΡΡ> (div.col-sm-4> div.info-box> span.glyphicon.glyphicon-fire + h3 {Lions} + p) + (div.col-sm-8> div.info-box> span. glyphicon.glyphicon-send + h3 {Emmmet} + p))
ΠΠ²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΏΠ΅ΡΠ΅Π΄
ΠΡΠΎ Π»ΠΈΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ³ΠΎ, Π½Π° ΡΡΠΎ ΡΠΏΠΎΡΠΎΠ±Π΅Π½ ΠΠΌΠΌΠ΅Ρ.Π Π½Π΅ΠΌ Π΄Π°ΠΆΠ΅ Π΅ΡΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ CSS. Π― Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΡΠΏΠ°ΡΠ³Π°Π»ΠΊΡ Emmet Cheat Sheet, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΡΠ²ΡΡΠ²ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ.
ΠΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ° ΡΡΠ°ΡΡΡ? ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° @chris__sev Π² Twitter
ΠΠ°ΠΊ ΠΏΠΈΡΠ°ΡΡ ΡΠ²Π΅ΡΡ Π±ΡΡΡΡΡΠΉ HTML Ρ ΠΏΠΎΠΌΠΎΡΡΡ Sublime
ΠΠ°ΠΊ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΠΌΡ Π²ΡΠ΅Π³Π΄Π° ΡΡΠ°ΡΠ°Π΅ΠΌΡΡ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π½Π°ΠΌ Π² ΡΡΠΎΠΌ.
ΠΡΠ»ΠΈ Π²Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ΅Ρ , ΠΊΡΠΎ ΠΏΠΈΡΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ HTML ΠΈ CSS, ΡΠΎ ΡΡΠΎΡ ΠΏΠΎΡΡ Π΄Π»Ρ Π²Π°Ρ.
ΠΠΎ ΡΡΡΠΈ, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Ρ ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠ΄Π°, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. Π ΡΠ½ΠΈΠΏΠΏΠ΅ΡΡ — ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ²ΡΡΠΈΡΡ Π²Π°ΡΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΠ²Π½ΠΎΡΡΡ. Π£ Π²ΡΠ΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΉ Π΅ΡΡΡ ΠΎΠ±ΡΠΈΠ΅ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½ΡΠ΅ ΠΊΠ°ΠΌΠ½ΠΈ: ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ½ΠΈΠΏΠΏΠ΅Ρ, ΠΈ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΠΈΡΡΡΡ ΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
Π£ Π²ΡΠ΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΉ Π΅ΡΡΡ ΠΎΠ±ΡΠΈΠ΅ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½ΡΠ΅ ΠΊΠ°ΠΌΠ½ΠΈ: ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ½ΠΈΠΏΠΏΠ΅Ρ, ΠΈ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΠΈΡΡΡΡ ΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
Emmet Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΠΈΠ΄Π΅Ρ ΡΠ½ΠΈΠΏΠΏΠ΅ΡΠΎΠ² Π½Π° ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π²ΠΎΠ΄ΠΈΡΡ CSS-ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ Π°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ, ΠΈ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²Ρ Π²Π²ΠΎΠ΄ΠΈΡΠ΅ Π² ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠΈ.
Emmet ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ ΠΈ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ HTML / XML ΠΈ CSS, Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Ρ ΡΠ·ΡΠΊΠ°ΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ·Π½Π°Π΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΠΎΠ²Π΅ΡΠΎΠ² ΠΏΠΎ Π±ΡΡΡΡΠΎΠΌΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ HTML Ρ ΠΏΠΎΠΌΠΎΡΡΡ Emmet.
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Sublime Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°, Π½ΠΎ Emmet ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄ΡΡΠ³ΠΈΡ Π²ΡΠΏΡΡΠΊΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Adobe DreamWeaver, TextMate, Eclipse ΠΈ Notepad ++.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Emmet
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ ΠΠΌΠΌΠ΅Ρ ΠΎΡΡΡΠ΄Π°.ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Sublime text, ΠΊΠ°ΠΊ Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΅Π³ΠΎ ΠΏΡΡΠΌΠΎ ΠΈΠ· ΡΡΡΠ°Π½ΠΎΠ²ΡΠΈΠΊΠ° ΠΏΠ°ΠΊΠ΅ΡΠ° Sublime.
Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π»ΡΠ±ΠΎΠΉ ΠΏΠ°ΠΊΠ΅Ρ Sublime, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΡΠΈΠΊ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ². ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² Tools -> Install Package Control ΠΈ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡ, ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ. ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ½ΠΎΠ²Π° Π·Π°ΠΊΠΎΠ½ΡΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ T ools-> command palette ΠΈ Π½Π°ΠΉΠ΄ΠΈΡΠ΅ Install Package.
ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Β«Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ°ΠΊΠ΅ΡΒ», Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠΊΠ½Π° Sublime, ΠΈ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠΈΡΠΊΠ°.ΠΠ΄Π΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π»ΡΠ±ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Sublime. ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ Β«ΠΠΌΠΌΠ΅ΡΒ» ΠΈ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ.
ΠΠ ΠΠΠΠ§ΠΠΠΠ- Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ ΠΊΠ»Π°Π²ΠΈΡΠ° Tab ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ°ΡΠΊΡΡΡΠΈΡ ΡΠ΅Π³ΠΎΠ². ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ.
1. ΠΠ°Π·ΠΎΠ²ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ HTML
Π§ΡΠΎ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Π½Π°ΡΠ½Π΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ HTML-ΠΏΡΠΎΠ΅ΠΊΡ. ΠΡ ΠΏΠΈΡΠ΅ΡΠ΅ ΡΠ°ΠΌ ΠΊΠΎΠ΄ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΊΠΎΠΏΠΈΡΡΠ΅ΡΠ΅ Π΅Π³ΠΎ ΠΎΡΠΊΡΠ΄Π° ΡΠ³ΠΎΠ΄Π½ΠΎ. ΠΠΎ Emmet ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π»Π΅Π³ΠΊΠΎ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π±Π°Π·ΠΎΠ²ΡΡ ΡΡΡΡΠΊΡΡΡΡ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΏΡΠΎΡΡΠΎ Π½Π°Π±ΡΠ°Π²! (ΠΠΎΡΠΊΠ»ΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π½Π°ΠΊ) + Tab ΠΈΠ»ΠΈ doc + Tab ΠΈΠ»ΠΈ HTML: 4t + Tab ΠΈ HTML doc Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π΄ Π²Π°ΠΌΠΈ
2. ΠΠ°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠ΅Π³Π° HTML
Π§ΡΠΎΠ±Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ HTML, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΡΠ΅Π³Π° div, ΠΌΡ ΠΏΡΠΎΡΡΠΎ Π½Π°Π±ΠΈΡΠ°Π΅ΠΌ div ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡΡ Tab. ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ΅Π³Π°.
3. ΠΠ°Π·Π½Π°ΡΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°ΡΠΈΡΡ Π»ΡΠ±ΠΎΠΉ Π°ΡΡΠΈΠ±ΡΡ, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ class, id, src ΠΈ Ρ. Π., ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Emmet-
ΠΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ Id ΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ # ΠΈΠ»ΠΈ.ΠΊΠ°ΠΊ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π² CSS.
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΡΡΠΎ Π½Π°Π±Π΅ΡΠ΅ΡΠ΅ #firstdiv, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π²Π²Π΅Π΄ΠΈΡΠ΅ section # firstelement
.ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΎΠΉ Π°ΡΡΠΈΠ±ΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠΊΠΎΠ±ΠΊΠ°Ρ []. ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ Π°ΡΡΠΈΠ±ΡΡ src ΡΠ΅Π³Ρ img, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΠΏΠΈΡΠ°ΡΡ
4. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π ΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΡΡΠΎΠ²Π½Π΅ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ.ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊΠΎΠ² ΠΈΠ»ΠΈ ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ + ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
5. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° / Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅
Emmet ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ CSS, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΠ±ΡΠ°ΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π½Π°ΠΊΠ°>. Π Emmet ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΎΡ ΠΆΠ΅ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
6. ΠΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠ°
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ»ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΡΠΎΠ³ΠΎ, ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π² ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ().
7.Π£ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·, ΡΡΠΎ Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎ Π·Π½Π°ΠΊΠΎΠΌ Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠΈ *.
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠΎΠ·Π΄Π°ΡΡ 6 div Ρ class = βmainβ, ΠΌΡ ΠΏΡΠΎΡΡΠΎ Π½Π°Π±ΠΈΡΠ°Π΅ΠΌ — .main * 6
8. ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΡ
ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π΄ΡΡΠ³ΠΎΠ΅ ΠΈΠΌΡ Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΡΠΈΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π½ΠΎΠΌΠ΅ΡΠ°. ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ — Π·Π½Π°ΠΊ Π΄ΠΎΠ»Π»Π°ΡΠ° $.
Π’Π°ΠΊΠΆΠ΅ ΡΠΈΡΠ°ΡΡ:
Essential Sublime Text Plugins Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
9.Π€ΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΠΏΠΈΡΡΡ ΠΈΠ· lorem ΠΈΠ»ΠΈ lipsum, ΠΈΠ»ΠΈ ΠΈΠ· Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎΠ³ΠΎ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Emmet. ΠΠΌΠΌΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π²Π°Ρ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ lorem ipsum. ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΠΏΠΈΡΠ΅ΠΌ lorem. ΠΠ½ Π±ΡΠ΄Π΅Ρ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡ 5 Π΄ΠΎ 7 ΡΡΡΠΎΠΊ ΡΠ΅ΠΊΡΡΠ° Ipsum.
Π Emmet ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΊΠ°Π·Π°ΡΡ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»ΠΎΠ² Π½ΡΠΆΠ½ΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ. Π‘ΠΊΠ°ΠΆΠΈΡΠ΅, 7, Π·Π°ΡΠ΅ΠΌ Π²Π²Π΅Π΄ΠΈΡΠ΅ lorem7
10. Π―ΡΠ»ΡΠΊ ΡΡΡΠ»ΠΊΠΈ
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π·Π½Π°ΡΠΎΠΊ, rss ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ°ΠΉΠ» CSS, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ²ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»ΠΎΠ²ΠΊΠΈ ΡΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π΄Π»Ρ ΠΈΡ Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠΎΠ³ΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ.
- Π§ΡΠΎΠ±Ρ Π²ΡΡΠ°Π²ΠΈΡΡ css-ΡΡΡΠ»ΠΊΡ: css
- Π§ΡΠΎΠ±Ρ Π²ΡΡΠ°Π²ΠΈΡΡ favicon- ΡΡΡΠ»ΠΊΡ: favicon
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Emmet — Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΡΡΡΠ΄Π½ΠΎΡΡΡΠΌΠΈ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅, Π½ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π²ΠΎΠ·ΡΠΌΠ΅ΡΠ΅ Π΅Π³ΠΎ Π² ΡΡΠΊΠΈ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ²ΡΡΠΈΡΡ Π²Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ. ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΈΡΠ°ΡΡ HTML ΠΈ CSS Π±ΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅.
ΠΡΠ΄ΠΈ Π’Π°ΠΊΠΆΠ΅ ΡΠΈΡΠ°ΡΡΠΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Emmet Π² Sublime text — Keksus
ΠΡΠΏΠΎΠ»Π½ΠΈΡΡ Π² Sublime menu Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ: Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ°ΠΊΠ΅Ρ , Π²Π²Π΅Π΄ΠΈΡΠ΅ Emmet ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ.
Π‘Π½Π°ΡΠ°Π»Π° Π²Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΠΎΠ΄ Π² ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ Emmet , ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π½Π°ΠΆΠΌΠΈΡΠ΅ Tab Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.ul.nav
li {Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ} * 2
- ΡΠ΅ΠΊΡΡ
- ΡΠ΅ΠΊΡΡ
- Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ
- Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ
- ΡΠ΅ΠΊΡΡ
- ΡΠ΅ΠΊΡΡ
- Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ
- Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ
- ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ
- ΡΠ΅ΠΊΡΡ
- ΡΠ΅ΠΊΡΡ
- ΡΠ΅ΠΊΡΡ
- ΡΠ΅ΠΊΡΡ
- Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ
- Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ
- Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ
- Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°
ΡΠ».nav> li {Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ} * 2
a {ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ}
a [href = #] {ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ}
li> a [href = #] {ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ} * 3
ΡΠ». nav> li * 3> a [href = #] {ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ $}
.menu> ul.nav> li * 3> a [href = #] {ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ $}
. ΠΌΠ΅Π½Ρ> .ΠΏΠ΅ΡΠ²ΡΠΉ + .Π²ΡΠΎΡΠΎΠΉ
.ΠΌΠ΅Π½Ρ> .Π±Π»ΠΎΠΊ * 2
.menu> .block * 2> li {Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ} * 2
. menu> .block * 2> ul.nav> li * 3> a [href = #] {ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ $}
25 ΡΠΎΠ²Π΅ΡΠΎΠ², ΠΏΡΠΈΠ΅ΠΌΠΎΠ² ΠΈ ΡΡΠ»ΡΠΊΠΎΠ²
Sublime Text 3 (ST3) — ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ, ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΡΠΈΠΊΠ°ΠΌΠΈ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°ΠΌΠΈ. ΠΠ½ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π΄Π»Ρ Mac, Windows ΠΈ Linux, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΠ·Π²Π»Π΅ΠΊΠΈΡΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΡΠ·Ρ ΠΈΠ· ST3 Ρ 25 ΡΠΎΠ²Π΅ΡΠ°ΠΌΠΈ ΠΈ ΠΏΡΠΈΠ΅ΠΌΠ°ΠΌΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌΠΈΡΡ Π² ΡΡΠΎΠΌ ΠΏΠΎΠ»Π½ΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². Π£Π·Π½Π°ΠΉΡΠ΅ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Sublime Text 3, Π½ΠΎ ΠΈ ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΠΏΠ°ΠΊΠ΅ΡΠ°Ρ , ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡΡ ΠΊΠ»Π°Π²ΠΈΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΌ Π΄ΡΡΠ³ΠΎΠΌ.
1. ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ST3 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΆΠ΅ΡΡΠΊΠΈΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π΄Π»ΠΈΠ½ΠΎΠΉ 4 ΡΠΈΠΌΠ²ΠΎΠ»Π°. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ΄Π½ΠΎΡΠΈΡΠ°Π΅ΠΌΡΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΡΠΌΠ΅ΡΠ°ΡΡ Π²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ Π²ΠΏΡΠ°Π²ΠΎ.Π― ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π²ΡΠ΅ΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎ Π² ΡΠ²ΠΎΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ (
Sublime Text 3 => Preferences => Settings - User
):{ "draw_white_space": "Π²ΡΠ΅", "ΠΏΡΠ°Π²ΠΈΡΠ΅Π»ΠΈ": [80], "tab_size": 2, "translate_tabs_to_spaces": true }
ΠΡΠΎΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΠΆΠ΅ΡΡΠΊΠΈΠ΅ ΡΠ°Π±ΡΠ»ΡΡΠΈΠΈ Π² ΠΏΡΠΎΠ±Π΅Π»Ρ, Π΄Π΅Π»Π°Π΅Ρ ΠΎΡΡΡΡΠΏΡ Π΄Π»ΠΈΠ½ΠΎΠΉ Π²ΡΠ΅Π³ΠΎ Π΄Π²Π° ΡΠΈΠΌΠ²ΠΎΠ»Π°, ΠΏΠΎΠΌΠ΅ΡΠ°Π΅Ρ Π»ΠΈΠ½Π΅ΠΉΠΊΡ Π½Π° ΠΎΡΠΌΠ΅ΡΠΊΡ 80 ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² (ΡΡΠΎΠ±Ρ Π½Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ Π²Π°ΠΌ, ΡΡΠΎ ΠΊΠΎΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΊΡΠ°ΡΠΊΠΈΠΌ) ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΌΠ°ΡΠΊΠ΅ΡΡ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ². ΠΠΎΡ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΡΡΠ΅Π΄Ρ ST3.
2. ΠΠ°Π½Π΅Π»Ρ ΠΊΠΎΠΌΠ°Π½Π΄
ΠΠ°Π»ΠΈΡΡΠ° ΠΊΠΎΠΌΠ°Π½Π΄ST3 ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΠΎΡΠΊΡΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π°), Π½Π΅ ΡΠ½ΠΈΠΌΠ°Ρ ΠΏΠ°Π»ΡΡΠ° Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ. Π₯ΠΎΡΡ ΠΏΠ°Π»ΠΈΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΡΡΠΈ ΡΠ΅ΡΠ΅Π·
Tool => Command Palette
, Π»ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ Command Palette — ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡCTRL / β-SHIFT-P
.Π‘Π½ΠΈΠΌΠΎΠΊ ΡΠΊΡΠ°Π½Π° ΠΏΠ°Π»ΠΈΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄ Π² Sublime Text 3
3.ΠΠ°Π½Π΅Π»ΠΈ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈ ΡΡΡΠΎΠΊ
Π―Π²Π»ΡΠ΅ΡΠ΅ΡΡ Π»ΠΈ Π²Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΠ²Π½ΡΠΌ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΡΠΈΠΊΠΎΠΌ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΎΡΠΊΡΡΡΡΠΌΠΈ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ? ST3, ΠΊΠ°ΠΊ ΠΈ Π»ΡΠ±ΠΎΠΉ Ρ ΠΎΡΠΎΡΠΈΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ Π²ΠΈΠ΄Π΅ΡΡ ΠΎΡΠΊΡΡΡΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΡΡΠ΄ΠΎΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°ΠΉΠ»ΠΎΠΌ HTML ΠΈ Π΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ CSS:
ΠΠ»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄Π²ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² (Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ) Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠ»ΡΠΊ
ALT-UP-2
(ΠΠ) ΠΈΠ»ΠΈOPTION-β-2
(Mac). ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΡΡΠΈΡ Π½Π° Β«3Β» ΠΈΠ»ΠΈ Β«4Β», ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΡΡΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Β«5Β» Π΄Π°Π΅Ρ ΡΠ΅ΡΠΊΡ ΠΈΠ· 4 ΠΏΠ°Π½Π΅Π»Π΅ΠΉ.ΠΠ»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄Π²ΡΡ ΡΡΠ΄Π½ΡΡ (Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ) ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΡΡΠ΄ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠ»ΡΠΊ
SHIFT-ALT-UP-2
(ΠΠ) ΠΈΠ»ΠΈSHIFT-OPTION-β-2
(Mac). ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΡΡΠΈΡ Π½Π° Β«3Β», ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.Π‘ΡΠΎΠ»Π±Π΅Ρ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΏΠΎΠΏΠΎΠ»Π°ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΈΠ·Π½Π°ΠΊΠ° Π³ΡΡΠΏΠΏΡ ST3
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π΄Π°Π»ΡΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ ST3 Β«ΠΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡΒ». ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
CTRL-K, SHIFT-CTRL-UP
(ΠΠ) ΠΈΠ»ΠΈβ-K, SHIFT-β-UP
(Mac), ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ Π³ΡΡΠΏΠΏΡ Π²Π½ΡΡΡΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ.4. ΠΠ°ΠΊΠ΅ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ
ST3 ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΡΠ½ΠΊΡΠΈΠΉ Β«ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈΒ», Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΠΈΡΠΈΡΡ Π΅Π³ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Β«ΠΏΠ°ΠΊΠ΅ΡΠΎΠ²Β» — ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎΠΌ ST3. Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΠΈ ΠΏΠ°ΠΊΠ΅ΡΡ — ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Package Control. Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Package Control Π½Π° ST3, ΡΠ»Π΅Π΄ΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΠΌ ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Package Control.
ΠΡΠ»ΠΈ Package Control ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΡΡΠΏΠ΅ΡΠ½ΠΎ, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΊΠ°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Package Control Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄ (
CTRL / β-SHIFT-P
):ΠΠΎΡΡΡΠΏ ΠΊ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ ΠΈΠ· ΠΏΠ°Π»ΠΈΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄
ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ Sublime Text 3
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΡΠΈ ΠΏΠ°ΠΊΠ΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Package Control, ΠΎΡΠΊΡΡΠ² ΠΏΠ°Π½Π΅Π»Ρ ΠΊΠΎΠΌΠ°Π½Π΄ (CTRL / β-SHIFT-P), Π²ΡΠ±ΡΠ°Π² Β«Package Control: Install PackageΒ» ΠΈ Π²ΡΠΏΠΎΠ»Π½ΠΈΠ² ΠΏΠΎΠΈΡΠΊ ΠΏΠ°ΠΊΠ΅ΡΠ° ΠΏΠΎ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ.
5. Π£Π»ΡΡΡΠ΅Π½ΠΈΡ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
Sidebar Enhancements ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ST3, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ ΠΈ ΠΏΠ°ΠΏΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΡΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈΠ· ΠΏΠ°Π»ΠΈΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ°.
Π Π°ΡΡΠΈΡΠ΅Π½Π½Π°Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
6. ΠΠΌΠΌΠ΅Ρ
Emmet Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ HTML Π·Π° ΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ»ΡΠΊΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² CSS. Π§ΡΠΎ ΡΡΠΎ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ? Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ ΡΠ°ΠΌΠΈ Π² Π³ΠΈΡΠΊΠ΅ Π½ΠΈΠΆΠ΅:
ΠΠΌΠΌΠ΅Ρ Π½Π΅ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° HTML-ΡΠ΅Π³Π°Ρ , ΠΊΠ»Π°ΡΡΠ°Ρ ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°Ρ . Π’Π΅ΠΊΡΡ Lorem ipsum — ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ. Π§Π°ΡΡΠΎ ΠΎΠ½ΠΈ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΡ lorem ipsum, Π½ΠΎ Ρ ΠΠΌΠΌΠ΅ΡΠΎΠΌ ΠΏΡΠΎΡΡΠΎ Π²Π²Π΅Π΄ΠΈΡΠ΅lorem
ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Tab. Π₯ΠΎΡΠΈΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ»ΠΎΠ²-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Π΅ΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 100 ΡΠ»ΠΎΠ² lorem ipsum)? ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅lorem100
.Emmet ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° CSS. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠ΅ΡΠΈΠΊΡΡ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠΎΠ² CSS Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΡΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ Emmet ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅
-bdrs
Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ°Π΄ΠΈΡΡΠ° Π³ΡΠ°Π½ΠΈΡΡ:7. Git
ΠΠ°ΠΊΠ΅Ρ Git ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Git (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ,Π³ΡΠ°ΠΌΠΌ. Β«Git DiffΒ» ΠΈΠ»ΠΈ Β«Git BlameΒ») ΠΏΡΡΠΌΠΎ ΠΈΠ· ΠΏΠ°Π»ΠΈΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄ ST3.
ΠΠ΅ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Git ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ? ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π²Π²ΠΎΠ΄Π½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ»ΠΈΠΊ General Assembly
Β«ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ Git ΠΈ GithubΒ».8. GitGutter
GitGutter ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π΅Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΡΡΠ΄ΠΎΠΌ Ρ Π½ΠΎΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΡΡΠΎΠΊ ST3:
9. SASS
ST3 Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° SASS ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ², Π½ΠΎ ΠΏΠ°ΠΊΠ΅Ρ ST3 SASS Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΡ . ΠΠ°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΡΠ½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠΎΠ² Π½Π° Ruby on Rails:
10. ΠΡΡΡΠ΅ CoffeeScript
Π’Π°ΠΊΠΆΠ΅ Π½Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ CoffeeScript Π² ST3, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎΡ ΠΏΠ°ΠΊΠ΅Ρ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΡΠΎΡ ΠΏΡΠΎΠ±Π΅Π»:
11. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ OSX
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Mac ΠΈ ΡΠ΅ΡΠΌΠΈΠ½Π°Π», ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Sublime ΡΠ°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ
subl
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΏΡΡΠΌΠΎ ΠΈΠ· ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Π°.ΠΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Π΅, ΡΡΠΎΠ±Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΠΎΡ ΡΡΠ»ΡΠΊ:ln -s "/ Applications / Sublime Text.app/Contents/SharedSupport/bin/subl" ~ / bin / subl
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Homebrew ΠΈΠ»ΠΈ
/ usr / local / bin
Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π²Π°ΡΠ΅ΠΌ $ PATH, ΠΊΠΎΠΌΠ°Π½Π΄Π° Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ°:ln -s "/ Applications / Sublime Text.app/Contents/SharedSupport/bin/subl" / usr / local / bin / subl
Π‘ΠΎΡΠ΅ΡΠ°Π½ΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ
ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΡ Π² ST3 ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡ Π²Π°Ρ ΠΈΠ· ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Sublime Π² ΡΠΊΡΠΏΠ΅ΡΡΠ° ΠΏΠΎ Sublime. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π²ΠΎΡΠΈΡΠΎΠ²:
12. ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΎΡΠΎΠ²
ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΡΡΡΠΎΡΡ — ΠΎΡΠ»ΠΈΡΠ½Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ Sublime Text. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ Π½Π°Π±ΠΈΡΠ°ΡΡ ΡΠ΅ΠΊΡΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΌΠ΅ΡΡΠ°Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΡΠΊΠΎΠ½ΠΎΠΌΡ Π²ΡΠ΅ΠΌΡ Π½Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ. Π§ΡΠΎΠ±Ρ Π²ΡΠ·Π²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΎΡΠΎΠ², Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»ΠΎΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡ, ΠΈ Π½Π°ΠΆΠΈΠΌΠ°ΠΉΡΠ΅
CTRL / β-D
, ΠΏΠΎΠΊΠ° Π½Π΅ Π²ΡΠ±Π΅ΡΠ΅ΡΠ΅ Π²ΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΡΠ»ΠΎΠ²Π°. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΎΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡCTRL / β-MOUSECLICK
Π²ΠΎ Π²ΡΠ΅Ρ ΠΌΠ΅ΡΡΠ°Ρ , Π³Π΄Π΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΊΡΡΡΠΎΡ.13.ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΡΠ΅ΠΌΡ-Π½ΠΈΠ±ΡΠ΄Ρ
ΠΠΎΠ΄ΠΎΠ±Π½ΠΎ ΠΏΠ°Π»ΠΈΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄, ST3 ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡ Goto Anything (ΠΏΡΠΎΠΈΠ·Π½ΠΎΡΠΈΡΡΡ ΠΊΠ°ΠΊ Β«ΠΏΠ΅ΡΠ΅ΠΉΡΠΈΒ»), ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΡΠ°ΠΉΠ»Ρ, ΡΡΡΠΎΠΊΠ΅ ΠΈΠ»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΌΠ΅ΡΠΎΠ΄Π°. ΠΡΠ·ΠΎΠ²ΠΈΡΠ΅ ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° Goto Anything Ρ ΠΏΠΎΠΌΠΎΡΡΡ
CTRL / β-P
. Π§ΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ, Π½Π°ΡΠ½ΠΈΡΠ΅ Π²Π²ΠΎΠ΄ΠΈΡΡ ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π½Π΅ΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΠΈΡΠΊ, ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΉ Π·Π°ΠΏΡΠΎΡ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΡΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈΠΌΠ΅Π½ΠΈ, ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π²Π²ΠΎΠ΄ΠΈΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ:14. ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΡΡΡΠΎΠΊΠ΅ Π² ΡΠ°ΠΉΠ»Π΅
Goto Anything — ΡΡΠΎ Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊ ΡΠ°ΠΉΠ»Ρ, ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π½Π°ΠΏΡΠ°Π²ΠΈΡΡ Π²Π°Ρ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π² ΡΠ°ΠΉΠ»Π΅.ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΡΡΡΠΎΠΊΠ΅ Π² Π½ΠΎΠ²ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅, ΠΏΡΠΎΡΡΠΎ Π²ΡΠ·ΠΎΠ²ΠΈΡΠ΅ Goto Anything ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅ Π΄Π²ΠΎΠ΅ΡΠΎΡΠΈΠ΅, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½ΠΎΠΌΠ΅Ρ ΡΡΡΠΎΠΊΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ,
: 18
Π΄Π»Ρ ΡΡΡΠΎΠΊΠΈ 18). Π§ΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΡΡΡΠΎΠΊΠ΅ Π² Π΄ΡΡΠ³ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅, Π²Π²Π΅Π΄ΠΈΡΠ΅ ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π°, Π·Π°ΡΠ΅ΠΌ Π΄Π²ΠΎΠ΅ΡΠΎΡΠΈΠ΅ ΠΈ Π½ΠΎΠΌΠ΅Ρ ΡΡΡΠΎΠΊΠΈ:15. ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π² ΡΠ°ΠΉΠ»Π΅
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ°, ΠΌΠ΅ΡΠΎΠ΄Π° ΠΈΠ»ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ Π² ΡΠ°ΠΉΠ»Π΅, Goto Anything ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΊ ΡΡΡΠΎΠΊΠ΅. ΠΠΌΠ΅ΡΡΠΎ Π΄Π²ΠΎΠ΅ΡΠΎΡΠΈΡ Goto Definition ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ
@
. ΠΡ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠΏΠΈΡΠΎΠΊ Π²ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π² Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΌ Π²Π°ΠΌΠΈ ΡΠ°ΠΉΠ»Π΅, ΠΈ, Π½Π°Π±ΡΠ°Π² ΠΈΠΌΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Π½Π°ΠΆΠ°Π² ENTER, Π²Ρ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΡΠ΅ ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ:16.Π Π΅ΠΆΠΈΠΌ Π±Π΅Π· ΠΎΡΠ²Π»Π΅ΠΊΠ°ΡΡΠΈΡ ΡΠ°ΠΊΡΠΎΡΠΎΠ²
ΠΠ½ΠΎΠ³Π΄Π° Π±ΡΡΡ ΡΠ°ΠΌΡΠΌ ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΠ²Π½ΡΠΌ ΠΊΠΎΠ΄Π΅ΡΠΎΠΌ ΠΈΠ»ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ Π²ΡΠ΅Ρ ΠΎΡΠ²Π»Π΅ΠΊΠ°ΡΡΠΈΡ ΡΠ°ΠΊΡΠΎΡΠΎΠ². ΠΠΈΠΊΠ°ΠΊΠΈΡ Π΄ΡΡΠ³ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΎΠΊΠΎΠ½, Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΠΈ ΠΌΠ΅Π½Ρ. ΠΡΠ΅Π²ΠΎΡΡ ΠΎΠ΄Π½ΡΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΠΆΠΈΠΌΠ° Π±Π΅Π· ΠΎΡΠ²Π»Π΅ΠΊΠ°ΡΡΠΈΡ ΡΠ°ΠΊΡΠΎΡΠΎΠ². ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ
SHIFT-F11
(ΠΠ) ΠΈΠ»ΠΈβ-CTRL-SHIFT-F
(Mac):17. Π‘ΠΊΡΡΡΡ / ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ
ΠΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠΎΠ»Π΅Π·Π½Π° Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π°ΡΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ ΡΡΡΡΠΊΡΡΡΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΎΠ², Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΌΠ΅ΡΡΠ° Π² ΠΎΠΊΠ½Π΅ Π΄Π»Ρ ΠΊΠΎΠ΄Π°.ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ
CTRL / β-K, CTRL / β-B
(Π² ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅) ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½Π° Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΎΡΠΊΡΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ»ΠΈ ΠΏΠ°ΠΏΠΊΠ°.18. ΠΡΡΡΡΠΎ ΠΏΡΠΎΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄
ΠΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΡΠΎΠ²Π΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄ ΠΈΠ»ΠΈ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅ΡΠ΅, ΠΊΠ°ΠΊ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ΄Π° Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ. Π§ΡΠΎΠ±Ρ Π±ΡΡΡΡΠΎ ΠΏΡΠΎΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ Π² ST3, Π²ΡΠ΄Π΅Π»ΠΈΡΠ΅ ΠΊΠΎΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
CTRL / β- /
. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Π²ΡΠ΄Π΅Π»ΡΠ΅ΡΠ΅ ΠΊΠΎΠ΄, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΠ»ΡΠΊΠ° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π° Π²ΡΡ ΡΡΡΠΎΠΊΠ°.ΠΡΠ±ΠΎΡ ΡΠ΅ΠΊΡΡΠ°
ΠΡ ΡΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠ»ΠΎΠ²ΠΎ (
CTRL / β-D
), Π½ΠΎ Π² ST3 Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΎΠΏΡΠΈΠΉ Π²ΡΠ±ΠΎΡΠ°.19. ΠΡΠ±ΠΎΡ Π²ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ
Π§ΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π²ΡΡ ΡΠ΅ΠΊΡΡΡΡ ΡΡΡΠΎΠΊΡ:
CTRL / β-L
.20. ΠΡΠ±ΠΎΡ ΠΊΠΎΠ΄Π° Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΎΡΡΡΡΠΏΠΎΠΌ
Π§ΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ Π²Π΅ΡΡ ΠΊΠΎΠ΄ Ρ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΠΎΡΡΡΡΠΏΠΎΠΌ:
CTRL / β-SHIFT-J
.21. ΠΡΠ±ΠΎΡ Π²ΡΠ΅Π³ΠΎ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³Π° HTML
Π§ΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π²ΡΠ΅ Π²Π½ΡΡΡΠΈ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π° HTML:
CTRL / β-SHIFT-A
22.ΠΡΡΡΡΡΠΉ ΠΎΡΡΡΡΠΏ
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΎΡΠΎΠ·Π½Π°ΡΡ Π²Π°ΠΆΠ½ΠΎΡΡΡ ΠΎΡΡΡΡΠΏΠΎΠ², ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ Π΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΠΊΠΎΠ΄ ΡΠ°Π·Π±ΠΎΡΡΠΈΠ²ΡΠΌ ΠΈ Π»Π΅Π³ΠΊΠΈΠΌ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΎΡΡΡΡΠΏ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
CTRL / β-]
. ΠΠ»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄ΡΡΠ³Π°Ρ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½Π°Ρ ΡΠΊΠΎΠ±ΠΊΠ° (CTRL / β- [
).23. ΠΡΡΠ°Π²ΠΊΠ° Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ
ΠΡΠ»ΠΈ Π²Ρ ΠΊΠΎΠΏΠΈΡΡΠ΅ΡΠ΅ / Π²ΡΡΠ΅Π·Π°Π΅ΡΠ΅ ΠΊΠΎΠ΄ Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ ΠΈ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΠΎΠ²Π΅Π½Ρ ΠΎΡΡΡΡΠΏΠ° ΠΏΡΠΈ Π²ΡΡΠ°Π²ΠΊΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
CTRL / β-Shift-V
Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ.24. ΠΠΎΠΌΠΌΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ
ΠΡ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΈΡΠ°Π»ΠΈ ΠΊΠΎΠ΄ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π½Π΅ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅? Π ST3 Π΅ΡΡΡ ΡΡΠ»ΡΠΊ Π΄Π»Ρ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π·Π°Π΄Π°Π½Π½ΡΡ ΡΡΡΠΎΠΊΡ Π²Π²Π΅ΡΡ ΠΈΠ»ΠΈ Π²Π½ΠΈΠ· Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
CTRL-SHIFT-UP
(ΠΠ) ΠΈΠ»ΠΈCTRL-β-UP
(Mac) ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ Π»ΠΈΠ½ΠΈΡ Π²Π²Π΅ΡΡ , Π°CTRL-SHIFT-DOWN
(ΠΠ) ΠΈΠ»ΠΈCTRL-β-DOWN
(Mac) ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ Π»ΠΈΠ½ΠΈΡ Π²Π²Π΅ΡΡ . Π»ΠΈΠ½ΠΈΡ Π²Π½ΠΈΠ·.25. Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠΎΠΊ
ΠΠ° ΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉ, ΠΊΠΎΠ³Π΄Π° ΡΡΡΠΎΠΊΠ° ΠΊΠΎΠ΄Π° Π½Π΅ Π²ΡΡΠ»Π° ΠΈΠ· ΡΡΡΠΎΡ, Π° Π΅Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π°Π»ΠΈΡΡ, Π² ST3 Π΅ΡΡΡ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΡΡΠ»ΡΠΊ Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΡΡΡΠΎΠΊ Π±Π΅Π· Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡ Π²ΡΡ ΡΡΡΠΎΠΊΡ.
CTRL-SHIFT-K
(ΠΠ ΠΈ Mac) ΡΠ΄Π°Π»ΠΈΡ ΡΠ΅ΠΊΡΡΡΡ ΡΡΡΠΎΠΊΡ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΊΡΡΡΠΎΡ.—
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΎΡΠ²ΠΎΠΈΠ»ΠΈ Sublime Text 3, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΡΡΡΡ Π½Π° Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΈ ΡΡΠ°ΡΡ Π»ΡΡΡΠΈΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡΠ΅ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠ²ΠΎΠ΄ΡΡ ΡΠΊΡΠΏΠ΅ΡΡΡ-ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ°ΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π±ΠΈΠ·Π½Π΅ΡΠ° ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ°ΡΠ½ΠΈΡΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠΌΠΌΠ΅ΡΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΊΡΡΡΠ° Β«ΠΠ½ΠΆΠ΅Π½Π΅ΡΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡΒ».Π£Π·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π½Π°ΡΠΈΡ ΠΊΡΡΡΠ°Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΡΠ°ΡΡΠΈ GA, ΠΏΡΠ΅Π΄ΡΡΠΎΡΡΠΈΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
ΠΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ emmet sublime text 2 3 windows
Emmet — ΡΡΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²Π°ΠΌ ΠΎΡΠ΅Π½Ρ Π±ΡΡΡΡΠΎ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ HTML ΠΈ CSS. Emmet Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² ΠΊΠΎΠ΄Π°. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Emmet Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΊΠΎΠ΄Π° SUblimeText ΠΈ Brackets.
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Brackets ΠΈΠ»ΠΈ SublimeText, ΡΠΊΠ°ΡΠ°ΠΉΡΠ΅ ΡΡΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΊΠΎΠ΄Π°.
Π‘ΠΊΠ°ΡΠ°ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π° SublimeText
Π‘ΠΊΠ°ΡΠ°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΡΠΊΠΎΠ±ΠΊΠΈ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π°
ΠΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΠΌΠΌΠ΅Ρ Π² ΡΠΊΠΎΠ±ΠΊΠΈ
ΠΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΌ Π·Π°ΠΏΡΡΠΊΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° ΠΊΠΎΠ΄Π° ΡΠΊΠΎΠ±ΠΎΠΊ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΊΡΠ°Π½.Π€Π°ΠΉΠ» index.html ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ «ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ» Π² ΡΠΊΠΎΠ±ΠΊΠ°Ρ . ΠΡΠΎ Ρ ΠΎΡΠΎΡΠΈΠΉ ΡΠ΅ΡΡΡΡ Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ HTML-ΡΠ΅Π³ΠΎΠ². Π ΡΡΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ HTML-ΡΠ΅Π³ΠΎΠ² Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π½Π°ΡΠΎΠΊ Extension Manager Π² ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ. ΠΠ΅ΡΠ²ΡΠΉ Π·Π½Π°ΡΠΎΠΊ. ΠΠ½Π°ΡΠΎΠΊ Live Preview. ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° Π·Π½Π°ΡΠΎΠΊ Live Preview, Π²Π°Ρ ΡΠ΅ΠΊΡΡΠΈΠΉ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ HTML-ΡΠ°ΠΉΠ» ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ HTML Π² ΡΠΊΠΎΠ±ΠΊΠ°Ρ ΠΈ Π²ΠΈΠ΄Π΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome.
ΠΡΠΊΡΠΎΠΉΡΠ΅ Extension Manager ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅ Emmet Π² ΠΏΠΎΠ»Π΅ ΠΏΠΎΠΈΡΠΊΠ°. ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Β«Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΒ», ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Emmet. ΠΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ HTML-ΡΠ°ΠΉΠ» ΠΈΠ»ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°ΠΉΠ» index.html Brackets.
Π£Π΄Π°Π»ΠΈΡΠ΅ Π²Π΅ΡΡ HTML-ΠΊΠΎΠ΄ ΠΈΠ· ΡΠ°ΠΉΠ»Π° index.html. Π²Π²Π΅Π΄ΠΈΡΠ΅
!
ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ»Π°Π²ΠΈΡΡ TAB, ΡΡΠΎΠ±Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ. ΠΠΎΡΠΊΠ»ΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π½Π°ΠΊ!
— ΡΡΠΎ Π±Π°Π·ΠΎΠ²Π°Ρ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ° ΠΠΌΠΌΠ΅ΡΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΠΌΠ΅ΡΠΊΠΈ Π΄Π»Ρ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.ΠΡΠ»ΠΈ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, ΠΊΠΎΠ³Π΄Π° Π½Π°Π±ΠΈΡΠ°Π΅ΡΠ΅
!
ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΡ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΡΡΠΏΠ΅ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Emmet Π² ΡΠΊΠΎΠ±ΠΊΠ°Ρ .ΠΡ ΡΠ·Π½Π°Π΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ± Emmet ΠΏΠΎΠ·ΠΆΠ΅, ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Emmet Π² SublimeText.
ΠΊΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Emmet Π² SublimeTex
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Emmet Π² SublimeText — ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠ»Π³ΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ. Π‘Π½Π°ΡΠ°Π»Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄ΠΈΡΠΏΠ΅ΡΡΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Π΄Π»Ρ SublimeText. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄ΠΈΡΠΏΠ΅ΡΡΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ: Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΊΠΎΠ΄ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΈΡΠΏΠ΅ΡΡΠ΅ΡΠ° ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² SublimeText ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π² SublimeText.
ΠΠΎΠ΄ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ Π΄Π»Ρ SublimeText Π²Π΅ΡΡΠΈΠΈ 2 ΠΈ 3. Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΊΠΎΠ΄ Π΄Π»Ρ Π²Π°ΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ, Π·Π°ΠΏΡΡΡΠΈΡΠ΅ SublimeText ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Ctrl + ` ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² View> Show Console .ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° Π²Π½ΠΈΠ·Ρ SublimeText. ΠΡΡΠ°Π²ΡΡΠ΅ ΡΡΠ΄Π° ΠΊΠΎΠ΄, Π½Π°ΠΆΠΌΠΈΡΠ΅ Enter, ΡΡΠΎΠ±Ρ Π·Π°Π²Π΅ΡΡΠΈΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ Π΄ΠΈΡΠΏΠ΅ΡΡΠ΅ΡΠ° ΠΏΠ°ΠΊΠ΅ΡΠΎΠ².
ΠΊΠΎΠ΄ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠΌ SublimeText
ΠΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΡΠ΅ SublimeText. ΠΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΠΊΠ° SublimeText ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² Β«ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈΒ»> Β«Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈΒ» ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Β«Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ°ΠΊΠ΅ΡΒ». ΠΠ°ΠΉΠ΄ΠΈΡΠ΅ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Emmet. ΠΠΎΡΠ»Π΅ ΡΡΠΏΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΠΏΠ΅Ρ Π°.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ½ΠΎΠ²Π° ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΡΡ SublimeText ΠΏΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Emmet.Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ» index.html ΠΈΠ»ΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ ΠΏΠ°ΠΏΠΊΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° HTML Π² SublimeText. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ SublimeText.
ΠΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ» index.html ΡΠΈΠΏΠ°
!
ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ. ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ HTML Π΄Π»Ρ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π’Π΅ΠΏΠ΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π°ΡΠ΅ΠΉ HTML-ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅.ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ Emmet
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Emmet Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΊΠΎΠ΄Π° HTML ΠΈ CSS ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΠ°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ. Π‘ Emmet Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΠΈ ΠΏΡΠΎΡΡΡΡ ΡΡΡΠΎΠΊΡ ΠΊΠΎΠ΄Π°, ΠΈΠ·Π²Π΅ΡΡΠ½ΡΡ ΠΊΠ°ΠΊ Emmet Abreviation, Π° Π·Π°ΡΠ΅ΠΌ Π½Π°ΠΆΠ°ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΡΠ²ΠΎΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅.
ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π°Π±Π΅ΡΠ΅ΡΠ΅ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ, Emmet ΡΠ³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π΄Π»Ρ Π²Π°Ρ ΠΏΠΎΠ»Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ HTML ΠΈΠ»ΠΈ CSS. ΠΠ±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ° ΠΠΌΠΌΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠΎΡΠΎΡΠΊΠΎΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΈ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ. Π₯ΠΎΡΠΈΡΠ΅ Π²Π΅ΡΡΡΠ΅, Ρ ΠΎΡΠΈΡΠ΅ Π½Π΅Ρ, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±Π»ΠΎΠΌΠΎΡΠ½ΠΎΠΉ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ HTML Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ Emmet.
Tab — ΡΡΠΎ ΠΊΠ»Π°Π²ΠΈΡΠ°-ΡΡΠΈΠ³Π³Π΅Ρ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² ΠΊΠΎΠ΄Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, SublimeText ΠΈ Brackets) Π΄Π»Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ Emmet. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Emmet Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ ΠΏΠΎΠ»Π½ΡΠ΅ HTML-ΡΠ΅Π³ΠΈ. ΠΏΡΠΎΡΡΠΎ Π²Π²Π΅Π΄ΠΈΡΠ΅ h2 ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Tab. Emmet ΡΠ³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π΄Π»Ρ Π²Π°Ρ
ΠΡΠΎΡΡΠΎ Π²Π²Π΅Π΄ΠΈΡΠ΅ Π»ΡΠ±ΠΎΠ΅ ΠΈΠΌΡ ΡΠ΅Π³Π° HTML (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, h3, h4, h5, p, nav, main. Aside ΠΈ Ρ. Π.) Π Π½Π°ΠΆΠΌΠΈΡΠ΅ Tab, ΡΡΠΎΠ±Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ.
HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Emmet
ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠΉ emmet, Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ CSS, Π°ΡΠΎΠΌΠ°, RSS-ΠΊΠ°Π½Π°Π»Π° ΠΈΠ»ΠΈ ΡΠΊΡΠΈΠΏΡΠΎΠ².
ΠΠ° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ Π½ΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Emmet ΠΈ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ.
ΠΠ΅Π»ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Emmet, Π° ΠΏΠΎΠ΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, ΠΊΠΎΡΠΎΡΡΡ ΡΡΠΈ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Emmet Π±ΡΠ΄ΡΡ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ.ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΡΡΡΡΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ HTML.
ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡ Π²ΡΡ HTML-ΠΏΠΎΠΌΠ΅ΡΠΊΡ, ΡΡΠΎΠ±Ρ Π²Π²ΠΎΠ΄ΠΈΡΡ HTML ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ Π½ΠΎΠ²ΡΠΉ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.
ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² ΠΠΌΠΌΠ΅ΡΠ°
ΠΠΌΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΠΏΠΈΡΠ°ΡΡ ΠΏΡΠΎΡΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² ΠΠΌΠΌΠ΅ΡΠ°.
. ΡΠΈΠΌΠ²ΠΎΠ» ΠΏΠ΅ΡΠΈΠΎΠ΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ².
. ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ div.wrapper.success header.siteHeader
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° HTML
# ΡΠΈΠΌΠ²ΠΎΠ» ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ div Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°ΠΌΠΈ.
ΠΠΌΠΌΠ΅Ρ ΠΠ±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ°
#container div # wrapper.success Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ # siteHeader
HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
+ Π·Π½Π°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΌΠΌΠ΅Ρ ΠΠ±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ°
Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» + ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ + Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
> Π±ΠΎΠ»ΡΡΠ΅ ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
<Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> <ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ>
ΠΈΠ»ΠΈ ΠΆΠ΅ <Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> <ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ>() ΡΠΈΠΌΠ²ΠΎΠ»Ρ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Ρ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΡ ΠΠΌΠΌΠ΅ΡΠ°:
(Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ) (Π³Π»Π°Π²Π½Π°Ρ> ΡΡΠ°ΡΡΡ) (Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»)
HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
<Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> <ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ>
* ΡΠΈΠΌΠ²ΠΎΠ» ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΠΌΠΌΠ΅Ρ ΠΠ±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ°
Π»ΠΈ * 3
ΠΈΠ»ΠΈ
Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> nav> ul> li * 3> a
<Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ>
ΠΠΌΠΌΠ΅Ρ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ
ΠΠΌΠΌΠ΅Ρ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ
Π° ΡΡΡΠ»ΠΊΠ° a: ΡΡΡΠ»ΠΊΠ° [title = ""] a [href = "http: // google.com "] a [href = "http://google.com" title = "visit google.com"]
HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ΅, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠΈΠΌΠ²ΠΎΠ»Ρ [] Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠ°Π΄Π΅ΡΡΡ, ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Emmet Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΠΈ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ.Π― ΠΏΠΎΡΡΠ°ΡΠ°Π»ΡΡ Π²ΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ Π½Π° ΠΏΡΠΎΡΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ . ΠΡΠΎΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Emmet ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π²ΡΠ΅ Π²ΡΡΠ΅ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. ΠΡΠ°ΠΊΡΠΈΠΊΠ° Π΄Π΅Π»Π°Π΅Ρ ΠΌΡΠΆΡΠΈΠ½Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π²ΠΏΠ΅ΡΠ΅Π΄ ΠΈ ΠΎΠ²Π»Π°Π΄Π΅ΠΉΡΠ΅ ΠΠΌΠΌΠΌΠ΅ΡΠΎΠΌ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡΡΡ
ΠΠΎΡ ΡΠΏΠΈΡΠΎΠΊ Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΈ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ ΠΠΌΠΌΠ΅ΡΠ°.
ΠΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΡΠΉ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ: ΠΡΠ²ΠΎΠ΅Π½ΠΈΠ΅ ΠΠΌΠΌΠ΅ΡΠ°, ΡΠ΅ΡΠΈΡ ΠΈΠ· 4 ΡΠ°ΡΡΠ΅ΠΉ, Π’Π°Ρ ΠΈΡ Π’Π°ΡΡ
ΠΠΈΡΠΈΡΠ΅ HTML ΠΈ CSS Π±ΡΡΡΡΠ΅Π΅ Ρ Emmet, Π’ΠΎΡΠΈΠΊ Π€ΠΈΡΠ΄Π°ΡΡ, Hongkiat
7 Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ HTML-ΡΠΎΠ²Π΅ΡΠΎΠ² ΠΏΠΎ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Emmet ΠΎΡ ΠΠΆΠΎΡΡΠ° ΠΠΆΠΎΠ½ΡΠΎΠ½Π° Π½Π° designshack
Sublime Text Π΄Π»Ρ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π½Π° CSSTricks
ΠΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΡΠΉ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ HTML ΠΈ CSS Ρ Emmet + Bootstrap ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ Udemy
ΠΡΠ»ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡ Π²ΠΎΠΏΡΠΎΡΡ, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ .
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅Sublime Text, Emmet ΠΈ Sass Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅
ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΊΠ½ΠΈΠ³ Noble Desktop
- ΠΠΎΡΡΡΠΏΠ½ΡΠΉ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ°, Ρ ΠΆΠΈΠ²ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΡΠ°Π²Π»ΡΡΡ.
- ΠΠ΅ΡΡΠΈΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ.
- Π³ΡΠ°ΡΠΈΠΊΠ° Π΄Π»Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΊΠ½ΠΈΠ³ — ΡΠ²Π΅ΡΠ½ΡΠ΅ (ΠΏΠ΅ΡΠ°ΡΠ½ΡΠ΅ ΠΊΠ½ΠΈΠ³ΠΈ — ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΡΠ΅).
- Π¨ΠΈΡΠΎΠΊΠ°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΌΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΊΠ½ΠΈΠ³ (EPUB, MOBI ΠΈ PDF), ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΡ Π½Π° Π»ΡΠ±ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΈΠ»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ Π²ΡΠ±ΠΎΡΡ; ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Mac, ΠΠ, iPhone, iPad, Kindle, Android ΠΈ Π΄ΡΡΠ³ΠΈΠ΅.
- ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΠ΅Π½Π½ΠΎΠ³ΠΎ Π²Π°ΠΌΠΈ Π²ΡΠΏΡΡΠΊΠ°. ΠΠΎΠ³Π΄Π° ΠΌΡ Π²Π½ΠΎΡΠΈΠΌ Π² ΠΊΠ½ΠΈΠ³Ρ ΡΠ΅ΡΡΠ΅Π·Π½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ (ΡΡΠ΅Π±ΡΡΡΠΈΠ΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·Π΄Π°Π½ΠΈΡ), Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ.
- DRM-free: ΡΠ°ΠΉΠ»Ρ ΡΠ»Π΅Π³ΠΊΠ° ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Ρ Π²ΠΎΠ΄ΡΠ½ΡΠΌΠΈ Π·Π½Π°ΠΊΠ°ΠΌΠΈ Ρ Π²Π°ΡΠΈΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΈ Π°Π΄ΡΠ΅ΡΠΎΠΌ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ, Π½ΠΎ ΠΌΡ Π½Π΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅ΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠ»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π°ΡΠΈΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΊΠ½ΠΈΠ³.
- ΠΠΎΠΆΠΈΠ·Π½Π΅Π½Π½ΡΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ Π·Π°Π³ΡΡΠ·ΠΊΠ°ΠΌ ΠΈΠ· Π²Π°ΡΠ΅ΠΉ ΡΡΠ΅ΡΠ½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ Noble Desktop.
ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°ΡΠ»Π°Π΄ΠΈΡΡΡΡ Π½Π°ΡΠΈΠΌΠΈ ΠΊΠ½ΠΈΠ³Π°ΠΌΠΈ
ΠΠ°ΡΠΈ ΡΠ°Π±ΠΎΡΠΈΠ΅ ΡΠ΅ΡΡΠ°Π΄ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°Π±ΠΎΡΡ Π·Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠΌ.ΠΠ±ΡΡΠ½ΠΎ ΠΎΠ½ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΠ΅ ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π·Π°Π΄Π°ΡΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅. ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΎΠΉ Π±ΡΠ»ΠΎ Π±Ρ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΊΠ½ΠΈΠ³Π° Π±ΡΠ»Π° Π·Π°Π³ΡΡΠΆΠ΅Π½Π° Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ»Π°Π½ΡΠ΅Ρ / ΡΠΌΠ°ΡΡΡΠΎΠ½) ΠΈΠ»ΠΈ Π½Π° Π²ΡΠΎΡΠΎΠΉ ΠΌΠΎΠ½ΠΈΡΠΎΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΡΠΈΡΠ°ΡΡ ΠΊΠ½ΠΈΠ³Ρ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°Π±ΠΎΡΡ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΠΏΠ΅ΡΠ°ΡΠ°ΡΡ PDF-ΡΠ°ΠΉΠ», Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅.
PDF
- ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ.
- Π’ΠΎΡΠ½ΠΎΠ΅ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ Ρ ΠΏΠ΅ΡΠ°ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΈΠ³ΠΎΠΉ. ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° ΡΠ΅ΠΊΡΡΠ° Π² ΡΠ°ΠΉΠ»Π΅ EPUB ΠΈΠ»ΠΈ MOBI ΡΠ±ΠΈΠ²Π°Π΅Ρ Ρ ΡΠΎΠ»ΠΊΡ, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ PDF-ΡΠ°ΠΉΠ»Ρ.
- PDF ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ², Π½ΠΎ Π½Π΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ Π΄Π»Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ². ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠΊΡΠ°Π½ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ EPUB ΠΈΠ»ΠΈ MOBI.
EPUB
- Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΠΎΡΡΠ°ΡΠ»Π΅Π²ΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΊΠ½ΠΈΠ³, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ, ΠΊΡΠΎΠΌΠ΅ Amazon Kindle. EPUB ΠΌΠΎΠΆΠ½ΠΎ ΡΠΈΡΠ°ΡΡ Π½Π° Mac, ΠΠ, iPhone, iPad, iPod Touch, Nook, Sony Reader, Kobo, Android ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄ΡΡΠ³ΠΈΡ .
- ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ², ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ ΠΏΠ΅ΡΠ΅ΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎΠΌ (Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠΈΡΡΠ° ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ Π²ΡΠ±ΠΎΡΡ).
MOBI (ΡΠ°Π·ΠΆΠ΅ΡΡ)
- Π€ΠΎΡΠΌΠ°Ρ Amazon Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Kindle ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Kindle.
- ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ², ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ ΠΏΠ΅ΡΠ΅ΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎΠΌ (Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠΈΡΡΠ° ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ Π²ΡΠ±ΠΎΡΡ).
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ iOS, ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ°ΠΊ iPhone ΠΈ iPad? ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Kindle Π΄Π»Ρ ΡΡΡΡΠΎΠΉΡΡΠ² Apple iOS ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌ. Π₯ΠΎΡΡ Π½Π°Ρ MOBI Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Kindle, ΠΎΠ½ Π½Π΅ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ iOS. ΠΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΠ°Ρ EPUB Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Apple iBooks ΠΏΡΠΈ ΡΡΠ΅Π½ΠΈΠΈ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ iOS.
iPhone, iPad
Mac
ΠΠ Ρ Windows
Android
ΠΠ½ΠΈΠ³ΠΈNoble Desktop ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π°ΠΌΠΈ ΠΊΠ°ΠΊ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅ΠΌ. ΠΠ½ΠΈ Π½Π΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π΄ΡΡΠ³ΠΈΠΌ Π»ΠΈΡΠ°ΠΌ. Π€Π°ΠΉΠ»Ρ ΡΠ»Π΅Π³ΠΊΠ° ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Ρ Π²ΠΎΠ΄ΡΠ½ΡΠΌΠΈ Π·Π½Π°ΠΊΠ°ΠΌΠΈ Ρ Π²Π°ΡΠΈΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΈ Π°Π΄ΡΠ΅ΡΠΎΠΌ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ, Π½ΠΎ ΠΌΡ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ DRM. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΠ΅ ΠΊΠ½ΠΈΠ³ΠΈ Π½Π° Π»ΡΠ±ΠΎΠ΅ ΠΈΠ· Π²Π°ΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π±Π΅Π· ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΠΏΠ΅ΡΠ°ΡΠ°ΡΡ ΡΠ°ΠΉΠ»Ρ PDF Π΄Π»Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, Π½ΠΎ Π½Π΅ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π΄ΡΡΠ³ΠΈΠΌ Π»ΠΈΡΠ°ΠΌ. ΠΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ΄Π°Π²Π°ΡΡ ΠΏΠΎΠ΄Π΅ΡΠΆΠ°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΠ΅ ΠΊΠ½ΠΈΠ³ΠΈ.ΠΡΠ°Π²ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π°ΠΌ ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π½ΠΎ ΠΊΠΎΠΌΡ-Π»ΠΈΠ±ΠΎ Π΅ΡΠ΅.
Π£ΡΠΈΡΠ΅Π»Ρ ΠΈ ΡΡΠ΅Π±Π½ΡΠ΅ ΡΠ΅Π½ΡΡΡ, ΠΆΠ΅Π»Π°ΡΡΠΈΠ΅ ΡΠ°ΡΠΏΠ΅ΡΠ°ΡΠ°ΡΡ ΠΊΠΎΠΏΠΈΠΈ Π΄Π»Ρ ΡΡΡΠ΄Π΅Π½ΡΠΎΠ², Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠ΅ ΠΏΠΈΡΡΠΌΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ°Ρ Π»ΠΈΡΠ΅Π½Π·ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΡΠ΅Π½Π°Ρ .
ΠΡΡΡΡΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ HTML Ρ ΠΏΠΎΠΌΠΎΡΡΡ Emmet ΠΈ Sublime Text
Π ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΆΠΈΠ·Π½ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π±ΠΎΡΡ Π±ΡΠ΄ΡΡ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·. ΠΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°; ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΡΡΠΎ ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΡΡΡΠ½ΡΠΉ Π΄ΠΎΠΌ Π΄Π»Ρ ΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π·Π°ΡΡΡΠΎΠΉΡΠΈΠΊΠ°. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΠΈΡΡΡΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ IDE, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ) ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΡΠΈΠ΄Π½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π²ΡΡΠΎΠΊΠΎΠΉ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΠΎΡΡΡΡ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² IDE Π±Π΅Π· Π½Π°ΠΊΠ»Π°Π΄Π½ΡΡ ΡΠ°ΡΡ ΠΎΠ΄ΠΎΠ².ΠΠ»Ρ ΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Sublime Text 3, ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΄ΠΈΠ»ΠΎΡΡ, ΠΊΠΎΠ³Π΄Π° Ρ ΠΎΡΠΊΡΡΠ» Π΄Π»Ρ ΡΠ΅Π±Ρ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Zen.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΠ° Zen?
Zen Coding (ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠΉ ΠΊΠ°ΠΊ Emmet — ΡΠΆΠ°ΡΠ½ΠΎΠ΅ ΠΈΠΌΡ, Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄) — ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ². ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΡΡΡΠΎ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ HTML, Π·Π°ΠΏΠΈΡΡΠ²Π°Ρ Π΅Π³ΠΎ Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ, ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌ CSS, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΆΠΈΠΌΠ°Ρ ΠΊΠ»Π°Π²ΠΈΡΡ TAB, ΡΡΠΎΠ±Ρ Β«ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡΒ» Π΅Π³ΠΎ.
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ HTML
Hello World &
ΠΡΠΎ Π°Π±Π·Π°Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ "ΡΠ΅ΠΊΡΡ"
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Emmet
h2 {Hello World} + p.text {ΠΡΠΎ Π°Π±Π·Π°Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ "text"}
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΠΌΠΌΠ΅ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΡΠ΅Π±Π½ΠΈΠΊΠ°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ Sublime Text 3, Ρ Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΠ°ΠΌ Π΅ΡΡΡ Π΄Π»ΠΈΠ½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ², ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ Emmet, ΠΈ, ΠΊΡΠΎΠΌΠ΅ ΠΏΡΠΎΡΠ΅Π΄ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ, ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ² Π΄Π»Ρ Π²ΡΠ΅Ρ .
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° (Sublime Text)
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΡΠΆΠ΅ Π΅ΡΡΡ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ², ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΎΡΡΠ°, ΠΊΠ°ΠΊ ΠΏΠΎΠΈΡΠΊ Β«EmmetΒ» Π² ΡΠΏΠΈΡΠΊΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ².
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΠ΅ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ², Ρ Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π°Ρ Sublime Text. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ, Π·Π΄Π΅ΡΡ:
https://packagecontrol.io/installation
ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡ Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΡ CSS.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠΎΠ³Π΄Π° Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅
[TAB]
, ΡΡΠΎ Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Β«Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ»Π°Π²ΠΈΡΡ TABΒ».Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅Π³ HTML, ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π΅Π³ΠΎ, ΠΊΠ°ΠΊ Π² CSS.
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ΠΡΠ²ΠΎΠ΄ HTML:
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ ΠΊ ΡΠ΅Π³Ρ, ΠΏΠΎΡΡΠ°Π²ΡΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄ Π½ΠΈΠΌ ΡΠΎΡΠΊΡ.
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ΠΡΠ²ΠΎΠ΄ HTML:
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Ρ Π΅Ρ.
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ΠΡΠ²ΠΎΠ΄ HTML:
Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΡΡΠΎ-Π»ΠΈΠ±ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΈΠ³ΡΡΠ½ΡΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ.
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
h2 {ΠΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ} [TAB]
ΠΡΠ²ΠΎΠ΄ HTML:
ΠΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ
ΠΠ»Ρ ΠΠΌΠΌΠ΅ΡΠ° Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΏΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΡΠΎΠ²Π½ΡΠΌ DOM, Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΡΡΡΠΎΠΈΡΡ ΡΠΊΠ΅Π»Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ ΠΊΠΎΠ΄Π° Emmet.div.second> h3 {ΠΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΎ Π²ΡΠΎΡΠΎΠΌ div} [TAB]
ΠΡΠ²ΠΎΠ΄ HTML:
ΠΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π½ΡΡΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ div
ΠΡΠΎ Π°Π±Π·Π°Ρ ΡΡΠ΄ΠΎΠΌ Ρ ΠΏΠ΅ΡΠ²ΡΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ
ΠΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΎ Π²ΡΠΎΡΠΎΠΌ div
ΠΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠ°
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠΈ ΡΡΠ°Π½ΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌΠΈ ΠΏΠΎΠ·ΠΆΠ΅ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Β«ΠΈΡΠ΅ΡΠ°ΡΠΈΡΒ», Π½ΠΎ ΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΏΠΎΠΌΡΠ½ΡΡΡ Π·Π΄Π΅ΡΡ.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ Π² ΠΊΡΡΠ³Π»ΡΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ.
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ΠΡΠ²ΠΎΠ΄ HTML:
ΠΡΠ΅ΡΠ°ΡΠΈΡ
ΠΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΌΠΎΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ Emmet — ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡ Π²ΠΈΠ΄Π΅Π»ΠΈ Π²ΡΡΠ΅, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ΅ΠΏΠΎΡΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½ΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΡΡΡΠΊΡΡΡΡ?
Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΡΠ»Π΅ ΡΠΈΠΌΠ²ΠΎΠ»Π° Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠΈ (*).
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ΠΡΠ²ΠΎΠ΄ HTML:
Π’Π°ΠΊ ΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΏΠΈΡΠΊΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ° Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠΈ:
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ΠΡΠ²ΠΎΠ΄ HTML:
ΠΡΠ΅ ΠΎΠ΄Π½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΈ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΈΡΠ»Π°-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΠΈ, ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³Π΄Π΅ ΡΠ³ΠΎΠ΄Π½ΠΎ, ΠΈ ΠΎΠ½ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΠΌΠ²ΠΎΠ»Π° $.
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ΠΡΠ²ΠΎΠ΄ HTML:
- ΠΡΠ½ΠΊΡ 1
- ΠΡΠ½ΠΊΡ 2
- ΠΡΠ½ΠΊΡ 3
Π Π°Π±ΠΎΡΠ° Ρ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ
Emmet Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ HTML Ρ Π½ΡΠ»Ρ, Π½ΠΎ ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π΅Π½ ΠΏΡΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π² HTML Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ Β«ΠΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌΒ». ΠΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ Π²Π°ΠΌΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°, ΠΊΠ°ΠΊ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡ ΡΠ°Π½Π΅Π΅ — Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Sublime Text.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ, ΡΡΠΎ Π²Π°ΠΌ Π΄Π°Π»ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΠΏΠΈΡΡΠΌΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ, ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ:
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠΏΠΈΡΠΎΠΊ Π±ΡΠ»ΠΎ Π±Ρ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, Π½ΠΎ Π΅ΡΠ»ΠΈ Π±Ρ ΡΡΠΎΡ ΡΠΏΠΈΡΠΎΠΊ Π±ΡΠ» Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π»ΠΈΠ½Π½Π΅Π΅, ΡΡΠΎ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ ΡΡΠ°ΡΡ ΡΡΠ΅ΡΠΊΠΎΠΉ Π² ββΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
Π‘ Emmet ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ: Π²Ρ ΠΏΡΠΎΡΡΠΎ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΠ΅ ΡΠ΅ΠΊΡΡ, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ ctrl-w (Π² Sublime Π² MacOS ΡΡΠΎ ΠΎΠ±Π΅ΡΡΠΊΠ° Ρ Π³ΠΎΡΡΡΠ΅ΠΉ ΠΊΠ»Π°Π²ΠΈΡΠ΅ΠΉ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ, Ρ ΠΎΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠ΅ΠΉ ΠΠ‘) ΠΈ Π²Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ box:
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ΠΠ²Π΅Π·Π΄ΠΎΡΠΊΠ° ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΠΌΠΌΠ΅ΡΡ ΠΏΡΠΎΠΉΡΠΈΡΡ ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΡΠΏΠΈΡΠΎΠΊ, ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π²ΡΠΉΠ΄Π΅ΡΠ΅ ΠΈΠ· Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°, Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
ΠΡΠ²ΠΎΠ΄ HTML:
- - ΠΠΎΠ»ΠΎΠΊΠΎ
- - Π―ΠΉΡΠ°
- - Π₯Π»Π΅Π±
ΠΠΉ, ΠΏΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅, Π½Π° Π½Π΅ΠΌ Π²ΡΠ΅ Π΅ΡΠ΅ Π΅ΡΡΡ ΡΠΈΠΌΠ²ΠΎΠ»Ρ ΠΌΠΈΠ½ΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π½Π΅ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅, Π½Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΎΡΠΌΠ΅Π½ΠΈΠΌ ΡΡΠΎ ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π΅ΡΠ΅.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ ctrl-w ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π²Π²Π΅Π΄ΠΈΡΠ΅:
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ΠΠΎΠΌΠ°Π½Π΄Π° Β«| tΒ» Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ Β«*Β» ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΠΌΠΌΠ΅ΡΡ ΠΏΡΠΎΠΉΡΠΈ ΡΠ΅ΡΠ΅Π· ΠΊΠ°ΠΆΠ΄ΡΡ ΡΡΡΠΎΠΊΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ ΡΠΏΠΈΡΠΊΠ°. ΠΈΠ· ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΎ Π΄Π°Π΅Ρ Π½Π°ΠΌ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ:
ΠΡΠ²ΠΎΠ΄ HTML:
- ΠΠΎΠ»ΠΎΠΊΠΎ
- Π―ΠΉΡΠ°
- Π₯Π»Π΅Π±
ΠΠ°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅.
ΠΠ· Π²ΡΠ΅Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Emmet, Wrap Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ — ΡΡΠΎ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ ΠΌΠ½Π΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ.ΠΠ΄Π½Π°ΠΆΠ΄Ρ Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π» 40-ΡΡΡΠ°Π½ΠΈΡΠ½ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ ΡΡΠ»ΠΎΠ²ΠΈΡΠΌΠΈ ΠΈΠ· Word Π² HTML ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π·Π° 20 ΠΌΠΈΠ½ΡΡ!
ΠΠ»Ρ ΡΠ΅Π»Π΅ΠΉ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ΅ ΠΎΠ΄Π½Ρ ΡΡΠ½ΠΊΡΠΈΡ, ΠΎΠ΄Π½Π°ΠΊΠΎ Ρ Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ emmet.io ΠΈ ΠΈΠ·ΡΡΠΈΡΡ Π²ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Wrap with Abbreviation.
ΠΠ°Π²Π°ΠΉΡΠ΅ Π²Π΅ΡΠ½Π΅ΠΌΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΡΠΏΠΈΡΠΊΡ Π²ΡΡΠ΅, ΠΈ Π½Π° ΡΡΠΎΡ ΡΠ°Π· ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ Π½Π°Ρ ΡΠ΅Π³ UL ΠΈΠΌΠ΅Π» ΠΊΠ»Π°ΡΡ ΠΈ ΡΠΎΠ»Ρ Π°ΡΠΈΠΈ, ΠΏΠ»ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π°ΡΡΠΈΠ±ΡΡ data-item.
ΠΠΏΡΡΡ ΠΆΠ΅, Π² Π΄Π»ΠΈΠ½Π½ΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅, ΡΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΡΠ΄ΠΎΠ΅ΠΌΠΊΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ, Π½ΠΎ, ΠΊΠ°ΠΊ Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠΆΠ΅ ΠΏΠΎΠ½ΡΠ»ΠΈ, Ρ ΠΠΌΠΌΠ΅ΡΠΎΠΌ ΡΡΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°ΡΡ.
ΠΡΠΎΡΡΠΎ Π½Π°ΠΆΠΌΠΈΡΠ΅ ctrl-w ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
ul.shopping [role = "main"]> li [data-item = "$"] {$ #} * | t
ΠΡΠ²ΠΎΠ΄ HTML:
- ΠΠΎΠ»ΠΎΠΊΠΎ
- ΡΠΉΡΠ°
- Π₯Π»Π΅Π±
Π’Π°ΠΊ ΡΡΠΎ Π·Π΄Π΅ΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ?
[]
— ΡΡΠΎ ΡΠΎ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ°role
, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΏΠΈΡΠ°ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΈ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΠΎ Π² ΡΠ΅Π³ Β«ΠΊΠ°ΠΊ Π΅ΡΡΡΒ» (ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊhref
Π² ΡΠ΅Π³Π΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, ΠΈ ΠΈΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π² Emmet, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ).ΠΡ ΡΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ
$
ΡΠ°Π½ΡΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ΅ΠΊΡΡΠΈΠΉ Π½ΠΎΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΠΈΠΊΠ»Π΅, Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ$ #
, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π΄ΠΎΠ³Π°Π΄Π°ΡΡΡΡ, ΠΎΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ, Π° Π·Π°ΡΠ΅ΠΌ Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π΅Π³ΠΎ Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡ ΡΡΡΠΎΠΊΡ$ #
. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ ΡΠ°Π·, Π½ΠΎ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΡΡΠΎΠΊΠ°| t
Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π°ΡΡΠΈΠ±ΡΡΠ°Ρ .Π§ΡΠΎ Π΄Π°Π»ΡΡΠ΅?
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Emmet — Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΉ ΠΈ ΠΌΠΎΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ Π·Π°Π΄Π°ΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ»ΠΈ ΡΠ°ΡΡ, Π² ΡΠΎ, ΡΡΠΎ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΈΠ½ΡΡ.
ΠΡΠ° ΡΡΠ°ΡΡΡ ΠΏΠΎΠΊΠ°Π·Π°Π»Π° Π²Π°ΠΌ Π»ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΡ emmet.io ΠΈ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ°ΡΠ°ΠΏΠ°Π» ΠΏΠΎΠ²Π΅ΡΡ Π½ΠΎΡΡΡ.
Π― ΠΎΡΡΠ°Π²Π»Ρ Π²Π°ΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ. Π― Π½Π΅ Π±ΡΠ΄Ρ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π²Π°ΠΌ, ΡΡΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ Π΄ΡΠΌΠ°Ρ, Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΏΡΠΈΡΡΠ½ΠΎ ΡΠ΄ΠΈΠ²Π»Π΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΡΠ΅ Π΅Π³ΠΎ ΡΠ°ΠΌΠΈ.
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΏΡΡΡΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ — HTML, Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ Π²Π²Π΅Π΄ΠΈΡΠ΅:
ΠΠΎΠ΄ ΠΠΌΠΌΠ΅ΡΠ°:
Π£Π΄Π°ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ! π
.- ΠΠΎΡΠ»Π΅