HTML5 Basic Primer

HTML is an abbreviation for Hypertext Markup Language (Hypertext Markup Language), although HTML is also a programming language, but in reality HTML does not remember as much syntax as C + + or the Visual Basic language. Correctly, HTML is a tag, and each tag is a specific instruction that combines the pages we see in the browser.

the concept and architecture of HTML syntax

All HTML tags have a fixed format and must be surrounded by "<" symbols and ">" symbols, such as

1. Container marking

The container tag, as its name implies, is a pair of start and end tags that surround the text with these two markers and have achieved the desired effect. Most HTML tags belong to this type of tag, and a slash "/" is added to the terminating tag.

< start tag >.....</end tag >

For example:

<title> my pages </title>

The function of the <title></title> tag is to display text in the browser's title bar.

2. Single Mark

A single tag that has only a start tag and no end tag, such as

Text change and typesetting skills

The tags that HTML uses to set paragraphs are <p>, <br>, <pre>, <blockquote>,

1. Set the marker for paragraph styles

The <p> tag can be used to differentiate paragraphs in HTML syntax, and line breaks can be done using <br> tags.

2. Set the alignment and indentation of the tag

In addition to sections and branches, the most important thing in paragraph handling is the ability to align and indent.

(1) <pre></pre> mark

This tag allows the text to be displayed in the same way that the original code is arranged.

(2) <blockquote></blockquote> mark

This tag is used to represent the reference text, and the text within the tag is wrapped and indented.

Properties of the <blockquote> tag:

Property	Setting the value	Description
Cite	URL URLs	Describe the source of the reference

3. Add a divider line

For layout effects, you can add dividers to your pages to make it easier to distinguish between themes or paragraphs.

The function is to add a separator line.

4. Set paragraph headings

5. Text effects

Span (text): Meaningless, for wrapping a section of text, modifying a particular style

This is <span style= "color:red; font-size:36px; " Text in >Span</span>

em (emphasis) Strong (emphasis) I (Tilt) B (Bold)

"Strong, EM, B, I label difference "
1, strong and EM are emphasized, strong display as bold, EM display as tilt. And, strong, the emphasis is higher than EM.
2, strong and B can be bold, both em and I can tilt. However, strong and EM have an extra layer of emphasis on semantics. HTML5 language that requires tags to be as semantic as possible.

Bullets and Numbering

1. Numbered lists

Sequence list:<ol></ol> order list
List item:<li> can have more than n </li>

<ol>
<li> the first </li>
<li> the second </li>
<li> the third </li>
</ol>

2. List of symbols

Unordered lists:<ul></ul> Unorder list
List item:<li> can have more than n </li>

<ul>
<li> unordered first item </li>
<li> unordered Second Item </li>
<li> unordered Third Item </li>
</ul>

3. Defining the list

Define a description list:<dl></dl>
List title:<dt> generally only one </dt> title shelf display
List description Item:<dd> can have n multiple items </dd> description items relative to the caption for indent display

<dl>
<dt> This is the title of the definition list </dt>
<dd> Description Item First item </dd>
<dd> Description Item Second Item </dd>
<dd> Description Item Third item </dd>
</dl>

IMG (image) tags and related properties
1. SRC: Represents the address of the reference picture.
Path Address:
① relative path: To find the image address, whichever is the current file.
A, with the current file in the same layer of the picture, directly write the picture name
b, picture in the current file Next Level: folder name/Picture name
C, the picture on the current file layer:.. /Picture Name

② absolute Path: file:///drive letter:/folder/Picture. suffix name. However, use is strictly prohibited.
③ Network address: A picture link on the network. However, it is not generally used. Because...

2, height= "" Width= "" the width height of the picture. CSS style can be used (style= "width:; height:;") Replace

3, Title: Picture title. The text that appears when the mouse is pointing up.

4, Alt: When the picture can not be loaded, the text displayed.

5. Align: Sets the position of the text around the picture relative to the picture. Top center Bottom

"Form form"
1. Two important properties: action: The server address of the form submission. Method: How the form submits data (Get/post).
The difference between the 2.get post method:

⑴get: Use URL parameter:/HTTP server address? Name1=value1&name2=value2
(? = Pass parameter, Name=value is passed in the form of a. & connection between multiple parameters)
As a result, URL routing is unsafe, all information is displayed in the Address bar, and other data can be passed freely through the address bar.
The URL parameter is limited, only a small amount of data can be passed.

⑵post: The use of HTTP requests to pass data, URL address is not visible, more secure, and there is no limit to the delivery of data.

In summary, use post to pass data.
3. "Input tag Common Properties"

⑴type: Indicates the type of input box, optional value

⑵name:input the alias of the input box, general, is required, because the data is passed in the form of Name=value.

⑶value:input the default value of the input box.

