Home > Developer > Web Develop
Some common shortcut keys:
Windows + e My Computer
Different page transitions between Ctrl + Tab pages
F2 renaming
Ctrl+shift+s Save As
Some common sense of the front end:
Front end meaning: will generate Web page
Page composition: text, pictures, input boxes, videos, audio, hyperlinks
Web standards: Html structure standard, CSS performance standard, Js behavior standard
Browser kernel
-----------------IE----Google/Open gate----Firefox----apple
Rendering Engine Trident Blink Gecko WebKit
Rendering engine is the root cause of compatibility issues
Common Front End Editor
Include (nested relationships), tie relationships
Dw has a long history and designers use
Sublime lightweight, plug-in handy
Webstorm Heavy-weight, intelligent
Sublime Common keys
HTML:XT+TAB HTML Structure Code
tab complement Tag code
Ctrl+shift+d Quick Copy Line
Ctrl+shift+k quickly delete a row
CTRL + LEFT mouse button click Collective input
Ctrl+h Find Replacement
ctrl+/notes
Ctrl+l quickly select a row
Ctrl+shift+↑ (↓) quickly move up (down) one line
View----Layouts
URL protocol
Web browsing service provided by IIS Web server
URL address used by the usual URL
URL protocol: Specify URL address format
Protocol prescribed format:
**scheme://host.domain:port/path/filename
**scheme: Defines the type of Internet service. Common Http/https
**host: Define domain host (HTTP default host value www)
**domain: Define Internet domain names such as: w3school.com.cn
* *:p ORT define port number (web default port: 80)
**path: Path on the server where the page is located
**filename: File name
HTML Structure Standard
Hyper Text Markup Language Hypertext Markup Language
<!doctype html> <!--declaration Document type-
<title></title> <!--title Tags--
<body></body> <!--body Label--HTML is the same as the HTM. The suffix name cannot determine the file format, only determines how the file is opened.
* * Single Label:
<br/> Wrapping Label
<HR/> Horizontal Line Label
* * Double Label
<p></p> paragraph labels. Automatically generate blank lines up and down
<font></font> Text Labels
* * Text formatting tags
Bold <strong></strong><b></b> try to use strong
Tilt <em></em><i></i> try to use EM
Delete lines <del></del><s></s> use Del as much as possible
Underline <ins></ins><u></u> use INS as much as possible
* * Picture Label
"
Alt replaces text that is displayed when the picture is not displayed
Title Hint text
Picture does not define when the width is high, the picture is displayed according to 100% scale, if only changes the width or height of the picture, the picture scales
* * Path
1. Relative path
File and picture (HTML document) in the same directory (folder), write file name directly
Files and pictures in the next Level directory, folder name/Picture (HTML file) name
The picture is in the top-level directory of the file. /Picture (HTML file) name
The picture is in the other directory at the top level of the file. /folder name/Picture (HTML file) name
Summary: Find a picture of the next level directory with/
Jump out of the current directory with: /
2. Absolute path
src= "File full path"
* * Special characters
Space
< less than <
> Greater than &GT
& and &
￥ RMB ¥
? Copyright ©
? Registered trademark ®
℃ Celsius °
± plus sign &PLUSMN
X-Multiply ×
÷ except ÷
2 sq ²
3 Legislative ³
#上标 2<sup>3</sup> 2 of the three-time square
#下标 H<sub>2<sub>o Elemental Water
* * List
1. Unordered list
<ul>
<li></li> list Items
<li></li>
<li></li>
</ul>
Type= "Square" small square
Type= "disc" Solid Small Circle
Type= "Circle" Hollow Small Circle
2. Sequence list
<ol>
<li></li> list Items
<li></li>
<li></li>
</ol>
Type= "1,a,a,i,ⅰ"
start= "3" decide where to start
3. Customizing the list
<dl>
<dt></dt> Small Title
<dd></dd> explanation Title
<dd></dd> explanation Title
</dl>
* * Music tag
<embed src= "X.mp3" hidden= "true" > Hidden as a hidden player. Ture/false
* * Scrolling
<marquee behavior= "" direction= "" ></marquee>
Middle content: Text, pictures, program-generated text, or pictures
Height, width, bgcolor,
-behavior Setting scrolling mode
Alternate: means scrolling back and forth between two paragraphs
Scroll: Represents a scroll from one section to the other, repeating
Slide: Represents a scroll from one section to the other and does not repeat
-direction Setting the scroll direction
Down, left, right, up
Loop: Sets the number of scrolls. -11 roll straight down.
* * Hyperlinks
<a href= "xxx.html" title= "picture label" target= "_self" ></a>
The path to the href (jump page). Must write
TITLR hint text. Mouse over the text displayed on the link
target= "_self" default value. Open on own page
Target= "_blank" to open a new page
* * Anchor Point(Anchor chain Connection)
1. Define an anchor point first. such as: <p id= "SD" ></p>
2. Hyperlink to anchor Point. <a href= "#sd" ></a>
* * Empty chain <a href= "#" ></a> not sure which page to link to
* * Compressed file download is not recommended
<a href= ". /.. /xx.rar "> Compression pack </a>
* * Hyperlink optimization notation
<base target= "_blank" > Make all Hyperlinks Open on new page
* * Page encoding
<meta charset= "UTF-8" >
+tab HTML5 Label Structure
CharSet encoding
Ascll
Ansi (Extended ASCII encoding)
Unicode
gb2312 (Simple Chinese)
GBK (all Chinese characters, traditional)
Big5 (Traditional Chinese)
Utf-8
****meta Label
**name
-<meta name= "generator" contect= "XX" > to illustrate the Build tool
-Web page keywords
<meta name= "keywords" content= "java training ..." >
Keyword keyword for seo optimization
-Web Page description
<meta name= "description" content= "own page in the search engine under the description of the display! ">
-Web Creator
<meta name= "Author" contect= "Your name" > Tell SEO site Creator
-Set Page crawl permissions
<meta name= "Robots" contect= "All|none|index|noindex|follow|nofollow" >
All: The file will be retrieved and the link on the page can be queried
None: The file will not be retrieved and links on the page cannot be queried
Index: file will be retrieved
NOINDEX: The file will not be retrieved, but the link on the page can be queried
Follow: Links on the page can be queried
Nofollow: The file will not be retrieved, but the link on the page can be queried
**http-equiv
-Web Redirection
<meta http-equiv= "Refresh" conten= "5;http://www.baidu.com" >
Different domain names jump between each other
* * Link external style sheet files
<link rel= "stylesheet" href= "1.css" >
<link rel= "icon" href= "Xxxx.ico" > Icon small icons for each page header
* * Form
Display data to supplement Web page refactoring
<table border= "1" width= "height=" "cellspacing=", cellpadding= "align=" "Center" bgcolor= "Yellow" >
<TR align= "center" >
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
border= "1" Border thickness
bordercolor= "Red" border color
cellspacing= "20" Cell distance from cell
cellpadding= "10" content distance from border
Align= "Left/right/center"
If you use the align= "center" form directly in the table
If used for TR/TD, TR or TD content is centered
* * Standard structure of the table
<table>
<caption><caption> Table Head
<thead></thead>
<tbody>
<tr>
<TD colspan= "2" ></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<TD rowspan= "2" ></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
Colspan= "2" Merges 2 cells of the same row
Rowspan= "2" Merges 2 cells in the same column
Create a 3*3 table directly
table>tr*3>td*3 + TAB key
* * Table title
<th></th> usage with <td>
-Content Vertical Alignment
<TD valign= "Top/middle/bottom" ></td>
* * Form
Form Action: Gathering information
Prompt information
form controls
--form fields
<form action= ' 1.php ' method= "get" >
Properties: Action: Handling information
Method= "Get|post"
Get transfer information through the address bar, with poor security
Post is processed by 1.php for high security
--Text input box
User name: <input type= "text" maxlength= "6" readonly= "readonly" disabled= "Disabled" name= "username" value= "large Front end" >
Maxlength= "6" limit input character length
Readonly= "ReadOnly" To set the input box to read-only (cannot be edited)
disabled= "Disabled" input box is active
Name= the name of the "username" input Box
Value= "XXXX" to pass the input box contents to the processing file
--Password entry box
Password: <input type= "password" name= "pwd" >
All the properties of the text input box are valid for the Password entry box
--Radio box
<input type= "Radio" name= "Gender" checked= "checked" > Male
You can achieve a single-selection effect only if you set the value of name to the same.
Checked= "Checked" set default check
--drop-down list
<select>
<option> drop-down list options </option>
<option> drop-down list options </option>
<option> drop-down list options </option>
<option selected= "Selected" > Drop-down list options </option>
</select>
Property:
Multiple= "multiple" to set the drop-down list to multiple options
Selected= "selected" Setting default selected Items2018.03.28
A review of personal omission of knowledge-html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
