Getting started with web front end and getting started with java

About the introduction of web front end
1. Software structure division
1. C/S structure: the interaction between Client (client) and Server (server). Features: The client software must be upgraded to use the server's higher version functions. For example: Alibaba, etc.
2. B/S structure: the interaction between Browser and Server. Features: The software on the browser side can access the website on the server side without specific upgrades. For example: Netease News, etc.
JavaWeb/EE are based on B/S structure.
2. Basic understanding of the
website. Applications based on the B/S structure are called websites. Composition: It is composed of many html tags.
3. The W3C organization
standardized the writing of html, css, and js (javascript). Among them:
html: structured standards.
css: beautify the style of web pages.
javascript: Behavioral standards.
4. HTML (Hyper Text Markup Language)
1. HTML language structure
Getting started with web front end and getting started with java
2. HTML common tags
(1) Common text tags
Title tags: h1~h6 (fonts become smaller in turn)
Indent tags: blockquote
Paragraph tags: p
line break label:<br/>
font label: font
up/subscript label: sup/sub
horizontal line label: hr
as-is output label: pre
(2) image label img
Getting started with web front end and getting started with java
(3) table label table
Getting started with web front end and getting started with java
(4) form label form (emphasis )
Role: Collect the data entered by the user.
Application scenarios: a. Login. Enter the basic information of the user name (user name, password, etc.)→click login→submit to the system background→the system checks whether the user exists→if it exists, the login is successful, otherwise it fails. b. Registration. Collect user input information → submit background → server database to check whether there is a current user name, if there is a registration failure, if not, it will succeed.
Important attributes:
action: submitted address (resource file or URL (Uniform Resource Locator)).
method: submission method, commonly used get and post. The difference between get and post is as follows:
get submission method: a. Put the user information soldier in the address bar (unsafe); b. The size of the submitted file cannot exceed 64kb.
Post submission method: a. The user’s information will not be displayed in the address bar (safe); b. There is no limit to the size of the submitted file.
onsubmit: Indicates whether the current form is submitted successfully. true: The submission is successful. false: The submission failed.
name: The name attribute in the form tag must be specified for submission to the background.
Getting started with web front end and getting started with java
Examples:
Getting started with web front end and getting started with java
(5) Hyperlink label a
: a. Connect to a resource file or resource address (URL); b. Use as an anchor link.
When under the same html page:
a. Anchor <a name="anchor name">anchor name</a>
b. Create jump <a href="# anchor name">jump name< /a>
When under different html pages:
a, anchor <a name="anchor name">anchor name</a>
b, create a jump mark
c, jump name <a href=" resource file Or resource address#anchor name">

