"Frontend" HTML summary.

Programming languages: interpreted and compiled

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.  ^...

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 Labels

Caption Table title

*tr Row Labels

*th Column Header Label

*TD column Labels

For printers, it helps to see the code before writing the header and footer to the table body

*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.

"Frontend" HTML summary.