Php basic learning Notes (1)

: This article mainly introduces the basic learning notes for php (1). If you are interested in the PHP Tutorial, refer to it. What is a form? -- The form is not a table.

Users can provide some html elements with certain data, information, or options. A form usually has a "submit" button, which can then be used by programs on the server for data processing.

-- The core of a form is data.

Form tag composition and form:

What form items are there?

Single row text box:

Other attributes:

Value: set the initial text.

Size: set the width of the input box (unit: "character width")-The number of characters that can be placed in it

Maxlength: sets the maximum number of characters that can be entered in the input box.

Readonly: this is a "valueless" attribute, indicating "read-only", written as: readonly = "readonly"

Disable: Set the input box to "invalid", that is, the data is invalid.

Password box:

Other attributes:

Value: set the initial text.

Size: set the width of the input box (unit: "character width")-The number of characters that can be placed in it

Maxlength: sets the maximum number of characters that can be entered in the input box.

Single option:

Note: a single option usually requires a value;

Other attributes:

Checked: indicates that this option is selected by default. It is also a "valueless property"

Note: A group of single options must have the same name value.

Multiple options:

Note: values are usually required for multiple options;

Other attributes:

Checked: indicates that this option is selected by default. It is also a "valueless property"

Submit button:

Note: When you click the submit button, the form will be "submitted", that is, the data will be transferred to the file set by the form action.

Image button:

Note: The image button function is actually "submit", but the displayed effect is an image-this is conducive to page beautification.

Reset button:

Note: all users in the form are restored to the initial state.

Normal button:

Note: it does not affect the form, but it can generate "actions" to achieve other requirements (js programs)

File domain:

Note: You can select a local file (and send it to the server). The file is also data.

Hidden domain:

Note: The interface is invisible, but the interface is submitted to the server as a "hidden data"-required for programming.

Select from the drop-down list: select and option labels are used in combination. However, we need to treat this as a form item"

Text 1 Text 2 Text 3......................

Note:

You can use the selected attribute on the option label to indicate the default selected items of the select element (the first item is selected by default ).

The multiple attribute can be used on the select tag so that the select element can be "selected multiple" (that is, only one can be selected by default)

Multi-row option (also called the list option): The multi-row option is only a type of "deformation" selected from the drop-down list. if the size value is set to be greater than or equal, multiple rows are formed.

Text 1 Text 2 Text 3......................

Multi-line text box:

Note:

The number of rows set by rows is a number, indicating the number of lines of text that can be displayed in the multi-row text box

The number of columns set by cols is a number, indicating the number of lines of text that can be displayed in the multi-row text box

This tag does not have the value attribute. However, the actual "value" is all content in the middle of the tag.

Note: all form items must have the name attribute to indicate their "names"-the server uses this name to obtain the data in them.

Framework tag

First concept: we always display only one webpage in a window.

However:

In fact, we can also open multiple webpages in a window. the essence is that a webpage is displayed in a window, but some specific tags (frameset) will be used) to split a "big window" into several "small Windows ".

First, make it clear:

1. the frame tag (frameset) cannot be used. that is, the body tag is replaced by the frameset tag.

2. framseset document type is required to use the frameset label.

The specific splitting code is as follows:

.............

The value of cols is a number or percentage that consecutively represents the column width. they are separated by (,), where "*" indicates the width of "other. For example:

Cols = "100,800": splits a large window into two small windows by column. The first is 100 wide, and the second is 800 wide.

Cols = "100,200, *": splits a large window into three small windows by column. The first window is 100 wide, the second window is 200 wide, and the remaining window is 3rd

Cols = "15% ,*"

The rows value is a number or percentage that consecutively represents the width of a row. they are separated by (,). The "*" number indicates the width of the "remaining. For example:

Rows = "100,200 ,*"

Row = "20% ,*"

Note: a frameset can only be split in one direction (column or row ).

Css introduction

CSS: Cascading Style Sheet (stacked Style Sheet)

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

1. batch control of the appearance of web pages, saving us effort.

2. precisely control the appearance of the webpage: to pixel level.

The basic syntax of css:

Selector {css attribute name 1: value 1; css attribute name 2: value 2 ;............ }

Example:

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

Dt {

Font-size: 14px;

Font-weight: bold;

Color: pink;

}

Description of distinguishing two attributes

