I Blog Data học lập trình website

PHP

HTML

300x600

SQL

JavaScript

CSS

SQL

300x600

NỔI BẬT

300x600

300x600


300x300

HTML Thuộc tính id

Sử dụng thuộc tính id


Các idthuộc tính chỉ định một id duy nhất cho một phần tử HTML (giá trị phải là duy nhất trong tài liệu HTML).

Giá trị id có thể được sử dụng bởi CSS và JavaScript để thực hiện các tác vụ nhất định cho phần tử với giá trị id cụ thể.

Trong CSS, để chọn một phần tử có id cụ thể, hãy viết ký tự băm (#), theo sau là id của phần tử:

Thí dụ
Sử dụng CSS để định kiểu một phần tử với id "myHeader":

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>
Kết quả:

Tiêu đề của tôi

Mẹo: Thuộc tính id có thể được sử dụng trên bất kỳ thành phần HTML nào .

Lưu ý: Giá trị id phân biệt chữ hoa chữ thường.

Lưu ý: Giá trị id phải chứa ít nhất một ký tự và không được chứa khoảng trắng (dấu cách, tab, v.v.).

Sự khác biệt giữa Class và ID
Một phần tử HTML chỉ có thể có một id duy nhất thuộc về một phần tử đó, trong khi một tên lớp có thể được sử dụng bởi nhiều phần tử:

Thí dụ
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Chi tiết

So sánh JavaScript và toán tử logic

Các toán tử so sánh và logic được sử dụng để kiểm tra truehoặc false.



Toán tử so sánh
Toán tử so sánh được sử dụng trong các câu lệnh logic để xác định sự bằng nhau hoặc khác biệt giữa các biến hoặc giá trị.

Do đó x = 5, bảng dưới đây giải thích các toán tử so sánh:

Operator Description Comparing Returns Try it
== equal to x == 8 false
x == 5 true
x == "5" true
=== equal value and equal type x === 5 true
x === "5" false
!= not equal x != 8 true
!== not equal value or not equal type x !== 5 false
x !== "5" true
x !== 8 true
> greater than x > 8 false
< less than x < 8 true
>= greater than or equal to x >= 8 false
<= less than or equal to x <= 8 true

Làm thế nào có thể sử dụng nó
Toán tử so sánh có thể được sử dụng trong các câu lệnh có điều kiện để so sánh các giá trị và thực hiện hành động tùy thuộc vào kết quả:

if (age < 18) text = "Too young";
Bạn sẽ tìm hiểu thêm về việc sử dụng các câu điều kiện trong chương tiếp theo của hướng dẫn này.

Toán tử logic
Toán tử logic được sử dụng để xác định logic giữa các biến hoặc giá trị.

Cho rằng x = 6và y = 3, bảng dưới đây giải thích các toán tử logic:

Operator Description Example Try it
&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true
Toán tử có điều kiện (Ternary)
JavaScript cũng chứa một toán tử có điều kiện gán giá trị cho một biến dựa trên một số điều kiện.

Cú pháp
variablename = (condition) ? value1:value2
Thí dụ
var voteable = (age < 18) ? "Too young":"Old enough";

Nếu tuổi biến là giá trị dưới 18, giá trị của biến có thể bỏ phiếu sẽ là "Quá trẻ", nếu không, giá trị có thể bỏ phiếu sẽ là "Đủ cũ".

So sánh các loại khác nhau
So sánh dữ liệu của các loại khác nhau có thể cho kết quả bất ngờ.

Khi so sánh một chuỗi với một số, JavaScript sẽ chuyển đổi chuỗi thành một số khi thực hiện so sánh. Một chuỗi rỗng chuyển thành 0. Một chuỗi không phải là số chuyển đổi thành NaNluôn luôn false.

Case Value Try
2 < 12 true
2 < "12" true
2 < "John" false
2 > "John" false
2 == "John" false
"2" < "12" false
"2" > "12" true
"2" == "12" false
Khi so sánh hai chuỗi, "2" sẽ lớn hơn "12", bởi vì (theo bảng chữ cái) 1 nhỏ hơn 2.

Để bảo đảm một kết quả phù hợp, các biến phải được chuyển đổi thành loại thích hợp trước khi so sánh:

age = Number(age);
if (isNaN(age)) {
  voteable = "Input is not a number";
} else {
  voteable = (age < 18) ? "Too young" : "Old enough";
}
Chi tiết

Nhận xét SQL

Nhận xét SQL
Nhận xét được sử dụng để giải thích các phần của câu lệnh SQL hoặc để ngăn chặn việc thực thi câu lệnh SQL.



Lưu ý: Các ví dụ trong chương này sẽ không hoạt động trong Firefox và Microsoft Edge!

Nhận xét không được hỗ trợ trong cơ sở dữ liệu Microsoft Access. Firefox và Microsoft Edge đang sử dụng cơ sở dữ liệu Microsoft Access trong các ví dụ của chúng tôi.

Bình luận dòng đơn
Nhận xét dòng đơn bắt đầu bằng -.

Bất kỳ văn bản nào giữa - và cuối dòng sẽ bị bỏ qua (sẽ không được thực thi).

Ví dụ sau sử dụng nhận xét một dòng làm giải thích:

Thí dụ
--Select all:
SELECT * FROM Customers;

Ví dụ sau sử dụng nhận xét một dòng để bỏ qua phần cuối của dòng:

Thí dụ
SELECT * FROM Customers -- WHERE City='Berlin';

Ví dụ sau sử dụng một nhận xét một dòng để bỏ qua một tuyên bố:

Thí dụ
--SELECT * FROM Customers;
SELECT * FROM Products;

Nhận xét nhiều dòng
Nhận xét nhiều dòng bắt đầu bằng / * và kết thúc bằng * /.

Bất kỳ văn bản nào giữa / * và * / sẽ bị bỏ qua.

Ví dụ sau sử dụng nhận xét nhiều dòng làm giải thích:

Thí dụ
/*Select all the columns
of all the records
in the Customers table:*/
SELECT * FROM Customers;
Chi tiết

Bộ chọn thuộc tính CSS

Các thành phần HTML kiểu với các thuộc tính cụ thể


Có thể định kiểu các phần tử HTML có các thuộc tính hoặc giá trị thuộc tính cụ thể.

CSS [thuộc tính] Bộ chọn
Bộ [attribute]chọn được sử dụng để chọn các thành phần có thuộc tính được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử <a> có thuộc tính đích:

Thí dụ
a[target] {
  background-color: yellow;
}

CSS [property = "value"] Bộ chọn
Bộ [attribute="value"]chọn được sử dụng để chọn các thành phần có thuộc tính và giá trị được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử <a> có thuộc tính target = "_ blank":

Thí dụ
a[target="_blank"] {
  background-color: yellow;
}

CSS [thuộc tính ~ = "value"] Bộ chọn
Bộ [attribute~="value"]chọn được sử dụng để chọn các thành phần có giá trị thuộc tính chứa một từ được chỉ định.

Ví dụ sau đây chọn tất cả các thành phần có thuộc tính tiêu đề chứa danh sách các từ được phân tách bằng dấu cách, một trong số đó là "hoa":

Thí dụ
[title~="flower"] {
  border: 5px solid yellow;
}

Ví dụ trên sẽ khớp các phần tử với title = "hoa", title = "hoa mùa hè" và title = "hoa mới", nhưng không phải title = "my-hoa" hoặc title = "hoa".

CSS [thuộc tính | = "value"] Bộ chọn
Bộ [attribute|="value"]chọn được sử dụng để chọn các thành phần có thuộc tính được chỉ định bắt đầu bằng giá trị được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng "top":

Lưu ý: Giá trị phải là toàn bộ một từ, như một mình, như class = "top" hoặc theo sau là dấu gạch nối (-), như class = "top-text"!

Thí dụ
[class|="top"] {
  background: yellow;
}

CSS [thuộc tính ^ = "value"] Bộ chọn
Bộ [attribute^="value"]chọn được sử dụng để chọn các phần tử có giá trị thuộc tính bắt đầu bằng một giá trị được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng "top":

Lưu ý: Giá trị không nhất thiết phải là một từ!

Thí dụ
[class^="top"] {
  background: yellow;
}

CSS [thuộc tính $ = "value"] Bộ chọn
Bộ [attribute$="value"]chọn được sử dụng để chọn các phần tử có giá trị thuộc tính kết thúc bằng một giá trị được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp kết thúc bằng "test":

Lưu ý: Giá trị không nhất thiết phải là một từ! 

Thí dụ
[class$="test"] {
  background: yellow;
}

CSS [thuộc tính * = "value"] Bộ chọn
Bộ [attribute*="value"]chọn được sử dụng để chọn các phần tử có giá trị thuộc tính chứa giá trị được chỉ định.

Ví dụ sau đây chọn tất cả các phần tử có giá trị thuộc tính lớp có chứa "te":

Lưu ý: Giá trị không nhất thiết phải là một từ! 

Thí dụ
[class*="te"] {
  background: yellow;
}

Mẫu tạo kiểu
Các bộ chọn thuộc tính có thể hữu ích cho các biểu mẫu kiểu dáng mà không cần lớp hoặc ID:

Thí dụ
input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}


