PHP basic study notes (1), PHP basic study notes_PHP tutorial-PHP Tutorial-php.cn

php basic study notes (1), php basic study notes

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

Some html elements where users can provide certain data or information or options. The form usually has a "submit" button, which can then provide this data/information/options to a program on the server for use - data processing.

——The core of the form is data.

The composition and form of form tags:

What are the form items?

Single-line text box:

Other attributes:

value: Set the initial text

size: Set the width of its input box (unit is "character width") - this number of characters can be placed in it

maxlength: Set the maximum number of characters that can be entered in this input box

readonly: This is a "no value" attribute, which means "read-only". The writing method is: 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 its input box (unit is "character width") - this number of characters can be placed in it

maxlength: Set the maximum number of characters that can be entered in this input box

Single option:

Other attributes:

checked: Indicates that the option is selected by default. It is also a "valueless attribute"

Special instructions for name: A group of single options requires that the name value must be the same.

Multiple options:

Explanation: Multiple options usually must have a value;

Other attributes:

checked: Indicates that the option is selected by default. It is also a "valueless attribute"

Submit button:

Explanation: Click the submission button, then the form will be "submitted", that is, the data will be passed into the file set by the form of the form.

Image button:

Description: The function of the picture button is actually "submitting", but the effect it shows is a picture -this is conducive to beautifying the page.

Reset button:

Explanation: The data that will be filled in or selected by all users of the form to the initial state

Ordinary button:

Explanation: There is no effect on the form, but "action" can be generated from it to achieve other requirements (JS program)

File field:

Explanation: The user can choose the local file (and send it to the server) -the file is also data.

Hidden field:

Explanation: The interface is not visible, but it is submitted to the server as a "hidden data" -s program.

Drop-down selection: Use select and option tags to achieve this. But treat this as "a form item"

& lt; option value = "2" select = "selectd" & gt; text 2 & lt;/option & gt;

Explanation:

The selected attribute can be used on the option tag to indicate the default selected item of the select element (the first item is selected by default).

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

Multi-line options (also called list options): Multi-line options are actually just a "deformation" of drop-down selection - setting their size value to be greater than or equal to will result in multiple lines.

Multi-line text box:

Explanation:

The number of rows set by rows is a number, indicating the number of lines of text that can be displayed in the multi-line 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-line text box

This tag has no value attribute. But its actual "value" is whatever is placed in the middle of this tag.

Note: All form items must have a name attribute to indicate their "name" - the server retrieves the data based on this name.

Frame Tag

The first concept: We always only display one web page in an open "window".

But:

We can actually open multiple web pages in one window - in fact, the essence is that one window displays one web page, but we will use some specific tags (frameset) to divide a "large window" into several " small window".

First of all, let’s be clear:

1, When using frame tag (frameset), you cannot use body tag - that is, body tag uses frameset tag instead of

2. When using the frameset tag, you must use the frameset document type

The specific segmentation code is as follows:

& lt; Frameset Cols = "Set the current window according to the columns" rows = "to set the current window according to the line" & gt;

& lt; frame src = "Web page 1 via URL" /& gt;

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

The value of cols is a continuous number or percentage representing the width of the column, separated by (,), where the "*" sign represents the width of the "rest". For example:

cols="100,800" : Indicates dividing the large window into two small windows by columns, the first is 100 wide and the second is 800 wide

cols=”100,200,*” : Indicates that the large window is divided into 3 small windows by columns, the first is 100 wide, the second is 200 wide, and the rest is given to the third

cols=”15%, *”

The value of rows is a continuous number or percentage representing the width of the row, separated by (,), where the "*" sign represents the width of the "rest". For example:

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

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

1. Control the appearance of web pages in batches, allowing us to save labor.

2. Precisely control the appearance of web pages: down to the pixel level.

Basic syntax form 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;

}

An argument for distinguishing two attributes

html attribute: written in the tag, in the form: attribute name = "attribute value" - this quotation mark can be omitted, but it is recommended not to omit it

——It can also be called "label attribute"

——html attributes are usually "the own attributes of each tag, which are generally different"

——There are very few tags using the same html attribute