Html property: written in a tag. the format is property name = "property value". This quotation mark can be omitted, but it is not recommended to omit the wall split.

-- It can also be called "tag attribute"

-- Html attributes are generally "self-owned attributes of each tag, which are generally different"

-- Few tags use the same html attribute

Css attribute: it is written in the braces of the selector in the form of: attribute name: attribute value -- note that the value cannot be enclosed by quotation marks.

-- It can also be called "style attribute"

-- The css attribute is usually "available for all tags", which is generally the same

-- Few labels do not use the same css attribute

Selector category

Tag selector:

Format: Tag name {........ }

Meaning: all tags on a webpage apply the attribute settings.

Class selector:

Form:. class name {...... }

Meaning: This attribute is applied to all labels with the class value in the webpage.

Example:

Cherish the information

ID selector:

Format: # id {...... }

Meaning: This attribute is applied to all tags whose id value is the name on the webpage.

Note: Generally, the id names in a webpage should not be the same, because id itself means "unique.

Example:

Cherish the information

General selector:

Format :*{..... } -- The general selector only has this form (symbol)

Meaning: it automatically refers to "all tags", that is, all tags apply this attribute setting.

Note: The general selector is used with caution. it is usually used to set basic attributes, such as text color, text size, padding, and margin.

Pseudo Class selector:

Format: pseudo class name {...... }

Note: the pseudo-class names are actually limited to a few defined in the system, not defined by ourselves, such as link, visited, hover, and active. their meanings are also specific. Generally, the preceding pseudo classes are only used for the tag, and the form and meaning are usually:

A: link {...... }: Indicates the status of a link tag when the webpage is initially opened (initial link status)

A: visited {.....} : Indicates the status of a link tag after it is clicked (accessed)

A: hover {....} : Indicates the status of a link tag when you place the cursor over it (hover)

A: active {....} : Indicates that a link tag is in the active state, but has not been lifted ).

However, in the latest browser, for security reasons, some attributes of a's hover and visited effect cannot be used.

Compound selector: hierarchical selector

Format: selector 1 selector 2 {......... }

Meaning: in the tag corresponding to Selector 1, the tags corresponding to selector 2 ..... Here, selector 1 and selector 2 can be any type of selector learned earlier, and the hierarchical relationship can also be multi-level, such:

# D1 p {...}

. PC3 p span {.....}

P. cc2 img {.....}

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

Example:

Section 1

Section 2

Compound selector: Group Selector

Format: selector 1, selector 2 {......... }

Meaning: These two selectors use the same attribute settings. In fact, they are nothing more than a simplified code statement. Otherwise, they must 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 compound forms (example ):

P. PC3 {...} : Indicates the p tag with the class value of CC0 {...} Is completely different.

P # d1 {...} : Represents the p tag with the id value of d1, but this form is not recommended (of little significance ).

Framework:

Frame labels are a technique used to divide the current window into smaller windows. Framseset replaces the body tag and uses the framework document type.

.......

Basic css concepts:

Css is used to set a certain (some) attribute of a (some) tag (element) in a webpage to a value.

The basic syntax mode of css is:

Selector {css attribute 1: value 1; css attribute 2: value 2 ;......... }

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

Css selector Category:

Tag selector:

An English word {....}

An English word is actually a tag name that should exist.

Class selector)

. Class name {...}

Ah, ah

Id selector:

# Id {.....}

Note: title, class, and id are what we call "general attributes"-that is, everyone can use them.

General selector:

*{....}

Pseudo Class selector:

A: link {...}

A: visited {...}

A: hover {...}

A: active {....}

Note: the preceding four pseudo classes are usually written in the above order for the tag.

In addition, in practice, it is often simplified to the following:

A {......}

A: hover {....}

Meaning: the connection label only divides "move the mouse up" and "other statuses"

Level selector:

Selector 1 selector 2 {.....}

Group Selector:

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

Style attributes of text paragraphs

Color: set the color of the text in a tag. the color value can be an English word, hexadecimal syntax, or rgb syntax:

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

Font-size: set the text size. the unit is usually pixel (px). The text size of a general commercial website is generally 12px.

Font-weight: specifies whether the text is bold or not normal ).

Font-style: set italic or non-italic (normal)

Font-family: specifies the font name of the text. you can use multiple fonts separated by commas (,) to indicate that the first font is used first. if the user's computer does not have the first font, the second one is used, and so on. Example:

