HTML5 Basic Knowledge Learning notes

1.HTML5 Basic Explanation

1.1HTML5 Basic Tags:
Head: Header tags, the basic configuration of some Web pages and file references in the head set;
Body: Content tag, which is the whole page to display content part;
1.2HTML5 Title:
H1...h6, and so on, the larger the number behind the corresponding title, the smaller the font size;
1.3HTML5 paragraph
P label denotes paragraph, in P tag can write paragraph;
1.4HTML5 Connection
A tag indicates the connection, you can set a click inside to jump to other URLs;
1.5HTML5 Image
The IMG tag represents an image label, which can be displayed by setting a picture;
1.6HTML5 Line Wrapping label
The BR tag represents a newline, which is used with the last "/" because it is more canonical.

Introduction to 2.HTML5 Elements

Elements: All the code from the start tag to the end tag, the element can be nested, it is this property can be a Web page can form a combination of the effect of a change.

3.HTML Properties

You can provide more properties for an element by setting properties, which exist in the form of a key-value pair
eg:href= "xxxxx"

Common Label Properties:
H1 title Tags: align: setting alignment
Body tag: bgcolor: Sets the entire body background color
A tag: target: Specify where to open the connection

Common Properties:
-class: The name of the specified element
-ID: The unique ID of the specified element
-Style: The styling of the specified element
-Title: Additional information for the specified element

4.HTML formatting

Common Formatting Tags:
- B tags : define bold characters
-big Tags : defining large characters
-em Tags : define Accent
-I tags : defining italic text
-small Tags : defining small words
-strong Tags : defining the aggravating tone
-sub Tags : defining subscript words
-sup Tags : defining superscript words
-ins Tags : defining insert Words
-del Tags : defining delete Words

5.HTML style

Three ways to insert style sheets:

-External style sheet:
<link rel = "stylesheet" type= "Text/css" href= "Mystyle.css" >
-Internal style sheet:
<style type= "Text/css" >
Body{background-color; Red}
p{margin-left:20px}
</style>
-Inline style sheet:
<p sytle = "color:red" >

6.HTML Links

HREF attribute: A link to another document, a jump outside the page
Name property: Create a link within the document, jump within the page
eg
<a name= "Tips" > Where to jump </a>
<a href= "#tips" > Where to start the jump </a>

7.HTML table

Label
<table>:Defining tables
<caption>:Defining table Headings
<th>:Table header for defining tables
<tr>:Define rows for a table
<td>:Defining cells for a table
<thread>:Define a header for a table
<tbody>:Defining the body of a table
<tfoot>:Define a footer for a table
<col>:Defining column properties for a table
Several forms
The simplest form:
<table border= "1" >
<tr>
<td> form 1</td>
<td> form 2</td>
<td> form 3</td>
</tr>
<tr>
<td> form 1</td>
<td> form 2</td>
<td> form 3</td>
</tr>
</table>
Table with header:
<table border= "1" >
<tr>
<th> units </th>
<th> units </th>
<th> units </th>
</tr>
<tr>
<td> form 1</td>
<td> form 2</td>
<td> form 3</td>
</tr>
<tr>
<td> form 1</td>
<td> form 2</td>
<td> form 3</td>
</tr>
</table>
a table with headings:
<table border= "1" >
<caption> Important Forms </caption>
<tr>
<th> units </th>
<th> units </th>
<th> units </th>
</tr>
<tr>
<td> form 1</td>
<td> form 2</td>
<td> form 3</td>
</tr>
<tr>
<td> form 1</td>
<td> form 2</td>
<td> form 3</td>
</tr>
</table>
tags in the table:
<table border= "1" >
<caption> Important Forms </caption>
<tr>
<th> units </th>
<th> units </th>
</tr>
<tr>
<td> form 1</td>
<td> form 2</td>
</tr>
<tr>
<td>
<ul>
<li> Pineapple </li>
<li> Pineapple </li>
<li> Pineapple </li>
</ul>
</td>
<td> I want to eat </td>
</tr>
</table>
Cell Spacing Setup table:<table border= "1" cellspacing= "ten" >
Cell margin Settings table:<table border= "1" cellpadding= "ten" >
table background color, table background image settings:
Background Image: <table border= "1" background= "images/desert.jpg" >
Background color: <table border= "1" bgcolor= "Aqua" >

