HTML+CSS-01

CSS trùng điệp hình thức

hover

:hoverCSSNgụy loạiỞ người dùng sử dụng kim đồng hồ thiết bị cùng nguyên tố tiến hành lẫn nhau khi xứng đôi, nhưng không nhất định kích hoạt nó. Trong tình huống bình thường, người dùng đem con trỏ ( con chuột kim đồng hồ ) huyền ngừng ở nguyên tố thượng khi kích phát.

:hoverNgụy loại định nghĩa hình thức đem bị bất luận cái gì kế tiếp liên tiếp tương quan ngụy loại (:link,:visitedHoặc:active) bao trùm, này đó ngụy loại đặc thù tính ít nhất bằng nhau. Vì thích hợp mà vì liên tiếp thiết trí hình thức, hẳn là ở:linkCùng:visitedQuy tắc lúc sau,:activeQuy tắc phía trước đặt:hoverQuy tắc, tức dựa theoLVHA định nghĩa trình tự:link—:visited—:hover—:active.

background-position

background-positionCSSThuộc tính vì mỗi một cái bối cảnh hình ảnh thiết trí mới bắt đầu vị trí. Vị trí này là tương đối với từbackground-originĐịnh nghĩa vị trí đồ tầng.

Ngữ pháp

/* Keyword values */
background-position:top;
background-position:bottom;
background-position:left;
background-position:right;
background-position:center;

/* <percentage> values */
background-position:25% 75%;

/* <length> values */
background-position:0 0;
background-position:1cm 2cm;
background-position:10ch 8em;

/* Multiple images */
background-position:
0 0,
center;

/* Edge offsets values */
background-position:bottom 10px right 20px;
background-position:right 3em bottom 10px;
background-position:bottom 10px right;
background-position:top right 10px;

/* Global values */
background-position:inherit;
background-position:initial;
background-position:revert;
background-position:unset;

• inheritDùng cho từ phụ nguyên tố kế thừa bối cảnh vị trí.
• initialDùng cho thiết trí bối cảnh vị trí vì cam chịu giá trị.
• revertDùng cho hồi thối lui đến trình duyệt cam chịu bối cảnh vị trí hoặc mới bắt đầu giá trị.
• unsetDùng cho sử dụng tính toán sau bối cảnh vị trí giá trị, nếu chưa định nghĩa tắc khả năng sẽ hồi thối lui đến cam chịu giá trị hoặc mới bắt đầu giá trị.

background-positionThuộc tính bị chỉ định vì một cái hoặc nhiều<position>Giá trị, dùng dấu phẩy ngăn cách.

background-repeat

background-repeatCSSThuộc tính định nghĩa bối cảnh hình ảnh lặp lại phương thức. Bối cảnh hình ảnh có thể dọc theo trình độ trục, vuông góc trục, hai cái trục lặp lại, hoặc là căn bản không lặp lại.

no-repeat:Bất bình phô

repeat:Cam chịu giá trị, hình ảnh sẽ ở trình độ cùng vuông góc phương hướng thượng đều lặp lại.

repeat-x:Hình ảnh chỉ ở trình độ phương hướng thượng lặp lại.

repeat-y:Hình ảnh chỉ ở vuông góc phương hướng thượng lặp lại.

round:Súc phóng

space:Đều đều phân bố

Ngữ pháp

/* đơn giá trị ngữ pháp */
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:repeat;
background-repeat:space;
background-repeat:round;
background-repeat:no-repeat;

/* song giá trị ngữ pháp: Trình độ horizontal | vuông góc vertical */
background-repeat:repeat space;
background-repeat:repeat repeat;
background-repeat:round space;
background-repeat:no-repeat round;

background-repeat:inherit;

Giá trị

Đơn giá trị ngữ pháp là hoàn chỉnh song giá trị ngữ pháp viết chữ giản thể:

Ở song giá trị ngữ pháp trung, cái thứ nhất giá trị tỏ vẻ trình độ lặp lại hành vi, cái thứ hai giá trị tỏ vẻ vuông góc lặp lại hành vi.

transition

transitionCSSThuộc tính làtransition-property,transition-duration,transition-timing-functionCùngtransition-delayMột cáiViết chữ giản thể thuộc tính (en-US).

Thí dụ mẫu

Quá độ có thể vì một cái nguyên tố ở bất đồng trạng thái chi gian cắt thời điểm định nghĩa bất đồng quá độ hiệu quả. Tỷ như ở bất đồng ngụy nguyên tố chi gian cắt, như là:hover,:activeHoặc là thông qua JavaScript thực hiện trạng thái biến hóa.

Ngữ pháp

CSS

/* ứng dụng với 1 cái thuộc tính */
/* thuộc tính tên | liên tục thời gian */
transition:margin-right 4s;

/* thuộc tính tên | liên tục thời gian | lùi lại */
transition:margin-right 4s 1s;

/* thuộc tính tên | liên tục thời gian | tính giờ công năng */
transition:margin-right 4s ease-in-out;

/* thuộc tính tên | liên tục thời gian | tính giờ công năng | lùi lại */
transition:margin-right 4s ease-in-out 1s;

/* ứng dụng 2 cái thuộc tính */
transition:
margin-right 4s,
color 1s;

/* ứng dụng sở hữu thay đổi thuộc tính */
transition:all 0.5s ease-out;

/* toàn cục giá trị */
transition:inherit;
transition:initial;
transition:unset;

