Skip to content

Latest commit

 

History

History
192 lines (153 loc) · 152 KB

Tag.md

File metadata and controls

192 lines (153 loc) · 152 KB
Raw

icons8-tag.png HTML Tag Element html5.gif

icons8-neurodiverse.png Basic

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-css3.pngCSS Default
<!DOCTYPE> - (Document Type) Định nghĩa kiểu document
<html> Định nghĩa html display : block;
:focus {outline: none;}
<head> Phần đầu Web display: none;
<body> Phần đuôi Web display: block;
margin: 8px;
:focus{outline: none;}
<title> Tiêu đề display: none;
<h1> to <h6> - (Headings) Headings từ 1 tới 6 Format Below
<p> - (Paragraph) Đoạn văn display: block;
margin: 1em 1em 0 0
<br> - (Break)
<wbr> - (Word Break)		 Ngắt dòng
Ngắt dòng (khi cần thiết)		 None.
<hr> - (Horizontal) Gạch ngang đoạn văn display: block;
margin: 0.5em 0.5em auto auto
border: 1px inset
<!--...--> Chú thích None.
CSS display font-size (em) margin (em)
(top-bottom-left-right)		 font-weight
h1
h2
h3
h4
h5
h6		 block 2
1.5
1.17
1
0.83
0.67		 0.67 0.67 0 0
0.83 0.83 0 0
1 1 0 0
1.33 1.33 0 0
1.67 1.67 0 0
2.33 2.33 0 0		 bold

icons8-clear_formatting.png Format

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS default
<abbr> - (Abbreviation) Từ viết tắt title display: inline
<address> Thông tin địa chỉ của tác giả href display: block;
font-style: italic;
<b> - (Bold)
<strong>		 In đậm
In đậm (quan trọng)		 ✔️ Default. font-weight: bold;
<del> - (Deleted)
<s> - (Strikethrough)		 Gạch ngang~~ (đã xoá)
Gạch ngang (không còn đúng)		 ✔️ Default. text-decoration: line-through;
<em> - (Emphasize)
<i> (Italic)		 In nghiêng (nhấn mạnh)
In nghiêng (câu nói)		 ✔️ Default. font-style: italic;
<ins>- (Insert)
<u> - (underline)		 Gạch chân (chèn văn bản)
Gạch chân		 ✔️ Default. text-decoration: underline;
<small> Chữ nhỏ ✔️ Default. font-size: smaller;
<sub> - (Subscript) Viết dưới (H₂O) ✔️ Default. vertical-align: super;
font-size: smaller;
<sup> - (Superscript) Viết trên (x²) ✔️ Default. vertical-align: sub;
font-size: smaller;
<bdi> Cô lập văn bản để định dạng theo hướng khác ✔️ Default. 🚫 None.
<bdo>
(Bi-Directional Override)		 Đổi hướng văn bản dir unicode-bidi: bidi-override;
<blockquote>
 Trích dẫn
 cite display: block;
margin: 1em 1em 40px 40px
<q> - (Quotation) Trích dẫn ngắn cite display: inline;
:before{content: open-quote;}
:after{content: close-quote;}
<cite> 
(Citation Element)		 Tiêu đề của tác phẩm ✔️ Default. font-style: italic;
<code> Mã code lập trình ✔️ Default. font-family: monospace;
<dfn> - (Definition) Xác định thuật ngữ ✔️ Default. font-style: italic;
<kbd> - (Keyboard) Ký tự bàn phím ✔️ Default. font-family: monospace;
<mark> Văn bản đã đánh dấu (màu vàng) ✔️ Default. background-color: yellow;
color: black;
<meter> Thước đo tiến trình form
high
low
max
min
optimum
value		 🚫 None.
<progress> Tiến trình của một nhiệm vụ max
value		 🚫 None.
<pre> - (Preformatted) Văn bản đã định dạng ✔️ Default. display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
<ruby>
<rt>
<rp>		 Chứa ký tự cần chú thích
Cung cấp chú thích
Hiển thị trình duyệt không hỗ trợ		 ✔️ Default. rt : line-height: normal;
<smap> - (Sample output) Văn bản đầu ra của máy tính ✔️ Default. font-family: monospace;
<template> Vùng chứa cho nội dung sẽ được ẩn khi tải trang ✔️ Default. 🚫 None.
<time> Thời gian cụ thể datetime 🚫 None.
<var> - (Variable) Biến (x, y, a, b...) ✔️ Default. font-style: italic;
<data> Thêm bản dịch cho máy đọc value

