HTML5 with CSS 1. Web standards and composition

Learning Goals

• 1, the introduction of the professional, HTML-related concepts, HTML development history
• 2, web standards, W3C/WHATWG/ECMA related concepts
• 3, the application of related software and the creation of the site
• 4. HTML basic structure and HTML syntax
• 5. Common HTML Tags

First, the introduction of the professional, HTML-related concepts, HTML development history

Introduction of this major

Mobile Front/web Front end

Site Building Process

Second, web standards, W3C/WHATWG/ECMA related concepts

The concept and composition of web standards

Organization Analysis:
(1) World Wide Web Consortium, founded in 1994, is the most authoritative and influential international neutral technology standards Organization in the field of Web technology.
The architecture (XHTML, XML) and performance (CSS) standards, non-profit-making. )
(2) ECMA (European Computer Manufactures association) European Federation of Computer Field dealers.
ECMA developed the Behavior (DOM (Document Object model), ECMAScript) standard

(3) The Working Group on Hypertext Application of WHATWG Web pages is:

An organization set up to promote the Web HTML 5 standard. In 2004, it was made up of opera, the Mozilla Foundation and Apple's browser makers.

Introduction to HTML and related concepts

HTML refers to the descriptive language of the Hypertext Markup Language (Hyper Text Markup Language) www world Wide Web.

XHTML refers to extensible Hypertext Markup Language (identity language) (extensible Hypertext Markup Language), which is a markup language that behaves like a Hypertext Tag language (HTML), but is more restrictive in syntax.

HTML5 refers to the fifth major revision of HTML (5th version) (HTML5 is the result of the collaboration between the World and WHATWG)

HTML Development History

Third, the application of related software and the creation of the site

1) The role of the site
A/To summarize all the Web pages, materials, and links between them.
b/Plan all content and code integration resources for the site
2) steps to create a site
Create Web pages with various folders css, JS, images
3) naming rules for files
Naming rules: in English, not Chinese
b/Name All in lowercase English letters, numbers, underscores the combination, which must not contain Chinese characters, spaces and special characters; @#￥%......! -_
C/The homepage of the website must be named index.html not recommended for use shouye.html

Iv. HTML basic structure and HTML basic syntax

HTML BASIC structure

Expand Knowledge point 1:

HTTP-EQUIV is similar to the HTTP header protocol, which responds to the browser with some useful information to help correct and accurately display the content of the Web page
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
Declares that the root element of the document is HTML, which is defined in a DTD (document type definition) in which the public identifier is defined as "-//W3C//DTD XHTML 1.0 transitional//en". The browser will understand how to find a DTD that matches this public identifier. If not found, the browser uses the URL following the public identifier as the location for the DTD
Also, it is necessary to know that the three document types specified in HTML 4.01, and the three types specified in XHTML 1.0
The XML document types are: Strict, transitional, and Frameset.
There are four types of definition documents: Strict (strict type), trasitional (commonly used in transition), Frameset (frame type), mobile browser DTD mobile
And this sentence For the document declaration, it is enough to know this, now the HTML5 is no longer so cumbersome, just need:
<! DOCTYPE html>
You can do it.

Basic syntax for HTML

1. < general Mark >
< Tag Property = Property Value Property = property value ></Tag >
such as:

2. Empty tags
< tag attribute = "attribute value"/>
Example: <meta charset= "Utf-8" > <br/>

Description
1. The first word written in <> is called a tag, tag, element.
2. Tags and attributes are separated by spaces, and attribute and attribute values are concatenated with an equal sign, and attribute values must be placed within the "" number.
3. A tag can have no attributes or multiple attributes, and the attributes and attributes are not sorted in order.
4. Empty tag has no end tag, replace with "/".

Five, HTML common tags

1. Text title (H1-H6)

HTML Title Tag usage Principles :

H1 in a Web page is best used only once, such as the use of a Web logo.

2. Paragraph text (p)

<p> paragraph text content </p>
Identify a paragraph (paragraph with paragraph spacing between paragraphs)

3, Space

&nbsp;
The occupied position does not have a definite value, which is related to the current font size.

4. Line Change (BR)

<br/>
Line break is an empty tag (Force line wrapping)

5, bold and bold with two marks

A, <b> bold content </b>
B, <strong> bold content </strong>

6. Tilt

<em></em>,<i></i>

7. Horizontal Line

8. List (UL,OL,DL)

There are three kinds of lists in HTML: unordered list, sequence table, custom list

* Unordered List
Unordered list consists of:
<ul> (unordered list)
<li></li>
<li></li>
．．．．．．
</ul>* ordered list
A sequence table consists of:
<ol> (ordered list)
<li></li>
<li></li>
．．．．．．
</ol>* a custom list
<dl> (definition list)
<dt> nouns </dt>
<dd> Interpretation </dd>
(Definition Description)
．．．．．．
</dl>

Knowledge Extension 2----the properties of a sequence table