• inheritDùng cho từ phụ nguyên tố kế thừa quá độ hiệu quả.
• initialDùng cho thiết trí quá độ hiệu quả vì cam chịu hoặc vô quá độ hiệu quả.
• unsetDùng cho sử dụng tính toán quá độ hiệu quả giá trị, thông thường căn cứ vào bất luận cái gì hiện có quá độ hiệu quả quy tắc.

transitionThuộc tính có thể bị chỉ định vì một cái hoặc nhiều CSS thuộc tính quá độ hiệu quả, nhiều thuộc tính chi gian dùng dấu phẩy tiến hành phân cách.

Trường hợp -1

Thực hiện hiệu quả

Số hiệu

<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.img0{
width:300px;
height:300px;
background-image:url(../static/02.jpg);
margin-top:200px;
}

td{
background-image:url(../static/01.jpg);
background-position:100px 100px;
/* background-repeat: no-repeat; khống chế bối cảnh hình ảnh lặp lại phương thức: Bất bình phô */
background-repeat:no-repeat;
/*transition: 0.1s; quá độ hiệu quả liên tục thời gian vì 0.1 giây */
/* transition: 0.1s; */
}

.img1:hover{
/* background-position thiết trí bối cảnh hình ảnh vị trí */
background-position:0px 0px;
}

.img2:hover{
background-position:-100px 0px;
}

.img3:hover{
background-position:-200px 0px;
}

.img4:hover{
background-position:0px -100px;
}

.img5:hover{
background-position:-100px -100px;
}

.img6:hover{
background-position:-200px -100px;
}

.img7:hover{
background-position:0px -200px;
}

.img8:hover{
background-position:-100px -200px;
}

.img9:hover{
background-position:-200px -200px;
}
</style>
</head>

<body>
<tableclass="img0"align="center">
<tr>
<tdclass="img1"></td>
<tdclass="img2"></td>
<tdclass="img3"></td>
</tr>
<tr>
<tdclass="img4"></td>
<tdclass="img5"></td>
<tdclass="img6"></td>
</tr>
<tr>
<tdclass="img7"></td>
<tdclass="img8"></td>
<tdclass="img9"></td>
</tr>
</table>
</body>

</html>

Trường hợp -2-2D bình di

Thực hiện hiệu quả

Số hiệu

<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.max{
width:200px;
height:200px;
background-color:pink;
transition:transform 2s;
/* opacity tỏ vẻ trong suốt độ 0 tỏ vẻ trong suốt 1 tỏ vẻ không ra */
opacity:0;
}

.max:hover{
/* transform:translateX(100px); */
/* transform: translateY(100px); */
/* transform: translate(100px,100px); */
transform:translate(100%,100%);
opacity:1;
}
</style>
</head>

<body>
<divclass="max">

</div>
</body>

</html>

Trường hợp -3-2D súc phóng

Thực hiện hiệu quả

Số hiệu

<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.max{
width:200px;
height:200px;
background-color:skyblue;
margin:100px auto;
transition:transform 3s;
}

.max:hover{
transform:scale(0.5);
}
</style>
</head>

<body>
<divclass="max"></div>
</body>

</html>

Trường hợp -4-2D xoay tròn

Thực hiện hiệu quả

Số hiệu

<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.max{
margin:200px auto;
/* rotate tỏ vẻ 2d xoay tròn */
width:200px;
height:200px;
background-color:palegreen;
transition:all 2s;
/* thiết trí xoay tròn trung tâm điểm */
/* transform-origin: bottom left; */
/* transform-origin: 100px 0px; */
transform-origin:50% 50%;
}

.max:hover{
transform:translate(0px,0px)rotate(360deg);
}
</style>
</head>

<body>
<divclass="max"></div>
</body>

</html>

css- thay đổi dần linear-gradient

linear-gradient()CSSHàm sốSáng tạo một cái từ hai loại hoặc nhiều loại nhan sắc duyên một cái thẳng tắp tiến hành tuyến tính quá độ hình ảnh, này kết quả là<gradient>Số liệu loại hình đối tượng, này đối tượng là một loại đặc thù<image>Số liệu loại hình.

Ngữ pháp

/* thay đổi dần trục vì 45 độ, từ màu lam thay đổi dần đến màu đỏ */
linear-gradient(45deg,blue,red);

/* từ hữu hạ đến tả thượng, từ màu lam thay đổi dần đến màu đỏ */
linear-gradient(to left top,blue,red);

/* sắc tiêu: Từ dưới lên trên, từ màu lam bắt đầu thay đổi dần, đến độ cao 40% vị trí là màu xanh lục thay đổi dần bắt đầu, cuối cùng lấy màu đỏ kết thúc */
linear-gradient(0deg,blue,green 40%,red);

/* nhan sắc nhắc nhở: Từ tả đến hữu thay đổi dần, từ màu đỏ bắt đầu, dọc theo thay đổi dần chiều dài đến 10% vị trí, sau đó ở còn thừa 90% chiều dài trung biến thành màu lam */
linear-gradient(.25turn,red,10%,blue);

/* nhiều vị trí sắc tiêu: 45% nghiêng thay đổi dần, tả hạ nửa bộ phận vì màu đỏ, hữu hạ nửa bộ phận vì màu lam, trung gian có một cái ngạnh tuyến, ở chỗ này thay đổi dần từ màu đỏ chuyển biến vì màu lam */
linear-gradient(45deg,red 0 50%,blue 50% 100%);