href: The resource file or address to connect to.
target: the way to open the resource file. Common attribute values: _self (open directly in the current window), _blank (open a new window).
Commonly used protocol:
file:// local file protocol.
http://execute the process yourself. Check whether there is an ip corresponding to the domain name in the hosts file. If yes, call the program to access, if not, access to network operation.
thunder:// Thunder Agreement.
mailto://mail protocol.
(6) Escape character (must add a semicolon)
Space:  <:⁢ >:> Registered trademark: ® Copyright: ©
5. CSS (Cascading Style Sheet)
1. Three ways of use
( 1) Inline style
tag style attribute: Designated style
Disadvantages: mixed use of style attribute and html tag is not conducive to later maintenance
(2) Internal style (write style tag in head tag)
<style type="text/css">
tag Name {
writing style;
}
</style>
(3) External style
a. Create an independent css file
selector with a suffix of .css {
writing style;
}
b. Import external css files
<link href="xxx. css" rel="stylesheet"
2. css selector
(1) tag selector
tag name {
css attribute: css attribute value;
}
(2) id selector
#id attribute value {
css attribute: css attribute value;
}

                                    a. If a tag is selected by both the tag selector and the id selector, the id selector has a higher priority than the tag selector.
                                    b. In the same html page, you cannot assign the same id attribute to multiple tags. If it has the same name, it cannot be obtained when js gets the label object. getElementById("id attribute value").
                (3) Class selector
                          .class attribute value {
                                                          css attribute: css attribute value;
                                                                         }  
                                 Under the same html page, multiple tags can have class attributes with the same name.
                (4) Union selector (select multiple tags at the same time, between the tags is ",")
                          Selector 1, Selector 2,......{
                                                                             css attribute: css attribute value;
                                                                                            }
                (5) Intersection selector (select multiple tags at the same time, with spaces between the tags)
                          Selector 1 Selector ......{
                                                                             css attribute: css attribute value;
                                                                                         }
                (6) Pseudo-class selector (a pseudo-class represents a state)
                         ![](https://s4.51cto.com/images/blog/201803/29/e18abb87af4739bad21f9c9592c93136.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_se,x_10,y shadow_90,type_ZmFuZ3poZW5naGVpdGk=) 3. Common attributes of css
            (1) Text attributes
                      Color: color
                                Line height: line-height
                                Character spacing (the distance between words): letter-spacing
                                Word spacing (the distance between words): word-spacing
                                Text alignment: text-align
                                Text decoration: text-decoration Common attribute values: underline (underline), none (no underline), overline (overline), line-though (intermediate line).
                (2) Font attributes
                        ![](https://s4.51cto.com/images/blog/201803/29/a8e8738cfda5e0604b4d025926b05b1b.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
                (3) Background attributes
                        background-color: background color.
                                background-image: background image.
                                background-repeat: set the background image repeat mode and whether to repeat, common attribute values: repeat (x and y axis repeat, default value), repeat-x (horizontal repeat), repeat-y (vertical repeat), ni- repeat (not repeat)
                                background-position: Set the starting position of the background image. Common attribute values: the display position of the picture (top, center, bottom), the position of the picture in the browser (left, center, right).
                                Background picture shorthand attribute: background: color picture address repeat mode start position
                (4) List attributes
                         ![](https://s4.51cto.com/images/blog/201803/29/bbc2e896ce4d30673b5be07cd51081d4.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
                (5) Table attributes
                         border-collapse: collapse. Combine the borders of the table into a single box.
                                 border-color: Shorthand attribute of border color. a. The default order of border colors: top, right, bottom, left (clockwise); b. If one side of the border color is not set, the color value of the opposite side will be taken.
                                 border-width: Shorthand attribute of border width. a. The default order of border colors: top, right, bottom, left (clockwise); b. If one side of the border color is not set, the color value of the opposite side will be taken.
                                 border-style: Border style. If a label wants to display the border effect, the border style must be specified.
                                 Border shorthand property: border: size, style, color
                                                              width: width
                                                                                            height: height

Six, box model (div block tag + css page layout)
common attributes:
capacity: specify the height and width of the div tag.
Set the border: div{
border: size style color;
width: width;
height: height;
}
inner margin: padding (the distance between the box and the content). padding-left: Move the inner margin of the box to the right. Other moving directions can be deduced by analogy.
Margin: margin (the distance between the box and the box), the bottom margin. The other directions can be deduced by analogy. Abbreviated attribute: margin: upper right lower left; when setting the outer margin for the button, the situation is special, and the outer margin should be set as a block as a whole.
display attribute: common attribute values: none (this element will not be displayed and hidden), block (this element is displayed as a block-level element with line breaks before and after), inline (this element is displayed as an inline element, before and after No line breaks).
float float attribute: common attribute values: left (left float), right (right float).
Clear property: Set whether there are other floating elements allowed on the side of an element. Common attribute value: both (floating elements are not allowed on both sides of the current).

 border-style: front-end learning training, video tutorials, learning routes, please add prestige: haomei0452, contact me!

About java entry
1. The structure of the jdk installation directory
bin: All are executable files with the suffix .exe.
db: For some core jar packages (databases) of the development kit.
include: suffix files ending with .h, c files.
lib: Store a lot of core class libraries.
jre: Contains jvm (java virtual machine). (Jdk contains java runtime environment, jre contains jvm).
src.zip: java source code.
2. Basic format
class Class name {
public static void main (String[] args) {
......
System.out.printIn("......");
}
Program example: "Holle Java" java program.
Getting started with web front end and getting started with java


Guess you like

Origin blog.51cto.com/14895198/2544335