Chi tiết

CSS Sprites

Hình ảnh Sprites

Một sprite hình ảnh là một tập hợp các hình ảnh được đưa vào một hình ảnh duy nhất.


Một trang web có nhiều hình ảnh có thể mất nhiều thời gian để tải và tạo nhiều yêu cầu máy chủ.
Sử dụng các họa tiết hình ảnh sẽ làm giảm số lượng yêu cầu máy chủ và tiết kiệm băng thông.

Hình ảnh Sprites - Ví dụ đơn giản

Thay vì sử dụng ba hình ảnh riêng biệt, chúng tôi sử dụng hình ảnh duy nhất này ("img_navsprites.gif"):

Với CSS, chúng tôi chỉ có thể hiển thị phần hình ảnh chúng tôi cần.

Trong ví dụ sau, CSS chỉ định phần nào của hình ảnh "img_navsprites.gif" sẽ hiển thị:

Thí dụ
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

Ví dụ giải thích:

<img id="home" src="img_trans.gif">- Chỉ xác định một hình ảnh trong suốt nhỏ vì thuộc tính src không thể để trống. Hình ảnh hiển thị sẽ là hình nền mà chúng tôi chỉ định trong CSS
width: 46px; height: 44px; - Xác định phần hình ảnh chúng tôi muốn sử dụng
background: url(img_navsprites.gif) 0 0; - Xác định hình nền và vị trí của nó (bên trái 0px, trên 0px)
Đây là cách dễ nhất để sử dụng các họa tiết hình ảnh, bây giờ chúng tôi muốn mở rộng nó bằng cách sử dụng các liên kết và hiệu ứng di chuột.