Giá trị

• Thay đổi dần tuyến lúc đầu điểm vị trí. Nếu chỉ định, tắc bao hàmtoCùng nhiều nhất hai cái mấu chốt tự: Một cái chỉ định trình độ vị trí (leftHoặcright), một cái khác chỉ định dựng thẳng vị trí (topHoặcbottom). Từ ngữ mấu chốt trước sau trình tự vô ảnh hưởng. Nếu không có chỉ định, tắc cam chịu vìto bottom.to top,to bottom,to leftCùngto rightPhân biệt đồng giá với0deg,180deg,270degCùng90deg.Còn lại giá trị sẽ bị thay đổi vì góc độ.
• Thay đổi dần tuyến phương hướng góc độ.0degĐồng giá vớito top,Gia tăng giá trị tương đương với thuận kim đồng hồ xoay tròn.

Trường hợp -5- thay đổi dần

Hiệu quả đồ

Số hiệu

<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.outside{
display:flex;
}

.max{
width:200px;
height:200px;
border:10px solid greenyellow;
/* background: linear-gradient(skyblue, greenyellow); */
background:linear-gradient(to left,blue,lightblue);
/* background: linear-gradient(180deg, skyblue, yellowgreen); */
/* background: linear-gradient(45deg, skyblue 80%, yellowgreen); */
/* background: linear-gradient(45deg, skyblue 70%, yellowgreen, red); */
}

.min{
width:200px;
height:200px;
border:10px solid lightskyblue;
background:radial-gradient(80px at center center,greenyellow,lightgreen);
}

.max-1{
width:200px;
height:200px;
border:10px solid greenyellow;
background:linear-gradient(to left,orange 30%,lightgreen);
}

.min-1{
width:200px;
height:200px;
border:10px solid lightskyblue;
background:linear-gradient(135deg,orange 80%,yellowgreen 30%);
}

.max-2{
width:200px;
height:200px;
border:10px solid greenyellow;
background:linear-gradient(217deg,rgba(255,0,0,.8),rgba(255,0,0,0)70.71%),
linear-gradient(127deg,rgba(0,255,0,.8),rgba(0,255,0,0)70.71%),
linear-gradient(336deg,rgba(0,0,255,.8),rgba(0,0,255,0)70.71%);
}

.min-2{
width:200px;
height:200px;
border:10px solid lightskyblue;
background:linear-gradient(135deg,orange,yellowgreen 60%);
}
</style>
</head>

<body>
<divclass="outside">
<divclass="max"></div>
<divclass="min"></div>
<divclass="max-1"></div>
<divclass="min-1"></div>
<divclass="max-2"></div>
<divclass="min-2"></div>
</div>

</body>

</html>

HTML nguyên tố

<ul>:Vô danh sách biểu nguyên tố

HTML<ul>Nguyên tố tỏ vẻ một loạt vô tự danh sách hạng mục, thông thường nhuộm đẫm vì hạng mục ký hiệu danh sách.

Thuộc tính

**line-height** hành cao, có thể lý giải vì word trung hành cao

list-style-typeCó thể thiết trí danh sách nguyên tố marker ( tỷ như viên điểm, ký hiệu, hoặc là tự định nghĩa máy đếm hình thức ).

list-style-typeLấy giá trị như sau

none:Không biểu hiện danh sách hạng đánh dấu.

disc:Thành thực viên điểm ( cam chịu giá trị )

circle:Rỗng ruột viên điểm

square:Thành thực khối vuông

decimal:Số thập phân con số Ả Rập

Khảm bộ danh sách

Hiệu quả

Số hiệu

<ul>
<li>Đệ nhất hạng</li>
<li>
Đệ nhị hạng
<!-- chú ý, đóng cửa </li> nhãn không có đặt ở chỗ này! -->
<ul>
<li>Đệ nhị hạng đệ nhất tử hạng</li>
<li>
Đệ nhị hạng đệ nhị tử hạng
<!-- cái thứ hai khảm bộ vô danh sách biểu cũng giống nhau! -->
<ul>
<li>Đệ nhị hạng đệ nhị tử hạng đệ nhất tử tử hạng</li>
<li>Đệ nhị hạng đệ nhị tử hạng đệ nhị tử tử hạng</li>
<li>Đệ nhị hạng đệ nhị tử hạng con thứ ba tử hạng</li>
</ul>
</li>
<!-- vì bao hàm cái thứ ba vô danh sách biểu li đóng cửa </li> nhãn -->
<li>Đệ nhị hạng con thứ ba hạng</li>
</ul>
<!-- đóng cửa </li> nhãn ở chỗ này! -->
</li>
<li>Đệ tam hạng</li>
</ul>

Trường hợp -6- gạo kê thương thành bên trái danh sách

Thực hiện hiệu quả

Số hiệu

<!DOCTYPEhtml>
<html>

<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
*{
padding:0px;
margin:0px;
}

.max{
width:234px;
height:420px;
padding:20px 0px;
background-color:rgba(105,101,101,.6);
margin:0px auto;
}

li{
list-style:none;
padding-left:30px;
height:42px;
line-height:42px;
}

li:hover{
background-color:#ff6700;
}
</style>
</head>

<body>
<ulclass="max">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>

</html>

table bảng biểu

