-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtk_CÁC_THẺ_HTML.txt
368 lines (343 loc) · 19.5 KB
/
tk_CÁC_THẺ_HTML.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
tất cả các thẻ
<!------- > đây là ghi chú
##############################################################################
<title> dùng để tên trên thanh tab
<header> phần đầu
<body> Là phân thân
<footer> là phần chân(phần cuối)
<table> toàn bộ bảng gọi là table THAM KHẢO BÊN DƯỚI (trong bảng có: row: dòng ; cols số cột)
<div> LÀ nhóm nhiều phần tử html
<h1> dùng để tên tiêu đề thứ nhất 1
<h2> dùng để tên tiêu đề thứ nhất 2
<h3> dùng để tên tiêu đề thứ nhất 3
<h4> dùng để tên tiêu đề thứ nhất 4
<h5> dùng để tên tiêu đề thứ nhất 5
<h6> dùng để tên tiêu đề thứ nhất 6
<p> dùng để ghi 1 đoạn văn bản
<span> dùng để chèn màu hay ảnh vào 1 văn bản nó thường nằm trong <p></p>
<br> chèn ký tự kết thúc dòng (tu dong xuong dong)
<hr> kẻ 1 đường nằm ngang trong web
<a> tạo liên kết (link vd bên dưới)
-<style> text-direction: none; :dùng để bỏ gạch chân dưới đường link
- cấu trúc trong : <a> có -->taget
///////////////////////////////////////////////
target="_bank" : MỞ RA 1 TAB MỚI
vd: <a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>
/////////////////////////////////////////////
target="_self" : MỞ TRỰC TIẾP TRONG 1 KHUNG HÌNH TRONG CÙNG 1 TAB ĐÓ
target="_parent" : MỞ TRỰC TIẾP TRONG 1 KHUNG HÌNH NHƯNG TO TOÀN MÀN HÌNH
target="_top" : MỞ RA TRONG CÁC TAB CAO NHẬT trong <a>
<img> thêm ảnh vaò web
##############################################################################
# Tham khảo làm Menu Ngang: Với ul ,li
https://cafe.net.vn/media/catalog/product/cache/f650724451860877a45386b8b081a692/5/0/5000984.jpg
https://thachpham.com/web-development/html-css/ky-thuat-tao-menu-ngang-css.html
https://thachpham.com/web-development/html-css/tao-menu-doc-co-ban.html
##############################################################################
# SỬ DỤNG MENNU BẲNG UL VS OL VÀ LI
<ul><li> <!-- hai cái đi liền vớinhau--> in ra cac kiểu DẤU CHẤM trước các chữ
style=""list-style: square;" >>> Nó sẽ ra hình vuông
style=""list-style: distc;" >>>> Nó sẽ làm hình tròn
style=""list-style-image:{tên_ảnh_vủa_bạn}
##############################################################################
<ol stype="1"> dùng để in ra các số đằng trước các chữ
vd: 1 tung
2 nam......
##############################################################################
# DANH SÁCH ĐỊNH NGHĨA
<dl> bắt đầu định nghĩa các kiểu văn bản trong gồm:
<dl>
<dt>HTML</dt>
<dd>kiểu văn bản </dd>
</dl>
vd : chữ "kiểu văn bản " nó sẽ nùi vào 1 dòng
HTML
kiểu văn bản
###########################################################################
<table> in kiểu danh sách theo 1 kiểu bảng work và trong table gồm có:
<!-- nó thường đi với thẻ border -->
<!-- tham khảo thêm với <style> và trong đó có border-->
<!-- table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
-->
<!-- phần này phần đầu-->
<thead>
<th> stt</th>
<th> tên</th>
</thead>
<!-- phần này là phần thân-->
<tbody>
<tr>
<td>1</td>
<td> nguyen thanh tung</td>
</tr>
</tbody>
###################################################################
THAM KHẢO THÊM CÁC THUỘC TÍNH CỦA <style> trong table:
border: 1px solid black; dùng để làm viền màu đen
border-collapse: collapse;> dùng để làm mất đi viền to
border-radius>:10px ; Dùng để làm bo tròn các viền bên ngoài bảng( CHỈ NẰM TRONG td,th)
border-dotted : dùng để là chấm chấm các viền
border-dashed : dùng cho chấm chấm hình ứng
border-solid : dùng cho viền đậm động
border-double : dùng cho viền đôi đậm đôi
border-groove : dùng cho viền đôi đậm đôi
border-ridge : dùng cho viền đôi nhạt đôi
border-outset : dùng cho viền bên đậm bên nhạt
border-none: không hiện bảng
border-hidden : giá trị rỗng ,không hiện viền
outline : giong nhu solid
################################################
thuộc tính : hover() la khi ta di chuyển con trỏ đến nơi mik muốn nó sẽ thay đổi màu mà mik đã cài đặt
vd ==> th:hover{
background-color: aqua;
}
thuộc tính: visibility: này xác định liệu phần tử có hiển thị hay bị ẩn hay không. Nó có hai giá trị chính:
visible: Phần tử sẽ hiển thị bình thường.
hidden: Phần tử sẽ bị ẩn.
thuộc tính overflow được sử dụng để xác định cách xử lý nội dung tràn ra khỏi vùng chứa của phần tử. Nó có bốn giá trị chính:
overflow: visible: Nội dung bên trong sẽ tràn ra khỏi div 100px và có thể chồng lên các phần tử khác trên trang.
overflow: hidden: Nội dung bên trong sẽ bị cắt bớt tại 100px và không hiển thị phần tràn ra ngoài.
overflow: scroll: Thanh cuộn dọc sẽ xuất hiện bên phải div, cho phép người dùng cuộn xuống để xem phần nội dung bị ẩn.
overflow: auto: Thanh cuộn dọc chỉ xuất hiện khi người dùng di chuột qua div hoặc khi nội dung bên trong tràn ra ngoài 100px.
##############################################################################
<input> dung để chọn đáp án
<button> hiện ra 1 nút để nhấn vào
##############################################################################
<header> dùn cho các nằm bên trên
<footer> dùng để các thẻ nằm bên dưới
<aside> các thẻ nằm bên trái
<div> chia ra các phần tử gộp các thẻ vào với nhau và nó được sd trong cả css section
<section> cũng là chia các phần tử lại với nhau nhưng trong section thì nó sẽ chia ra 1 các cụ thể hơn so với <div> ở phía dòng trên
<nav> dùng để các menu
<style> nó dùng để khai báo các phần thẻ như màu sắc , kiểu , kích thước trên 1 trang web>> khi khai báo nó sẽ giúp các web đó theo 1 nguyên tắc
##############################################################################
CÁCH THÊM MÀU CHO 1 TRANG WEB
<body bgcolor="tên_màu">
##############################################################################
CÁCH THÊM ẢNH VÀO background , video ,audio, 1 kenh youtube TRANG WEB
<body backgroung="tên_ảnh">
<body style= "background-image: url('tên_ảnh');" >
<img> thêm ảnh vào web
<iframe> cách chèn video yotube vào trong web (Nhấn vào các sao chép các nhúng của youtube)
##############################################################################
<video> thêm video có trong soure >> cách dùng : (controls: hiện nút nhấn play; autoplay: tự động phát video)
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
##############################################################################
<audio> thêm âm thanh vào web cách dùng tương tự như <video>
##############################################################################
CÁCH DÙNG STYLE: vs tên màu vs font chữ ;
<style "color:tên_màu ; font-size:30p; width,length">
background : phong man hinh chu web
font-family phong chu
font-size : kich co (%)
text-align : can chinh chu(trai left; giua: center ; phai: right)
font-weight: dùng để ghi chữ in đâm (font-weight: bold :IN ĐẬM CHỮ ; font-weight: 900 :DÙNG ĐỂ LÀM TO CHỮ )
font-style: muốn in nghiên thì dùng (font-style:italic)
line-height: 2 ==> dùng để cách khoảng trống chỗ các văn bản khi xuống dòng với nhau .
text-transform : thuộc tính làm để in đâm , in thường các chữ
(text-transform: uppercase; IN ĐẬM TOÀN BỘ;)
(text-transform: lowercase ;IN TOÀN BỘ THƯỜNG)
(text-transform: capitalize;IN CHỮ CÁI ĐẦU TIÊN)
tetx-shadow : hiệu ứng bóng độ(tetx-shadow: CHIỀU CAO px, BÊN PHẢI px, BÊN DƯỚI px, TÊN MÀU )
link-tham_khao(shadow): https://www.w3schools.com/cssref/playdemo.php?filename=playcss_text-shadow
text-direction: none; :dùng để bỏ gạch chân dưới đường link
text-direction: underline; :dùng để them gạch chân dưới đường link
text-visited:{màu bạn muốn} khi nhấn vào và thoát ra nó sẽ hiện link đó màu khác
##############################################################################
THAY ĐỔI MÀU CHỮ
<style "color:tên_màu">
bổ sung tham khảo : <span> dùng để chèn màu hay ảnh vào 1 văn bản nó thường nằm trong <p></p>
##############################################################################
ĐỊNH DẠNG VĂN BẢN :
<b> dùng để in đậm chữ
<mark> dùng để nền chữ màu vàng
<strong> dùng để in đậm chữ
<i> làm cho văn bản chữ in nghiêng
<em> cũng là in nghiêng mà nó còn thay đổi kiểu chữ khác
<small> làm cho chữ nhỏ hơn
<del> làm cho chữ gạch ngang ở giữa chữ
<ins> dùng để gạch chân chữ
<sub> làm chữ lệch khỏi dòng xuôngd bên dưới
<sup> làm chữ lệch khỏi dòng xuôngd bên trên
##############################################################################
CÁCTHÀNH PHẦN CHỨA HTML CHỨA THẺ FROM
Thuộc tính form chứa id của form mà thẻ input thuộc về (trường hợp thẻ input không nằm trong thẻ form)
Thuộc tính formaction giá trị đè lên thuộc tính action của form và hoạt động
với loại input submit và image
Thuộc tính formenctype giá trị đè lên thuộc tính enctype của form và hoạt
động với loại input submit và image
Thuộc tính formmethod giá trị đè lên thuộc tính method của form và hoạt
động với loại input submit và image
##############################################################################
<input type>
CÁC THẺ CHỨA THÀNH PHẦN INTPUT TYPE
<input type=“button”> LÀ NÚT BẤM>> KHI TA BẤM VÀO SẼ HIỆN RA THÔNG BÁO
==============================================================================================
<input type=“checkbox”> HIỆN RA NÚT Ô VUÔNG ĐỂ TÍCH
<input type=“radio”> HIỆN RA NÚT HÌNH TRÒN ĐỂ TÍCH
vd: css
.Star-Tong-Text {
display: flex;
align-items: center;
}
.star-label {
cursor: pointer;
}
.star-label:hover .star{
color: aqua;
}
input[type="radio"]:checked ~ .star-label .star {
color: gold;
}
input[type="radio"] {
display: none;
}
==> :checked sẽ chỉ áp dụng cho radio button được chọn trong nhóm đó. Điều này cho phép bạn
thực hiện các biến đổi CSS dựa trên lựa chọn của người dùng trong một nhóm radio buttons.
=========================================================================================================
<input type=“color”> HIỆN RA MÀU NỀN CỦA NÚT BẤM
<input type=“text”> HIỆN RA Ô CHỮ NHẬT ĐỂ NHẬP TEXT
<input type=“email”> LÀ KHI TA DÙNG CHO VIỆC ĐIỀN EMAIL VÀO
<input type=“password”> LÀ KHI TA MUỐN NGƯỜI DÙNG ĐIỀN MẬT KHẨU VÀO
<input type=“file”> LÀ KHI TA GỬI FILE NÊN WEB
<input type=“hidden”> LAG KHI TA KHÔNG MUỐN NGƯỜI DÙNG NHÌN THẤY(NÓ SẼ ẨN)
<input type=“image”> LAF ẢNH
#############################################################################
XÁC ĐỊNH MIN MAX NHƯ CÁC HÀM BÊN DƯỚI :
<input type=“date”> LỰA CHỌN NGÀY THÁNG NĂM SINH
<input type=“datetime-local”> NGÀY THÁNG NĂM SINH>> GIỜ PHÚT GIÂY
<input type=“range”> LỰA CHỌN THÔNG SÔ MIN HAY MAX (THANH KÉO CHỈNH NHƯ ÂM LƯỢNG)
<input type=“month”> LỰA CHỌN LỊCH THÁNG
<input type=“week”> LỰA CHỌN LỊCH CỦA TUẦN
<input type=“time”> LỰA CHỌN GIỜ PHÚT GIÂY
<input type=“number”> CÁC SỐ LỰA CHỌN( LƯỚT LÊN LƯỚT XUỐNG)
##############################################################################
<input type=“reset”> DÙNG ĐỂ RẾT LẠI TOÀN BỘ NHỮNG GÌ MÀ MÌNH ĐÃ GHI
<input type=“search”> DÙNG ĐỂ TÌM KIẾM CÁC TỪ MÀ WEB HỖ TRỢ
<input type=“submit”> DÙNG ĐỂ GỬI NỘI DUNG CỦA NGƯỜI DÙNG
<input type=“tel”> NHẬP SỐ ĐIỆN THOẠI
<input type=“url”> DÙNG ĐỂ GHI ĐƯỜNG LINK VÀO TRONG WEB
<label for> được sử dụng để định nghĩa nhãn cho các phần tử trong HTML, chủ yếu là các điều khiển trong các form HTML
##############################################################################
<select> nó giống như bạn lựa chọn quốc gia của bạn
Khi ta dùng <select> thì nó sẽ đi cùng với <option>
vd1 cơ BẢN:
<form>
<select name="country" id="value">
<option value="vietnam">all</option>
<option value="vietnam">vietnam</option>
<option value="japan">japan</option>
<option value="korea">korea</option>
</select>
</form>
==> select khác với datalist(nd: bên dưới) là nó k hỗ trợ các tùy chọn khác
vd2 NÂNG CAO: >>>> nó sẽ cũng hiện như vd1 nhưng cho phép bạn nhập tìm kiếm nhanh hơn
<form>
<label for="">Qua quan</label>
<input list="que">
<datalist id="que">
<option value="Ha Noi">Ha noi</option>
<option value="Ha Nam">Ha Nam</option>
<option value="Nam Dinh">Nam Dinh</option>
</datalist>
</form>
##############################################################################
<textarea> cho phép được ghi văn bản vô hạn (text)
( đi với rows: xác định số dòng)
( đi với cols: xác định số cột văn bản)
vd:
<form>
<textarea name="comment" id="comment" rows="5" cols="40">
Ý kiến của bạn
</textarea>
</form>
##############################################################################
<button> nút nhấn
vd:
<button type="button" onclick="alert('Hello!')">Nhấn vào đây</button>
##############################################################################
<fieldset> dùng để nhóm các phần tử với nhau được dùng với legend
<legend> dùng để tạo khung đường viền bên ngoài các phần tử
vd: fieldset và legend
<form action="/submit-form" method="post">
<fieldset>
<legend>Thông tin cá nhân</legend>
<label for="name">Tên:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>Sở thích</legend>
<label for="music">Thích nghe nhạc:</label>
<input type="checkbox" id="music" name="music">
<label for="sport">Thích chơi thể thao:</label>
<input type="checkbox" id="sport" name="sport">
</fieldset>
<input type="submit" value="Gửi">
</form>
##############################################################################
<datalist> tạo ra danh sách và được dùng như select (nd: bên trên) mà nó được chọn ngoài option()
<output> là kết quả ra
vd:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="10">
+
<input type="number" id="b" value="20">
=
<output name="x" for="a b"></output>
</form>
##############################################################################
<option> nghĩa là lựa chọn (được dùng trong <select> và <datalist>)
<optgroup> được sử dụng để nhóm các tùy chọn có liên quan trong một danh sách thả xuống được tạo bởi thẻ <select>
vd:
<label for="fruits">Chọn trái cây:</label>
<select id="fruits" name="fruits">
<optgroup label="Trái cây nhiệt đới">
<option value="banana">Chuối</option>
<option value="mango">Xoài</option>
<option value="pineapple">Dứa</option>
</optgroup>
<optgroup label="Trái cây ôn đới">
<option value="apple">Táo</option>
<option value="pear">Lê</option>
<option value="grape">Nho</option>
</optgroup>
</select>
##############################################################################
CÁC THUỘC TÍNH CỦA THẺ <INPUT TYPE>:
Thuộc tính value: giá trị khởi tạo cho thẻ nhập input
Thuộc tính readonly: chỉ ra thẻ nhập input này là chỉ đọc không sửa được vẫn đc copy
Thuộc tính disabled: chỉ ra thẻ nhập input nên bị vô hiệu hoá
Thuộc tính size: định nghĩa độ rộng của hộp nhập đơn vị là số ký tự
Thuộc tính maxlength: xác định số ký tự tối đa cho phép trong hộp nhập
Thuộc tính min và max: xác định giá trị nhỏ nhất và lớn nhất của hộp nhập.
Thuộc tính multiple: xác định người dùng có thể nhập một hoặc nhiều hơn một giá trị nhập vào
Thuộc tính pattern: xác định mẫu biểu thức chính quy mà dữ liệu nhập vào sẽ được kiểm tra khi mà form dữ liệu được gửi lên
Thuộc tính placeholder: hien thị nội dung muốn cho người dùng biết trong thanh tìm kiếm
vd : <input type="text" placeholder="Email:">
Thuộc tính required: xác định dữ liệu bắt buộc phải nhập trước khi gửi dữ liệu được dùng trong select,input,textarea
Thuộc tính step: xác định bước nhảy hợp lệ cho hộp nhập
ví dụ step=“2” các số hợp lệ sẽ là -2,0,2,4,… Các dạng dữ liệu hỗ trợ number, range, date,datetime-local, month, time, week.
Thuộc tính autofocus: nó sẽ tự động tạo đặt mặc định con trỏ chuột lên thanh tìm kiếm
Thuộc tính height và width xác định độ rộng và cao của hộp nhập ảnh <input type=“image”/>
Thuộc tính list ---> datalist chứa các lựa chọn được định nghĩa trước cho thẻ <input>
Thuộc tính autocomplete: chỉ ra hộp nhập có chức năng tự động gợi ý nhập là
được bật “on” hoặc tắt “off”. Thuộc tính hoạt động với các loại <input>: text, search, url, tel, email, password, datepickers, range, color
###########################
# THUỘC TÍNH VALUA: DÙNG ĐỂ KHỞI TẠO CÁC GIÁ TRỊ CHO THẺ NHẬP INPUT
#####################################################################################
#thuộc tính: marquee : dùng để chạy chữ như bảng tin.
vd html:
<marquee behavior="text" direction="text">Nguyen Thanh Tung Dang hoc Code
</marquee>
#####################################################################################
# the meta :
<meta></meat>