Use of 8.HTML lists

List Label:
-<ol>: ordered list
-<ul>: unordered list
-<li>: list item
-<dl>: list
-<dt>: list item
-<dd>: description

Examples of commonly used columns:
unordered list:
<ul type= "Square" >
<li> 1th </li>
<li> 2nd </li>
<li> 3rd </li>
<li> 4th </li>
</ul>
Using the label:<ul>,<li>
Properties: Disc,circle,square represents the symbol style before the list

There are sequence tables:
<ol start= "Ten" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
Using the label:<ol>,<li>
Property: A,a,l,i,start represents the number style that precedes the sequence table

Nested lists:
<ul>
<li> Animals </li>
<ul>
<li> Puppy </li>
<li> kittens </li>
</ul>
<li> Plants </li>
<ul>
<li> Grass </li>
<li> Floret </li>
</ul>
<li> Human </li>
</ul>
Using the label:<ul>,<ol>,<li>

Custom list:
<dl>
<dt>ahah</dt>
<dd>sssssssss</dd>
<dt>ahah</dt>
<dd>sssssssss</dd>
<dt>ahah</dt>
<dd>sssssssss</dd>
</dl>
Using the label:<dl>,<dt>,<dd>

Use of 9.HTML blocks

HTML block elements: when a block element is displayed, it usually starts with a new line
Generally have:HTML inline elements: inline elements typically do not start with a new line
Generally have:<b>, <a>,
html<div> elements: div elements are also known as block elements, which are primarily containers for combining HTML elements
html<span> element: span is an inline element and can be used as a container for text

Layout of the 10.HTML5

You can usually use a div for layout, or you can use table to lay out, using these two tags can be used to set up a Web page of the general framework, and then to the specific details of the elements;

11.HTML5 's Form

Forms Common Tags:
<form>:Form
<input>:Input box
<textarea>:text box
<label>:Control label
<fieldset>:Defining fields
<legend>:Title of the field
<select>:SELECT list
<optground>:Option group
<option>:Options in the drop-down list
<button>:Button
Common forms:
check box form:
Eg: Please choose the fruit you like to eat:
Apple <input type= "checkbox" >
Banana <input type= "checkbox" >
Peach <input type= "checkbox" >
radio button:
Eg: please choose your gender:
Male <input type= "Radio" name= "Sex" >
Female <input type= "Radio" name= "Sex" >
Drop- down box:
Eg:<select>
<option> Shanghai </option>
<option> Nanjing </option>
<option> Beijing </option>
</select>
text fields:
Eg:<textarea cols= "rows=" >please input your message here...</textarea>
button:
Eg:<input type= "Submit" value= "Submission" >
<input type= "button" value= "Submit" >
form submit data to server:
Eg:<form action= "http://localhost/MyServer/server1.php" method= "Get" >
<table>
<tr>
<th colspan= "2" > Login </th>
</tr>
<tr>
<td> User name:</td>
<td><input type= "text" name= "name" ></td>
</tr>
<tr>
<td> Password:</td>
<td><input type= "password" name= "password" ></td>
</tr>
<tr>
&LT;TD colspan= "2" ><input type= "Submit" value= "Submission" ></td>
</tr>
</table>
</form>

framework of the 12.HTML5

Frame : frames tab
Frames have a great effect on page design

Frameset: frame Set Label
Frameset tags define how to split a window into a frame
Each frameset defines a series of rows or columns
Rows, cols values specify the area to occupy the screen for each row or column

Common Tags: norsize fixed frame size, cols column, rows row
Inline frame: iframe, now recommended framework

HTML5 Basic Knowledge Learning notes