HTML<table>Nguyên tố tỏ vẻ bảng biểu số liệu —— tức ở một cái từ bao hàm số liệu hành cùng liệt tạo thành 2D bảng biểu trung hiện ra tin tức.

Thí dụ mẫu

Số hiệu

<table>
<caption>Học sinh biểu</caption>
<thead>
<tr>
<th>Tên họ</th>
<th>Tuổi tác</th>
<th>Chủng tộc</th>
<th>Hôn phối</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tôn Ngộ Không</td>
<td>800</td>
<td>Yêu</td>
<td>Chưa lập gia đình</td>
</tr>
<tr>
<td>Dương Tiễn</td>
<td>1500</td>
<td>Thần</td>
<td>Chưa lập gia đình</td>
</tr>
<tr>
<td>Đầu trâu</td>
<td>Tam vạn lượng thiên tuế</td>
<td>Vu tộc</td>
<td>Chưa lập gia đình</td>
</tr>
<tr>
<td>Vô thường</td>
<td>2000</td>
<td>Quỷ</td>
<td>Chưa lập gia đình</td>
</tr>
<tr>
<td>Xi Vưu</td>
<td>180</td>
<td>Người</td>
<td>Đã kết hôn</td>
</tr>
<tr>
<td>Ngọc Hoàng Đại Đế</td>
<td>2 trăm triệu 2682 vạn tuế</td>
<td>Thần</td>
<td>Đã kết hôn</td>
</tr>
</tbody>
</table>

Bảng biểu thuộc tính

Ở table bảng biểu trung có một ít thuộc tính là dùng để thiết trí bảng biểu, trong đó thường thấy thuộc tính như sau:

Thí dụ mẫu

Số hiệu

<tableborder="1"cellspacing="0"cellpadding="0"width="400px"height="400px"align="center"bgcolor="skyblue">
<caption>Học sinh biểu</caption>
<thead>
<tr>
<th>Tên họ</th>
<th>Tuổi tác</th>
<th>Chủng tộc</th>
<th>Hôn phối</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tôn Ngộ Không</td>
<td>800</td>
<td>Yêu</td>
<td>Chưa lập gia đình</td>
</tr>
<tr>
<td>Dương Tiễn</td>
<td>1500</td>
<td>Thần</td>
<td>Chưa lập gia đình</td>
</tr>
<tr>
<td>Đầu trâu</td>
<td>Tam vạn lượng thiên tuế</td>
<td>Vu tộc</td>
<td>Chưa lập gia đình</td>
</tr>
<tr>
<td>Vô thường</td>
<td>2000</td>
<td>Quỷ</td>
<td>Chưa lập gia đình</td>
</tr>
<tr>
<td>Xi Vưu</td>
<td>180</td>
<td>Người</td>
<td>Đã kết hôn</td>
</tr>
<tr>
<td>Ngọc Hoàng Đại Đế</td>
<td>2 trăm triệu 2682 vạn tuế</td>
<td>Thần</td>
<td>Đã kết hôn</td>
</tr>
</tbody>
</table>

Trường hợp -7- bảng biểu thuộc tính

Thí dụ mẫu

Số hiệu

<tablealign="center"width="500px"height="300px"cellspacing="1"bgcolor="red">
<trbgcolor="#fff">
<td></td>
<td></td>
<td></td>
</tr>
<trbgcolor="#fff">
<td></td>
<td></td>
<td></td>
</tr>
<trbgcolor="#fff">
<td></td>
<td></td>
<td></td>
</tr>
<trbgcolor="#fff">
<td></td>
<td></td>
<td></td>
</tr>
<trbgcolor="#fff">
<td></td>
<td></td>
<td></td>
</tr>
</table>

Bảng biểu xác nhập

• rowspanXác nhập hành, dọc xác nhập đơn nguyên cách
• colspanXác nhập liệt, nằm ngang xác nhập đơn nguyên cách

Thí dụ mẫu

Số hiệu

<tableborder="1"align="center"width="500px"height="200px">
<tralign="center">
<tdcolspan="3">Điện thoại</td>
</tr>
<tralign="center">
<td>Tên họ</td>
<td>Điện thoại</td>
<td>Ghi chú</td>
</tr>
<tralign="center">
<tdrowspan="2">Mã lão lục</td>
<td>13849308231</td>
<td>Di động điện thoại</td>
</tr>
<tralign="center">
<td>6765381</td>
<td>Cung cấp điện máy bàn</td>
</tr>
</table>

Bảng biểu khảm bộ

Bảng biểu khảm bộ chính là ở bảng biểu trung lại sáng tạo bảng biểu muốn ở td nhãn trung sáng tạo table.

Thí dụ mẫu

Số hiệu

<tableborder="1"align="center"width="500px"height="200px">
<tr>
<td>Anh hùng</td>
<td>Chức nghiệp</td>
<td>Trang bị</td>
</tr>
<tr>
<td>Irene</td>
<td>Xạ thủ</td>
<td>
<tableborder="1"cellspacing="0"cellpadding="0"width="100%">
<tr>
<td>Khấp huyết chi nhận</td>
</tr>
<tr>
<td>Vô tận chiến nhận</td>
</tr>

</table>
</td>
</tr>
<tr>
<td>Arthur</td>
<td>Chiến sĩ</td>
<td>
<tableborder="1"cellspacing="0"cellpadding="0"width="100%">
<tr>
<td>Ám ẩn rìu chiến</td>
</tr>
<tr>
<td>Điềm xấu chi nhận</td>
</tr>
<tr>
<td>Bất tử chi điểu</td>
</tr>

