Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what are the HTML and CSS knowledge points of java web". In the daily operation, I believe that many people have doubts about the HTML and CSS knowledge points of java web. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the HTML and CSS knowledge points of java web?" Next, please follow the editor to study!

1.HTML1.1 form tag: form

Form tags, create a form on the html page, and the form tags are not displayed on the browser. If the data needs to be submitted to the server, the tag responsible for collecting the data must be placed in the body of the form tag.

Action attribute: request path, determining the address (path) where the form is submitted to the server

Method attribute: request method. Commonly used values: get, post

Get: default

The submitted data is appended to the request path. For example: / 1.html?username=alex&password=1234, data format KBH, append is used? Connect, and then each pair of data uses & connect

Due to the limited length of the request path, all get requests submit limited data.

Post:

The submitted data is no longer requested to be appended on the path (neither displayed on the address bar)

The size of the submitted data is not displayed

1.2 input domain label: input

The tag is used to obtain user input information, and the type attribute value is different and the collection method is different. The most commonly used label.

Rype attribute

Text: text box, a single-line input field in which the user can enter text. The default width is 20 characters

Password: password box, password field. The characters in this field are displayed in black circles.

Radio: a checkbox that represents one of a set of mutually exclusive option buttons. When a button is selected, the previously selected button becomes unchecked.

Submit: submit button. The submit button sends the form data to the server. Generally, the name attribute is not written, otherwise the word "submit" will be submitted to the server.

Because different projects need different fields, so I did not write all the form elements, the following tags also need to be mastered.

Checkbox: check box

Filee: file upload component, provides "browse", press to select the file to be uploaded.

Hidden: hides the field, the data is sent to the server, but the browser does not display it.

Reset: reset button. Restore the form to its default value.

Image: the image submission button, which sets the picture to the button through src.

Button: a normal button, often used in conjunction with JavaScript.

Name: element name. If you need the form data to be submitted to the server, you must provide the name attribute value, and the server obtains the submitted data through the attribute value.

Value: sets the default value for the input tag. Submit and reset buttons to submit data

Size: siz

Checked property: check box or check box is selected.

Readonly: read-only

Disabled: available or not

Maxlength: maximum length allowed for input

1.3 drop-down list label: select

Drop-down list. Single or multiple selections are available. List items need to be specified using child tags

Name attribute: the name sent to the server

Multiple attribute: default radio selection is not written. A value of "multiple" means multiple selections.

Size property: the number of visible options when multiple selections are selected.

Subtag: an option (an entry) in the drop-down list

Selected: check the current list item

Value: the option value sent to the server.

1.4 text field label: textarea

Text field. A multi-line text input control.

Cols attribute: number of columns in the text field

Rows attribute: number of lines in the text field

Button label: button (understand)

Button labels are rarely used and provide the "normal | reset | submit" function. The default values vary from browser to browser.

2. DIV+CSS2.1 what is div

Div is a common html tag that divides regions. Features: exclusive one line. Complex effects cannot be achieved alone. Must be rendered in conjunction with the CSS style.

Div is usually a block-level element

You can define partitions or sections in a document (division/section). Tags can divide a document into separate, different parts. It can be used as a strict organizational tool and is not associated with it in any format. If you use id or class to mark, then the tag will become more effective. 2.2 Overview of CSS 2.2.1 what is CSS

CSS, often referred to as CSS style or cascading style sheets, is mainly used to set appearance display styles such as the text content (font, size, alignment, etc.), the shape of the picture (height and width, border style, margins, etc.) and the layout of the layout in the HTML page.

CSS can make HTML pages look better, the collocation of CSS colors can make users more comfortable, CSS+DIV layout more flexible, easier to draw the structure that users need.

2.2.2 explanation of CSS nouns

CSS (Cascading Style Sheets): refers to cascading style sheets

Style: add the effect that needs to be displayed to the HTML tag.

Cascading: use different ways to add styles to the same HTML tag, and finally all the styles are superimposed together to act on the tag.

2.2.3 CSS style rules

When using HTML, you need to follow certain specifications. The same is true of CSS. If you want to skillfully use CSS to decorate a web page, you first need to understand the CSS style rules. The specific format is as follows

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

