1. System structure:

① B/S architecture: Browser/Server ( browser/server interaction.)

• Browser supports languages: HTML, CSS, JavaScript; S is the server The languages ​​supported by the end server are: C, C++, Java, etc.
• What are the advantages and disadvantages of the B/S architecture system? Advantages: Easy to upgrade, just upgrade the server code, low maintenance cost. Disadvantages: slow speed, bad experience, not cool interface
• Most enterprises use B/S architecture
• Representatives of B/S architecture systems include: Jingdong, Baidu, Tmall, etc.

② C/S architecture: Client/Server (interaction form of client/server.)

• What are the advantages and disadvantages of C/S architecture?
• Advantages: fast speed, good experience, interface Cool (entertainment is mostly C/S architecture)
• Disadvantages: Upgrading is troublesome and maintenance costs are high.
• The system representatives of C/S architecture are: QQ, WeChat, Alipay, etc.

2. HTML overview

① What is HTML? ② How to develop HTML? ③ How to run HTML?

• ① HTML: Hyper Text Markup Language (Hypertext Markup Language)< /span>

Consists of a large number of tags , each tag has a start tag and an end tag.

•Hypertext: pictures, sounds, videos, etc.

• ② For HTML development, just use a normal text editor and create an extension Is .html or .htm

• Editors include: HBuilder, vscode, etc.

③ Open the HTML file directly with the browser to run

④ Who made HTML?

• ④ W3C: World Wide Web Consortium

W3C has developed the HTML specification: each browser produces Manufacturers follow the rules. HTML will also write code according to the specification

•The current highest version of the HTML specification is: HTML5.0, referred to as H5

•We are now mainly learning HTML4.0 (basic usage)

• In order to facilitate the development of Chinese web front-end programmers, a large number of help documents are provided . Provide convenience for development.

w3school: comes first Yes, nothing to do with W3C

•w3cschool: Appeared later, not related to W3C

W3C has formulated many specifications: HTML/XML/http protocol/ https protocol...

3. The first HTML

4. Basic tags

• p: paragraph mark
• h1~h6: title word, the same as the title word of word
• br: line break mark (unique mark)
• hr: horizontal line (single mark)
• color: horizontal line color
• width: horizontal line width (px and %)
• pre: reserved format
• del: delete words
• ins: insert word (with underline)
• b: bold font
• i: Italics
• sup: superscript
• sub: Subscript
• font: font label
• color: font color
• size: font size (1~7)

Page renderings:

5. Entity symbols: In order to avoid conflicts with labels, entity symbols are required

• <:<
• >:>
• Space:
• Note: Press multiple space keys in html, only one space will be displayed in the webpage.

6, HTML table

• table: table
• tr: row
• td: column
• th: column (bolder and centered than td)
• Merge rows: rowspan (one grid occupies two positions)
• Note: When rows are merged, delete the following cells
• Merge columns: colspan (one cell occupies two positions)
• Note: When col is merged, there is no requirement to delete which one

7, thead, tbody, tfoot tags

• < span style="color: #121212; --tt-darkmode-color: #A3A3A3;">thead, tbody, and tfoot are not necessary, which is convenient for later JS writing.

8. Body background color and background image

• bgcolor: background color
• background: background image
• The background image is above the background color

9, img tag

• src: the path of the image
• Only set the width, the height will be proportionally scaled
• Only set height, no effect
• title: information displayed when the mouse hovers
• alt: Set the prompt message displayed when the picture fails to load

10. Hyperlink or hot link

• href: hot references hot Quote;
• must be followed by a resource address .
• The path behind can be an absolute path or It is a relative path, which can be the path of a certain resource on the network.
• target:
• _blank: new window
• _self: current window (default)
• _top: top-level window
• < span style="color: #121212; --tt-darkmode-color: #A3A3A3;">_parent: parent window

< strong>The function of the hyperlink:

A request can be sent from the browser to the server through a hyperlink.

11. The concept of request and response

• request: The browser sends data to the server (request)
• B --》S
• response: The server sends data to the browser (response)
• S--》B

12, list

• Yes Sequence table: ol
• type: 1, A , a, I, i
• Unordered list : ul
• type: circle (○), square (□), disc (●)

13, form (emphasis)

• action: Write the submitted URL
• method: default get ; and post
• form What is the use?
• Answer: Collect user information. After the form is displayed, the user fills out the form and clicks submit. (submit)
• How to draw a form?
• Answer: Use the form tag
• A web page can have multiple forms< /li>
• In the end, the form needs to submit data to the server, and the form tag has a action attribute, this attribute is used to specify the server address.
• The action attribute is used to specify which data to submit Server
• action attribute and href in hyperlinks The attributes are the same. You can send a request to the server (request)
• http://192.168.111.3:8080/oa/save This is the request path,
• The form submission data is finally submitted to the software corresponding to port 8080 on the 192.168.111.3 machine.
• Type value in input:
span>
• radio: radio control
• checkbox: multi-select control
• submit: submit control
• reset: reset control
• < span style="color: #121212; --tt-darkmode-color: #A3A3A3;">button: normal control
• text: text control
• password: password control
• file: file control
• Only for uploading files
• hidden: hidden field
• Cannot be seen on the web page, but the form is submitted When the data is automatically submitted to the server.
• The value attribute in the input is used to specify the button The text information displayed on the .
• Hyperlink a and form form difference?
• Answer: the form can be expressed Collect information, and hyperlink a cannot collect information.
• The attribute in the button input in the form submission must be Define the name, otherwise it will not be submitted.
• What format is the form to submit data to the server of?
• Format: action?name=value&name=value&name =value..
• HTTP protocol regulations, Must submit to server in this format
• java Middle String split('&');
• Important emphasis: If the name attribute is written in the form item, it will be submitted to the server. If you don't want to submit it, don't write the name attribute.
• The value of the text box and password box does not need to be specified by the programmer, it is what the user enters.
• When the name is not written, the item will not be submitted to the server
• But when value is not written, the default value of value is an empty string "", submit an empty string to the server. The java code gets: String s = "";