</table>
</td>
</tr>
<tr>
<td>Tôn Ngộ Không</td>
<td>Thích khách / chiến sĩ</td>
<td>
<tableborder="1"cellspacing="0"cellpadding="0"width="100%">
<tr>
<td>Vô tận chiến nhận</td>
</tr>
<tr>
<td>Tông sư chi lực</td>
</tr>
<tr>
<td>An ẩn rìu chiến</td>
</tr>
</table>
</td>
</tr>
</table>

Trường hợp -8- bảng biểu bố cục

Hiệu quả

Văn tự nội dung:

Cùng phẩm chất sinh hoạt không hẹn mà gặp

Pure Cashmere giữ ấm châm
Này khoản châm dệt mũ phong cách hưu nhàn đáng yêu,

☺ 2 người ta nói hảo

Nhị thai gia đình đều ở dùng loại này giường
Mềm giường chất lượng thực hảo rất xa hoa, thực hỉ

☺ 0 người ta nói hảo

Chu đại phúc cổ pháp hoàng kim 70 khắc thật
Chu đại phúc nhãn hiệu bằng vào chuyên nghiệp cùng ưu

☺ 2 người ta nói hảo

Tự hành đẩy kéo thức lưới cửa sổ
Không cần nhân công tới cửa, tự hành trang bị chỉ

☺ 6 người ta nói hảo

TOUS đào ti hùng kinh điển khoản khai
Chọn dùng mở miệng hình thức thiết kế, tháo dỡ càng

☺ 4 người ta nói hảo

Hoa vì Freebuds2 vô tuyến Bluetooth
Thuần tịnh lam bạch sắc trạch, đột hiện ra giản

☺ 2 người ta nói hảo

Số hiệu

<tableborder="0"cellspacing="20px"width="500px">
<trvalign="center">
<tdcolspan="6"><imgsrc="img/ có hảo hóa.png">
<fontsize="3"color="#999">Cùng phẩm chất sinh hoạt không hẹn mà gặp</font>
</td>
</tr>
<tr>
<td>
<imgsrc="img/01.png"width="270px">
<br>
<fontsize="5">Pure Cashmere giữ ấm châm</font>
<br>
<fontsize="4"color="#999">Này khoản châm dệt mũ phong cách hưu nhàn đáng yêu,</font>
<p>
<fontsize="5"color="#35b1ff">☺</font>
<fontsize="4"color="#35b1ff">2 người ta nói hảo</font>
</p>
</td>
<td>
<imgsrc="img/02.png"width="270px">
<br>
<fontsize="5">Nhị thai gia đình đều ở dùng loại này giường</font>
<br>
<fontsize="4"color="#999">Mềm giường chất lượng thực hảo rất xa hoa, thực hỉ</font>
<p>
<fontsize="5"color="#35b1ff">☺</font>
<fontsize="4"color="#35b1ff">0 người ta nói hảo</font>
</p>
</td>
<td>
<imgsrc="img/03.png"width="270px">
<br>
<fontsize="5">Chu đại phúc cổ pháp hoàng kim 70 khắc thật</font>
<br>
<fontsize="4"color="#999">Chu đại phúc nhãn hiệu bằng vào chuyên nghiệp cùng ưu</font>
<p>
<fontsize="5"color="#35b1ff">☺</font>
<fontsize="4"color="#35b1ff">2 người ta nói hảo</font>
</p>
</td>
<td>
<imgsrc="img/04.png"width="270px">
<br>
<fontsize="5">Tự hành đẩy kéo thức lưới cửa sổ</font>
<br>
<fontsize="4"color="#999">Không cần nhân công tới cửa, tự hành trang bị chỉ</font>
<p>
<fontsize="5"color="#35b1ff">☺</font>
<fontsize="4"color="#35b1ff">6 người ta nói hảo</font>
</p>
</td>
<td>
<imgsrc="img/05.png"width="270px">
<br>
<fontsize="5">TOUS đào ti hùng kinh điển khoản khai</font>
<br>
<fontsize="4"color="#999">Chọn dùng mở miệng hình thức thiết kế, tháo dỡ càng</font>
<p>
<fontsize="5"color="#35b1ff">☺</font>
<fontsize="4"color="#35b1ff">4 người ta nói hảo</font>
</p>
</td>
<td>
<imgsrc="img/06.png"width="270px">
<br>
<fontsize="5">Hoa vì Freebuds2 vô tuyến Bluetooth</font>
<br>
<fontsize="4"color="#999">Thuần tịnh lam bạch sắc trạch, đột hiện ra giản</font>
<p>
<fontsize="5"color="#35b1ff">☺</font>
<fontsize="4"color="#35b1ff">2 người ta nói hảo</font>
</p>
</td>
</tr>
</table>

Biểu đơn

Biểu đơn giới thiệu

​ biểu đơn ở trang web trung chủ yếu phụ trách số liệu thu thập công năng. Một cái biểu đơn có ba cái cơ bản tạo thành bộ phận: Biểu đơn nhãn: Nơi này bao hàm xử lý biểu số lẻ theo sở dụng CGI trình tự URL cùng với số liệu đệ trình đến server phương pháp. Biểu đơn vực: Bao hàm văn bản khung, mật mã khung, che giấu vực, nhiều hành văn bổn khung, phục tuyển khung, đơn tuyển khung, hạ kéo lựa chọn khung cùng văn kiện thượng truyền khung chờ. Biểu đơn cái nút: Bao gồm đệ trình cái nút, trở lại vị trí cũ cái nút cùng giống nhau cái nút; dùng cho đem số liệu truyền tống đến server thượng CGI kịch bản gốc hoặc là hủy bỏ đưa vào, còn có thể dùng biểu đơn cái nút tới khống chế mặt khác định nghĩa xử lý kịch bản gốc xử lý công tác.

