PHP Basic Learning Note (1), PHP Basic Learning Note _php Tutorial

PHP Basic Learning Notes (1), PHP Basic Learning Notes

What is a form? --The form is not a table.

Some HTML elements in which the user can provide certain data or information or options. The form usually has a submit button, which can then be used by the data/information/options available to the program on the server-data processing.

--The core of the form is data.

Form label composition and form:

What are the form items?

Single-line text box:

Other properties:

Value: Sets the initial text within it

Size: Sets the width of its input box (in "character justifies")-where the number of characters can be placed

MaxLength: Sets the maximum number of characters that the input box can enter

ReadOnly: This is an "no value" attribute, which means "read Only", then the notation is: readonly= "ReadOnly"

Disable: Setting this input box is "invalid", that is, the data is invalid.

Password box:

Other properties:

Value: Sets the initial text within it

Size: Sets the width of its input box (in "character justifies")-where the number of characters can be placed

MaxLength: Sets the maximum number of characters that the input box can enter

Single option:

Note: A single option is usually required to have value values;

Other properties:

Checked: Indicates that the option is selected by default. is also a "No value attribute"

Name Special Note: A single set of options requires the name value to be the same.

Multiple options:

Note: Multiple options usually must have value values;

Other properties:

Checked: Indicates that the option is selected by default. is also a "No value attribute"

Submit button:

Note: Click the Submit button, the form will be "submitted", that is, the data will be passed into the form of the action set by the file.

Picture button:

Description: The function of the picture button is actually "submit", but it shows the effect is a picture-this is beneficial to beautify the page.

Reset button:

Note: Data that is filled out or selected by all users of the form will be restored to their original state

Normal button:

Note: There is no effect on the form, but you can generate "actions" from it to achieve other requirements (JS program)

File fields:

Description: Allows the user to select a local file (and send it to the server)--the file is also data.

Hidden fields:

Description: Not visible on the interface, but as a "hidden data" submitted to the server-programming required.

Drop-down selection: Implemented with SELECT and option tags. But think of it as a "form item."

Text 1Text 2The word 3 .............

Description

You can use the selected property on the option label to indicate the default selected item for the Select Element (the first item is selected by default).

The multiple property can be used on the Select tab to enable the Select element to "Choose multiple items" (that is, only one is selected by default)

Multiline option (also called list option): The multiline option is actually just a "warp" of the dropdown selection--setting its size value greater than or equal to more than one line.

Text 1Text 2The word 3 .............

Multiline text box:

Description

Rows sets a number of rows that represent the number of lines of text that can be displayed by the multiline text box

The number of columns set by COLS is a number that indicates the number of lines of text that the multiline text box can display

This label does not have a value property. But its actual "value" is all that is placed in the middle of this label.

Note: The form item must have a name attribute to indicate its "first name"-The server takes the data from that name.

Frame labels

The first idea: we always display only one page in the open window.

But:

We can actually open more than one page in a window-in fact, it's a window that shows a page, but we use certain tags (frameset) to split a "big window" into several "small windows".

First, be clear:

1, the body tag cannot be used with the frame label (frameset)-that is, the body tag uses the frameset tag instead

2, use frameset tag to use Framseset document type

The specific segmentation code is as follows:

。。。。。。。。。。。。。

The value of the cols is a continuous number or percentage of the width of the column, separated from each other by (,), where the "*" number represents the width of the "rest". Like what:

Cols= "100,800": means the large window is divided into two small windows, the first is 100 wide, the second is 800 width

Cols= "100,200,*": means the large window is divided into 3 small windows, the first is 100 wide, the second is 200 wide, the rest to the 3rd

Cols= "15%, *"

The values of rows are consecutive numbers or percentages that represent the width of the row, separated by (,), where the "*" number represents the width of the remainder. Like what:

Rows= "100,200,*"

Row= "20%, *"

Note: A frameset can only be split in one Direction (column or row)

Introduction to CSS

Css:cascading style Sheet (cascading style sheets)

CSS allows us to control the appearance of a Web page from the following two aspects:

1, the volume control of the appearance of the page, so that we save labor.

2, precisely control the appearance of the Web page: to the pixel level.

The basic grammatical form of CSS:

Selector {CSS Property name 1: Value 1;css property Name 2: Value 2; ...}.

Example:

font{color:red; font-weight:bold; font-size:18px;}

dt{

font-size:14px;

Font-weight:bold;

Color:pink;

}

A statement that distinguishes between two attributes

HTML attribute: Written in the label, in the form of: Property name = "attribute Value"--this quotation mark can be omitted, but the wall crack recommendation does not omit

--can also be called "tag properties"

The--html property is usually "individual tag's own property, generally different"

