1. First, let's look at what is front end, simply, what we usually browse the web, ah, as well as app Home and applets.
2, we often visit your browser's time, often enter the URL, but also known as domain name http:. //Www...com
sometimes is and sometimes it is http https, difference between the two is that the latter is more safer there keys. www is the World Wide Web, the suffix com, org, edu, cn and called DNS domain name.
3, one of the basic web development and design is html. html basic framework has the following components:
structure
<html>
<! DOCTYPE html> declaration .// page type
lang = "en" // CH Language EN
<Meta charset = "UTF-8"> // tag information charset = coding type "UTF-8" page UTF-. 8
<head>
<title> title </ title>
</ head>
<body>
SUMMARY
</ body>
</ HTML>
or more tags are closed with the end of the course, there are and autistic.
3, to find out about the structure of html, let's configure the development environment, I used software JetBrains WebStorm10. This software is money, then login first to enter the File-setting-font-color or alt + ctrl + s to set the font size and color. Then the file-new-dicrectory create a new directory, then build html5 file that is file-new-html5 file in this directory.
4. After you create a file, to understand the basic usage and the associated label
alt + F2 or top right corner of the browser can also be a quick
press alt key + mouse click, you can enter the same text in different places
were lines at the end of each line ctrl + D copy
input lorem press the tab key, the text may be added to test
p * figures by the tab key, enter multi-line label P
5, create a page
in the body under the editorial content, web design commonly used tags
a) a hyperlink
<a href="链接的目标地址" target="打开目标窗口"> </a>
target: _blank opens in a new window
_parent opens in the Source window anchor:
1, jump to a different location in the same page,
add a jump at anchor position, <a name="名称"> </a>
create a link <a href="#锚记名称"> Click Content </ a>
2, to jump to different pages of different locations
to add an anchor at the jump position, <a name="名称"> </a>
create content link <a href="文件名#锚记名称"> click < / a>
b) send the message: mailto: email address
c) path:
absolute path: from the start at the root
relative path: starting from the current directory
d) conventional label
horizontal <hr width = "width" color = "color" size = "line thickness" />
! HTML comment <- comment text -> ctrl + shift + /
wrap <br/>
spaces: a space under the whole angle
header H6 ~ h1 of
<pre> </ pre> preformatted
<em> </ em> italic <I> </ I>
<B> </ B> bold <strong> </ strong>
<Big> </ Big> Magnification <Small> </ Small>
<code> </ code> place code
<del > </ del> strikethrough
subscript <sub> </ sub>
superscript <sup> </ sup>
unit: the percentage of pixels (px) (%) em rem
The image insertion label:
<IMG the src = "Image Path" alt = "prompt message" title = "image description" width = "Image Width" height = "image height" />
e) Table
<table border = "border line" cellspacing = "border cell spacing" cellpadding = "cell fill" width = "Table Width">
<Caption> header </ Caption>
<TR>
<TH> header row </ TH>
</ TR>
<TR align = left = "other way">
<TD> cell </ TD>
</ TR>
</ Table>
interbank across columns
rowspan colspan
f) a list of
unordered list
<ul of the type = "">
<li> </ li>
</ ul>
of the type: Disc (default solid circles) square box circle hollow circle
ordered list
<ol type = "" start = "" >
<Li> </ Li>
</ OL>
type: the I. 1 I A A start: start position of
a custom list
<DL>
<dt> </ dt>
<dd> </ dd>
</ DL>
G) form
text box <input type = "text" / >
password box <input type = "password" / >
radio button <input type = "radio" / >
box <input type = "checkbox" / >
file field < input type = "file" />
button <input type = "submit" / > submit
<input type = "reset" / >重置
<input type="button" value="值"/>
<button></button>
下拉列表
<select>
<option></option>
<option selected></option>
</ select>
text field
<textarea rows = "rows" cols = "number of columns"> </ textarea>
h) Form packet
<the fieldset>
<Legend> </ Legend>
name: ~ ~
</ the fieldset>
label tag