Font-family:,, ari, arial, "Times New roman ";

Line-height: Set the row height of the text. the unit is usually px, that is, the space height occupied by a line of text-the row height is not the height of the text.

Letter-spacing: Set the interval between characters (or letters). Chinese is actually the interval between words.

Word-spacing: set the distance between words. Generally, this parameter is only valid for characters in the Western Latin system.

Text-align: sets the horizontal alignment of text. Its function is equivalent to the align attribute in the label attribute. However, note that align is used only in some of the tags, but text-align is applicable to almost all tags.

Text-indent: specifies the Indentation distance of the first line in a paragraph. the unit is usually px.

Text-decoration: set the "modifier line" of the text: underline, line-through, overline, none)

Vertical-align: sets the vertical alignment of text in a table box (cell): top (top alignment), middle (center alignment), and bottom (bottom alignment)

Box Model Preliminary

Box is the most important concept in css.

Box

First, we should first establish a concept: almost all labels are actually a box, and the so-called box is nothing more than a "rectangular area range ". In fact, the so-called web page is nothing more than a box.

A box consists of the following regions (structures:

Border: A line area, which can be solid or dotted or other shapes.

Margin (margin): a blank area outside the border line. it indicates that "objects cannot be placed"

Padding (padding): It is also called "padding". it refers to a blank area within the border line and its meaning is "objects cannot be placed"

Content Zone (no corresponding css attribute name): refers to the area where "objects" can be placed in a box-that is, the main area of the box. The placed object can be a common text or other tag-corresponding to the "Content part" in the html we learned earlier ". In the content area, you can only set the width and height attributes ).

The components of a box are as follows:

Separation of content and performance in web design

We used to learn html, saying that tags have the role of "table-shaped ideographic. In fact, we can also say that the content is mixed with its performance.

Now:

Css technology can actually put the performance of each label in a webpage into a special place (such as a style label), and the rest (such as labels and text content) it is called "Structure/content" as a whole ". This practice is called "separation of content and performance"

Two initial states of the box (basic manifestation ):

A box similar to a div: a box automatically occupies a row (regardless of its internal content): This is a block box (block element ). Common block boxes:

P, hr, h1 ~ H6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,

Features: fixed width and height, margin, padding,

Similar to the span box: the content in a box will appear side by side with similar boxes, unless the line is full, it will naturally go to the next line-similar to the performance characteristics of the text. : This is the in-row box (in-row element ). The box in the row usually contains "final data content", such as text and images. Other intra-row boxes:

B, strong, font, I, u, a, img, input, textarea, select,

Features: The width and height cannot be set, but the content is "supported". margin and padding have no upper or lower performance.

Generally, the box in the row is a "small box" and the block box is a "large box ",

Preliminary layout (principle)

The so-called layout refers to putting webpage content in a proper position in a certain way.

Basic steps for layout:

1. there are only two ways to divide the current layout into several blocks with obvious visual boundaries:

A) upper/lower structure: at this time, as long as several boxes are used, the upper and lower structures naturally require no additional settings.

B) left and right structure: several boxes are used and the corresponding floating occurs. the common mode is as follows:

1. I. 2 boxes: one left and one right
2. Ii. three boxes: two boxes, one left, one right, two right, one left, or one left.
3. Iii. more boxes: usually one side.

Floating explanation:

Floating is like a bubble in the water. it will "float online"

A more vivid analogy: everyone (all tags) is "flat on the ground", each occupying a certain area, while floating elements are "floating" onto the ceiling, it occupies the general "ground area ".

In addition to its ability to compete with other elements, floating has the following main features (that is, destructive effects: make the parent box lose its reasonable height-the parent box can no longer hold these floating internal boxes! This is basically not allowed in the layout! Then we must use the supplementary method to reasonably include the parent box to wrap the child box. There are three methods to get the correct and valid height for the parent box:

1. set a fixed height for the parent box-usually when the height is known during design and remains unchanged.

2. add a clear floating empty box at the end of the parent box, as shown below:

3. set a css attribute for the parent box: overflow: hidden;

It is best to sum up: the layout needs to be arranged between the left and right, the left and right needs to be floating, and the floating needs to modify its destructive effect-so that the parent box can properly wrap its child boxes.

The above introduces the basic learning notes for php (1), including the content, and hope to be helpful to friends who are interested in PHP tutorials.