In the style rules above, the selector is used to specify the HTML object that the CSS style acts on, and the specific style is set for that object in curly braces. Attributes and attribute values appear as key-value pairs, separated by the English colon ":". Multiple attributes are separated by an English semicolon ";". For example:

H3 {color: red; font-size: 100px;}

When writing CSS styles, beginners should not only follow the CSS style rules, but also pay attention to several features in the CSS code structure, as follows:

The CSS style selector is strictly case-sensitive, while Properties and attribute values are not case-sensitive.

Multiple attributes must be separated by a semicolon in the English state, and the semicolon after the last attribute can be omitted, but it is best to retain it in order to add new styles.

If the value of an attribute consists of multiple words with spaces between them, you must enclose the attribute value in quotation marks in the English state. For example:

P {font-family: "Times New Roman";}

When writing CSS code, CSS comments are usually added to improve the readability of the code, such as:

/ * this is the css comment text, which will not be displayed in the browser window * /

Spaces are not parsed in CSS code, and curly braces and spaces before and after semicolons are optional. Therefore, you can use the space bar, Tab key, enter key and so on to type the style code, that is, the so-called formatted CSS code, which can improve the readability of the code. For example:

H2 {color: red; font-size: 20px;}

And

H2 {color: red; / * define font size attribute * / font-size: 20px; / * define color attribute * /}

The effect of the above two pieces of code is the same, but the second way of writing is more readable. It should be noted that spaces are not allowed between the value of the attribute and the unit, otherwise the browser will make an error when parsing. For example, the following line of code is incorrect.

There is a space between H2 {font-size:20 px;} / * 20 and unit px * / 2.2.4 introducing CSS style

CSS is very flexible to use, either embedded in an HTML document or a separate file, which must have a .css extension if it is a separate file. There are three common ways to combine CSS and HTML:

(1) inline style

Inline style sets the style of the element through the style attribute of the tag.

Small gray

Inline style controls the style through the attributes of the tag, which does not separate the structure from the presentation (HTML display structure, CSS display effect), which are rarely used. The learning phase is sometimes used occasionally in order to program quickly.

(2) Internal style

The internal style, also known as embedded style, unloads the header tag body of the HTML document from the CSS code set and uses the tag definition.

Styles multiple tags in the current html file.

Use tags in html tags to define CSS