Hình ảnh Sprites - Tạo Danh sách Điều hướng
Chúng tôi muốn sử dụng hình ảnh sprite ("img_navsprites.gif") để tạo danh sách điều hướng.

Chúng tôi sẽ sử dụng danh sách HTML, vì nó có thể là một liên kết và cũng hỗ trợ hình ảnh nền:

Thí dụ
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Ví dụ giải thích:

#navlist {vị trí: tương đối;} - vị trí được đặt thành tương đối để cho phép định vị tuyệt đối bên trong nó
#navlist li {lề: 0; padding: 0; list-style: none; vị trí: tuyệt đối; top: 0;} - lề và phần đệm được đặt thành 0, kiểu danh sách được loại bỏ và tất cả các mục danh sách được định vị tuyệt đối
#navlist li, #navlist a {height: 44px; display: block;} - chiều cao của tất cả các hình ảnh là 44px
Bây giờ bắt đầu vị trí và phong cách cho từng phần cụ thể:

#home {left: 0px; width: 46px;} - Định vị toàn bộ bên trái và chiều rộng của hình ảnh là 46px
#home {nền: url (img_navsprites.gif) 0 0;} - Xác định hình nền và vị trí của nó (bên trái 0px, trên 0px)
#prev {left: 63px; width: 43px;} - Định vị 63px ở bên phải (#home width 46px + một số khoảng trắng thừa giữa các mục) và chiều rộng là 43px.
#prev {nền: url ('img_navsprites.gif') -47px 0;} - Xác định hình nền 47px ở bên phải (#home width 46px + 1px chia dòng)
#next {left: 129px; width: 43px;} - Định vị 129px ở bên phải (bắt đầu của #prev là 63px + #prev width 43px + không gian thêm) và chiều rộng là 43px.
#next {nền: url ('img_navsprites.gif') -91px 0;} - Xác định hình nền 91px ở bên phải (#home width 46px + 1px chia dòng
Chi tiết