Biểu đơn nhãn

<form action= "" method= "" >Dùng cho vì người dùng đưa vào sáng tạo HTML biểu đơn.
<input>Dùng cho sưu tập người dùng tin tức.
<textarea>Nhãn dùng để định nghĩa nhiều hành văn bản đưa vào khống kiện
<lable for= "id" >Dùng để vì<input>Nhãn định nghĩa đánh dấu
<fieldset>Nhưng đem biểu đơn nội tương quan nguyên tố phân tổ.
<legend>Nhãn là dùng để vì<fieldset>Nhãn định nghĩa tiêu đề
<select>Nhưng sáng tạo đơn tuyển hoặc nhiều tuyển thực đơn / hạ kéo danh sách.
<optgroup label= "" >Thông qua<optgroup>Nhãn có thể đem tương quan lựa chọn tổ hợp ở bên nhau **()**.
<option>Nguyên tố định nghĩa hạ kéo danh sách trung một cái lựa chọn ( một cái điều mục ).
<datalist id= "list" >Cùng<option label= "" value= "" >Định nghĩa lựa chọn danh sách. Thỉnh cùng input nguyên tố phối hợp sử dụng nên nguyên tố, tới định nghĩa input khả năng giá trị.

Biểu đơn nhãn cơ bản thuộc tính

<form>Nhãn thuộc tính

<input>Nhãn thuộc tính

<select>Nhãn thuộc tính

<textarea>Nhãn thuộc tính

autocomplete

Hay không sử dụng trình duyệt ký ức công năng tự động bỏ thêm vào văn bản. Khả năng giá trị có:

• off:Không sử dụng trình duyệt ký ức tự động bỏ thêm vào, người sử dụng cần thiết đưa vào bọn họ muốn đưa vào sở hữu nội dung. Hoặc là trang web cung cấp chính mình tự động bỏ thêm vào phương pháp.
• on:Trình duyệt căn cứ người dùng phía trước đưa vào nội dung hoặc là thói quen, ở người dùng đưa vào thời điểm cấp ra tương ứng đưa vào nhắc nhở. Nếu không nói rõautocompleteThuộc tính, trình duyệt sẽ từ phụ cấp biểu đơn nguyên tố thượng phân tích có phải hay không mở ra cái này thuộc tính. Biểu đơn nguyên tố có thể làtextareaNguyên tố phụ cấp<form>Hoặc làtextareaCó cùng biểu đơn tương đồng id ( tham kiến phía dưới form thuộc tính ). Càng nhiều thỉnh xem xét<form>autocompleteThuộc tính.

autofocus

Giao diện download xong lúc sau hay không tự động cấp bổn nguyên tố tăng thêm tiêu điểm. Chỉ có cùng bảng biểu liên hệ mới có thể sử bổn thuộc tính có hiệu lực.

cols

Văn bản vực nhưng coi độ rộng. Cần thiết vì số dương, cam chịu vì 20 (HTML5).

disabled

Cấm dùng văn bản vực. Cam chịu vì false. Nếu chưa chỉ định, cũng có thể từ phụ cấp thượng như``Kế thừa mà đến.

form

Chỉ định cùng tự thân tương quan liên biểu đơn. Giá trị cần thiết vì bổn văn đương nội biểu đơn ID, nếu chưa chỉ định, chính là cùng trước mặt nơi biểu đơn nguyên tố tương quan liên. Này liền cho phép ngươi ở hồ sơ tùy ý địa phương đặt văn bản vực nguyên tố.

maxlength

Cho phép người dùng đưa vào lớn nhất tự phù chiều dài (Unicode). Chưa chỉ định tỏ vẻ vô hạn chiều dài.

minlength

Cho phép người dùng đưa vào nhỏ nhất tự phù chiều dài (Unicode)

name

Nguyên tố tên.

placeholder

Hướng người dùng nhắc nhở có thể ở khống kiện trung đưa vào nội dung. Ở nhuộm đẫm nhắc nhở khi, chiếm vị phù văn bổn trung hồi xe phù (\r) hoặc đổi hành phù (\n) nhất định sẽ bị làm hành đoạn ( đổi hành ) xử lý.

readonly

Không cho phép người dùng sửa chữa nguyên tố nội văn bản. CùngdisabledThuộc tính bất đồng chính là, cái này có thể làm người dùng điểm đánh cùng lựa chọn nguyên tố nội văn bản. Nếu ở biểu đơn, cái này nguyên tố giá trị vẫn là sẽ đi theo biểu chỉ một khởi đệ trình.

required

Nhắc nhở người dùng cái này nguyên tố nội dung tất điền.

rows

Nguyên tố đưa vào văn bản hành số ( biểu hiện độ cao ).

spellcheck

