Today’s content
1. Overview of Web concepts 2Copy the codeOverview 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 in the user's local, there is a Server program in the remote * such as: QQ, Thunderbolt... * Advantages: 1. Good user experience * Disadvantages: 1. Cumbersome development, installation, deployment, and maintenance 2. Simple development, installation, deployment, and maintenance * Disadvantages: 1. If the application is too large, the user experience may be affected 2. 1. Static resources: * Resources published using static web development techniques. * Features: * All users access, get the same results. * If the user requests a static resource, the server sends the static resource directly to the browser. A static resource parsing engine is built into the browser to display static resources. 2. Dynamic resources: * Resources published in a timely manner using dynamic web pages. * Features: * All user access, the results may be different. * such as: the JSP/servlet, PHP, asp... * If the user requests a dynamic resource, the server executes the dynamic resource, converts it to a static resource, and sends it to the browser. * We must learn static resources before we learn dynamic resources! * Static resources: * HTML: used to build the base page, display the content of the page * CSS: used to beautify the page, layout the page * JavaScript: control the elements of the page, let the page have some dynamic effectCopy the codeHTML
Hyper Text is a mesh Text that organizes Text information in different Spaces by means of hyperlinks. < tag names > such as HTML, XML * Markup languages are not programming languages 2. Quick start: * Syntax: 1. HTML document name extension.html or.htm 2. Labels are classified into 1. Containment labels: contain start labels and end labels. E.g. < HTML > </ HTML > 2. Autism and tags: Start tags and end tags together. Such as < br / > 3. Tags can be nested: need to be properly nested, cannot sometimes-complex mix-and-match, I have your mistakes: < a > < b > < / a > < / b > right: < a > < b > < / b > < / a > 4. You can define attributes in the start tag. Attributes are composed of key-value pairs, and the values must be quoted (even or odd). 5. HTML tags are case insensitive, but use lower case 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. Tag learning: 1. File tags: constitute the most basic HTML tag * HTML: HTML document root tag * head: header tag. Attributes used to specify HTML documents. Importing external resources * title: title tag. * Body: body tag * <! DOCTYPE HTML > : html5 defines this document as an HTML document 2. Text tags: tags related to text * Comments: <! -- Comment content --> * <h1> to < H6 > : title tag * H1 ~ H6: font size gradually decreasing * < P > : paragraph tag * <br> : newline tag * <hr> : display a horizontal line line * Attribute: * color: color * width: Width * size: height * align: align * center: center * left: left * right: right * <b> : bold * < I >: italic * <font>: font label * <center>: center text * Attributes: * color: color * size: size * face: font * attribute: * color: 1. RGB (value 1, value 2, value 3) : value range: 0 to 255 such as RGB (0,0,255) 3. # value 1 value 2 value 3: value range: 00 to FF. #FF00FF * width: 1; width='20'; Value % : Ratio to parent * Case: Company profile <! DOCTYPE HTML > < HTML lang="ch"> <head> <meta charset="UTF-8"> <title> </head> <body> <h1> Company profile </h1> < HR <font color="#ffd700"> <p> <font color="#FF0000"> </font> And entrust chuanzhi podcast to carry out the teaching implementation of software development high-end training institutions, committed to serving the major software enterprises, to solve the current software development technology rapid development, but the enterprise can not recruit outstanding talents. </ P > < P > At present, "Zhongguancun Dark Horse Programmer Training Camp" has grown into a high-end mobile development training base with "good quality of students, deep course content and enterprise satisfaction" in the industry, and has been rated as a key talent enterprise supported by Zhongguancun Software Park. </ P > < P > The students of dark horse programmers are mostly young people who have ideals and dreams and want to be engaged in IT industry after graduation from university, but have no environment and opportunity to change their fate. The selection process for dark-horse programmers is far more rigorous than the 90% or so companies now employ. Any student who wants to be admitted to the "dark horse programmer" must go through a two-month interview process, which includes not only rigorous technical tests, self-learning ability tests, but also personality tests, stress tests, character tests and so on. It is no exaggeration to say that all the trainees at The Dark Horse Programmer Boot Camp are handpicked. One in a hundred cruel screening system to ensure the quality of students, and reduce the risk of employing enterprises. Zhongguancun dark horse programmer training camp not only focuses on cultivating students' basic theoretical knowledge, pay more attention to develop the project management ability, and pay close attention to technological innovation, constantly introducing advanced technology, research and development course update technology, to ensure that students enter the enterprise not only able to work in the development, can bring more new technology and concept. </ P > < P > Dark Horse programmers always pay attention to the development of IT industry from a technical perspective, promote industrial technology growth through in-depth sharing, commit to promoting technological innovation, advocate sharing, openness and collaboration, and strive to build a high-quality IT talent service platform. </p> <hr color="#ffd700"> <font color="gray" size="2"> <center> </center> </font> </body> </ HTML > 3. Image tag: * img: display image * attribute: * SRC: specify the image location * code: <! <img SRC ="image/jingxuan_2.jpg" align="right" Alt =" town "width="500" height="500"/> <! -- Relative path * to. / : represents the current directory./image/1.jpg *.. / : represent the higher level directory - > < img SRC = ". / image/jiangwai_1. JPG "> < img SRC =".. /image/jiangwai_1.jpg"> 4. * href: specifies the URL to access the resource. * target: specifies the way to open the resource. * _self: specifies the default value. - a hyperlink to a -- -- > < a href = "http://www.itcast.cn" > me < / a > < br > < a href = "http://www.itcast.cn" target = "love" > me < / a > < br > < a Href = "http://www.itcast.cn" target = "_blank" > me < / a > < br > < a href = ". / 5 _ list tags. The HTML "> list tag < / a > < br > < a </a> <a href="http://www.itcast.cn"><img SRC ="image/jiangwai_1.jpg"></a> 6. Div and SPAN: * div: Each div takes up an entire line. Block-level labels * SPAN: text information is displayed on a line, inline labels 7. Semantic tags: Html5 provides some tags to improve readability of applications. 1. <header> : header 2. <footer> : footer 8. Table labels: * table: defines the table * width: width * border: border * CellPadding: defines the distance between the content and cells * cellspacing: defines the distance between cells. If specified as 0, the lines of the cell converge into one, * bgColor: background color * align: align * tr: define row * BGColor: background color * align: align * TD: define cell * colSPAN: merge column * RowSPAN: Join row * th: Defines the table header cell * < Thead > : represents the head of the table * < tBody > : represents the body of the table * <tfoot> : represents the foot of the tableCopy the codeCase in point: the homepage of a travel website
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> </head> <body> <! -- Use table to complete layout --> <! <table width="100%" align="center"> - line 1 - > < tr > < td > < img SRC = "image/top_banner. JPG" width = "100%" Alt = "" > < / td > < / tr > <! Row 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> <! <table width="100%" align="center"> <tr bgcolor="#ffd700" align="center" height="45" > <td> <a Href = "" > home page < / a > < / td > < / td > < td > ticket ticket < td > < / td > < / td > < td > ticket ticket < td > < / td > < td > ticket < / td > < td > ticket < / td > < / td > < td > tickets Tickets for the < td > < / td > < td > ticket < / td > < / tr > < / table > < / td > < / tr > <! - line 4 shuffling figure - > < tr > < td > < img SRC = "image/banner_3. JPG" Alt = "" width =" 100% "> < / td > < / tr > <! - line 5 Dark horse select - > < tr > < td > < img SRC = "image/icon_5. JPG" Alt = "" > dark horse select < hr color =" # ffd700 "> < / td > < / tr > <! - line 6 - > < tr > < td > < table the align = "center" width = "95%" > < tr > < td > < img SRC = "image/jiangxuan_1. JPG" Alt = "" > <p> <p> <font color="red">¥ 899</font> </ TD > <td> <img SRC ="image/jiangxuan_1.jpg" Alt =""> <p color="red">¥ 899</font> </ TD > <td> <img SRC ="image/jiangxuan_1.jpg" Alt =""> <p color="red">¥ 899</font> </ TD > <td> <img SRC ="image/jiangxuan_1.jpg" Alt =""> <p color="red">¥ 899</font> </td> </tr> </table> </td> </tr> <! - line 7 domestic travel - > < tr > < td > < img SRC = "image/icon_6. JPG" Alt = "" > domestic travel < hr color =" # ffd700 "> < / td > < / tr > <! - line 8 - > < tr > < td > < table the 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> </p> <font style =" box-sizing: border-box color="red">¥ 699</font> </ TD > <td> <img SRC ="image/jiangxuan_2.jpg" Alt =""> <p color="red">¥ 699</font> </ TD > <td> <img SRC ="image/jiangxuan_2.jpg" Alt =""> <p color="red">¥ 699 < / font > < / td > < / tr > < tr > < td > < img SRC = "image/jiangxuan_2. JPG" Alt = "" > < p > Shanghai fly to sanya 4 nights 5 days free line sales + parent-child + honeymoon + free line (Spring Festival) < / p > < font color="red">¥ 699</font> </ TD > <td> <img SRC ="image/jiangxuan_2.jpg" Alt =""> <p color="red">¥ 699</font> </ TD > <td> <img SRC ="image/jiangxuan_2.jpg" Alt =""> <p color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <! Outbound tourism - of - line 9 > < tr > < td > < img SRC = "image/icon_7. JPG" Alt = "" > the outbound tourism < hr color =" # ffd700 "> < / td > < / tr > <! - line 10 - > < tr > < td > < table the 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 color="red">¥ </font> </ TD > <td> <img SRC ="image/jiangxuan_3.jpg" Alt =""> <p color="red">¥ </font> </ TD > <td> <img SRC ="image/jiangxuan_3.jpg" Alt =""> <p color="red">¥ 699 < / font > < / td > < / tr > < tr > < td > < img SRC = "image/jiangxuan_3. JPG" Alt = "" > < p > Shanghai fly to sanya 4 nights 5 days free line sales + parent-child + honeymoon + free line (Spring Festival) < / p > < font color="red">¥ </font> </ TD > <td> <img SRC ="image/jiangxuan_3.jpg" Alt =""> <p color="red">¥ </font> </ TD > <td> <img SRC ="image/jiangxuan_3.jpg" Alt =""> <p color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <! - line 11 - > < tr > < td > < img SRC = "image/footer_service. PNG" Alt = "" width =" 100% "> < / td > < / tr > <! <td align="center" bgcolor="#ffd700" height="40"> <font color="gray" size="2" Copyright 2006-2018& Copy all Rights reserved. </font> </ TD > </tr> </table> </body> </ HTML >Copy the code