⑷placeholder:input prompt content, when the input box has value, the content disappears.

⑸tabindext= "1" controls the jump order when the TAB key is clicked, from the smallest start, one by one to the big jump, to get the focus

"Input Special attribute value"

⑴checked= "Checked" is selected by default
⑵disabled= "Disabled" settings control is not available. Use the button can not be clicked, use the input box can not be modified,
And if the input box disabled, the input box information cannot be passed back to the platform.
⑶hidden= "hidden": Hidden. Equivalent to <input type= "hidden" name= "username" value= "1234"/>
Often used to mate with disabled, or to pass data using hidden fields, depending on other needs.

4, "Input-type attribute detailed"

⑴text: Text input box
⑵password: Password input box, display small black dots when entering content
⑶radio: Radio button,
CheckBox: Check button,
The >>>name and value properties need to exist at the same time, and the property value in value is committed when committed
Example: <input type= "Radio" value= "male" name= "sex"/> Show sex= "Male" when submitted

>>>radio by using the Name property to differentiate whether it is the same group, name is the same group, only one of the same group can be selected.
>>>checked= "Checked" is selected by default (radio only one, checkbox can be selected more)
⑷file: File Upload button.
⑸submit: Submit button to submit form data
⑹reset: Reset button to reset form data to initial state
⑺image: Graphical Submit button, function with submit, can submit data
⑻button: Normal button, no function


5. "Drop-down box control Select"
⑴ notation:<select>

<option></option>
<option></option>//can have multiple
<option></option>


</select>

The ⑵name property should be written on <select></select>, with only one name for all options.
⑶multiple= "Multiple" settings select control is multi-select, you can press CTRL + Mouse for multiple selection, generally do not use.

⑷option Common Properties:
Value= "": When option does not have the value attribute, the text in the <option></option> tag is passed back to the table.
When option has value values, the Value property values are passed back to the table.
title= "" Mouse refers to the text displayed after.
Selected= "selected": Selected by default.
⑸<optiongroup label= "Shandong Province" &GT;&LT;/OPTIONGROUP&GT;: Used to group option labels, the Label property represents the group name.

Example: <select name= "City" style= "BORDER-WIDTH:2PX;" >
<optgroup label= "Shandong Province" >
<option value= "Yantai" > Yantai </option>
<option value= "Weihai" > Weihai </option>
<option value= "Qingdao" > Qingdao </option>
</optgroup>
<option value= "Select" selected= "selected" >[Please select]</option>
</select>

6, "TextArea Text field"
⑴ notation:<textarea></textarea>
⑵ set wide style= "width:200px; hight=150px; "Self has cols=" "rows=" "property, but not commonly used
⑶readonly= "ReadOnly" is set to read-only mode, and editing is not allowed.
⑷style= "Resize:none;" setting to wide height does not allow modification.
⑸style= "overflow:;" Sets how to handle text when it is out of range.
>>> can also set the horizontal vertical direction of the display by overflow-x/overflow-y
>>> common property values: Hidden text that is out of range, hidden cannot be displayed
Scroll scroll bars are displayed regardless of the number of words
Auto automatically determines whether or not scroll bars are displayed based on the amount of text

7, "form form border and title"
<fieldset>//table single-sided box
<legend> Contact </legend>//form title
</fieldset>

Note:>>> If you want the title to be embedded in the border, you need to write the caption label inside the border label.
>>> a form that can have multiple borders + titles combined.
8, "HTML5 smart form"
(1) H5 the new form property of input to point to the ID of a specific form form.
Implementing input does not need to be placed in the form tag and can be submitted via the form.

<form id=foo>
...
</form>
<input form= "foo" >

Cases:
<form action= "t.html" method= "Get" id= "Form1" ></form>
<input type= "text" name= "test" form= "Form1"/>



(2) <input type= "" > New properties See the IMG type new property picture
Email, URL, date, time, month, week, number, range, color.

Cases:
<form action= "t.html" method= "Get" id= "Form1" ></form>
<input type= "Color" name= "test" form= "Form1"/>


(3) New attribute of INPUT element:
Autocomplete: Automatically completes the function, records the user's previous input, and automatically prompts to complete the input on the next input.
>>> attribute value: On/Off
>>> can be used on a form form to automatically switch all controls on the entire form.
You can also use it on input to modify a specific input box.
>>> most browsers, which are turned on by default.

Autofocus: Auto Get focus, autofocus= "autofocus", can only set INPUT element to get focus automatically.
Form: the owning form. Determine which form this input enters by using the ID of the from form.
Required: Required, required= "required" set input required, otherwise block the submission.
Pattern: Validating the mode of input using regular expressions (follow-up explanation)
PLACEHOLDER: Tip content, when there is value, cancel the prompt.

HTML5 Basic Primer