Forms and CSS Basics

HTML form

form creation

<form method=“get或者post” action=“向何处发送表单数据”> <!-- 创建表单 -->
<input  type=“” placeholder=“” name=“” value=“”/> <!– 输入框 -->
属性   type 定义输入框的类型
文本框  type="text“       密码框  type=“password“
提交框  type=“ submit“  和 <button>提交按钮</button>  一样
按钮框  type=“button“  单纯的按钮
重置框  type=“reset”清空的效果
属性   placeholder  描述输入字段预期值的简短的提示信息。兼容到IE8以上
属性   name 必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
属性   value  值
</form>


The difference between Get and Post

What is the difference between post and get of method in Form?

1. Get is to get data from the server, and post is to send data to the server.

2. Get is to add the parameter data queue to the URL pointed to by the ACTION attribute of the submitted form. The value corresponds to each field in the form and can be seen in the URL. The post is to send each field in the form and its content in the HTML HEADER to the URL address indicated by the ACTION attribute through the HTTP post mechanism. The user cannot see this process.

3. For the get method, the server uses Request.QueryString to obtain the value of the variable, and for the post method, the server uses Request.Form to obtain the submitted data.

4. The amount of data transmitted by get is small and cannot exceed 2KB. The amount of data transmitted by post is relatively large, and it is generally defaulted to be unlimited. But in theory, the maximum amount in IIS4 (Internet Information Service Internet Information Service) is 80KB, and in IIS5 is 100KB

5. The security of get is very low, and the security of post is relatively high. But the execution efficiency is better than the Post method.

What is CSS

English full name: cascading style sheet Cascading style sheet WEB standard performance standard language, performance standard language mainly controls the display of web page information in the web page, simply speaking, it is how to modify the display style of web page information. Currently recommended to follow is CSS3.0 issued by W3C. A computer language used to represent style files such as XHTML or XML. CSS2.0 officially launched by w3C on May 21, 1998

Syntax of CSS

 Notes on CSS syntax

1) Each CSS style consists of two parts, namely the selector and the statement, and the statement is divided into attributes and attribute values;

2) Attributes must be placed in curly braces, and attributes and attribute values ​​are connected with colons.

3) Each statement ends with a semicolon.

4) When an attribute has multiple attribute values, the attribute values ​​are separated from each other by spaces, regardless of the order.

5) In the process of writing styles, operations such as spaces and line breaks do not affect the display of attributes.

Style sheet creation

 Create inline styles

Disadvantages: 1. The structural style is not separated, which is not conducive to later maintenance 2. The style cannot be reused (recommended not to use)

 Creation of internal styles

Advantages: 1. Separation of structure and style for easy maintenance 2. Style reuse Disadvantages: CSS styles can only be used in one page, suitable for case writing

 Creation of external styles

Advantages: 1. Structured style separation, easy maintenance 2. Style reuse Multiple pages are suitable for whole site development and long page writing

 The difference between link and import

Extended knowledge points: the difference between link and import?

Difference 1: Essential difference: link is an XHTML tag, and @import is completely a way provided by CSS.

Difference 2: The difference in loading order: when a page is loaded (that is, when it is browsed by the viewer), the CSS referenced by the link will be loaded at the same time, while the CSS referenced by @import will wait until the page is completely downloaded before being loaded. . So sometimes when browsing a page loaded with CSS by @import, there will be no style (that is, flickering), which is quite obvious when the network speed is slow.

Difference 3: The difference in compatibility: @import is proposed by CSS2.1, so old browsers do not support it. @import can only be recognized by IE5 or above, but the link tag has no such problem.

Difference 4: The difference when using dom (document o bject model document object model) to control the style: when using javascript to control the dom to change the style, only the link tag can be used, because @import is not controllable by dom.

Classification of selectors

Why use a selector?

To use CSS to implement one-to-one, one-to-many or many-to-one control of elements in HTML pages, CSS selectors are required

Selectors are divided into 5 categories: basic selectors, hierarchical selectors, pseudo-class selectors, attribute selectors, pseudo-object (pseudo-element) selectors

basic selector

The type selector (label selector)  uses the label in the document object html as the selector

1. When to use it? When you want to change the default style of an element or unify the display effect of an element in the document

2. Grammar? Tag {attribute: attribute value;} For example: div{width:200px;}

Class selector (class selector)

1. When to use it? When you want to distinguish a certain label, for example, you want to distinguish 2 divs.

2. Grammar? <label class="box"></div> .Class name {attribute: attribute value;} For example: .box{width: 300px;}

3. Class can give multiple attribute values, and multiple attribute values ​​are separated by spaces. For example: <div class="box a1 a3"></div>

ID selector

1. When to use it? When you want to distinguish a certain label, for example, you want to distinguish 2 divs.

2. Grammar? <label id="box1"></div> #ID name{ attribute: attribute value;} For example: #box1{width:200px;}

3. Points to note: The ID is unique, and the attribute value can only be one.

wildcard

1. When to use it? When you want to change the style of all labels at the same time

2. Grammar? *{property: attribute value;} For example: *{margin:0;padding:0;} Clear all the padding that comes with the label

group selector

1. When to use it? When the style attributes of several elements are the same, a statement can be called together, and the elements are separated by commas.

2. Grammar? selector1, selector2, selector3 {attribute: attribute value;} For example: .box,p,#a2{width:300px;}

3. Benefits: You only need to write once where you need to use the same style, which can reduce the amount of code, improve the structure of CSS code, and improve the performance of web pages

level selector

1. Descendant selectors (including selectors)

A. When to use it? When you want to change all descendant elements under a parent element (including sons, grandchildren, great-grandchildren...)

B. Grammar? parent element child element {} such as div p{} .box .a1{}

2. Child selector

A. When to use it? When you want to change all the child elements under a parent element.

B. Grammar? Parent element>Child element{} For example ul>li{} .box>p{}

3. Adjacent sibling selector

A. When to use it? When you want to change the element immediately after an element.

B. Grammar? XX 1+ XX 2{} such as div+p{}

4. Generic sibling selector

A. When to use it? When you want to change all elements behind an element.

B. Grammar? XX 1~XX 2{} such as div~p{}

Cascading CSS

CSS cascading means that when a CSS style configures the same attribute for the same element, conflicts are handled according to the cascading rules (weights), and the attribute specified by the CSS selector with a high application weight is selected, which is generally described as a high-weight coverage with a low weight. , so it is also called stacking.

Parsing rule 1: When the style settings of different selectors conflict, the style of the high-weight selector will override the style of the low-weight selector

Parsing rule 2: For selectors with the same weight, the style follows the principle of proximity: whichever selector is defined last, the selector style will be used.

Weights

Guess you like

Origin blog.csdn.net/ZJH_are/article/details/125648315