Chapter 02 - front end core technology - HTML typesetting
Learning objectives
Master the basic use of HTML tables
Master the technical {key points of HTML table typesetting
Master the technical {key points and difficulties of HTML overall page layout
Master the usage scenarios of HTML inline framework
Master the usage of HTML inline framework
HTML table
HTML table Tags
Label description < Table > Table < th > header cell of table < td > row of table < td > table cell < catpion > table title < thead > head area of table < tbody > middle body part of table < tFoot > bottom area of table
The following table is the structure diagram
Case 1
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<table>
<tr>
<th>Row 1, column 1</th>
<th>Row 1, column 2</th>
<th>Row 1, column 3</th>
</tr>
<tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
<td>Row 2, column 3</td>
</tr>
</table>
</body>
</html>
Effect display:
attribute
Property value description alignleft |center| rightHTML5 is not supported. HTML 4.01 is obsolete. Specifies the alignment of the table with respect to the surrounding elements. bgcolorrgb(x,x,x) #xxxxxx color name HTML5 is not supported. HTML 4.01 is obsolete. Specifies the background color of the table. cellpadding pixel HTML5 is not supported. The space between the edge of the cell and its content. cellspacing pixels are not supported by HTML5. Space between cells. Width pixels | 100% HTML5 is not supported. The width of the table. Height pixels | 100% HTML5 is not supported. The height of the table is in border pixels. The default value of 1 specifies whether the table cell has a border.
Case 01
<head>
<meta charset="utf-8" />
< title > Table < / Title >
</head>
<body>
<table width="80%" bgcolor="aqua" align="center">
< caption > acceptance statistics system < / caption >
<tr height="50">
< th > receptionist < / th >
< th > number of acceptances < / th >
< th > self run number < / th >
< th > direct answer < / th >
< th > agree < / th >
< th > proportion < / th >
< th > quantity < / th >
< th > proportion < / th >
< th > suggestions < / th >
< th > appeal piece < / th >
< th > Consultation Document < / th >
</tr>
<tr bgcolor="blueviolet">
<td>Wang Yan</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#c3c3c3">
<td>Total</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
</table>
</body>
Effect display:
| and | attribute
Property value description alignleft| right |centerHTML5 is not supported. Specifies the horizontal alignment of the cell contents. Bgcolorrgb (x, x, x) | #xxxxx | color name HTML5 is not supported. HTML 4.01 is obsolete. Specifies the background color of the cell. Height pixels | 100% HTML5 is not supported. HTML 4.01 is obsolete. Sets the height of the cell. valigntop| middle| bottom |baselineHTML5 is not supported. Specifies the vertical arrangement of cell contents. Width pixels | 100% HTML5 is not supported. HTML 4.01 is obsolete. Specifies the width of the cell. colspan number of columns specifies the number of columns a cell can span. Columnrowspan rows sets the number of rows a cell can span vertically. Row
Case 02: making a calculator
Calculator
Calculator
|
| C |
% |
/ |
* |
| 7 |
8 |
9 |
+ |
| 4 |
5 |
6 |
- |
| 1 |
2 |
3 |
= |
| C |
0 |
. |
Effect display:
Case 03: making curriculum
<head>
<meta charset="UTF-8">
< title > course schedule < / Title >
</head>
<body>
<table border="1" cellspacing="1" cellpadding="5">
< caption > course schedule < / caption >
<tr bgcolor="aquamarine">
<th></th>
< th > Monday < / th >
< th > Tuesday < / th >
< th > Wednesday < / th >
< th > Thursday < / th >
< th > Friday < / th >
< th > Saturday < / th >
< th > Sunday < / th >
</tr>
<tr>
< TD rowspan = "3" bgcolor = "Antiquewhite" > morning</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
< TD colSpan = "2" > self study</td>
</tr>
<tr>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
< TD colSpan = "2" > self study</td>
</tr>
<tr>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
< TD colSpan = "2" > self study</td>
</tr>
<tr>
< TD rowspan = "4" bgcolor = "Beige" > afternoon</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
< TD colSpan = "2" > self study</td>
</tr>
<tr>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
< TD colSpan = "2" > self study</td>
</tr>
<tr>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
< TD colSpan = "2" > self study</td>
</tr>
<tr>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td>Android</td>
< TD colSpan = "2" > self study</td>
</tr>
</table>
</body>
Effect display:
Case 04: beautiful form
form
| Business statistics of receptionists |
| 2017-01-02---2017-05-02 |
| Receptionist |
number of accepted cases |
Self run number |
Direct answer |
Proposed opinions |
Return to modify |
Work order type |
| agree |
proportion |
quantity |
proportion |
Recommendation |
Appeal piece |
Consultation piece |
| filing office |
Wang Yan |
|
|
|
|
|
|
|
|
|
|
| Wang Yan |
|
|
|
|
|
|
|
|
|
|
| Wang Yan |
|
|
|
|
|
|
|
|
|
|
| total |
20 |
20 |
20 |
20 |
20 |
20 |
20 |
20 |
20 |
20 |
| Traffic group |
Wang Yan |
|
|
|
|
|
|
|
|
|
|
| Wang Yan |
|
|
|
|
|
|
|
|
|
|
| Wang Yan |
|
|
|
|
|
|
|
|
|
|
| Wang Yan |
|
|
|
|
|
|
|
|
|
|
| total |
20 |
20 |
20 |
20 |
20 |
20 |
20 |
20 |
20 |
20 |
20 |
Effect display:
Case 05: making a navigation bar
If the whole table is regarded as a whole, the sum of the widths of all cells should be equal to 100%,
In other words, if you set the width of some cells and the sum is less than 100%, the remaining cells will allocate the remaining space.
<head>
<meta charset="UTF-8">
< title > navigation bar < / Title >
</head>
<body>
<table border="0" cellspacing="0" cellpadding="20">
<tr align="center" height="50px" bgcolor="coral">
<td width="10%"></td>
<td width="10%">
<img src="img/06.jpg" height="35px" />
<br/>
<i> Computer version < / I >
</td>
<td></td>
<td width="5%">
< a href = "" > Home Page</a>
</td>
<td width="5%">
< a href = "" > discovery</a>
</td>
<td width="5%">
< a href = "" > position</a>
</td>
<td width="5%">
< a href = "" > activity</a>
</td>
<td width="5%">
< a href = "" > material</a>
</td>
<td width="5%">
< a href = "" > Course</a>
</td>
<td width="5%">
< a href = "" > more</a>
</td>
<td></td>
<td width="5%">
<a href=""><img src="img/07.jpg"height="35px" ></a>
</td>
<td width="5%">
<a href=""><img src="img/07.jpg" height="35px"></a>
</td>
<td width="10%"></td>
</tr>
</body>
Effect display:
Case 06: realize graphic layout
When it comes to graphic layout, the picture is always displayed in its own width and height. If you want the picture to automatically adapt to the width and height of the parent element, you need to add width = "100%" to the picture.
<head>
<meta charset="UTF-8">
< title > graphic layout < / Title >
</head>
<body>
<td width="16%" colspan="3">
<img src="img/1-2.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/1-3.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/1-4.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/1-5.jpg" width="100%" />
</td>
</tr>
<tr align="center">
<td width="16%" colspan="3">
The reason is the country and according to Peng
</td>
<td width="16%" colspan="3">
The reason is the country and according to Peng
</td>
<td width="16%" colspan="3">
Time management is national and according to Peng
</td>
<td width="16%" colspan="3">
The reason is the country and according to Peng
</td>
<td width="16%" colspan="3">
The reason is the country and according to Peng
</td>
</tr>
<tr align="center">
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
</tr>
<tr height="40"></tr>
<tr align="center">
<td width="16%" colspan="3">
<img src="img/2-1.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/2-2.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/2-3.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/2-4.jpg" width="100%" />
</td>
<td width="16%" colspan="3">
<img src="img/2-5.jpg" width="100%" />
</td>
</tr>
<tr align="center">
<td width="16%" colspan="3">
The reason is the country and according to Peng
</td>
<td width="16%" colspan="3">
The reason is the country and according to Peng
</td>
<td width="16%" colspan="3">
Time management is national and according to Peng
</td>
<td width="16%" colspan="3">
The reason is the country and according to Peng
</td>
<td width="16%" colspan="3">
The reason is the country and according to Peng
</td>
</tr>
<tr align="center">
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
</tr>
Graphic layout
|
</body>
Effect display:
HTML framework
By using frames, you can display more than one page in the same browser window.
There are a lot of frame tags in HTML, but most of them have been abandoned. What is still in use today is
label
Syntax:
Properties:
The attribute value description alignleft |right| top| middle |bottomHTML5 is not supported. HTML 4.01 is obsolete. Specifies how to align the scrollingyes | no | according to the surrounding elements. Autohtml5 does not support. Specifies whether the scroll bar is displayed in the. The specified height of the height pixel. Name specified by namename. srcURL specifies the URL of the document displayed in. Width specifies the width of the pixel.
Case 07
The page of a target link can be displayed. The name attribute of the target link must be used
<head>
<meta charset="UTF-8">
< title > framework < / Title >
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
<tr>
<th width="15%">
<a href=" http://www.baidu.com "Target =" MyFrame "> Baidu</a>
<hr/>
<a href=" https://www.tmall.com/ "Target =" MyFrame "> tmall</a>
<hr/>
<a href=" https://www.sina.com.cn/ "Target =" MyFrame "> Sina</a>
</th>
<th width="85%">
<iframe src="https://www.aliyun.com/" name="myframe" width="100%" height="600"></iframe>
</th>
</tr>
</table>
</body>
Effect display:
Use iframe as the target of the link
iframe can be used as the target of the link.
The target attribute of the link must refer to the name attribute of iframe:
Case 2
http://baidu.com
Note: since the target of the link matches the name of the iframe, the link opens in the iframe.
design sketch:
HTML list
There are three kinds of HTML lists: unordered list, ordered list and user-defined list
Unordered list
Unordered lists use two tags to form a whole.
Label description |
|---|
Computer version