Plug-in HTML

Mục đích của plugin là mở rộng chức năng của trình duyệt web.



Trình trợ giúp HTML (Trình cắm)
Các ứng dụng trợ giúp (trình cắm) là các chương trình máy tính mở rộng chức năng tiêu chuẩn của trình duyệt web.

Ví dụ về các trình cắm thêm nổi tiếng là các tiểu dụng Java.

Plugin có thể được thêm vào các trang web bằng <object>thẻ hoặc <embed>thẻ.

Plugin có thể được sử dụng cho nhiều mục đích: hiển thị bản đồ, quét vi-rút, xác minh id ngân hàng của bạn, v.v.

Để hiển thị video và âm thanh: Sử dụng <video>và <audio>thẻ.

Phần tử <object>
Các <object>yếu tố được hỗ trợ bởi tất cả các trình duyệt.

Phần <object>tử xác định một đối tượng nhúng trong tài liệu HTML.

Nó được sử dụng để nhúng các trình cắm (như các tiểu dụng Java, trình đọc PDF, Trình phát Flash) trong các trang web.

Thí dụ
<object width="400" height="50" data="bookmark.swf"></object>

Phần <object>tử cũng có thể được sử dụng để bao gồm HTML trong HTML:

Thí dụ
<object width="100%" height="500px" data="snippet.html"></object>

Hoặc hình ảnh nếu bạn thích:

Thí dụ
<object data="audi.jpeg"></object>

Phần tử <embed>
Các <embed>yếu tố được hỗ trợ trong tất cả các trình duyệt chính.

Phần <embed>tử cũng xác định một đối tượng nhúng trong tài liệu HTML.

Các trình duyệt web đã hỗ trợ phần tử <embed> trong một thời gian dài. Tuy nhiên, nó không phải là một phần của đặc tả HTML trước HTML5.

Thí dụ
<embed width="400" height="50" src="bookmark.swf">

Lưu ý rằng phần tử <embed> không có thẻ đóng. Nó không thể chứa văn bản thay thế.

Phần <embed>tử cũng có thể được sử dụng để bao gồm HTML trong HTML:

Thí dụ
<embed width="100%" height="500px" src="snippet.html">

Hoặc hình ảnh nếu bạn thích:

Thí dụ
<embed src="audi.jpeg">
Chi tiết

Video YouTube HTML

Cách dễ nhất để phát video trong HTML là sử dụng YouTube.



Đấu tranh với các định dạng video?