icons8-form.png Forms and input

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS Default
<form> Tạo mẫu nhập vào
cho người dùng		 <accept-charset> : Kiễu mã hoá ký tự (vd: utf-8)
<action> : Nơi biểu mẫu gửi tới (URL)
<autocomplete> : hiển thị tuỳ chọn tự động (on)
<enctype> : Mã hoá dữ liệu trước khi gửi (cho method= "post")
<method> : Phương thức HTTP (get / post)
 <name> : Đặt tên cho form
<novalidate> : Xác thực trước khi gửi
<rel> : Mối quan hệ linked document và tài liệu hiện tại
<target> : Kiểu chuyển hướng sau khi gửi		 display: block;
margin-top: 0em;
<input> Kiểm soát đầu vào accept : chỉ định kiểu file nhập (cho type: file)
alt : văn bản thay thế (cho type:image)
autocomplete : hiển thị tuỳ chọn tự động (on)
autofocus : tự động để con trỏ chuột vào thanh nhập khi load trang
checked : chọn trước khi trả trang (cho type: checkbox / radio)
disbaled : vô hiệu hoá ô nhập
form : nhập vào mẫu chỉ định
frommaction : được gửi đến URL chỉ định (cho type: submit / image)
formenctype : Mã hoá dữ liệu trước khi gửi (cho type: submit / image & method : post)
formmethod : Phương thức get/post dữ liệu (cho type: submit / image)
formnovalidate : Xác thực dữ liệu trước khi gửi (cho type : submit)
formtarget : chuyển hướng sau khi gửi dữ liệu (cho type: submit / image)
height & width : chiều dài và chiều rộng khung nhập (cho type: image)
max & min : chỉ định giá trị lớn nhất/nhỏ nhất  (thường là date, range)
maxlength & minlength : Số ký tự tối đa/tối thiểu
size : Chiều rộng ô nhập
multiple : Cho phép nhập nhiều giá trị
name : Đặt tên cho input
pattern : Định dạng nhập bằng biểu thức chính quy
placeholder : Gợi ý tên trong ô nhập
readonly : Chỉ có thể đọc, không thể sửa
required : Không được bỏ trống
src : nguồn cho ảnh (cho type : image)
step : Ngăn cách bằng khoảng thời gian nhập
type : Kiểu ô nhập
value : Đặt giá trị mặc định (KHÔNG dùng cho type: file)		 🚫 None.
<label> Đặt nhãn cho <input> for : Đặt id ràng buộc với nhãn
form : Nhập vào mẫu chỉ định		 cursor: default;
<datalist> Danh sách tuỳ chọn
cho input		 ✔️ Default. display: none;
<textarea> Nhập văn bản nhiều dòng autofocus : tự động để con trỏ chuột vào khung nhập khi load trang
cols : Chiều rồng có thể nhìn thấy
rows : Số dòng có thể nhìn thấy
disbaled : vô hiệu hoá ô nhập
form : nhập vào mẫu chỉ định
maxlength : Số ký tự tối đa
name : Đặt tên cho textarea
placeholder : Gợi ý tên trong ô nhập
readonly : Chỉ có thể đọc, không thể sửa
required : Không được bỏ trống
wrap : Văn bản sẽ được bao bọc sau khi gửi		 🚫 None.
<button> Nút nhấn autofocus : tự động để con trỏ chuột vào button khi load trang
disbaled : vô hiệu hoá ô nhấn
form : nhập vào mẫu chỉ định
frommaction : được gửi đến URL chỉ định (cho type: submit)
formenctype : Mã hoá trước khi gửi (cho type: submit và method : post)
formmethod : Phương thức get/post dữ liệu (cho type: submit)
formnovalidate : Xác thực dữ liệu trước khi gửi (cho type : submit)
formtarget : chuyển hướng sau khi gửi dữ liệu (cho type: submit)

name : Đặt tên cho button
type : Kiểu button (button, reset, submit)
value : Đặt giá trị mặc định		 🚫 None.
<select> Danh sách thả xuống
(Drop down)		 autofocus : tự động để con trỏ chuột vào thanh nhập khi load trang
disbaled : vô hiệu hoá danh sách
form : nhập vào mẫu danh sách chỉ định
multiple : Cho phép chọn nhiều giá trị
name : Đặt tên cho select
required : Không được bỏ trống
size : Số tuỳ chọn có thể nhìn thấy
 🚫 None.
