2.1 Java web--HTML

2.1 Java web--HTML

Today's content

1. Overview of web concepts 2. HTML Copy code

1. Overview of web concepts

* JavaWeb: * Use Java language to develop Internet-based projects * Software Architecture: 1. C/S: Client/Server Client/Server * There is a client program locally in the user, and a server-side program in the remote * Such as: QQ, Thunder... * Advantages: 1. Good user experience * Disadvantages: 1. Troublesome development, installation, deployment and maintenance 2. B/S: Browser/Server Browser/Server * Only one browser is needed, and users can access different server-side programs through different web addresses (URL) * Advantages: 1. Simple development, installation, deployment and maintenance * Disadvantages: 1. If the application is too large, the user experience may be affected 2. Excessive hardware requirements * Detailed explanation of B/S architecture * Resource classification: 1. Static resources: * Resources released using static web development technology. * Features: * All users visit, the result is the same. * Such as: text, picture, audio, video, HTML, CSS, JavaScript * If the user requests a static resource, the server will send the static resource directly to the browser. A static resource parsing engine is built in the browser, which can display static resources 2. Dynamic resources: * Use the resources released in time by dynamic web pages. * Features: * All users visit, the results obtained may be different. * Such as: jsp/servlet,php,asp... * If the user requests a dynamic resource, the server will execute the dynamic resource, convert it to a static resource, and send it to the browser * If we want to learn dynamic resources, we must first learn static resources! * Static resources: * HTML: used to build a basic web page and display the content of the page * CSS: used to beautify the page, layout the page * JavaScript: Control the elements of the page, so that the page has some dynamic effects Copy code

2. HTML

1. Concept: It is the most basic web development language * Hyper Text Markup Language * Hypertext: * Hypertext is a networked text that uses hyperlinks to organize text information in various spaces together. * Markup language: * Language composed of tags. <tag name> such as html, xml * Markup language is not a programming language 2. Quick start: * Syntax: 1. The suffix of html document is .html or .htm 2. The label is divided into 1. Containment tags: There are start tags and end tags. Such as <html> </html> 2. Self-closing and labeling: start label and end label together. Such as<br/> 3. Tags can be nested: Need to be nested correctly, you can t have me in you and you in me Error: <a><b></a></b> Correct: <a><b></b></a> 4. Attributes can be defined in the start tag. The attribute is composed of key-value pairs, and the value needs to be enclosed in quotation marks (both single and double) 5. HTML tags are not case sensitive, but lowercase is recommended. * Code: <html> <head> <title>title</title> </head> <body> <FONT color='red'>Hello World</font><br/> <font color='green'>Hello World</font> </body> </html> 3. Label learning: 1. File tags: the most basic tags that make up html * html: the root tag of the html document * head: head tag. Used to specify some attributes of the html document. Bring in external resources * title: title tag. * body: body tag * <!DOCTYPE html>: The document defined in html5 is an html document 2. Text label: label related to the text * Comment: <!-- Comment content --> * <h1> to <h6>: Title tag * h1~h6: The font size gradually decreases * <p>: Paragraph tag * <br>: Newline tag * <hr>: Show a horizontal line * Attributes: * color: color * width: width * size: height * align: alignment method * center: centered * left: left aligned * right: align right * <b>: bold font * <i>: Italic font * <font>: font tag * <center>: The text is centered * Attributes: * color: color * size: size * face: font * Property definition: * color: 1. English words: red, green, blue 2. rgb (value 1, value 2, value 3): Value range: 0~255 such as rgb(0,0,255) 3. #value1value2value3: value range: between 00~FF. Such as: #FF00FF * width: 1. Value: width='20', the unit of the value, the default is px (pixel) 2. Numerical value %: the proportion of the proportion relative to the parent element * Case: Company profile <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>Introduction to Dark Horse Programmers</title> </head> <body> <h1> Company Profile </h1> <hr color="#ffd700"> <p> <font color="#FF0000">"Zhongguancun Dark Horse Programmer s Training Camp"</font> is a combination of <b><i>Chuanzhi Podcast</i></b> and Zhongguancun Software Park, CSDN, and commissioned Zhipodcast's high-end software development training institution for teaching and implementation is committed to serving major software companies and solving the problem of rapid development of current software development technology and the lack of talents for companies. </p> <p> At present, the "Zhongguancun Dark Horse Programmer Training Camp" has grown into a high-end mobile development training base for the industry with "good quality of trainees, deep course content, and enterprise satisfaction", and has been rated as a key support talent enterprise in Zhongguancun Software Park. </p> <p> The students of dark horse programmers are mostly young people who have ideals and dreams after graduating from college and want to work in the IT industry without the environment and opportunities to change their destiny. The student selection system for dark horse programmers is far stricter than the current recruitment process for more than 90% of companies. Any student who wants to successfully enroll as a "dark horse programmer" must go through a two-month interview process. These processes include not only strict technical tests, self-learning ability tests, but also personality tests, stress tests, moral tests, etc. test. It is no exaggeration to say that all the trainees of the Dark Horse Programmer Training Camp are carefully selected. The brutal screening system of one of a hundred ensures the quality of trainees and reduces the enterprise's employment risks. The Zhongguancun Dark Horse Programmer Training Camp not only focuses on cultivating the basic theoretical knowledge of the trainees, but also on the ability of project implementation and management. It also pays close attention to technological innovation, continuously introduces advanced technology, develops and updates technical courses, and ensures that trainees can not only engage in development independently after entering the company. Work can bring new technology systems and concepts to the enterprise. </p> <p> For a long time, dark horse programmers have focused on the development of the IT industry from a technical perspective, promoted the growth of industrial technology with in-depth sharing, committed to promoting technological innovation, advocating sharing, openness and collaboration, and striving to create a high-quality IT talent service platform. </p> <hr color="#ffd700"> <font color="gray" size="2"> <center> Jiangsu Chuanzhi Podcast Education Technology Co., Ltd.<br> Copyright 2006-2018 , All Rights Reserved Su ICP No. 16007882 </center> </font> Copy code

