Table Advanced and filters

First, form advanced

The function of a form: to collect information from a user;

Composition of the form:

form field <form name= "" method= "" action= "" ></form>

Form control <input type= "text" value= ""/>

Prompt information

1) Form field set

<fieldset></fieldset>

Function: the equivalent of a box that can contain text and other elements in a field set. This element is used to group the elements in the form and to distinguish the text in the document. The fieldset element can be nested within which multiple FieldSet objects can be set.

2) field-level headings

<legend></legend>

function: The legend element can insert a caption within the box drawn by the FieldSet object. The legend element must be the first element within a fieldset.

3) Form elements

1) Upload File box

File field: <input type= "File"/>

2) Image domain

<input type= "image" Width= "height=" border= "2" alt= "Upload picture"/>

Description: Firefox does not support this form element;

Image defines the submit button in the form of images.

3) Hint Information label

<label for= "Bound control ID Name" ></label>

Function: The label element is used to define the label and to specify the cue information for other elements on the page. To bind a LABEL element to another control, you can set the for property of the label element to be the same as the value of the control's ID property.

Second, the form of advanced

1, the function of the table: Display data;

(i) CSS properties on tables

1. Cell spacing (This property must be added to table)

Border-spacing:value;

The Border-spacing property sets the distance between the borders of adjacent cells (for border detach mode only).

NOTE: if specified! DOCTYPE, Internet Explorer 8 (and later versions) supports the Border-spacing property.

2. Merge adjacent cell borders

Border-collapse:separate (Border separated)/collapse (border merge);

3, no content cell display, hidden

Empty-cells:show/hide;

This property must be added to the table

4. Table Layout algorithm

table-layout:auto/fixed (fixed width, does not change cell width with content)

Automatic table layout: The width of the column is set by the widest content in the column cell that does not have a row.

Disadvantage: slower (because it requires access to all content in the table before determining the final layout).

Pros: Flexible

Fixed table layout

Pros: Speed up your run and allow your browser to lay out your tables faster.

Cons: Not very flexible

5. Table title

<caption> Title Content </caption>

Caption: Table title

Table header Position: Caption-side:top/right/bottom/left

Description: left,right location only Firefox recognition, Top,bottom IE7 version support, IE7 the following version does not support other property values, only identify top

6. Table layout Elements

1, form the basic composition

Table (table) TR (line) TD (Column)

TH: Table column headings (placed in TR)

The text inside the th element is usually rendered as a centered bold text, while the text inside the TD element is usually left-aligned plain text.

Important attributes:

1), colspan= "value" merge columns

2), rowspan= "value" merge rows

Horizontal alignment: Align:left/center/right

3), valign= "top/bottom/middle/baseline" vertical alignment

4) rules= "Groups/rows/cols/all/none" Add Group divider Line

Description

Rows: lines that lie between rows

COLS: Lines that are located between columns

All: lines between rows and columns

None: No lines

Groups: A line between a row group and a column group

2. Grouping of data rows

<thead></thead> Table Head

<tbody></tbody> Watch Body

<tfoot></tfoot> End of the table

Description: A table can contain only one thead, one tfoot, but can contain multiple tbody.

Define and use the table header for the <thead> label definition table. This label is used to combine the header contents of an HTML table. The THEAD element should be used in conjunction with the tbody and tfoot elements. The TBODY element is used to group the body contents of an HTML table, while the TFOOT element is used to group the contents of a table note (footer) in an HTML table. Note: If you use THEAD, TFOOT, and tbody elements, you must use all the elements. They appear in the order of THEAD, TFOOT, tbody, so the browser can render a footer before all data is received. You must use these tags inside the table element. Tip: These elements do not affect the layout of the table by default. However, you can use CSS to make these elements change the appearance of the table. A detailed description of the THEAD, TFOOT, and tbody elements gives you the ability to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a total row at the bottom. This partitioning gives the browser the ability to support table body scrolling independent of table headings and footers. When a long table is printed, the table header and footer can be printed on each page that contains the table data.

3. Data column grouping

<colgroup span= "Value" ></colgroup>

<col span= "Value"/>

Description

1) The Col and Colgroup elements group the data tables in order from left to right.

2) The Span property displays a group of specified contiguous columns, the Span property value defaults to 1, and the default defines only one column.

3) You can add a group split line to a grouped column by adding the rules= "groups" property to the table.

Note: Although Col and Colgroup have the same functionality, we can only use the Colgroup element to determine where part of the table content split line (rules) should be located, and Col does not have this function.

Span number Specifies how many columns the column group should span.