css attribute: written in curly brackets of the selector, in the form: attribute name: attribute value - pay special attention, the value cannot be quoted

——It can also be called "style attribute"

——CSS properties are usually “available to all tags”, which are generally the same

——There are very few tags that do not use the same css attributes

Selector categories

Tag selector:

Format: Tag name { …….. }

Meaning: Refers to (corresponding to) all the tags in the web page to which the attribute settings are applied.

Class selector:

Form: .Class name { …… }

Meaning: This attribute setting applies to all tags that refer to (corresponding to) the class in the web page and whose value is the class name.

Example:

Selector: Format:

Meaning: The tag that refers to (corresponds to) the id in the web page with the value of this name shall apply this attribute setting.

Note: Usually, the ID names in a web page should not be the same, because the ID itself means "unique".

Example:

Universal selector:

Form: *{ ….. } ——Universal selector has only this form (symbol)

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

Note: Use universal selectors with caution. They are usually only used to set a few basic properties, such as text color, text size, padding, margin

Pseudo class selector:

Form: :Pseudo class name {……}

注意：伪类名其实只有系统内部规定的不多的几个，不是我们自己定义的，比如：link, visited, hover, active.他们的含义也是特定的。通常上述几个伪类只用于a标签，则其形式和含义通常为：

a:link{ …… } ：表示一个a链接标签在网页初始打开的时候的状态（初始链接状态）

a:visited{…..} ：表示一个a链接标签在点击（访问）过之后的时候的状态（访问后状态）

a:hover{….} ：表示一个a链接标签在鼠标放上去的时候的状态（悬停状态）

a:active{….} ：表示一个a链接标签在鼠标摁住但还没有抬起的状态（活动状态）。

不过，最新的浏览器中，出于安全考虑，a的hover和visited效果有些属性不能用了。

复合选择器之：层级选择器

形式：选择器1 选择器2 { ……… }

含义：在选择器1所对应的标签中由选择器2所对应的那些标签。。。。。其中，选择器1和选择器2可以是前面所学的任意某种选择器，而且这种层级关系还可以多层次，比如：

#d1 div{…}

.cc1 p span{…..}

p .cc2 img{…..}

#d1 p a:hover{….}

举例：

段落1

Compound selector: group selector

Form: Selector 1, Selector 2 { ……… }

Meaning: It means that both selectors use the same attribute settings. In fact, it is nothing more than a way of writing simplified 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 compound forms (examples):

div.cc1{…} : Represents a div tag with class value cc1, which is completely different from div .cc1{…}.

p#d1{…} : Represents the p tag with id value d1, but this form is not recommended (it has little meaning).

Frame:

Frame tags are a technique used to divide the "current window" into smaller windows. framseset replaces the body tag and uses the frame document type.

& lt; frameset rows = "Division" COLS = "column width division" & gt;

& lt; frame src = "The web address in the first small window url" border = "0" scrolling = "no" /& gt;

. . . . . . .

Basic concepts of css:

CSS is used for such a purpose: to set certain (some) characteristics of a certain (some) tag (element) in the web page to a certain (some) value.

The basic syntax pattern of css is:

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

The so-called selector is actually a grammatical form that can be mapped to a certain tag(s) in the web page.

css selector classification:

Tag selector:

An English word {….}

The so-called English word is actually a tag name that should exist

Class selector (class selector)

. Class name {…}

& lt; p class = "Class name 1" align = "center" & gt;

& lt; img src = "A picture path" width = "100" class = "class name 2" /& gt;

through

id selector:

#idname{…..}

due

Special note: title, class, id are what we call "universal attributes" - that is, anyone can use them.

Universal selector:

*{….}

Pseudo-class selector:

a:link{…}

a:visited{…}

a:hover{. . . }

a:active{….}

Note: The above four pseudo-classes must usually be written in the above order when used for a tags.

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

a{……}

a:hover{….}

The meaning is: a connection label is only divided into "mouse-up state" and "other states"

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 label. The color value can use English words, hexadecimal syntax and rgb syntax:

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

font-size: Set the text size, usually in pixels (px) - the text size of general commercial websites is usually 12px.