3. Picture tag: * img: display picture * Attributes: * src: Specify the location of the picture * Code: <!--Show a picture img--> <img src="image/jingxuan_2.jpg" align="right" alt="Ancient Town" width="500" height="500"/> <!-- relative path * Paths beginning with. * ./: represents the current directory./image/1.jpg * ../: represents the upper level directory --> <img src="./image/jiangwai_1.jpg"> <img src="../image/jiangwai_1.jpg"> 4. List label: * Ordered list: * ol: * li: * Unordered list: * ul: * li: 5. Link label: * a: define a hyperlink * Attributes: * href: Specify the URL to access the resource (Uniform Resource Locator) * target: specify the way to open the resource * _self: The default value, open on the current page * _blank: open on a blank page * Code: <!--Hyperlink a--> <a href="http://www.itcast.cn">Click me</a> <br> <a href="http://www.itcast.cn" target="_self">Click me</a> <br> <a href="http://www.itcast.cn" target="_blank">click me</a> <br> <a href="./5_List tag.html">List tag</a><br> <a href="mailto:itcast@itcast.cn">Contact us</a> <br> <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a> 6. div and span: * div: Each div occupies a whole line. Block label * span: text information is displayed in one line, inline tags are inline tags 7. Semantic tags: In order to improve the readability of the program, some tags are provided in html5. 1. <header>: header 2. <footer>: Footer 8. Form label: * table: define the table * width: width * border: border * cellpadding: define the distance between the content and the cell * cellspacing: Define the distance between cells. If you specify 0, the lines of the cell will merge into one, * bgcolor: background color * align: alignment * tr: definition line * bgcolor: background color * align: alignment * td: define the cell * colspan: merge column * rowspan: merge rows * th: define the header cell * <caption>: table title * <thead>: indicates the head part of the table * <tbody>: indicates the body part of the table * <tfoot>: indicates the foot part of the table Copy code

Case: Tourism website homepage

1. Make sure to use the table to complete the layout 2. If there is only one cell in a row, use <tr><td></td></tr> 3. If there are multiple cells in a row, use <tr> <td> <table></table> </td> </tr> 4. Code Implementation <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dark Horse Tourism Net</title> </head> <body> <!--Use table to complete the layout--> <!--The outermost table, used for the layout of the entire page--> <table width="100%" align="center"> <!-- Line 1 --> <tr> <td> <img src="image/top_banner.jpg" width="100%" alt=""> </td> </tr> <!-- Line 2 --> <tr> <td> <table width="100%" align="center"> <tr> <td> <img src="image/logo.jpg" alt=""> </td> <td> <img src="image/search.png" alt=""> </td> <td> <img src="image/hotel_tel.png" alt=""> </td> </tr> </table> </td> </tr> <!-- Line 3 --> <tr> <td> <table width="100%" align="center"> <tr bgcolor="#ffd700" align="center" height="45"> <td> <a href="">Home</a> </td> <td> Tickets </td> <td> Tickets </td> <td> Tickets </td> <td> Tickets </td> <td> Tickets </td> <td> Tickets </td> <td> Tickets </td> <td> Tickets </td> <td> Tickets </td> </tr> </table> </td> </tr> <!-- Line 4 Carousel Picture--> <tr> <td> <img src="image/banner_3.jpg" alt="" width="100%"> </td> </tr> <!-- The 5th line of dark horse selection --> <tr> <td> <img src="image/icon_5.jpg" alt=""> Dark Horse Featured <hr color="#ffd700"> </td> </tr> <!-- Line 6 --> <tr> <td> <table align="center" width="95%"> <tr> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 899</font> </td> </tr> </table> </td> </tr> <!-- Line 7 Domestic Tour--> <tr> <td> <img src="image/icon_6.jpg" alt=""> Domestic Travel <hr color="#ffd700"> </td> </tr> <!-- Line 8 --> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2"> <img src="image/guonei_1.jpg" alt=""> </td> <td> <img src="image/jiangxuan_2.jpg" alt="" height="100%"> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> Copy code

<!-- Line 9 overseas travel --> <tr> <td> <img src="image/icon_7.jpg" alt=""> Overseas travel <hr color="#ffd700"> </td> </tr> <!-- Line 10 --> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2"> <img src="image/jiangwai_1.jpg" alt=""> </td> <td> <img src="image/jiangxuan_3.jpg" alt="" height="100%"> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai Fei Sanya 5 days 4 nights free travel (Spring Festival sales + parent-child + honeymoon + free travel)</p> <font color="red"> 699</font> </td> Copy code

<!-- Line 12 --> <tr> <td align="center" bgcolor="#ffd700" height="40"> <font color="gray" size="2"> Jiangsu Chuanzhi Podcast Education Technology Co., Ltd. Copyright 2006-2018 , All Rights Reserved Su ICP No. 16007882 </font> </td> </tr> </table> Copy code