PHP basic study notes (1)

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:

The first form item

The second form item

. . . . . . .

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:

                                                                                                                    to

Other attributes:

                                                                                                                                                                                                                                                                 possible. It is also a "valueless attribute"

说 NAME special description: The single -option of a group requires that the name value must be the same.

          Multiple options:

通 Explanation: Multi -options usually must have a value value;

Other attributes:

                                                                                                                                                                                                                                                    possible. 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 transmitted into the file set by the form of the form.

         Image button:

                                                                                                                                                                                                                                            The function of the picture button is actually "submit", but the displayed effect is a picture - this is helpful to beautify 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 domain: & lt; input type = "file" name = "n9" /& gt;

选择 Explanation: allow users to choose local files (and send to the server) -the files are also data.

             Hidden field:

                                                                                                                                                                                                                                            explained: not visible on the interface, but submitted to the server as a "hidden data" - required for programming.

E Pulling selection: Use Select and Option tag cooperation. But treat this as "a form item"

~ ~ ~

                                                                                                                           

                                                                

                                                                                                           

                                                                                                                                                                                                                          with

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).

                                                                                                                                                                                                                                              The multiple attribute can be used 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:

                  

                                                                                                                                                                                                                          with 的 The number of rows set by ROWS is a number, indicating that the number of texts that can be displayed by the multi -line text box

的 The number of columns set by COLS is a number, indicating that the number of texts that can be displayed by 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.

                                                                                                                                                                                                      out out to be stored in the form – 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:

个 In fact, we can also open multiple web pages in one window -in fact, its essence is still a window to display a web page, but we will use some specific tags to divide a "large window" into several "small windows. ".

First of all, let’s be clear:

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

2. To use the frameset tag, you must use the frameset document type

The specific segmentation code is as follows:

F & lt; Frameset Cols = "Set the current window divided by column" rows = "to set the current window according to the line" & 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 that the large window is divided into two small windows according to the column, the first is 100 width, and the second is 800 wide

                                                                                                                                                                            ’ s to ’ s ’ s 1 t t           through ’ ’ s ’ ’ s 1’s 1 100 t-t t t- s s s to be split into 3 small windows according to columns, the first one is 100 wide, the second one is 200 wide, and the rest is given to the third one

         cols=”15%, *”

值 The value of ROWS is the number or percentage of the width of the continuous exponential line, which is separated from each other (,), where the "*" indicates the width of the "rest". For example:

             rows=”100,200,*”

            row=”20%, *”

                                                                                                                                                                                                                                                                                      

css introduction

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;

🌜

}

A way to differentiate between 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 for wall cracks

签 -also 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 enclosed in quotes

   —can also be called “style attribute”

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

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

Selector Classification

Tag selector:

Format: tag name { …….. }

（Meaning: Refers to the attribute settings in all the labels in the (corresponding) webpage.

Class Selector:

Form: .Class name { …… }

（Meaning: The value of the Class in the (corresponding) webpage is all labels of this type of name apply the attribute settings.

                              Example:

                                                                                                                         ​  ~

ID Selector:

Format: #idname{…… The meaning of （: The value of the ID in the (corresponding) webpage is that the label that names the name is set to the attribute settings.

个 Note: Generally, the ID name in a web page should not be the same, because ID itself means "only".

                              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: The general choice device is used with caution, which is usually used only to set up a few basic attributes, such as text color, text size, padding, margin

Pseudo class selector:

Form: :pseudo class name {……}

Note: There are actually only a few pseudo-class names stipulated within the system and not defined by ourselves, such as: link, visited, hover, active. Their meanings are also specific. Usually the above pseudo-classes are only used for a tags, and their form and meaning are usually:

                                                                                                                                                                                          

         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

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.

         

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

F & lt; frame src = "The web address in the second small window url" /& gt;

                     . . . . . . .

                                                               

Basic concepts of css:

这样 CSS is used for such a purpose: set the characteristics of a certain (some) character (some) characteristics in the webpage label (element) to a (some) value.

The basic syntax pattern of css is:

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

就 The so -called selector is actually a syntax form that can correspond to a (some) label on the webpage.

css selector classification:

         Tag selector:

                                                                                                                                                                                   

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

Class selector (class selector)

               . Class name {…}

~ ~ ~

Id selector:

    ~

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{….}

                                                                                                                                                                                                                            together out of which to write the following 4 pseudo-classes.

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

                                                                           

                  a:hover{….}

The meaning of 连 is: A connection label is only divided into "mouse placed status" and "other states"

Level selector:

２ Selector 1 Selector 2 1. . . . . ｝

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;

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 second one. , and so on. Example:

         font-family: Song Dynasty, 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

The 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 line of line can be solid or dotted or other shapes.

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

Padding: also called "padding", a blank area within the border line, its meaning is also "no objects can 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:

ｃｽｓ 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 in-line 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.

                                                                                                                                                                                                                             .

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 layout" into several blocks with clear visual boundaries. There are only two ways to divide:

a)                       Upper-lower structure: At this time, as long as you use a few boxes, it will naturally be an upper-lower structure, no other settings are required.

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

1.                                                                                                                                                                                                      i.
                                                          3 boxes: two left and one right or two right and one left, or one side.
                                                                                                                                                               

Floating explanation:

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

： The metaphor of the more image: Everyone (all tags) are "covered with the ground", each occupies a certain area, but the floating element "floats" to the ceiling, and it occupies the 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 cover its floating internal boxes. Got it! 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 the height is known during design and will not change.

２. 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.

The above introduces the basic PHP learning notes (1), including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.