--Very few tags using the same HTML attribute

CSS properties: Written in the curly braces of the selector, in the form: Property Name: Attribute value-Special note that values cannot be quoted

--can also be called "style properties"

The--css property is usually "available for each label" and is generally the same

--Very few tags with the same CSS properties

Selector category

Tag Selector:

Form: Tag name {...}

Meaning: Refers to the property settings in which all the tags in the page are applied.

Class selector:

Form:. Class Name {...}

Meaning: The value of the class in the reference (corresponding) page applies the property setting for all tags of the class name.

Example:

Sympathetic information

ID selector:

Form: #id名 {...}

Meaning: The value of the ID in the reference (corresponding) Web page applies the property setting for that label for that name.

Note: Typically, the ID name in a Web page is not the same, because the ID itself means "unique".

Example:

Sympathetic information

Universal selector:

Form: *{....}--Universal selector Only this one form (symbol)

Meaning: It automatically refers to "all labels", that is, all labels apply this property setting

Note: The universal selector is used with caution, usually only to set a few basic properties, such as text color, text size, Padding,margin

Pseudo-Class selectors:

Form:: Pseudo-class name {...}

Note: The pseudo-class name is only a few of the internal rules of the system, not our own definition, such as: link, visited, hover, active. Their meanings are also specific. Typically, these pseudo-classes are used only for a tags, and their form and meaning are usually:

a:link{...}: Indicates the state of a link tag when the page was initially opened (initial link state)

a:visited{...}: Indicates the status of a link tag after a click (Access) (post-access status)

a:hover{.}: Indicates the state of a link tag when the mouse is placed (hover state)

A:active{...}: Represents a state (active state) where a link tag is pressed but not lifted.

However, in the latest browser, for security reasons, the hover and visited effects of a have some properties that are not available.

Composite selector: Hierarchy Selector

Form: Selector 1 selector 2 {...}..

Meaning: In the corresponding label of selector 1, those labels corresponding to selector 2 .... where selector 1 and selector 2 can be any of the previously learned selectors, and this hierarchical relationship can be multi-layered, such as:

#d1 div{...}

. CC1 P span{...}

P. CC2 img{...}

#d1 p a:hover{....}

Example:

Paragraph 1

Paragraph 2

Composite selector: Group Selector

Form: Selector 1, selector 2 {.....}

Meaning: These two selectors all use the same property settings, in fact, is nothing more than a abbreviated code, otherwise they have to use two selectors to write.

. a {color:red; font-size:15px;}

. b{color:red; font-size:15px;}

È

. A,. b{color:red; font-size:15px;}

Other composite Forms (example):

div.cc1{}: Represents a div tag with a class value of CC1, which is followed by Div. cc1{...} is completely different.

P#d1{.}: Represents a P tag with an ID value of D1, but this form is not recommended in fact (not very significant).

Framework:

A framework tag is a technique for dividing the current window into smaller windows. The framseset replaces the body tag and uses the frame document type.

。。。。。。。

Basic CSS Concepts:

CSS is used for the purpose of setting certain (some) aspects of a label (element) in a Web page to a certain (some) value.

The basic syntax for CSS is:

Selector {CSS Property 1: Value 1;CSS attribute 2: Value 2; ...}

The so-called selector is actually some sort of grammatical form that can correspond to a certain (some) tag in a webpage.

CSS Selector Categories:

Tag Selector:

An English word {...}

The so-called English word, in fact, is a label name that should exist

Class selector (classes selector)

. class Name {...}

Ah ah ah ah ah

ID selector:

#id名 {...}

Special Note: Title, class, ID is what we call a "common attribute"-that is, anyone can use.

Universal selector:

*{....}

Pseudo-Class selectors:

A:link{...}

A:visited{...}

a:hover{... }

a:active{....}

Note: The above 4 pseudo-classes used for a tags usually have to be written in the order described above.

In addition, in practical applications, it is often simplified to:

A{...}

a:hover{....}

The meaning is: a connection label only "Mouse on the state" and "other states"

Hierarchy selector:

Selector 1 selector 2{..... ｝

Group selector:

Selector 1, selector 2{..... ｝

Style properties for text paragraphs

Color: Sets the colour of the text in a label, the color value can be used in English words, 16 syntax and RGB syntax:

color:red; Color: #f0fcf8; COLOR:RGB (123, 88, 205);

Font-size: Sets the text size, usually pixels (px)--The average size of a commercial web site is usually 12px.

Font-weight: Sets the text bold (bold) or non-bold (normal).

Font-style: Set text italic (italic) or non-italic (normal)

Font-family: Set the font name of the text, you can use multiple font names, separated by commas, meaning is: First use the first font, if the user does not have the first computer, then the second one, and so on. Example:

Font-family: Song body, imitation, Microsoft ya Black, arial, "Times New Roman";

Line-height: Sets the line height of the text, which is usually the PX, which is the height of the space occupied by a line of text-the height of the row is not the text.

Letter-spacing: Set the distance between characters (or letters), Chinese is actually the "word" interval.

Word-spacing: Sets the distance between words-usually only for Western Latin-language characters.

Text-align: Sets the horizontal alignment of the text. Its function is equivalent to the Align attribute in the Label property. Note, however, that align as an HTML attribute is actually used in only a few of these tags, but text-align is available for almost any label.

Text-indent: Sets the indent distance for the first line in a paragraph, usually the PX.

Text-decoration: Set the modifier line for text: underline (underline), Underline (Line-through), Underline (Overline), none (None)

Vertical-align: Sets the vertical alignment of text in a table box (cell): Top (top-aligned), Middle (aligned), bottom (bottom-aligned)

Box Model Preliminary

The box is the most important concept in CSS.

Box

First, create a concept: almost all labels are actually a box-and the so-called box is nothing more than a rectangular area. In fact the so-called Web page, is nothing more than a box set a box.

A box has the following area (structure) Composition:

Border (border): A line-style area that can be solid or dashed or other shapes.

Margin: Also known as "boundary", a blank area outside the border line, meaning "cannot place object"

Padding (padding): Also called "filler", a blank area within the border line, meaning "cannot place object"

Content area (no corresponding CSS property name): Refers to an area in a box where an "object" can be placed-that is, the main area of the box. The objects placed here can be plain text or other tags--corresponding to the "Content section" in the HTML we learned earlier. The content area typically can only set its width-height attribute (width,height).

The various components of a box are shown by:

The idea of "separating content from expression" in web design

We used to learn HTML, saying that tags have a "table-shaped meaning" role. In fact, it can be said that the content and its performance mixed together.

Right now:

CSS technology can actually put the performance of each label in a Web page "put" into a specific place (such as a style tag), the remaining parts (tags and text content, etc.) are collectively referred to as "structure/content". This approach is called the "separation of content and expression of thought"

Two initial states of a box (basic performance):

Div-like box: A box automatically "occupies one line" (regardless of its internal content): This is the "block box" (block Element). Common Block Boxes:

P, HR, H1~H6, table, form, UL, Li, ol, DL, DT, DD, blockquote, PRE,

Features: can set the fixed width height, margin,padding,

Like a span box: The contents of a box appear side-by-row with similar boxes, unless the line is full, and then naturally to the next line-similar to the expressive nature of the text. : This is the In-line box (inline Element). In-line boxes usually put "final data content", such as text, images. Other in-line boxes:

b, strong, font, I, U, A, IMG, input, textarea, select,

Features: Wide height can not be set, but by its content "out", margin and padding no upper and lower aspects of performance.

Usually, the In-line box is the "small box", the Block box is the "big box",

Layout Preliminary (principle)

The so-called layout, in fact, refers to the content of the Web page in a certain way to the appropriate position up.

Basic Steps for layout:

1, the "current layout" in the visual boundaries of the obvious way to divide a number of blocks, divided into only two ways:

A) upper and lower structure: At this point, as long as the use of several boxes, natural is the upper and lower structure, no additional settings.

b) left and right structure: use several boxes at this time, and make the corresponding float, the usual mode:

Floating Explanation:

Floating like bubbles in the water, will "float on the net"

A more figurative metaphor: everyone (all labels) is "tiled on the ground", each occupying a certain area, floating elements are "floating" to the ceiling, and occupy the usual "ground area".

Floating in addition to the performance of other elements to seize the site, its main characteristics (that is, the destruction effect) is actually: so that its parent box to lose a reasonable height-the parent box has been unable to wrap its floating inside the box! This is basically not allowed in the layout! Then we must use a complementary approach to achieve a reasonable inclusion-the parent box wrapping the child box. There are 3 ways to get the parent box to the correct effective height:

1. Set a fixed height for the parent box-when the design is usually known for its height and does not change back.

2, add a clear floating empty box to the inner end of the parent box, as follows:

3, set a CSS property for the parent box: Overflow:hidden;

It is best to summarize: the layout needs to be left and right, the left and right arrangement needs to float, floating need to revise its destruction effect-let the parent box to properly wrap its child box.

http://www.bkjia.com/PHPjc/965021.html www.bkjia.com true http://www.bkjia.com/PHPjc/965021.html techarticle PHP Basic Learning Notes (1), what is the PHP basic learning note form? The form is not a table. Some HTML elements in which the user can provide certain data or information or options. Form Pass ...