Trước đó trong hướng dẫn này, bạn đã thấy rằng bạn có thể phải chuyển đổi video của mình sang các định dạng khác nhau để làm cho chúng phát trong tất cả các trình duyệt.
Chuyển đổi video sang các định dạng khác nhau có thể khó khăn và tốn thời gian.
Một giải pháp dễ dàng hơn là để YouTube phát video trong trang web của bạn.

Id video YouTube

YouTube sẽ hiển thị một id (như tgbNymZ7vqY), khi bạn lưu (hoặc phát) video.
Bạn có thể sử dụng id này và tham khảo video của mình bằng mã HTML.

Phát video YouTube bằng HTML

Để phát video của bạn trên một trang web, hãy làm như sau:
  • Tải video lên YouTube
  • Ghi lại id video
  • Xác định phần tử <iframe> trong trang web của bạn
  • Để thuộc tính src trỏ đến URL video
  • Sử dụng các thuộc tính chiều rộng và chiều cao để chỉ định kích thước của trình phát
  • Thêm bất kỳ tham số nào khác vào URL (xem bên dưới)
Ví dụ - Sử dụng iFrame (được khuyến nghị)
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Tự động phát YouTube

Bạn có thể để video của mình bắt đầu phát tự động khi người dùng truy cập trang đó bằng cách thêm một tham số đơn giản vào URL YouTube của bạn.
Lưu ý: Hãy cân nhắc cẩn thận khi quyết định tự động phát video của bạn. Tự động bắt đầu một video có thể gây khó chịu cho khách truy cập của bạn và cuối cùng gây ra nhiều tác hại hơn là tốt.
Giá trị 0 (mặc định): Video sẽ không tự động phát khi trình phát tải.
Giá trị 1: Video sẽ tự động phát khi trình phát tải.
YouTube - Tự động phát
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>

Danh sách phát YouTube
Danh sách video được phân tách bằng dấu phẩy (ngoài URL gốc).

Vòng lặp YouTube
Giá trị 0 (mặc định): Video sẽ chỉ phát một lần.

Giá trị 1: Video sẽ lặp (mãi mãi).

YouTube - Vòng lặp
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

Điều khiển YouTube
Giá trị 0: Điều khiển trình phát không hiển thị.

Giá trị 1 (mặc định): Hiển thị điều khiển trình phát.

YouTube - Điều khiển
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

ouTube - Sử dụng <object> hoặc <embed>
Lưu ý: YouTube <object>và <embed>không được dùng nữa từ tháng 1 năm 2015. Bạn nên di chuyển video của mình để sử dụng <iframe>thay thế.

Ví dụ - Sử dụng <object> (không dùng nữa)
<object width="420" height="315"
data="https://www.youtube.com/embed/tgbNymZ7vqY">
</object>

Ví dụ - Sử dụng <embed> (không dùng nữa)
<embed width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">


Chi tiết

Các kiểu dữ liệu PHP

Các kiểu dữ liệu PHP

Các biến có thể lưu trữ dữ liệu của các loại khác nhau và các loại dữ liệu khác nhau có thể làm những việc khác nhau.


PHP hỗ trợ các kiểu dữ liệu sau:
  • Chuỗi
  • Số nguyên
  • Float (số dấu phẩy động - còn được gọi là gấp đôi)
  • Boolean
  • Mảng
  • Vật
  • VÔ GIÁ TRỊ
  • Nguồn

Chuỗi PHP

Chuỗi là một chuỗi các ký tự, như "Xin chào thế giới!".
Một chuỗi có thể là bất kỳ văn bản trong dấu ngoặc kép. Bạn có thể sử dụng dấu ngoặc đơn hoặc kép:

Thí dụ

<?php
$x = "Hello world!";
$y = 'Hello world!';

echo $x;
echo "<br>";
echo $y;
?>

Số nguyên PHP