Body {background-color: # ddd;}

(3) external style

External styles, also known as chained styles, place all styles in one or more external stylesheet files with a .css extension and connect styles to HTML documents through tags.

The biggest advantage of chaining is that the same CSS stylesheet can be linked by different HTML pages, while a HTML page can also link multiple CSS stylesheets through multiple tags.

2.3 Selector

To apply the CSS style to a specific HTML element, you first need to find the target element. In CSS, the style rules that perform this task are called selectors. This section explains the CSS basic selector in detail, as follows:

2.3.1 element selector

Tag selector refers to using the HTML tag name as the selector, classifying according to the tag name, and specifying a unified CSS style for a certain type of tag in the page. The basic syntax format is as follows:

Tag name {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;}

In this syntax, all HTML tag names can be used as tag selectors, such as body, H2, p, strong, and so on. The style defined with the tag selector is valid for all tags of that type on the page

For example:

H2 {color: # F00; font-size: 50px;} hyperlink Little Grey No.1 Little Grey No.2 Little Grey No.3

The biggest advantage of tag selector is that it can quickly unify the style for the same type of tags on the page, but this is also its disadvantage, it can not design differentiated styles.

2.3.2 ID selector

The id selector is identified by "#", followed by the id name, and its basic syntax format is as follows:

# id name {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;}

In this syntax, the id name is the id attribute value of the HTML element, and most HTML elements can define the id attribute. The id value of the element is unique and can only correspond to a specific element in the document.

For example:

# demo1 {color: # 0f0;} hyperlink small gray

2.3.3 Class Selector

The class selector uses "." (English period) to identify, followed by the class name, the basic syntax format is as follows:

. Class name {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;}

In this syntax, the id name is the class attribute value of the HTML element, and most HTML elements can define the class attribute. The biggest advantage of the class selector is that you can define separate or the same styles for element objects.

For example:

.myClass {font-size: 25px;} hyperlink small gray

Advanced use of the class selector: class style the specified tag

Label. Class name {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;} 2.3.4 extension: attribute Selector

The attribute selector, followed by a square bracket tag, has the following basic syntax format:

Label signature [tag attribute = 'tag attribute value'] {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;}

This selector, which is an extension of the element selector, further filters a set of tags.

For example:

Input [type= "text"] {background-color: yellow;} input [type= "password"] {background-color: green;} hyperlink

2.3.5 extension: include selector

Contains a selector that uses a space between the two tags to style the descendant tags of the specified parent tag, making it easy to write styles in the area.

Parent tag descendant tag {attribute 1: attribute value 1; attribute 2: attribute value 2; attribute 3: attribute value 3;}

This selector, an extension of the element selector, filters all descendant tags within a tag.

# D1 div {color: red;} hyperlinks Little Grey 1 Little Grey 2

2.4 CSS style: 2.4.1 borders and dimensions: border, width, height

Border: styling the border

Formatting: width style color

For example: style= "border:1px solid # f00", 1 pixel real edge red.

Style values: solid solid line, none borderless, double double line, etc.

Width, height: used to set the width and height of the label.

Div {border: 1px solid # 000; / * 1 pixel, solid edge, black * / width:200px; height:200px;} hyperlink small gray

2.4.2 layout: float, clear

Usually the default typesetting method is to list the elements in the page from top to bottom, but in actual development, if you need to typeset in a left-right way, you need to use floating.

Selector {float: attribute value} Common attribute values: left: element floats left right: element floats right none: element does not float (default)

Because the floating element no longer occupies the location of the original document stream, it affects the typesetting of other elements in the page. If you want to avoid the impact, you need to clear the float using the clear property.

Selector {clear: attribute value;} Common attribute value: left: no floating elements on the left (remove the influence of floating on the left) right: no floating elements on the right (clear the influence of floating on the right) both: remove the influence of floats on the left and right sides at the same time

For example:

Hyperlink

Area 1-1

Area 1-2

Area 2-1

Area 2-2

Area 3-1

Area 3-2

Area 3-3

2.4.3 conversion: display

HTML provides a wealth of tags, which are defined as different types, generally divided into: block tags and inline tags.

Block label: appears as an area block. Each block label occupies one or more entire lines.

Common block elements:, etc.

Inline elements: you don't have to start on a new line, and you don't force other elements to display on a new line.

Common inline elements:, etc.

In development, if you want inline elements to have the characteristics of block elements, you need to use display for transformation

Selector {display: attribute value} commonly used attribute value: inline: this element will be displayed as an inline element (the default display attribute value for the inline element) block: this element will be displayed as a block element (the default display attribute value for the block element) inline-block: renders the object as an inline object, but the contents of the object are rendered as block objects. None: this element will be hidden, not displayed, and will not take up page space.

For example:

Span {border: 1px solid # 000; width: 100px; height: 40px;} Hyperlink display 1-1 display 1-2 display 2-1 display 2-2

2.4.4 fonts: color, font-size

Color: color, font color

For example:

Click on the hyperlink

2.4.5 background color: background-color click

2.5 CSS Box Model 2.5.1 what is a Box Model

The CSS frame model (Box Model) specifies how element boxes handle element content, inner margins, borders, and outer margins.

2.5.2 inside margin: padding

For example, if you want all H2 elements to have the inner margin of 10px on each side, just do this:

H2 {padding:10px;}

You can also set the inner margins of each side in the order of top, right, bottom, and left, and each side can use different units or percentage values:

H2 {padding:10px 0.25em 2ex 20%}

Unilateral inside margin attribut

Also set the top, right, bottom, and left inner margins by using the following four separate properties:

Padding-top

Padding-right

Padding-bottom

Padding-left

2.5.3 Border: border

Border-top-style

Border-right-style

Border-bottom-style

Border-left-style

2.5.4 margin: margin

Margin-top

Margin-right

Margin-bottom

Margin-left

At this point, the study of "what are the HTML and CSS knowledge points of java web" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.