<colgroup> tags are used to group columns in a table so that they can be formatted. It is useful to apply style,<colgroup> tags to all columns so that you do not have to reapply styles to individual cells and rows. <colgroup> tags can only be used in table elements.

Third, CSS filter

CSS stylesheets are a technology that provides enhanced complementary services for hypertext label languages, and can be used to make a very elaborate decoration of each HTML tag. Only HTML-made pages, the ability to modify the parts of the page is limited and the statement annoying lock, style sheet is a powerful technique to compensate for this flaw, it is simple syntax, as long as the source code to insert a style statement can easily achieve any text within the page color, background, border, line spacing, word spacing, add delete and modify functions, Make the Web page more lively, so as to achieve satisfactory results. Of course, the power of the stylesheet is also dependent on its filter capabilities. Because of the filter, you can easily create a "professional" artistic effect.

I. What is a style sheet filter

When it comes to filters, it's not about what you do with the image, it's about decorating the object in the browser with that property. The stylesheet filter is actually a new extension of the stylesheet, and with this simple syntax you can add visual filters and conversion effects to a standard HTML element, such as slices, text, and other objects, to add a few rich changes to the page. If you have some basic scripting language, you can combine the filter effect with JavaScript-like scripting code to have a powerful dynamic interactive documentation tool that is created in conjunction with the stylesheet filters and scripts. There are now more than 13 filters to use, but to appreciate the effects of these filters, you must require the user's browser to be on top of ie4.0/nc6.0, because only these versions of the browser can support the Stylesheet filter effect.

Second, the commonly used style sheet filter

With the continuous maturation of style sheet technology, the filter functions and types are also increasing. If users are able to skillfully mix them, they can produce unexpected results. In the operation, the user only need to understand the actual effect of the specific filter, it can be fine-tuned according to the actual. In order to enable people to use the filter in a targeted manner, the following will be some of the common filter features and parameters are described in detail as follows:

1. Filter
Effect: The filter can achieve a variety of dissolution effects, if you combine the filter and Web scripting language, the filter parameters are processed, it is easy to make the effect of fading.
Syntax: {filter:alpha (opacity=opacity,finishopacity=finishopacity,
Style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
Parameters: The opacity parameter represents the initial transparency of the image, its default value is from 0 to 100, 0 for full transparency, 100 for full opacity, and finishopacity as an optional parameter, and if you want to set the transparency of the gradient, you can use them to specify the transparency at the end. The range is also 0 to 100;style to represent the shape characteristics of the transparent area, where "0" represents the uniform shape, and "1" represents the alignment. "2" represents a radial shape, "3" represents a rectangle; StartX represents the x-coordinate at the beginning of the gradient transparency effect, starty represents the y-coordinate at the beginning of the gradient transparency effect, FINISHX represents the x-coordinate at the end of the gradient transparency effect, and finishy represents the y-coordinate at the end of the gradient transparency effect.

2. Blur Filter
Role: The filter is mainly for the image to produce a blur effect.
Syntax: {filter:blur (Add=add,direction=direction,strength=strength)}
Parameters: This filter mainly includes three parameters, where add is used to specify whether the image has been changed to the impressionist blur effect, the blur effect is in a clockwise direction, its value should be ture or false;direction parameter is used to set the direction of the blur, where 0 degrees represents the vertical upward, Every 45 degrees is one unit, the default value is 270 degrees to the left, and the strength parameter indicates how many pixels the width will be affected by the blur, the default parameter value is 5 pixels, and the parameter value can only be specified using an integer.

3. Oblique Shadow Filter
Function: The filter is mainly for the object to establish the shadow effect of the contour, it can be in the specified direction to establish the object projection;
Syntax: {Filter:shadow (Color=color,direction=direction)}
Parameters: The shadow filter has only two parameters, where color represents the shadow of the projection, the value is substituted with English letters, for example, the projection background is red, you should set the Color=red;direction parameter is used to set the projection direction, if the value is 0, it represents the vertical projection, In addition, the value is one unit per 45 degrees, and its default value is 270 degrees to the left.

4. Glow Filter
Effect: The filter can produce a luminous effect for image or text;
Syntax: {filter:glow (Color=color,strength=strength)}
Parameters: The color parameter of the filter is almost the same as the color parameter of the shadow filter, but the color parameter here is used to set the glow color; The strength parameter is used to specify the intensity of the glow, and its value is any integer between 1 and 255.

5. Light Filter
Function: The light filter is simulates the light source to project the text or the image, causes the image and the text to produce certain projection effect;
Syntax: {filter:light}
Parameters: Once you have defined the "Light" Filter property for an object, you can call its "method" to set or change the properties, the filter available methods are: Addambient method is used to join the surrounding lights, Addcone method is used to add cone light source, The Movelight method is used to move the light source, the Changstrength method is used to change the intensity of the light source, Changcolor method is used to change the color of the light, clear method is used to clear all the light source.

6. Mask Filter
Effect: The filter creates a film covering the surface of the object as if it were wearing tinted glasses to look at the object.
Syntax: {filter:mask (Color=color)}
Parameters: The color parameter of the filter indicates the colors that cover the surface of the object, for example, if the matte color is green, color=blue should be set.

7. Shadow Filter
Effect: A shadow filter is a shadow effect that works by creating an offset, plus color.
Syntax: {Filter:dropshadow (color=color,offx=offx,offy=offy,positive=positive)}
Parameters: The color parameter in the filter represents the cast Shadow's colors, OFFX represents the horizontal shadow offset, offy represents the vertical shadow offset, the positive parameter is a Boolean value, if true, creates a visible projection for any non-transparent pixels, If fasle, a transparent effect is created for the transparent pixel portion.

8. Grayscale Filter
Role: The filter is mainly to convert the image object to a grayscale form display.
Syntax: {Filter:gray}
Parameter: The filter has no parameters.

9. Flip Filter
Function: Flip filter is mainly to achieve the image object's horizontal or vertical rollover effect.
Syntax: {Filter:filph} {FILTER:FILPV}
Parameters: This filter also has no parameters, where {Filter:filph} is implemented for horizontal flipping, {FILTER:FILPV} is implemented vertically.

10. X-ray Filter
Action: The X-ray filter allows the object to reflect its outline and highlight the contours.
Syntax: {Filter:xray}
Parameters: The filter itself does not contain parameters.

11, Inverted filter invert (reversed phase)
Role: Use this filter to flip all visual properties of objects including color, saturation, and luminance values.
Syntax: {Filter:invert}
Parameter: The filter has no parameters.

12. Ripple Filter
Function: Ripple filter can use sine wave to disrupt the image in horizontal and vertical direction, make the image produce water wave effect.
Syntax: {filter:wave (Add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
Parameter: The add parameter of the filter is a Boolean value that is used to indicate whether the object is to be disturbed by the waveform style; The Freq parameter is used to set the ripple frequency, that is, to specify how many full ripples to be produced on the object altogether. The Lightstrength parameter can be used to set the enhancement effect of the ripple light, whose value range is between 0 and 100, the phase parameter is the offset of the sine wave, and the strength is the amplitude of the sine wave.

The filter used under IE can achieve a lot of good effects, but in Chrome and Mozilla Firefox and other browsers, these are all invalid, because the filter is only a function under the development of IE browser, the browser does not support IE kernel is not supported by these filters. But generally support transparent filter, but the wording is not the same, as follows:

So to support this filter, you have to write all two of them.

. myelement {Filter:blur (2px) grayscale (. 5) opacity (0.8);}

Second, the picture advanced-transparent picture

(a) commonly used image formats on Web pages (jpg,png,gif)

Support transparency: gif,png (PNG8,PNG24,PNG32)

(b) Picture form on the webpage (insert picture and background image)

(iii) Insert Picture transparent

Third, the common image format on the Web page

1) JPG: lossy compression format, by the loss of the quality of the picture itself to reduce the volume of the picture, suitable for color-rich images; (pixel dots, more pixels will be clearer)

2) GIF: lossy compression format, by the loss of the color of the image to reduce the volume of the picture, support transparency, support animation, suitable for a small number of colors of the image;

3) PNG: lossy compression format, loss of image color number to reduce the volume of the picture, support transparent, not support animation, is the source file format of fireworks, suitable for the image of a small number of colors;

A. Picture background transparent:

. gif: Support

. PNG8: Support (recommended)

. Png24:ie6 not supported, other kernel browser support (PS production)

. Png32:ie6 not supported, other kernel browser support

B. The picture itself is transparent

. PNG24:IE6 is not supported (PS production) and can be used with filter compatibility.

. Png32:ie6 not supported, filter compatible is available.

Translucent Insert picture compatible with IE6 practices: (Png24 translucent images made with PNG32 or PS):

Style:

<style type= "Text/css" >

. alpha{display:none;_display:inline-block;filter:progid:dximagetransform.microsoft.alphaimageloader

(src= "Picture path", sizingmethod= "scale"); width:value;height:value;}

. Ie6hidden{_display:none;}

</style>

Structure:

<span class= "Alpha" ></span>

Table Advanced and filters