<optgroup> Nhóm cách Drop down 
lại với nhau		 disbaled : vô hiệu hoá tính năng
label : Đặt tên nhãn cho mỗi nhóm Drop down		 🚫 None.
<option> Phần tử trong Drop down disbaled : vô hiệu hoá một lựa chọn
selected : Một tuỳ chọn trong danh sách sẽ được chọn mặc định
value : Giá trị gửi tới server		 🚫 None.
<fieldset> Nhóm tất cả
thẻ trong <form>		 disbaled : vô hiệu hoá tính năng
form : nhập vào mẫu chỉ định
name : Đặt tên cho fieldset		 display: block;
margin-left: 2px;
margin-right: 2px;
padding: 0.35em 0.625em 0.75em 0.75em;
border: 2px groove (internal value);
<legend> Chú thích cho <fieldset> ✔️ Default. display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
<output> Biểu thị kết quả
của một phép tính		 for : Mối liên hệ các biến trong kết quả phép tính
form : nhập vào mẫu chỉ định
name : Đặt tên cho phần tử		 display: inline;

icons8-standing_photo_frame.pngFrames

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS Default
<iframe> Nhúng HTML vào HTML hiện tại allow :
allowfullscreen : Cho phép chế độ toàn màn hình (true / false)
allowpaymentrequest : Cho phép gọi API yêu cầu thanh toán
height & width : Chiều dài / rộng của khung
loading : Chỉ định tải ngay hoặc hoãn iframe khi load trang
name : Đặt tên cho iframe
referrerpolicy  : Chỉ định thông tin gửi khi nạp iframe
sandbox : Bật tính nâng hạn chế nội dung
src : URL của file nhúng
srcdoc : Nội dụng HTML được hiển thị
 :focus{outline: none;}
[seamless]{display: block;}

icons8-image.png Images

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS Default
<img> - (Image) Tạo hình ảnh alt : văn bản thay thế khi tải lỗi
crossorigin : Cho phép ảnh bên thứ 3 truy cập chéo (cho canvas)
height & width : Chiều dài/rộng của ảnh
ismap : Hình ảnh toạ độ server-side
loading : Chỉ định tải ngay hoặc hoãn khi load trang
referrerpolicy : Sử dụng thông tin liên kết khi nạp ảnh
sizes : Kích thước hình ảnh cho bố cục khác nhau
src : Đường dẫn tới hình ảnh
srcset : Danh sách tệp hình ảnh cho nhiều trường hợp
usemap : Hình ảnh toạ độ client-side		 display: inline-block;
<map> Tạo hình ảnh toạ độ client-side name : Đặt tên hình ảnh toạ độ display: inline;
<area> Khu vực bên trong ảnh toạ độ alt : văn bản thay thế khi lỗi (yêu cầu có href)
coords : Chỉ định toạ độ của <area>
download : Sẽ tải xuống khi nhấn vào toạ độ trong hình ảnh
href : URL ảnh cho toạ độ
hreflang : Ngôn ngữ của URL đích
media : Tôi ưu cho layout cho thiết bị cụ thể
referrerpolicy : Sử dụng thông tin liên kết khi nạp link
rel : Mối quan hệ giữa tài liệu hiện với URL đích
shape : Xác định hình dạng của tạo 
target : Nơi mở URL
type : Loại ảnh		 display: none;
<canvas> Vẽ đồ hoạ thông qua scripting (thường là Javascript) height & width : Chiều dài/rộng của ảnh height: 150px;
width: 300px;
<figure> Nhóm ảnh và văn bản lại
(bên trong chứa <figcaption>)		 ✔️ Default. display: block;
margin: 1em 1em 40px 40px
<figcaption> Chú thích ảnh cho <figure> ✔️ Default. display: block;
<picture> Nguồn chứa nhiều ảnh ✔️ Default. 🚫 None.
<svg> chứa ảnh SVG height & width : Chiều dài/rộng của ảnh 🚫 None.