Nên thuộc tính thiết vì true khi, cho thấy nên nguyên tố sẽ làm viết cùng ngữ pháp kiểm tra. Thuộc tính giá trị vì default khi, cho thấy nguyên tố có cam chịu hành vi, khả năng sẽ căn cứ vào phụ nguyên tố spellcheck giá trị. Thuộc tính giá trị vì false khi, cho thấy nguyên tố không làm viết cùng ngữ pháp kiểm tra.

wrap

Chỉ định văn bản đổi hành phương thức. Cam chịu vì soft. Khả năng giá trị vì:

• hard: Ở văn bản tới nguyên tố lớn nhất độ rộng thời điểm, trình duyệt tự động cắm vào đổi hành phù (CR+LF). Tỷ như chỉ địnhcolsGiá trị.
• soft: Ở tới nguyên tố lớn nhất độ rộng thời điểm, sẽ không tự động cắm vào đổi hành phù.

Thí dụ mẫu

Số hiệu

<formaction="htm-2.html"method="post">
<fieldset>
<legend>Lạp lạp lạp</legend>
</fieldset>
Username:<inputtype="text"name="username"/><br>
Mật mã:<inputtype="password"name="pass"/><br>
Ngươi thích:<inputtype="checkbox"name="hobby"value="zhang">Trương Tam Phong
<inputtype="checkbox"name="hobby">Lưu Đức Hoa
<inputtype="checkbox"name="hobby"checked>Trương màu ni
<inputtype="checkbox"name="hobby">Cổ Cự Cơ<br>
Giới tính:<inputtype="radio"name="sex"checked>Nam
<inputtype="radio"name="sex">Nữ<br>
<inputtype="hidden"name="userId">
Thượng truyền văn kiện:<inputtype="file"><br>
Hộp thư:<inputtype="email"><br>
Địa chỉ web:<inputtype="url"list="url_name"><br>
<datalistid="url_name">
<optionlabel="Baidu"value="http:// baidu"/>
<optionlabel="Sưu hồ"value="http:// sohu"/>
<optionlabel="Kinh đông"value="http:// jd"/>
</datalist>
Tuổi tác:<inputtype="number"><br>
Thành thị:<select>
<optionvalue="guangzhou">Quảng Châu</option>
<optionvalue="hangzhou">Hàng Châu</option>
<optionvalue="chengzhou"selected>Trịnh Châu</option>
<optionvalue="dengzhou">Đặng châu</option>
</select><br>
Tóm tắt:<textarearows="10"cols="20">Mới bắt đầu giá trị</textarea><br>
<inputtype="submit"value="Đệ trình"/>
<inputtype="reset"value="Trọng trí"/>
<inputtype="image"src=""/>
<inputtype="button"value="Giống nhau cái nút">
</form>

Trường hợp -9- biểu đơn

Thí dụ mẫu

Số hiệu

<formaction="https:// baidu">
<fieldset>
<legend>Đăng ký giao diện</legend>
Nick name:<inputtype="text"><br>
Mật mã:<inputtype="password"><br>
Xác nhận mật mã<inputtype="password"><br>
Hộp thư:<inputtype="email"><br>
Điện thoại:<inputtype="text"><br>
Giới tính:<inputtype="radio"name="sex"checked>Nam
<inputtype="radio"name="sex"checked>Nữ
<inputtype="submit"value="Đăng ký">
<inputtype="reset"value="Trọng trí">
</fieldset>
</form>

Trường hợp -10- khối vuông cách

Thí dụ mẫu

Số hiệu

<tablewidth="300px"height="300px"align="center">
<tr>
<tdcolspan="2"bgcolor="red"></td>
<tdrowspan="2"bgcolor="pink"></td>
</tr>
<tr>
<tdrowspan="2"bgcolor="blue"></td>
<tdbgcolor="orange"></td>
</tr>
<tr>
<tdcolspan="2"bgcolor="green"></td>
</tr>
</table>

Trường hợp -11- lý lịch sơ lược biểu

Thí dụ mẫu

Số hiệu

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
tr{
height:34px;
}

td{
width:100px;
text-align:center;
}
</style>
</head>

<body>
<tablealign="center"border="1"cellspacing="0"cellpadding="0"width="500px"height="450px">
<tr>
<thcolspan="5"height="34px"align="left">Một, cơ bản thí nghiệm</th>
</tr>
<tr>
<td>Tên họ</td>
<td></td>
<td>Giới tính</td>
<td></td>
<tdrowspan="4">Ảnh chụp</td>
</tr>
<tr>
<td>Quê quán</td>
<td></td>
<td>Tuổi tác</td>
<td></td>
</tr>
<tr>
<td>Chính trị diện mạo</td>
<td></td>
<td>Hôn nhân trạng huống</td>
<td></td>
</tr>
<tr>
<td>Liên hệ phương thức</td>
<td></td>
<td>Điện tử hộp thư</td>
<td></td>
</tr>
<tr>
<thcolspan="5"height="34px"align="left">Nhị, cá nhân tự trọng</th>
</tr>
<trstyle="height:68px;">
<tdcolspan="5"></td>
</tr>
<tr>
<thcolspan="5"height="34px"align="left">Tam, sở trường đặc biệt cùng kỹ năng</th>
</tr>
<trstyle="height:68px;">
<tdcolspan="5"></td>
</tr>
<tr>
<thcolspan="5"height="34px"align="left">Bốn, giáo dục huấn luyện trải qua</th>
</tr>
<tablealign="center"border="1"cellspacing="0"cellpadding="0"width="500px"height="350px"
style="border-top:none">
<tr>
<tdstyle="border-top:none;">Lúc đầu thời đại</td>
<tdstyle="border-top:none;width:150px;">Trường học</td>
<tdstyle="border-top:none;width:150px;">Chuyên nghiệp</td>
<tdstyle="border-top:none;">Ghi chú</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<thcolspan="4"height="34px"align="left">Năm, công tác cập thực tập trải qua</th>
</tr>
<tr>
<td>Lúc đầu thời đại</td>
<td>Công tác đơn vị</td>
<td>Cương vị</td>
<td>Chủ yếu chức trách</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<thcolspan="4"height="34px"align="left">Sáu, đoạt giải giấy chứng nhận tình huống</th>
</tr>
<tr>
<td>Đạt được thời gian</td>
<td>Giấy chứng nhận tên</td>
<tdcolspan="2">Nội dung</td>
</tr>
<tr>
<td></td>
<td></td>
<tdcolspan="2"></td>
</tr>
</table>