font-weight: Set the text to be 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. The meaning is: use the first font first. If the user's computer does not have the first one, use the third font name. Two, and so on. Example:

font-family: Song Dynasty, imitation Song Dynasty, Microsoft Yahei, arial, “Times New roman”;

line-height: Set the line height of the text. The unit is usually px, which is the height of the space occupied by a line of text - the line height is not the height of the text.

letter-spacing: Set the spacing distance between characters (or letters). Chinese is actually the spacing of "words".

word-spacing: Set the spacing distance between words - usually only valid for Western Latin characters.

text-align: Set the horizontal alignment of text. Its function is equivalent to the align attribute in the label attribute. But please note: align, as an html attribute, is actually only used in certain tags, but text-align can be used in almost all tags.

text-indent: Set the indent distance of the first line in a paragraph, the unit is usually px.

text-decoration: Set the "modification line" of the text: underline, line-through, overline, none

vertical-align: Set the vertical alignment of text in a table box (cell): top (top alignment), middle (middle alignment), bottom (bottom alignment)

Preliminary box model

Box is the most important concept in CSS.

Box

First of all, establish 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 within a box.

A box is composed of the following areas (structures):

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

Margin: also called "border", a blank area outside the border line, which means "objects cannot be placed"

Padding: also called "padding", a blank area within the border line, which also means "objects cannot be placed"

Content area (no corresponding css attribute name): refers to the area in a box where "objects" can be placed - that is, the main area of the box. The objects placed there can be ordinary text or other tags - corresponding to the "content part" in HTML we learned before. The content area can usually only set its width and height attributes (width, height).

The various components of a box are shown in the figure below:

The idea of “separation of content and performance” in web design

We learned about html before and said that tags have the function of "expressing meaning". In fact, it can also be said that the content and its performance are mixed together.

Now:

css technology can actually "pull out" the performance of each tag in a web page and put it in a special place (such as the style tag), and the remaining parts (tags and text content, etc.) are collectively called " Structure/Content”. This approach is called "the idea of separation of content and performance"

Two initial states of the box (basic performance):

A box similar to div: a box automatically "occupies one line" (regardless of its internal content): this is a "block box" (block element). Commonly used block boxes:

p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,

Features: You can set fixed width and height, margin, padding,

Similar to a span box: the content in a box will appear in a row alongside similar boxes. Unless the row is full, it will naturally move to the next row - similar to the performance characteristics of text. : This is an inline box (inline element). Inline boxes usually hold "final data content", such as text and images. Other inline boxes:

b, strong, font, i, u, a, img, input, textarea, select,

Features: The width and height cannot be set, but are "supported" by its content. Margin and padding have no upper and lower performance.

Usually, inline boxes are "small boxes" and block boxes are "big boxes",

Preliminary layout (principle)

The so-called layout actually refers to placing the web content in the appropriate position in a certain way.

Basic steps for layout:

1. Divide the "current page" into several blocks in a visually clear way. There are only two ways to divide:

a) Top-bottom structure: At this time, as long as you use a few boxes, it will naturally be a top-bottom structure, without any other settings.

b) Left and right structure: At this time, several boxes are used and floated accordingly. The usual mode:

Floating explanation:

Floating is like bubbles in water, they will "float online"

A more vivid metaphor: everyone (all tags) are "tiled on the ground", each occupying a certain area, but the floating elements "float" to the ceiling, and they do not occupy everyone's usual "ground area" ".

In addition to not occupying space with other elements, its main characteristic (that is, the destruction effect) is actually that it causes its parent box to lose its reasonable height - the parent box can no longer contain its floating elements. Inside the box! This is basically not allowed in the layout! Then we must use supplementary methods to achieve reasonable inclusion-the parent box wraps the child box. There are three ways to get the correct effective height of the parent box:

1. Set a fixed height for the parent box - usually when the height is known during design and will not change.

2. Add an empty box to clear the float at the end of the parent box, as follows:

３, Set a css attribute for the parent box: overflow:hidden;

The best summary is: the layout needs to be arranged left and right, the left and right arrangement needs to be floated, and the floating effect needs to be corrected - let the parent box reasonably wrap its child boxes.