icons8-movie_beginning.png Audio / Video

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS Default
<audio> Tạo nội dung âm thanh
⚠️ OGG không hỗ trợ Safari		 autoplay : Phát khi tải trang
control : Hiển thị các nút điều khiển
loop : Lặp lại
muted : Tắt tiếng
preload : Chỉ định âm thanh phát lại khi load lại trang
src : URL file âm thanh		 None.
<source> Nhóm nhiều phương tiện (như <video>, <audio>,<picture>) media : Cho phép mọi truy vấn media hợp lệ
sizes : Kích thước hình ảnh cho bố cục khác nhau
src : URL file audio
srcset :
type : Loại file (mp3,mp4,gif...)		 None.
<track> Tạo phụ đề cho
(<video> / <audio>)		 default : Sẽ bật nếu người dùng không chọn phụ đề khác
kind : Loại phụ đề văn bản (.vtt, .srt)
label : Tiêu đề của phụ đề
src : URL file phụ đề
srclang : Ngôn ngữ phụ đề		 None.
<video> Tạo một video
⚠️ OGG không hỗ trợ Safari		 autoplay : Phát khi tải trang
controls : Hiển thị các nút điều khiển
height & width : Chiều dài/rộng video
loop : Lặp lại
muted : Tắt tiếng
poster : ảnh preview cho video
preload : Chỉ định video phát lại khi load lại trang
src : URL file video		 None.

icons8-link.pngLinks

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS Default
<a> 
(Anchor)		 Tạo một hyperlink download : tải xuống khi người dùng nhấn vào
href : URL của trang web
hreflang : Ngôn ngữ của tài liệu liên kết
media : Tối ưu hoá thiết bị cụ thể
referrerpolicy : Sử dụng thông tin liên kết khi người dùng click vào
rel : Mối quan hệ giữa tài liệu hình tại và tài liệu liên kết
target : Nơi mở tài liệu liên kết
type : Loại tài liệu liên kết (html, txt...)		 :link, :visited{
color: (internal value);
text-decoration: underline;
cursor: auto;}

:link:active, :visited:active{
color: (internal value);}
<link> Mối quan hệ giữa tài liệu hiện tại
và tài nguyên ngoài
(thường dùng cho style CSS)		 crossorigin : Xứ lý phần tử có yêu cầu cross-origin
href : địa chỉ tài liệu
hreflang : Ngôn ngữ tài liệu
media : Tối ưu thiết bị cụ thể
referrerpolicy : Sử dụng thông tin liên kết khi nạp tài nguyên
rel : Mối quan hệ giữa tài liệu hiện tại và tài liệu liên kết
title :
type : Loại tài liệu (css)		 display: none;
<nav>
(Navigation)		 Liên kết điều hướng ✔️ Default. display: block;

icons8-todo_list.png Lists

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS Default
<ul>
(Unordered list)		 Tạo mục danh sách
 không có thứ tự		 ✔️ Default. display: block;
list-style-type: disc;
margin: 1em 1em 0 0
padding-left: 40px;
<ol>
(Ordered list)		 Tạo mục danh sách
có thứ tự		 reversed : Dảo ngược thứ tự
start : Số bắt đầu
type : Loại chỉ mục (1, A, a,I...)		 display: block;
list-style-type: decimal;
margin: 1em 1em 0 0
padding-left: 40px;
<li>
(List Item)		 Tạo một danh sách value : Giá trị bắt đầu của chỉ mục display: list-item;
<dl>
(description list)		 Tạo một danh sách mô tả ✔️ Default. display: block;
margin: 1em 1em 0 0
<dt>
(description tag)		 Thẻ mục trong danh sách mô tả ✔️ Default. display: block;
<dd>
(definition description)		 Mô tả thẻ mục
danh sách mô tả		 ✔️ Default. display: block;
margin-left: 40px

icons8-border_horizontal.png Tables

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS Default
<table> Tạo một bảng ✔️ Default. display: table;
border: 2px separate gray
<caption> Chú thích cho bảng ✔️ Default. display: table-caption;
text-align: center;
<tr>
(Table Row)		 Xác định một hàng trong bảng
(chứa <th> và td)		 ✔️ Default. display: table-row;
vertical-align: inherit;
border-color: inherit;
<th>
(Table Header)		 Tiêu đề cho bảng (cột) abbr : Phiên bản viết tắt
headers : Đặt tên các tiêu đề liên quan
rowspan & colspan : Số dòng/cột nhóm lại
scope : Chỉ định phạm vi tiêu đề
(col,colgroup,row,rowgroup)		 display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
<td>
(Define Table)		 Định nghĩa một ô trong bảng rowspan & colspan :Số dòng/cột nhóm lại
headers : Đặt tên các tiêu đề liên quan		 display: table-cell;
vertical-align: inherit;
<thead> Nhóm nội dung <th>
(chứa <tr> > <th>)		 ✔️ Default. display: table-header-group;
vertical-align: middle;
border-color: inherit;
<tbody> Nhóm nội dung ô trong bảng(chứa <tr> > <td>) ✔️ Default. display: table-row-group;
vertical-align: middle;
border-color: inherit;
<tfoot> Nhóm nội dung chân trong bảng
(chứa <tr> > <td>)		 ✔️ Default. display: table-footer-group;
vertical-align: middle;
border-color: inherit;
<colgroup> Nhóm các cột trong bảng
để định dạng
(chứa <col>)		 span : số cột phần tử định dạng display: table-column-group;
<col> Định dạng cột span : số cột phần tử định dạng display: table-column;

