Web Front End: Html+css+javascript

First, the introduction of HTML:
---------------------------------------
1. What is HTML?
Hypertext Markup Language, < tag name >--tags (tags, nodes)

2. HTML is composed of: tags and content

3. There are two types of programming languages: Explanatory languages (HTML, PHP, Javascript) and compiled languages (c, C + +, Java

4. HTML tag components, attributes, entities

Entities for HTML: <:&lt;  >:&gt; Space:&nbsp;

5. Comments in HTML: <!--....-->
Purpose of the note: 1. Auxiliary Instructions 2. Code debugging

6. Syntax for HTML tags (tags): tags are enclosed by "<" and ">"
Double label:< tag name >....</tag name >
Single label:< label name/>

7. Color in HTML: can be a color word: red/blue/green/yellow ...
It can also be: #000000---#ffffff
Hex: 0123456789abcdef
The first two are red, the median is two green, and the last two represent blue.

Second, the head header setting in HTML
----------------------------------------
Set page encoding: <meta charset= "Utf-8"/>
Keyword: <meta name= "Keywords" content= "keywords"/>
Description: <meta name= "Description" content= "Introduction, description"/>
Page Title:<title> title of this page </title>
Import CSS file: <link type= "Text/css" rel= "stylesheet" href= "**.css"/>
CSS code: <style type= "TEXT/CSS" > Embed CSS style code </style>
JS file or code: <script > ... </script>
... ...

Text tags, formatting tags in html
----------------------------------------
Text Tags:
1. *<br/> line break
2. *<p>...</p> Change Paragraph
3. <i>...</i> Italic
4. <em>...</em> emphasizes italic
5. <b>...</b> Bold
6. *<strong>...</strong> emphasis on bold
7. *8. <cite></cite> References
9. <sub&gt </sub> ^...
10.*<del></del> Delete Line
....

Formatting Tags:
1. *<br/> line break
2. *<p>...</p> Change Paragraph
3. List:
*<ul> unordered List
<ol> ordered list where type value: A a I I 1 start property represents the starting value
*<li> list Items

<dl> Custom Lists
<dt> Custom List Header
<dd> Customizing list content
4. *<div> <span>

Iv. hyperlinks in *html a
------------------------------------------------
*<a href= "" ></a> hyperlink Tag
attribute: href must, refers to the link jump address
Target: Indicates how the link is opened:
_blank New Window
_parent parent Window
_self this window (default)
_top Top-level windows
FrameName window Name
Title: Text hint attribute (details)
Anchor Point Links:
Define an anchor point: <a id= "A1" ></a> previously used <a name= "A1" ></a>
Use Anchor point: <a href= "#a1" > jump to A1 </a>


Five, * picture tag img
---------------------------------------
Insert a picture in a webpage
Properties: src: Image name and URL address
ALT: Message when a picture fails to load
Title: Text Prompt Property
Width: Picture width
Height: Picture height
Border: Border line thickness

VI. Multimedia Tags (familiar)
------------------------------------
<audio src= "./images/beidahuang.mp3" controls= "Controls" >
Your browser does not support playback
</audio>
<br/>
<audio controls= "Controls" >
<source src= "./images/beidahuang.mp3" type= "Audio/mpeg"/>
Your browser does not support playback
</audio>

<br/><br/>
<video controls= "Controls" width= "height=" >
<source src= "./images/fun.mp4" type= "Video/mp4"/>
<source src= "MOVIE.WEBM" type= "VIDEO/WEBM" >
Your browser does not support video playback
</video>

<video controls Loop poster= "Tiao.jpg" >
<source src= "MOVIE.WEBM" type= "VIDEO/WEBM" >
<source src= "Movie.ogg" type= "Video/ogg" >
<source src= "Movie.mp4" type= "Video/mp4" >
Your broken browser should throw away, not support video tags
</video>

<br/><br/>

<embed src= "/images/haowan.swf" width= "height="/>

Seven, * Table label
------------------------------------
*table Table Tags: properties: Border width cellspacing cellpadding
Caption Table title
*TR Row Labels
*th Column Header Label
*TD column Labels

*thead table Header
*tbody Table Body
Tfoot Footer

Viii. **form Form Labels
---------------------------------------------------------
1. <form></form>--form label
Form label Common Properties:
*action Property: The Destination Address (URL) of the submission
*method properties: How to submit: Get (default) and post
The Get method is the URL address bar visible, the length is limited (ie2k Firefox 8k), relatively insecure.
The Post method is the URL address is not visible, the length is unrestricted, is relatively safe.
Enctype: Submission Type
Target: Where to open the destination URL.
Name: The attribute is the name of the form. HTML5 not supported. Replace with the ID.

2. The <input> form item label input defines the input field in which the user can enter data. In HTML 5, the type attribute has a number of new values.
Detailed below are detailed below:
Example: <input type= "text" name= "username" >

3. <select> tag Create drop-down list.
*name property: Defines the name that is used to store the drop-down value of the
Size: Defines the number of items visible in the menu, HTML5 does not support
Disabled when this property is true, the menu is disabled.
Multiple multi-choice
*<option> drop-down selection tab, used for embedding into <select> tags;
*value property: The value of the drop-down item
*selected property: The default drop-down specifies an item.

4. *<textarea> multiple lines of text input area
*name: Defines the name that is used to store values in the text area.
*cols: Specifies the number of columns visible within the text area.
*rows: Specifies the number of rows visible within the text area.
Disabled: Whether to disable
ReadOnly: Read-only
...
The default value is between two labels

5. *<button> Label definition button.
You can place content, such as a document or an image, in a BUTTON element. This is where the element differs from the button created by the INPUT element.


6. <fieldset> HTML5 tags--fieldset elements group related elements within a form.
Disabled property: Defines whether the fieldset is visible.
Form property: Defines one or more forms that the fieldset belongs to.

7. <legend> HTML5 label--<legend> tags are <fieldset>, <figure>, and <details> element definition headings.
<form>
<fieldset>
<legend> Health Information:</legend>
Height: <input type= "Text"/><br/>
Weight: <input type= "Text"/><br/>
</fieldset>
</form>

8. <optgroup> HTML5 label--<optgroup> label define option group. This element allows you to combine options
Examples:
<select>
<optgroup label= "Swedish Cars" >
<option value= "Volvo" >Volvo</option>
<option value= "Saab" >Saab</option>
</optgroup>
<optgroup label= "German Cars" >
<option value= "Mercedes" >Mercedes</option>
<option value= "Audi" >Audi</option>
</optgroup>
</select>

9. <datalist> HTML5 label--<datalist> label defines a list of optional data. In conjunction with the INPUT element, you can make a drop-down list of input values.
Examples:
<form action= "demo_form.php" method= "Get" >
<input list= "Browsers" name= "Browser" >
<datalist id= "Browsers" >
<option value= "Internet Explorer" >
<option value= "Firefox" >
<option value= "Chrome" >
<option value= "Opera" >
<option value= "Safari" >
</datalist>
<input type= "Submit" >
</form>

The properties in the **<input/> form item can provide
*type property: Represents the type of the form item: The value is as follows:
Text: Single-line textbox
Password: Password entry box
CheckBox: Multiple marquee note to provide value values
Radio: Radio box note to provide value values
File: Upload selection box
Button: Normal buttons
Submit: Commit button
Image: Picture Submit button
Reset: Reset button to revert to start (when first turned on) effect
Hidden: The main form hides the field, and if the form is submitted with a piece of information, but does not require user modification
*name Property: The name of the table item that stores the value of the content
*value Property: Entered value (default specified value)
Size property: The width value of the input box
MaxLength property: Maximum length of input for input box
ReadOnly Property: Read-only property on input box
*disabled Properties: Disabling properties
*checked properties: Specify default options for the selection box
AccessKey Properties: Specify shortcut keys (not commonly used) (ie:alt+ key Firefox: alt+shift+ key)
TabIndex property: Specifies the order in which the TAB key is toggled by number (not commonly used)

SRC and Alt are set for the picture button

NOTE: The Reset reset button restores the form data to the state it was on when it was first opened, not empty
The image Image button, which has the Submit form feature by default.

This article is from the "itunics" blog, make sure to keep this source http://unics.blog.51cto.com/11776952/1795617

Web Front End: Html+css+javascript