</table>
</body>

</html>

Trường hợp -12- tâm hình ảnh chụp tường

Thí dụ mẫu

Số hiệu

<tablealign="center"width="450px"height="350px"border="1">
<tr>
<td></td>
<td>Data</td>
<td>Data</td>
<td></td>
<td></td>
<td></td>
<td>Data</td>
<td>Data</td>
<td></td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td></td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td></td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Data</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Trường hợp -13- biểu đơn

Thí dụ mẫu

Số hiệu

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type=number]{
-moz-appearance:textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
</style>
</head>

<body>
<formaction="https:// taobao">
<fieldsetstyle="width:400px;">
<legend>Tài khoản tin tức</legend>
Tên họ:<inputtype="text"><br>
Tài khoản:<inputtype="text"><br>
Mật mã:<inputtype="password"><br>
Xác nhận mật mã:<inputtype="password">
</fieldset>
<fieldsetstyle="width:400px;">
<legend>Cơ bản tin tức</legend>
Giới tính:<inputtype="radio"name="sex"checked>Nam
<inputtype="radio"name="sex"checked>Nữ<br>
Yêu thích:<inputtype="checkbox"name="hobby">Xướng<inputtype="checkbox"name="hobby">Nhảy<input
type="checkbox"name="hobby">rap<inputtype="checkbox"name="hobby">Bóng rổ<br>
Dân tộc:<selectname="nation"id="">
<optionvalue="han">Dân tộc Hán</option>
<optionvalue="miao">Miêu tộc</option>
<optionvalue="miao">Tộc</option>
</select>
<br>
Tự giới thiệu:<textareaname="introduce"id=""cols="50"rows="10">Giáp thất</textarea>
</fieldset>
<fieldsetstyle="width:400px;">
<legend>Liên hệ phương thức</legend>
Số điện thoại:<inputtype="number"><br>
Hộp thư:<inputtype="email"><br>
Địa chỉ:<selectname="address"id="">
<optionvalue="Bắc Kinh">Bắc Kinh</option>
<optionvalue="shanghai">Thượng Hải</option>
<optionvalue="shenzhen">Thâm Quyến</option>
<optionvalue="hangzhou">Hàng Châu</option>
</select>
</fieldset>
</form>
</body>

</html>

Trường hợp -14- thời khoá biểu

Thí dụ mẫu

Số hiệu

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
table-layout:fixed;
}

table tr th:nth-child(1){
width:125px;
}
</style>
</head>

<body>
<tablealign="center"border="1"cellspacing="0"cellpadding="0"height="450px"width="650px">
<tr>
<thcolspan="2">Cuối tuần</th>
<th>Thứ hai</th>
<th>Thứ ba</th>
<th>Thứ tư</th>
<th>Thứ năm</th>
<th>Thứ sáu</th>
<th>Thứ bảy</th>
</tr>
<tralign="center">
<tdrowspan="4">Buổi sáng</td>
<td>1</td>
<tdrowspan="2">Toán học</td>
<td>Sinh vật</td>
<td>Hóa học</td>
<tdrowspan="2">Tiếng Anh</td>
<td>Địa lý</td>
<tdrowspan="2">Toán học</td>
</tr>
<tralign="center">
<td>2</td>
<tdrowspan="2">Ngữ văn</td>
<tdrowspan="2">Tiếng Anh</td>
<tdrowspan="2">Toán học</td>
</tr>
<tralign="center">
<td>3</td>
<td>Chính trị</td>
<td>Âm nhạc</td>
<td>Mỹ thuật</td>
</tr>
<tralign="center">
<td>4</td>
<tdcolspan="6">Tự học</td>
</tr>
<tralign="center">
<tdrowspan="4">Buổi chiều</td>
<td>1</td>
<tdrowspan="2">Thể dục</td>
<td>Hóa học</td>
<tdrowspan="2">Ngữ văn</td>
<td>Lịch sử</td>
<tdrowspan="2">Ngữ văn</td>
<td>Địa lý</td>
</tr>
<tralign="center">
<td>2</td>
<tdrowspan="2">Ngữ văn</td>
<tdrowspan="2">Tiếng Anh</td>
<tdrowspan="2">Chính trị</td>
</tr>
<tralign="center">
<td>3</td>
<td>Sinh vật</td>
<td>Sinh vật</td>
<td>Địa lý</td>
</tr>
<tralign="center">
<td>4</td>
<tdcolspan="6">Tự học</td>
</tr>
</table>
</body>

</html>