icons8-u-shaped_style.png Styles and Semantics

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS Default
<style> Định dạng tài liệu media : Tối ưu hoá cụ thể thết bị
type : Loại định dạng (text/css)		 display: none;
<div>
<span>		 Tạo một section ✔️ Default. div : display: block;
span : None.
<header>
<footer>		 Section cho tiêu đề
Section cho chân trang		 ✔️ Default. display: block;
<main> Nội dung chính ✔️ Default. 🚫 None.
<section>
<article>
<aside>		 Tạo một section
Tạo một báo cáo
Tạo nội dung gốc phải/trái của trang		 ✔️ Default. display: block;
<details> Tạo một chi tiết bổ sung có thể xem hoặc ẩn
 open : các chi tiết hiển thị khi tải trang display: block;
<summary> Tiêu đề trong <details> ✔️ Default. display: block;

Meta Info

icons8-tag.png Tag icons8-handle_with_care.png Description Attribute icons8-css3.png CSS Default
<meta> Tạo metadata bổ sung cho HTML charset : Xác định loại mã hoá ký tự (utf-8)
content : giá trị liên kết của http-quiv hoặc name
http-equiv : Cung cấp đầu HTTP cho thông tin/giá trị của thuộc tính nội dung
name : Đặt tên cho metadata		 🚫 None.
<base> Xác định URL cơ sở href : URL của page
target : Kiểu chuyển hướng		 🚫 None.

icons8-source_code.png Programing

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-electrical.png Attribute icons8-css3.png CSS Default
<script> tạo một client-side script async : Thực thi script không đồng bộ (cho script ngoài)
crossorigin : Đặt chế độ yêu cầu HTTP CORS
defer : Thực thi script khi quá trình tải trang hoàn tất
integrity : Cho phép trình duyệt kiểm tra script mã hoá không được tải
nomodule : Không thực thi script trong các trình duyệt không hỗ trợ ES2015 modules
referrerpolicy : Sử dụng thông tin liên kết khi nạp script
src : URL của script bên ngoài
type : Loại script		 display: none;
<noscript> văn bản thay thế khi <script> lỗi ✔️ Default. 🚫 None.
<object> 
⚠️ Sử dụng các thẻ
<img>,iframe,video,audio tốt hơn		 Tạo đối tượng nhúng data : URL của file
 :
height & width : Chiều dài/rộng của đối tượng
name : Đặt tên cho đối tượng
type : Loại file đối tượng
typemustmatch : <type> có nội dụng khớp hiển thị (true/false)		 :focus {outline: none;}
<param>
(Parameter)		 Tạo một tham số đối tượng name : Đặt tên cho tham số
value : Đặt giá trị cho đối số
 display: none;

icons8-access_denied.png Limited

icons8-tag.png Tag icons8-handle_with_care.png Description icons8-why_quest.png Reason not to use icons8-replace.png Replace
<acronym>
<strike>
<dir>
<applet>		 Định nghĩa từ viết tắt
Viết chữ gạch ngang
Tạo danh sách từ điển
Tạo tài liệu nhúng		 Không hỗ trợ HTML5 <abbr>
<del>/ <s>
<ul>
<embed> /<object>
<big>
<center>
<font>
<tt>
<basefont>		 Định dạng chữ to
Định dạng chữ giữa
Định dạng font chữ
Định dạng chữ teletype
Thay đổi định dạng chữ		 Không hỗ trợ HTML5 Định dạng CSS
<frame>
<frameset>
<noframes>		 Tạo cửa sổ khung
Tập hợp của khung
Nội dung thay thế khi khung lỗi		 Không hỗ trợ HTML5 <iframe>
<dialog> Tạo hộp thoại hoặc cửa sổ iOS-7-Safari-app-icon-large-e1442348114864.png không hỗ trợ Unknown