1), type: Specifies the types of bullets for list items in the list
Syntax: <ol type= "a" ></ol>
1 Sequential list with numeric order (default) (1, 2, 3, 4).
An ordered list of alphabetical order, lowercase (a, B, C, D).
An ordered list of alphabetical order, uppercase (A,B,C,D)
I roman numerals, lowercase (i, II, III, IV).
I roman numerals, uppercase (I, II, III, IV).
2), the Start property specifies the starting point of an ordered list.
Syntax: <ol start= "5" ></ol>

9. Insert Picture

Note: The image you want to insert must be placed under the site
Title role: in your mouse hover over the picture when a small hint, the mouse left there is no, the vast majority of HTML tags are supported by the Title property, the title attribute is specifically to do the informational
ALT: The ALT attribute is a hint that appears on the page when your image is not loaded for some reason, and it will output directly to the location where the image was originally loaded.

* Relative path notation:
1) When the current file is in the same directory as the target file, write the target file name + extension directly,
2) When the current file is in the same directory as the destination file, the following is the wording:
Folder name/destination file full name + extension;
3) when the folder in which the current file is located and the folder in which the destination file is located is in the same directory, the following is the wording:
.. /destination file folder name/destination file filename + extension;

10, the application of hyperlinks

Grammar:
<a href= "destination file path and full name/connection address" title= "hint text" > link text/Picture </a>
<a href= "#" ></a> Empty link
Properties: Target: Page Open with default property value _self.
Property value:_blank new window opens
<a href= "#" target= "_blank" > new page Open </a>

11. Usage of DIV and span

<div ></div>

No specific meaning, collectively referred to as block tags,
Used to set the document area, which is a common object for document layout

<span> </span>
Text node labels
Can be a small piece of text, or a word.

12. Function and composition of data tables

Function: Display data

Table composition
<table width= "value" height= "value" border= "value" bgcolor= "value" cellspacing= "value" cellpadding= "value" >
<tr>
<td></td>
<td></td>
</tr>
</table>

Note: A TR represents a row; a TD represents a column (a cell)
* Related properties of data tables
1) width= "Table width"
2) height= "Table height"
3) border= "table border"
4) bgcolor= "Table background color" Bg=background
5) bordercolor= "table border Color"
6) cellspacing= "spacing between cells and cells"
7) cellpadding= "Space between cell and content"
8) Alignment: align= "Left/center/right";
9) Merge Cell properties:
colspan= "Number of columns of cells to merge" merge columns;

rowspan= "Number of rows to merge cells" merge rows;

13, the role and composition of the form

The function of a form: to collect information from a user;

1), Form box

<form name= "form name" method= "Post/get" action= "" ></form>

2) text box

<input type= "text" value= "Default value"/>

3) Password box

<input type= "password"/>
<input type= "password" placeholder= "password"/>

4) Reset button

<input type= "reset" value= "button content"/>

5) Single box/radio button

<input type= "Radio" name= "RAL"/>
<input type= "Radio" Name= "RAL" checked= "checked"/>
The Name property in the radio button must be written, and the Name property value of the same group of radio buttons must be the same.
Checked= "Checked" (selected by default;) disabled= "disabled" disabled

6) check box

<input type= "checkbox" name= "like"/>
<input type= "checkbox" Name= "like" disabled= "Disabled"/> (disabled= "disabled": Disabled)
(checked= "Checked": Selected by default)

7) drop-down menu

<select name= "" >
<option> Menu Contents </option>
</select>

8) multiline text box (text field)

<textarea name= "Textareal" cols= "character width" rows= "line Count" >
</textarea>

9) button

<input name= "'" type= "button" value= "buttons contents"/>
<input name= "'" type= "Submit" value= "button contents"/>
<button></button>

The difference between button and submit is:

Submit is the Commit

button to the role of the commit information, type is the button only play the role of jump, do not commit.

Extended Knowledge point 3: Meaning of the use of the Value property for different input types

The Value property sets values for the INPUT element.
The use of the Value property differs for different input types:
Type= "button", "Reset", "submit"-defines the displayed text on the button
Type= "text", "password"-defines the initial value of the input field
Type= "checkbox", "Radio"-defines the value associated with the input
Note: The Value property must be set in <input type= "checkbox" > and <input type= "Radio" >.

Expand Knowledge point 4:

<form name= "form name" method= "Post/get" action= "" ></form>

Two ways to get data in a form what is the difference between get and post?

1. Get is the data that is fetched from the server and post is the data sent to the server.
2. Get is the URL where the parameter data queue is added to the Action property of the submission form, and the value corresponds to the field one by one in the form, which is visible in the URL. Post is the HTTP post mechanism that places the fields within the form with their contents in the HTML header, along with the URL address referred to by the Action property. The user does not see the process.
3. For Get mode, the server side uses Request.QueryString to get the value of the variable, and for post, the server side uses Request.Form to obtain the submitted data.
4. Get transmits a small amount of data, cannot be greater than 2KB. Post transmits a large amount of data, which is generally not restricted by default.
5. Get security is very low, post security is high. But the execution efficiency is better than the Post method.
Suggestions:
1, get the security of the method is less than the post, including confidential information, it is recommended to use the Post data submission method;

2, when doing data query, it is recommended to use Get method, and in the data to add, modify or delete, the proposed post method;

HTML5 with CSS 1. Web standards and composition