Một kiểu dữ liệu số nguyên là một số không thập phân trong khoảng -2,147,483,648 và 2,147,483,647.
Quy tắc cho số nguyên:
  • Một số nguyên phải có ít nhất một chữ số
  • Một số nguyên không được có dấu thập phân
  • Một số nguyên có thể là dương hoặc âm
  • Số nguyên có thể được chỉ định trong: ký hiệu thập phân (cơ sở 10), thập lục phân (cơ sở 16), bát phân (cơ sở 8) hoặc ký hiệu nhị phân (cơ sở 2)
Trong ví dụ sau $ x là một số nguyên. Hàm var_dump () của PHP trả về kiểu dữ liệu và giá trị:

Thí dụ

<?php
$x = 5985;
var_dump($x);
?>

Phao PHP

Số float (số dấu phẩy động) là một số có dấu thập phân hoặc số ở dạng hàm mũ.
Trong ví dụ sau $ x là số float. Hàm var_dump () của PHP trả về kiểu dữ liệu và giá trị:

Thí dụ

<?php
$x = 10.365;
var_dump($x);
?>

Boolean PHP

Boolean đại diện cho hai trạng thái có thể: TRUE hoặc FALSE.
$x = true;
$y = false;
Booleans thường được sử dụng trong thử nghiệm có điều kiện. Bạn sẽ tìm hiểu thêm về thử nghiệm có điều kiện trong một chương sau của hướng dẫn này.

Mảng PHP

Một mảng lưu trữ nhiều giá trị trong một biến duy nhất.
Trong ví dụ sau $ xe là một mảng. Hàm var_dump () của PHP trả về kiểu dữ liệu và giá trị:

Thí dụ

<?php
$cars = array("Volvo","BMW","Toyota");
var_dump($cars);
?>
Bạn sẽ tìm hiểu thêm rất nhiều về mảng trong các chương sau của hướng dẫn này.

Đối tượng PHP

Một đối tượng là một kiểu dữ liệu lưu trữ dữ liệu và thông tin về cách xử lý dữ liệu đó.
Trong PHP, một đối tượng phải được khai báo rõ ràng.
Đầu tiên chúng ta phải khai báo một lớp đối tượng. Đối với điều này, chúng tôi sử dụng từ khóa lớp. Một lớp là một cấu trúc có thể chứa các thuộc tính và phương thức:

Thí dụ

<?php
class Car {
    function Car() {
        $this->model = "VW";
    }
}

// create an object$herbie = new Car();

// show object propertiesecho $herbie->model;
?>

Giá trị NULL PHP

Null là một kiểu dữ liệu đặc biệt chỉ có thể có một giá trị: NULL.
Một biến kiểu dữ liệu NULL là một biến không có giá trị được gán cho nó.
Mẹo: Nếu một biến được tạo mà không có giá trị, nó sẽ tự động được gán một giá trị NULL.
Các biến cũng có thể được làm trống bằng cách đặt giá trị thành NULL:

Thí dụ

<?php
$x = "Hello world!";
$x = null;
var_dump($x);
?>

Tài nguyên PHP

Loại tài nguyên đặc biệt không phải là loại dữ liệu thực tế. Đây là việc lưu trữ một tham chiếu đến các hàm và tài nguyên bên ngoài PHP.
Một ví dụ phổ biến về việc sử dụng kiểu dữ liệu tài nguyên là một cuộc gọi cơ sở dữ liệu.
Chúng tôi sẽ không nói về loại tài nguyên ở đây, vì đây là một chủ đề nâng cao.
Chi tiết

Thiết kế web đáp ứng HTML

Thiết kế Web đáp ứng là gì?

Responsive Web Design là về việc sử dụng HTML và CSS để tự động thay đổi kích thước, ẩn, thu nhỏ hoặc phóng to trang web, để làm cho nó trông đẹp trên tất cả các thiết bị (máy tính để bàn, máy tính bảng và điện thoại):


Đặt Chế độ xem

Khi tạo các trang web phản hồi, hãy thêm <meta>yếu tố sau vào tất cả các trang web của bạn:

Thí dụ

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Điều này sẽ đặt chế độ xem của trang của bạn, sẽ cung cấp cho hướng dẫn trình duyệt về cách kiểm soát kích thước và tỷ lệ của trang.

Dưới đây là ví dụ về một trang web không có thẻ meta chế độ xem và cùng một trang web có thẻ meta chế độ xem:

Hình ảnh phản hồi

Hình ảnh phản hồi là hình ảnh có tỷ lệ độc đáo để phù hợp với mọi kích thước trình duyệt.

Sử dụng tài sản chiều rộng

Nếu thuộc tính CSS widthđược đặt thành 100%, hình ảnh sẽ phản hồi và tăng tỷ lệ lên xuống:
Lưu ý rằng trong ví dụ trên, hình ảnh có thể được thu nhỏ lại lớn hơn kích thước ban đầu của nó. Một giải pháp tốt hơn, trong nhiều trường hợp, sẽ là sử dụng max-widthtài sản thay thế.

Sử dụng thuộc tính chiều rộng tối đa

Nếu thuộc max-widthtính được đặt thành 100%, hình ảnh sẽ giảm tỷ lệ nếu phải, nhưng không bao giờ tăng tỷ lệ lớn hơn kích thước ban đầu của nó:

Chi tiết

Bố cục HTML

Các thành phần bố cục HTML



Trang web thường hiển thị nội dung trong nhiều cột (như tạp chí hoặc báo).
HTML cung cấp một số yếu tố ngữ nghĩa xác định các phần khác nhau của trang web:
  • <tiêu đề> - Xác định tiêu đề cho tài liệu hoặc phần
  • <nav> - Xác định vùng chứa cho các liên kết điều hướng
  • <phần> - Xác định một phần trong tài liệu
  • <article> - Xác định một bài viết độc lập
  • <sid> - Xác định nội dung ngoài nội dung (như thanh bên)
  • <footer> - Xác định chân trang cho tài liệu hoặc phần
  • <chi tiết> - Xác định chi tiết bổ sung
  • <Tóm tắt> - Xác định tiêu đề cho phần tử <chi tiết>

Kỹ thuật bố trí HTML

Có năm cách khác nhau để tạo bố cục nhiều màu. Mỗi cách đều có ưu và nhược điểm:
  • Bảng HTML (không được đề xuất)
  • Thuộc tính float CSS
  • CSS flexbox
  • Khung CSS
  • Lưới CSS

Chọn cái nào?

Bảng HTML

Phần tử <bảng> không được thiết kế để trở thành một công cụ bố trí! Mục đích của phần tử <bảng> là hiển thị dữ liệu dạng bảng. Vì vậy, không sử dụng bảng để bố trí trang của bạn! Họ sẽ mang một mớ hỗn độn vào mã của bạn. Và hãy tưởng tượng sẽ khó khăn như thế nào để thiết kế lại trang web của bạn sau một vài tháng.
Mẹo: KHÔNG sử dụng bảng để bố trí trang của bạn!

Khung CSS

Nếu bạn muốn tạo bố cục nhanh, bạn có thể sử dụng khung
Phao CSS
Việc thực hiện toàn bộ bố cục web bằng thuộc tính float CSS là điều phổ biến. Float rất dễ học - bạn chỉ cần nhớ làm thế nào float và thuộc tính rõ ràng hoạt động. Nhược điểm: Các phần tử nổi được gắn với luồng tài liệu, có thể gây hại cho tính linh hoạt. Tìm hiểu thêm về float trong chương CSS Float và Clear của chúng tôi .
CSS Flexbox
Flexbox là một chế độ bố trí mới trong CSS3.

Việc sử dụng flexbox đảm bảo rằng các thành phần hoạt động có thể dự đoán được khi bố cục trang phải phù hợp với các kích thước màn hình khác nhau và các thiết bị hiển thị khác nhau. Nhược điểm: Không hoạt động trong IE10 trở về trước.

