Overview of web concept
HTML
1. Concept: the most basic web development language *Hyper Text Markup Language * hypertext: *Hypertext is a kind of net text which uses hyperlink to organize all kinds of text information in different space *Markup Language: *A language made up of labels. < tag name > e.g. html, xml *Markup language is not a programming language 2. Quick start: * syntax: 1. html document suffix. html or. htm 2. Labels are divided into 1. Containment label: there are start label and end label. Such as < HTML ></html> 2. Self closing and label: start label and end label are together. Such as <br/> 3. Labels can be nested: You need to nest correctly. You can't have me in you, I have you in me Error: < a > < b ></a></b> Correct: < a > < b ></b></a> 4. Properties can be defined in the start tag. Attributes are made up of key value pairs. Values need to be enclosed in quotation marks (single and double can be used) 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 label: the most basic label of html *HTML: the root tag of HTML document *Head: head label. Some properties used to specify html documents. Bring in external resources *Title: title label. *Body: body label *<! DOCTYPE html >: html document defined in html5 2. Text label: label related to text *Comment: <! -- comment content -- > *< H1 > to < H6 >: title label *h1~h6: the font size decreases gradually *< p >: paragraph label *< br >: line feed label, < H > < p > is auto line feed label. *< HR >: show a horizontal line * properties: *Color: color *Width: width *size: height *align: how *center: center *Left: align left *Right: align right *< b >: bold font *< I >: font italics *< font >: font label *< center >: text centered * properties: *Color: color *Size: size *face: fonts *Attribute definition: * color: 1. English words: red,green,blue 2. RGB (value 1, value 2, value 3): value range: 0 ~ 255, such as RGB (0,0255) 3. Value 1 value 2 value 3: value range: 00~FF. Such as: Chen FF00FF * width: 1. Numerical value: width='20 ', the unit of numerical value, PX (pixel) by default 2. Value%: proportion relative to parent element *Case: Company Profile <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> Introduction to black horse programmers </head> <body> <h1> Company profile </h1> <hr color="#ffd700"> <p> < font color = "ාාff0000 > Zhongguancun black horse programmer training camp" < font > is a high-end software development training institution that combines the Zhongguancun Software Park and CSDN, and entrusts the wisdom spreading podcast to carry out teaching and implementation. It is committed to serving major software enterprises and solving the problem of rapid development of current software development technology, but the enterprise cannot recruit excellent talents. </p> <p> At present, "ZhongGuanCun black horse programmer training camp" has grown into a mobile development high-end training base of "good quality of trainees, deep content of courses and enterprise satisfaction" in the industry, and has been rated as a key supporting talent enterprise of Zhongguancun Software Park. </p> <p> Most of the students of black horse programmers are young people who have ideals and dreams and want to engage in IT industry after graduation, but have no environment and opportunity to change their own destiny. The trainee selection system of black horse programmers is far more strict than the recruitment process of more than 90% enterprises. Any student who wants to successfully enroll as a "black horse programmer" must go through an interview process of up to 2 months, which includes not only strict technical test, self-study ability test, but also personality test, stress test, moral test and other tests. It's no exaggeration to say that all the students in the dark horse programmer training camp are carefully selected. One in a hundred cruel screening system ensures the quality of trainees and reduces the employment risk of enterprises. Zhongguancun dark horse programmer training camp not only focuses on training students' basic theoretical knowledge, but also on training their project implementation and management ability, and pays close attention to technological innovation, constantly introduces advanced technology, develops and renews technical courses, so as to ensure that students can not only develop independently after entering the enterprise, but also bring new technical system and concept to the enterprise. </p> <p> All along, black horse programmers pay attention to the development of IT industry from the perspective of technology, promote the growth of industrial technology with in-depth sharing, devote themselves to promoting technological innovation, advocate sharing, opening and cooperation, and strive to build 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 & copy;, all rights reserved </center> </font> </body> </html> 3. Picture label: *img: show pictures * properties: *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 *Path starting 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 * properties: *href: Specifies the URL to access the resource (uniform resource locator) *target: specifies how to open the resource *"self: default, open on current page" *_blank: open on a blank page * Code: <! -- hyperlink a -- > 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 level label *span: text information is displayed in one line, with inline labels 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 table *Width: width *border: border *cellpadding: define the distance between content and cell *Cell spacing: defines the distance between cells. If 0 is specified, the lines of the cell will merge into one *bgcolor: background color *align: alignment *tr: define row *bgcolor: background color *align: alignment *td: define cells *colspan: merge columns *rowspan: merge rows *th: define header cell *< caption >: table title *< thead >: indicates the header of the table *< tbody >: indicates the body part of the table *< tFoot >: indicates the foot part of the tableCase: Homepage of tourism website
1. Determined use table To complete the layout 2. If a row has only one cell, use the<tr><td></td></tr> 3. If a row has more than one cell, use the <tr> <td> <table></table> </td> </tr> 4. code implementation <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Black horse travel website</title> </head> <body> <!--Use table To complete the layout--> <!--Outermost table，Layout for entire page--> <table width="100%" align="center"> <!-- First elements --> <tr> <td> <img src="image/top_banner.jpg" width="100%" alt=""> </td> </tr> <!-- Second elements --> <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> <!-- Third elements --> <tr> <td> <table width="100%" align="center"> <tr bgcolor="#ffd700" align="center" height="45" > <td> <a href="">home page</a> </td> <td> Admission ticket </td> <td> Admission ticket </td> <td> Admission ticket </td> <td> Admission ticket </td> <td> Admission ticket </td> <td> Admission ticket </td> <td> Admission ticket </td> <td> Admission ticket </td> <td> Admission ticket </td> </tr> </table> </td> </tr> <!-- Row 4 rotation chart --> <tr> <td> <img src="image/banner_3.jpg" alt="" width="100%"> </td> </tr> <!-- Line 5 black horse selection--> <tr> <td> <img src="image/icon_5.jpg" alt=""> Black horse selection <hr color="#ffd700" > </td> </tr> <!-- Sixth elements --> <tr> <td> <table align="center" width="95%"> <tr> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent 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 tourism <hr color="#ffd700" > </td> </tr> <!-- Eighth elements --> <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 fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <!-- Line 9 Overseas Tour --> <tr> <td> <img src="image/icon_7.jpg" alt=""> Overseas tour <hr color="#ffd700" > </td> </tr> <!-- Tenth elements --> <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 fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>Shanghai fly Sanya for 5 days and 4 nights(Spring Festival sales+Parenting+honeymoon+Independent travel)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <!-- Eleventh elements --> <tr> <td> <img src="image/footer_service.png" alt="" width="100%"> </td> </tr> <!-- Twelfth elements --> <tr> <td align="center" bgcolor="#ffd700" height="40"> <font color="gray" size="2"> Jiangsu Chuanzhi podcast Education Technology Co., Ltd Copyright Copyright 2006-2018©, All Rights Reserved Soviet ICP Prepare 16007882 </font> </td> </tr> </table> </body> </html>
Smoke and rain on the road Published 6 original articles · praised 4 · visited 63 Private letter follow