<> One ,Web Front end development overview
* Web front end : front end UI+ Back end data interaction
* Specific skills : Page tags + Page style + Front end programming + Cross platform , Cross browser + Front end frame + Debugging tools
<> Two , Efficient Web Front end development
*
file structure :
js: lib custom.js( business js) css: lib images( Background in style ) reset.css( Unify element default styles css) custom.
css( business css) resource: Save resource background picture index.html
Module specific naming format :
Express father-child relationship with short horizontal line
*
Front end performance analysis tool (YSlow): Subsequent use
*
Performance optimization scheme :
···· 1. Code compression
···· 2. html Code compression
···· 3. Image resource compression
*
Front end code naming specification
1.HTML Code all tag and property names should be lowercase
2.id Key words are linked with underscores ,class Key words are connected by middle dash
3. For indenting 4 Spaces for levels
4. Add a comment above the element , Do not add after line of code
5.css The code in indicates that the blank page needs 4 Space indents
6.JavaScript Initial lowercase , Capitalize other words , Do not use identifier variable type as prefix
7.javascript Using single quotes to define a string
8. Comments must be added to the file header : Like this
/* File header information */ /* * Copyright Version * * */
<> Three , Standard html code
* js and css External documents , Links to external files need to be added to head part
* Individually styled labels are not recommended
* Style and structure separation :
* stay HTML Link in CSS file
* stay HTML Embedded in CSS style ( Not recommended )
* Flexible use meta label
<> Four , Highly readable HTML
*
Streamlining HTML
Remove redundant containers
Remove extra elements
Data classification format :
Metadata content :, ,
Streaming content : ,
Chapter content :
, , ,
Title Content :
~
,
Paragraph content : , etc . Basically equivalent to the range of elements in a row
Embedded content :,,,
interactive content :,, <>
/ Code execution delay /
Not used HTML5 Tags and properties discarded in
Technology
Daily Recommendation