The front end of the road learning --day1

    Finally decided to learn the knowledge of front-end, after learning process will record some of the essays here. HTML, CSS, JavaScript front end of the three languages ​​in junior when he had contact, but learning is not deep enough, this time hoping to stick to it.

    Learning course prepared in accordance with known almost an article https://www.zhihu.com/question/30180100/answer/156399333 , according to this line to learn.

Course targets:

Probably know what is Web, what is HTML, CSS, JavaScript

 

HTML: a markup language

CSS: provision of language styles

Javascript: page to add some dynamic effects

HTML5: a prevailing standard of HTML

XHTML: compatible with XML, XML and HTML are hybrids, the more stringent requirements of grammar

1. common html tags 

2. Form

Form elements refer to different types of input elements, checkboxes, radio buttons, submit buttons

2.1 input element

• Text Input

Single line input field <input type = "text"> defined for text input

• single button

Input <input type = "radio"> defined radio button

• Submit button

<Input type = "submit"> defining a button to submit a form to the form processing program (form-handler)

2.2 Action property

Action execute the action attribute defined at the time of submitting the form, submit the form to the server common practice is to use the submit button, usually, the form will be submitted to a web page on the web server. If you omit the action attribute, the action will be set to the current page.

<form action="action_page.php">

2.3 Method Properties 

method attributes specify when submitting forms use HTTP method (GET or POST)

<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">

When to use get and post?

Use GET:

If the form submission is passive (such as search engine queries), and no sensitive information. When you use the GET, the form data in the page address bar is visible.

Use POST: if the data being updated form, or contains sensitive information (e.g. password). POST security is more, since the data submitted in the page address bar is not visible.

2.4 Name property

If you want to be properly submitted, each input field must be set a name attribute. The following example will only submit "Last name" input field:

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

2.5 with <fieldet> composition form data　

<Fieldset> element in the form of a combination of data, <legend> element of <fieldset> element defines header.

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

3. Form Elements

3.1

• <Input> element
• <Select> element
• <Option> element defines the options to be selected. The list will usually appear as the first option selected option
• <Textarea> element defines a multi-line input field (text field)
• <Button> element defines a clickable button

3.2 HTML5 form elements

 

HTML5 adds the following form elements:

 

• • <datalist>
  • <keygen>
  • <output>

<Datalist> element is the element specifies a list of predefined options <input>, the user will see a drop-down list of predefined options when they enter data.

<Input> elements list attribute must refer to the id attribute <datalist> element (either directly select Options drop-down box, you can also enter other text to manually)

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

　　

4. input element input type

• text

• password

• submit

• radio radio button

• checkbox checkbox

• button

• number

• date

<form>
  Birthday:
  <input type="date" name="bday">
</form>

• color

• range

• month

• week

• time

• datetime

• datetime-local

• email

• search

• tel

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

• url

5.input property

• The initial value of a predetermined input field of: value attribute
• readonly attribute: Specifies the input field that is not read-only (no changes)
• disabled attribute: Specifies the input field is disabled, disabled elements are not available and can not be clicked, disabled elements are not submitted
• size attributes: a predetermined size of the input field (in characters)
• The maximum allowable length of a predetermined input field: maxlength attribute
• HTML5 adds the following attributes
• • autocomplete
  • autofocus
  • form
  • formAction
  • formenctype
  • form method
  • formnovalidate
  • formtarget
  • height 和 width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

6. The process of site visit

 

IP address : a string of numbers is not easy to remember, such as 63.245.217.105

Domain : Because IP addresses are not easy to remember, it appeared DNS domain name system, such as mozilla.org, DNS is that you can enter the address of a particular server browser (like "mozilla.org") with the actual IP address that matches the