Tìm hiểu thêm về flexbox trong chương CSS Flexbox của chúng tôi .
Chế độ xem lưới CSS
Mô-đun bố trí lưới CSS cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế trang web dễ dàng hơn mà không phải sử dụng phao và định vị.

Nhược điểm: Không hoạt động trong IE cũng như trong Edge 15 trở về trước.

Tìm hiểu thêm về lưới CSS trong chương CSS Grid View của chúng tôi .
Chi tiết

Phần tử head HTML

Phần <head> tử là một thùng chứa siêu dữ liệu (dữ liệu về dữ liệu) và được đặt giữa <html>thẻ và <body>thẻ.



Siêu dữ liệu HTML là dữ liệu về tài liệu HTML. Siêu dữ liệu không được hiển thị.

Siêu dữ liệu thường xác định tiêu đề tài liệu, bộ ký tự, kiểu, tập lệnh và thông tin meta khác.

Các thẻ sau đây mô tả siêu dữ liệu: <title>, <style>, <meta>, <link>, <script>, và <base>.

Phần tử <title> HTML
Phần <title>tử xác định tiêu đề của tài liệu và được yêu cầu trong tất cả các tài liệu HTML.

Các <title>yếu tố:

định nghĩa một tiêu đề trong tab trình duyệt
cung cấp một tiêu đề cho trang khi nó được thêm vào mục yêu thích
hiển thị tiêu đề cho trang trong kết quả của công cụ tìm kiếm

Một tài liệu HTML đơn giản:

Thí dụ
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>

Phần tử <style> HTML
Phần <style>tử được sử dụng để xác định thông tin kiểu cho một trang HTML:

Thí dụ
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

Phần tử <link> HTML
Phần <link>tử được sử dụng để liên kết với các biểu định kiểu bên ngoài:

Thí dụ
<link rel="stylesheet" href="mystyle.css">

Phần tử <meta> HTML
Phần <meta>tử được sử dụng để chỉ định bộ ký tự nào được sử dụng, mô tả trang, từ khóa, tác giả và siêu dữ liệu khác.

Siêu dữ liệu được sử dụng bởi các trình duyệt (cách hiển thị nội dung), bởi các công cụ tìm kiếm (từ khóa) và các dịch vụ web khác.

Xác định bộ ký tự được sử dụng:

<meta charset="UTF-8">
Xác định một mô tả của trang web của bạn:

<meta name="description" content="Free Web tutorials">
Xác định từ khóa cho công cụ tìm kiếm:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Xác định tác giả của một trang:

<meta name="author" content="John Doe">
Làm mới tài liệu cứ sau 30 giây:

<meta http-equiv="refresh" content="30">
Ví dụ về <meta>thẻ:

Thí dụ
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Đặt Chế độ xem
HTML5 đã giới thiệu một phương pháp để cho phép các nhà thiết kế web kiểm soát chế độ xem, thông qua <meta>thẻ.

Khung nhìn là khu vực hiển thị của người dùng trên trang web. Nó thay đổi theo thiết bị và sẽ nhỏ hơn trên điện thoại di động so với trên màn hình máy tính.

Bạn nên bao gồm <meta>yếu tố chế độ xem sau trong tất cả các trang web của mình:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Phần <meta>tử khung nhìn cung cấp cho hướng dẫn trình duyệt về cách kiểm soát kích thước và tỷ lệ của trang.

Phần width = width-width thiết lập chiều rộng của trang để theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).

Phần scale-scale = 1.0 đặt mức thu phóng ban đầu khi trang được trình duyệt tải lần đầu tiên.

Dưới đây là ví dụ về một trang web không có thẻ meta chế độ xem và cùng một trang web có<meta> thẻ chế độ xem :

Mẹo: Nếu bạn đang duyệt trang này bằng điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết bên dưới để thấy sự khác biệt.


Chi tiết