Thực đơn
trang chủKỹ thuật

Bắt đầu với HTML. Tài liệu HTML. Khái niệm cơ bản về HTML5

Chào mọi người! Thế vận hội được chờ đợi từ lâu đã bắt đầu. Tôi chúc tất cả những người tham gia thành công và may mắn, và tất nhiên tôi rất ủng hộ nước Nga, bởi vì Bản thân tôi là người Nga. Và bây giờ đến chủ đề của bài viết. Trong bài viết này, chúng ta sẽ nói về đánh dấu HTML5 hiện đại, những ưu điểm và tầm quan trọng của nó nói chung. Mình vẫn chưa chuyển sang html5 được, mình tưởng nó mới hoàn toàn, không phải trình duyệt nào cũng hỗ trợ, đặc biệt là IE 7-8. Nhưng mọi thứ hóa ra không hoàn toàn như vậy.

Ngày nay, html5 được sử dụng rộng rãi để đánh dấu các trang web và hầu hết tất cả các trình duyệt hiện đại đều hỗ trợ đánh dấu này, mặc dù người ta cho rằng đặc tả html5 vẫn đang được phát triển. Đối với Internet Explorer phiên bản 7-8, có một chiếc nạng đặc biệt dành cho chúng, bao gồm một javaScript nhỏ. Theo tôi, bố cục trong html5 rất tiện lợi, vì... Trước hết, html5 là ngữ nghĩa. Ở đây sử dụng một số thành phần cấu trúc, nhờ đó cấu trúc tài liệu trở nên dễ đọc và dễ hiểu không chỉ đối với con người mà còn cả robot tìm kiếm.

Vì vậy, hãy thực hiện từng bước đánh dấu html5 và bắt đầu từ phần đầu của tài liệu - Doctype. Doctype trong html5 được viết đơn giản hơn rất nhiều nên bạn có thể dễ dàng ghi nhớ.

Ký hiệu mã hóa được viết như sau

Bạn có cảm thấy sự khác biệt? Mã đã trở nên đơn giản hơn nhiều và cũng rất dễ nhớ. Ngoài ra, khi kết nối tập lệnh và kiểu, không cần chỉ định loại nữa.

Việc tiếp theo chúng ta sẽ làm là kết nối một chút javascript để IE hiểu được markup mới.

document.createElement("tiêu đề"); document.createElement("nav"); document.createElement("phần"); document.createElement("bài viết"); document.createElement("sang một bên"); document.createElement("chân trang");

Tập lệnh này cũng có thể được tải xuống từ máy chủ Google.

— nhóm bất kỳ khối chủ đề nào (các phần được tạo), việc lồng phần tử này cũng được hỗ trợ
- xác định phần hoặc khu vực tiêu đề trang. Rất thường xuyên trong bố cục, thẻ này được sử dụng để đóng khung tiêu đề trang web.
- Xác định chân trang của một phần hoặc trang. Thông thường, thẻ này được sử dụng để đóng khung chân trang của trang web, chứa thông tin về bản quyền, liên hệ, điều khoản sử dụng, v.v.
— đánh dấu chuỗi điều hướng của trang web. Có thể có một menu trang web, một khối mẩu bánh mì, v.v.
— xác định nội dung chính của trang web, ví dụ: một bài viết riêng.
— nội dung thứ cấp trên trang web. Thông thường, những phần tử này được sử dụng để đánh dấu các thanh bên.

Cần lưu ý rằng các phần tử html5 mới có tính chất nội tuyến, tức là. Để hiển thị chúng một cách chính xác, chúng phải được tạo thành các khối.

Đầu trang, điều hướng, phần, bài viết, sang một bên, chân trang (hiển thị: khối)

Dựa vào những điều trên, bạn có thể phác thảo bố cục trang nhỏ trong html5

Đánh dấu gần đúng trong html5 Tiêu đề trang web Menu trang web Chân trang trang web

Như bạn có thể thấy, html5 có lợi thế rõ ràng hơn html4, cả về đánh dấu và SEO. Chúng ta sẽ nói về SEO bên dưới.

Ngoài các thẻ chính, các thẻ sau cũng thường được sử dụng:
placeholder (placeholder = "Text") - hiển thị văn bản trong trường nhập và khi gõ văn bản, nó sẽ tự động biến mất. Thuộc tính này xuất hiện cụ thể trong html5; giờ đây không cần sử dụng các tập lệnh bổ sung để hiển thị văn bản trong một trường, chẳng hạn như trong trường tìm kiếm.

- làm nổi bật bất kỳ từ hoặc cụm từ quan trọng. Lưu ý màu nền màu vàng.

— những thẻ này được sử dụng để hiển thị một địa chỉ, ví dụ: địa chỉ của một tổ chức.

— hiển thị video trên một trang web với trình phát trình duyệt tiêu chuẩn.

— hiển thị bản ghi âm trên trang web bằng trình phát trình duyệt tiêu chuẩn

HTML5 và SEO

Một trong những tính năng chính của HTML5 và theo tôi là quan trọng nhất, là robot tìm kiếm phân chia tất cả các khối theo tầm quan trọng của chúng, tức là. phân đoạn trang web. Không thể làm điều này trong html4, bởi vì... Thẻ div tiêu chuẩn không thêm bất kỳ ý nghĩa nào vào phần tử bên trong thẻ. Với việc sử dụng các phần tử đầu trang, bài viết, sang một bên, chân trang mới, mọi thứ sẽ thay đổi. Những thứ kia. Nói một cách đại khái, họ “nói” cho robot tìm kiếm những yếu tố nào cần coi trọng và yếu tố nào cần bỏ qua. Ví dụ: bot tìm kiếm sẽ dễ dàng hiểu rằng thông tin chứa giữa các thẻ là bản quyền và thông tin tương tự đối với khách truy cập.

Các yếu tố ảnh hưởng đến việc lập chỉ mục trên công cụ tìm kiếm

Thẻ bài viết là một trong những thẻ quan trọng nhất khi phân đoạn các trang của trang web. Thẻ này cho công cụ tìm kiếm biết rõ nội dung chính của trang web nằm ở đâu. Và tất cả chúng ta đều biết rằng nội dung chủ yếu là mục đích mà khách truy cập đến trang web. Ở đây, người ta giả định rằng PS sẽ chú ý tối đa đến nội dung được đặt giữa các thẻ, loại bỏ hoặc loại bỏ các phần tử khác xuống nền.

Phần tử phần chia tất cả đánh dấu thành các phần khác nhau. Điều này mang lại điều gì? Robot tìm kiếm rất giỏi trong việc điều hướng một trang web có cấu trúc tốt. Nếu bạn sử dụng thẻ một cách chính xác, bạn có thể dễ dàng xây dựng hệ thống phân cấp thông tin của tài liệu và điều này sẽ cải thiện việc lập chỉ mục của toàn bộ trang web.

Sử dụng thẻ tiêu đề, robot tìm kiếm có thể dễ dàng tìm thấy logo, tên trang web, khẩu hiệu và điều hướng chính (menu chính) trên trang web.

Thẻ này xác định cấu trúc điều hướng trên trang web.

Liên kết

Dưới đây là các thuộc tính liên kết chính trong HTML5:

Bạn có thể thấy phần còn lại của các thuộc tính.

Dưới đây là tổng quan ngắn gọn về đánh dấu HTML5. Đối với tôi, tôi đã chuyển sang bố cục bằng cách sử dụng đánh dấu HTML5 từ lâu và đã chuyển hầu hết các mẫu trên trang web của mình sang HTML5, nhưng tôi không thể truy cập vào blog này.

Đó là tất cả. Tạm biệt mọi người. Hẹn gặp lại các bạn ở những bài viết tiếp theo.

Bạn đã chuyển sang HTML5 chưa?

Khái niệm cơ bản về HTML chứa các quy tắc cơ bản của ngôn ngữ HTML, mô tả cấu trúc của trang HTML và các mối quan hệ trong cấu trúc của tài liệu HTML giữa các thành phần HTML.

Tài liệu HTML là một tài liệu văn bản thông thường có thể được tạo bằng trình soạn thảo văn bản thông thường (Notepad) hoặc bằng một trình soạn thảo văn bản chuyên dụng có tính năng đánh dấu mã (Notepad++, Visual Studio Code, v.v.). Tài liệu HTML có phần mở rộng .html.

Một tài liệu HTML bao gồm một cây gồm các phần tử HTML và văn bản. Mỗi phần tử được xác định trong tài liệu nguồn bằng thẻ bắt đầu (mở) và thẻ kết thúc (đóng) (hiếm khi có ngoại lệ).

Thẻ bắt đầu hiển thị nơi phần tử bắt đầu, thẻ kết thúc hiển thị nơi phần tử kết thúc. Thẻ đóng được hình thành bằng cách thêm dấu gạch chéo / trước tên thẻ: .... Giữa thẻ bắt đầu và thẻ đóng là nội dung của thẻ – nội dung.

Các thẻ đơn không thể lưu trữ nội dung trực tiếp; nó được viết dưới dạng một giá trị thuộc tính, ví dụ: một thẻ sẽ tạo một nút có văn bản Nút bên trong.

Các thẻ có thể được lồng vào nhau, ví dụ:

Chữ

. Khi đầu tư, bạn nên tuân theo thứ tự đóng (nguyên tắc “matryoshka”), ví dụ: mục sau sẽ không chính xác:

Chữ

.

Các phần tử HTML có thể có các thuộc tính (toàn cục, áp dụng cho tất cả các phần tử HTML và thuộc tính của chính chúng). Các thuộc tính được ghi trong thẻ mở của phần tử và chứa tên và giá trị, được chỉ định theo định dạng thuộc tính name="value" . Các thuộc tính cho phép bạn thay đổi các thuộc tính và hành vi của phần tử mà chúng được đặt.

Mỗi phần tử có thể được gán nhiều giá trị lớp và chỉ một giá trị id. Nhiều giá trị lớp được viết cách nhau bởi dấu cách, . Các giá trị lớp và id chỉ được bao gồm các chữ cái, số, dấu gạch nối và dấu gạch dưới và chỉ được bắt đầu bằng các chữ cái hoặc số.

Trình duyệt xem (diễn giải) tài liệu HTML, xây dựng cấu trúc của nó (DOM) và hiển thị nó theo hướng dẫn có trong tệp này (biểu định kiểu, tập lệnh). Nếu đánh dấu chính xác, cửa sổ trình duyệt sẽ hiển thị một trang HTML chứa các phần tử HTML - tiêu đề, bảng, hình ảnh, v.v.

Quá trình giải thích (phân tích cú pháp) bắt đầu trước khi trang web được tải đầy đủ vào trình duyệt. Trình duyệt xử lý tài liệu HTML một cách tuần tự ngay từ đầu trong khi xử lý CSS và các biểu định kiểu liên quan đến các thành phần trang.

Một tài liệu HTML bao gồm hai phần - phần tiêu đề - giữa các thẻ ... và phần nội dung - giữa các thẻ ....

Cấu trúc trang web 1. Cấu trúc tài liệu HTML

HTML tuân theo các quy tắc có trong tệp khai báo loại tài liệu (Định nghĩa loại tài liệu hoặc DTD). DTD là một tài liệu XML xác định thẻ, thuộc tính và giá trị của chúng hợp lệ cho một loại HTML cụ thể. Mỗi phiên bản HTML đều có DTD riêng.

DOCTYPE chịu trách nhiệm về việc trình duyệt hiển thị chính xác trang web. DOCTYPE chỉ định không chỉ phiên bản HTML (ví dụ html) mà còn cả tệp DTD tương ứng trên Internet.

...

Các phần tử bên trong thẻ tạo thành cây tài liệu, được gọi là mô hình đối tượng tài liệu, DOM (mô hình đối tượng tài liệu). Trong trường hợp này, phần tử là phần tử gốc.


Cơm. 1. Cấu trúc đơn giản nhất của một trang web

Để hiểu được sự tương tác của các thành phần trang web, cần xem xét cái gọi là “mối quan hệ họ hàng” giữa các thành phần. Mối quan hệ giữa nhiều phần tử lồng nhau được phân loại là cha, con và chị em.

Tổ tiên là một phần tử chứa các phần tử khác. Trong Hình 1, tổ tiên của tất cả các phần tử là . Đồng thời, phần tử này là tổ tiên của tất cả các thẻ mà nó chứa: ,

, , vân vân.

Hậu duệ là một phần tử nằm trong một hoặc nhiều loại phần tử. Ví dụ: là hậu duệ của , và phần tử

Là hậu duệ của cả hai và .

Phần tử cha là phần tử có liên quan đến các phần tử khác ở cấp độ thấp hơn và nằm phía trên chúng trong cây. Trong Hình 1 và . Nhãn

Là cha mẹ chỉ để .

Phần tử con là phần tử phụ thuộc trực tiếp vào phần tử khác ở cấp độ cao hơn. Trong Hình 1 chỉ có các phần tử , ,

Và là con của .

Phần tử chị em là phần tử có phần tử cha chung với phần tử được đề cập, được gọi là phần tử cùng cấp. Trong Hình 1 và là các phần tử có cùng cấp độ, cũng như các phần tử , và

Họ là chị em của nhau.

1.1. Yếu tố 1.2. Yếu tố

Phần ... chứa thông tin kỹ thuật về trang: tiêu đề, mô tả, từ khóa cho công cụ tìm kiếm, mã hóa, v.v. Thông tin bạn nhập vào đó không được hiển thị trong cửa sổ trình duyệt nhưng nó chứa thông tin cho trình duyệt biết cách xử lý trang.

1.2.1. Yếu tố

Thẻ phần được yêu cầu là . Văn bản được đặt bên trong thẻ này sẽ xuất hiện trên thanh tiêu đề của trình duyệt web. Tiêu đề không được dài quá 60 ký tự để phù hợp hoàn toàn với tiêu đề. Văn bản tiêu đề phải chứa mô tả đầy đủ nhất về nội dung của trang web.

1.2.2. Yếu tố

Thẻ phần tùy chọn là một thẻ duy nhất. Với sự trợ giúp của nó, bạn có thể đặt mô tả về nội dung trang và từ khóa cho các công cụ tìm kiếm, tác giả của tài liệu HTML và các thuộc tính siêu dữ liệu khác. Một phần tử có thể chứa nhiều phần tử vì chúng mang thông tin khác nhau tùy thuộc vào thuộc tính được sử dụng.

Mô tả nội dung trang và từ khóa có thể được chỉ định đồng thời bằng nhiều ngôn ngữ, ví dụ: bằng tiếng Nga và tiếng Anh:

Bằng cách sử dụng thẻ, bạn có thể chặn hoặc cho phép các công cụ tìm kiếm lập chỉ mục một trang web:

Để tự động tải lại trang sau một khoảng thời gian nhất định, bạn cần sử dụng giá trị làm mới:

Trang sẽ được tải lại sau 30 giây. Để chuyển hướng khách truy cập đến một trang khác, bạn cần chỉ định URL trong tham số url:

Bảng 2. Thuộc tính thẻ Thuộc tính
bộ ký tự Chỉ định mã hóa ký tự cho tài liệu HTML hiện tại:
nội dung Chứa văn bản tùy ý chỉ định giá trị được liên kết với thuộc tính http-equiv hoặc name, tùy thuộc vào giá trị của chúng.
http-tương đương Kiểm soát các hành động của trình duyệt trên một trang web nhất định (tương đương với các tiêu đề HTTP). Khi hiển thị trang, trình duyệt sẽ làm theo hướng dẫn được chỉ định trong thuộc tính:
kiểu mặc định chỉ định kiểu ưa thích để sử dụng trên trang. Thuộc tính nội dung phải chứa ID của phần tử tham chiếu đến biểu định kiểu CSS hoặc ID của phần tử chứa biểu định kiểu.
làm mới cho biết thời gian tính bằng giây trước khi trang được tải lại hoặc thời gian trước khi chuyển hướng đến trang khác nếu thuộc tính nội dung chứa dòng "url=page_address" sau thời gian.
Tự động tải lại trang sau một khoảng thời gian nhất định, trong ví dụ này là sau 30 giây:

Nếu bạn cần chuyển hướng ngay lập tức khách truy cập đến một trang khác, bạn có thể chỉ định URL trong tham số url:
tên Liên kết với giá trị chứa trong thuộc tính nội dung. Không nên sử dụng nếu phần tử đã có bộ thuộc tính http-equiv , charset hoặc itemprop .
tên ứng dụng chỉ định tên của ứng dụng web được sử dụng trên trang.
tác giả chỉ định tên tác giả của tài liệu ở định dạng tự do.
description xác định một mô tả ngắn về nội dung trang, ví dụ:

trình tạo chỉ định một trong các gói phần mềm được sử dụng để tạo tài liệu, ví dụ:
.
từ khóa chứa danh sách từ khóa được phân tách bằng dấu phẩy phù hợp với nội dung của trang, ví dụ:
.
Ngoài ra, thuộc tính tên có thể lấy các giá trị sau từ đặc tả mở rộng, chẳng hạn như người tạo, googlebot, nhà xuất bản, robot, slurp, viewport, mặc dù chưa có giá trị nào trong số này được áp dụng chính thức.
1.2.3. Yếu tố

Bên trong phần tử này, các kiểu được sử dụng trên trang sẽ được đặt. CSS được sử dụng để đặt kiểu trong tài liệu HTML. Có thể có một số phần tử như vậy trên một trang.

Bên trong phần tử này, bạn có thể viết mã định dạng cho cả các thành phần trang web và toàn bộ trang web.

.paper ( chiều rộng: 200px; chiều cao: 300px; màu nền: #ef4444; màu: #666666; )

Để kết nối một kiểu nhất định với một phần tử, bạn cần gán tên thích hợp cho phần tử đó bằng thuộc tính class (hoặc id):

...

Mã CSS có thể được nhúng trực tiếp vào phần tử đánh dấu dưới dạng giá trị của thuộc tính style, ví dụ:

1.2.4. Yếu tố

Bạn cũng có thể đặt kiểu cho tài liệu bằng phương pháp khác - viết chúng vào một tệp riêng có phần mở rộng .css, ví dụ: style.css.

Có hai cách để kết nối một tệp có kiểu với một trang web:
thông qua chỉ thị url @import

@import url(style.css);

sử dụng phần tử. Phần tử không yêu cầu thẻ đóng. Phần tử này xác định mối quan hệ giữa trang hiện tại và các tài liệu khác. Có thể có một số phần tử như vậy trên một trang. Mục nhập sẽ trông như thế này:

Bảng 4. Thuộc tính thẻ Mô tả thuộc tính, giá trị được chấp nhận
nguồn gốc chéo Cho biết liệu CORS (công nghệ trình duyệt cho phép trang web truy cập tài nguyên từ một miền khác) có nên được sử dụng khi truy xuất hình ảnh từ một trang web hay không.
ẩn danh — trình duyệt tự động thêm tiêu đề Origin vào yêu cầu tên miền chéo, chứa tên miền mà yêu cầu được thực hiện. Nếu máy chủ không phản hồi với tiêu đề CORS Access-Control-Allow-Origin: * (hoặc tên miền thay vì dấu hoa thị), thì việc tải hình ảnh sẽ bị chặn.
use-credentials - Nếu máy chủ không cung cấp thông tin xác thực bằng Access-Control-Allow-Credentials: true thì việc tải hình ảnh sẽ bị chặn.
href Thuộc tính chính của thẻ, giá trị là đường dẫn đến tệp có kiểu.
hreflang Xác định ngôn ngữ của văn bản trong tài liệu được tham chiếu.
phương tiện truyền thông Chỉ định loại thiết bị mà tài nguyên liên kết sẽ được áp dụng.
nonce Biến chuỗi được tạo ngẫu nhiên trên máy chủ đặt quy tắc sử dụng kiểu nội tuyến để bảo vệ nội dung. Giá trị thuộc tính là một chuỗi văn bản.
liên quan Thuộc tính xác định mối quan hệ giữa tài liệu hiện tại và tài liệu được tham chiếu.
thay thế - một liên kết đến cùng một tài liệu, nhưng ở định dạng khác (ví dụ: các trang để in, dịch, nhân bản, nguồn cấp dữ liệu ở định dạng RSS hoặc Atom),
.


kho lưu trữ - chỉ ra rằng tài liệu được liên kết có giá trị lịch sử. Liên kết có thể trỏ đến một bộ sưu tập hồ sơ, tài liệu hoặc tài liệu khác.
tác giả liên kết đến một trang về tác giả của tài liệu hoặc đến một trang có thông tin liên hệ của tác giả.
đánh dấu một tham chiếu đến phần đầu tiên gần nhất của bài viết là liên kết hoặc đến phần của bài viết có liên quan chặt chẽ nhất với phần tử nếu không có phần tử đầu tiên.
bên ngoài được sử dụng để chỉ ra rằng trang được liên kết đến không phải là một phần của trang này.
đầu tiên chỉ định một liên kết trỏ đến tài liệu đầu tiên trong chuỗi tài liệu.
liên kết trợ giúp tới một tài liệu trợ giúp.
biểu tượng chỉ định đường dẫn đến biểu tượng sẽ được sử dụng cho tài liệu hiện tại.
cuối cùng chỉ định một liên kết trỏ đến tài liệu cuối cùng trong một chuỗi tài liệu.
giấy phép Một liên kết đến thông tin bản quyền của một tài liệu.
tiếp theo chỉ ra rằng tài liệu này là một phần của một bộ và liên kết sẽ dẫn đến tài liệu tiếp theo trong bộ đó.

nofollow chỉ ra rằng liên kết không được tác giả của trang xác nhận hoặc liên kết đó có tính chất thương mại.
noreferrer chỉ ra rằng tiêu đề yêu cầu của khách hàng chứa url của nguồn yêu cầu sẽ không được chuyển khi theo liên kết.
pingback chỉ định địa chỉ của máy chủ pingback, cho phép blog tự động thông báo cho các trang web liên kết tới nó.
tìm nạp trước chỉ định rằng tệp được tham chiếu phải được lưu vào bộ đệm trước.
prev chỉ ra rằng tài liệu này là một phần của một bộ và liên kết đến tài liệu trước đó trong bộ đó.

tìm kiếm chỉ ra rằng tài liệu được tham chiếu chứa giao diện để tìm kiếm và các tài nguyên liên quan.
thanh bên cho biết rằng tài liệu được liên kết sẽ được hiển thị trong ngữ cảnh trình duyệt bổ sung, nếu có thể và một số trình duyệt, khi bạn nhấp vào siêu liên kết, sẽ mở một cửa sổ để thêm liên kết vào thanh dấu trang của bạn.
biểu định kiểu là một liên kết đến một tệp bên ngoài sẽ được sử dụng làm biểu định kiểu cho tài liệu này.
thẻ chỉ ra rằng thẻ siêu liên kết áp dụng cho tài liệu này.
up chỉ ra rằng trang này là một phần của cấu trúc phân cấp và siêu liên kết trỏ đến cấp độ tài nguyên cao hơn trong cấu trúc.
kích cỡ Chỉ định kích thước của các biểu tượng để hiển thị trực quan. Thuộc tính kích thước chỉ được sử dụng cùng với rel="icon" và có thể nhận các giá trị sau:
widths-height - xác định danh sách các kích thước được phân tách bằng dấu cách, mỗi kích thước phải ở định dạng - widths-height (kích thước biểu tượng được chỉ định bằng pixel), ví dụ:
;
bất kỳ - biểu tượng có thể được thu nhỏ theo bất kỳ kích thước nào.
tiêu đề Xác định tiêu đề của một liên kết hoặc tên của một tập hợp các biểu định kiểu thay thế. Giá trị thuộc tính là văn bản.
kiểu Chỉ định loại MIME của tài liệu đang được tham chiếu. Trong trường hợp này nó nhận giá trị "text/css".
1.2.5. Yếu tố Bảng 5. Thuộc tính thẻ Mô tả thuộc tính, giá trị được chấp nhận
không đồng bộ Thuộc tính chỉ ra rằng tập lệnh sẽ chạy không đồng bộ với phần còn lại của trang (tập lệnh sẽ bắt đầu thực thi cùng lúc tải trang).
bộ ký tự Xác định mã hóa ký tự
nguồn gốc chéo Xác định xem CORS có được sử dụng khi tải tập lệnh bên ngoài hay không (sử dụng thuộc tính src).
ẩn danh - trước khi tải tập lệnh vào yêu cầu tên miền chéo, trình duyệt sẽ tự động thêm tiêu đề Origin mà không chuyển tham số truy cập (cookie, chứng chỉ X.509, thông tin đăng nhập/mật khẩu để xác thực cơ bản qua HTTP). Nếu phản hồi của máy chủ không chứa tiêu đề Access-Control-Allow-Origin: tên miền thì tập lệnh sẽ không được tải.
thông tin xác thực sử dụng - trước khi tải tập lệnh vào yêu cầu tên miền chéo, trình duyệt sẽ tự động thêm tiêu đề Origin cho biết các tham số truy cập (cookie, chứng chỉ SSL hoặc cặp thông tin đăng nhập/mật khẩu). Nếu phản hồi của máy chủ không chứa tiêu đề Access-Control-Allow-Credentials: true thì tập lệnh sẽ không được tải.
hoãn lại Việc giải thích các tập lệnh bị trì hoãn cho đến khi tài liệu được hiển thị trên thiết bị của người dùng.
nonce Cung cấp bảo mật bằng cách bảo vệ chống lại các cuộc tấn công kịch bản chéo trang (XSS). Đặt quy tắc sử dụng tập lệnh tích hợp bằng cách sử dụng giá trị nonce và giá trị băm. Trong quá trình hiển thị trang, trình duyệt tính toán các giá trị băm cho từng tập lệnh nội tuyến và so sánh chúng với các giá trị được liệt kê trong CSP. Tải xuống từ các tài nguyên không có trong “danh sách trắng” sẽ bị chặn.
src Cho biết vị trí của tệp có tập lệnh; giá trị thuộc tính là url của tệp chứa chương trình JavaScript.
kiểu Dùng để khai báo ngôn ngữ script dùng để soạn thảo nội dung của thẻ.
1.3. Yếu tố

Phần này chứa tất cả nội dung của tài liệu. Có sẵn cho phần tử.

Bảng 5. Thuộc tính thẻ Mô tả thuộc tính, giá trị được chấp nhận
onafterprint Một sự kiện xảy ra sau khi một trang được gửi đi in hoặc sau khi cửa sổ in đóng lại.
trước khi in Một sự kiện xảy ra trước khi một trang được gửi đi in.
ontrước khi tải Sự kiện xảy ra khi khách truy cập bắt đầu chuyển đổi sang trang khác hoặc nhấp vào “đóng cửa sổ”. Cho phép bạn hiển thị thông báo trong hộp thoại xác nhận để cho người dùng biết họ muốn ở lại hay rời khỏi trang hiện tại.
onhashchange Sự kiện này được kích hoạt khi phần băm của URL thay đổi, chẳng hạn như khi người dùng chuyển từ example.domain/test.aspx#page1 sang example.domain/test.aspx#page2 .
tin nhắn Một sự kiện xảy ra khi một tin nhắn được nhận thông qua một nguồn sự kiện.
trực tuyến Sự kiện được trình duyệt kích hoạt khi trình duyệt xác định rằng kết nối Internet đã bị mất.
trực tuyến Sự kiện được trình duyệt kích hoạt khi kết nối Internet được khôi phục.
ẩn trên trang Sự kiện xảy ra khi người dùng rời khỏi trang thông qua điều hướng, chẳng hạn như nhấp vào liên kết, làm mới trang, điền vào biểu mẫu, v.v.
onpageshow Sự kiện xảy ra khi người dùng điều hướng đến trang web, sau sự kiện onload.
đang tải xuống Sự kiện được kích hoạt nếu trang không tải vì lý do nào đó hoặc khi cửa sổ trình duyệt bị đóng.

Xin chào! Bạn sẽ KHÔNG tìm thấy điều gì hữu ích trong bài học này nếu bạn ĐÃ quen với việc hình thành cấu trúc của một tài liệu HTML. Đối với những người KHÔNG quen thuộc, tôi sẽ hiển thị cấu trúc chính xác (hợp lệ) của tài liệu web HTML, bao gồm cả trang web WordPress.

Cấu trúc chính xác chung của một tài liệu HTML

Trước hết, không cần mở đầu nhiều, cấu trúc chung của bất kỳ tài liệu HTML nào cũng phải như sau:

/*Cho biết loại tài liệu DTD hiện tại*/ /*Hiển thị phần đầu của tài liệu*/ /*Hiển thị phần đầu của tiêu đề (tiêu đề)*/ Test/*Hiển thị phần đầu của tiêu đề*/ /*Hiển thị phần đầu của tiêu đề* / /*Hiển thị phần đầu của phần chính của tài liệu (nội dung) */ /*Nội dung của tài liệu*/ /*Hiển thị phần cuối của phần chính của tài liệu*/ /*Hiển thị phần cuối của tài liệu* /

Nếu bạn xóa phần giải thích mà tôi đã đưa ra sau mỗi thẻ thì cấu trúc đơn giản của tài liệu HTML sẽ trông như thế này

Bài kiểm tra

Loại tài liệu DTD hiện tại

Loại tài liệu hiện tại ( Định nghĩa loại tài liệu, DTD) là cần thiết để trình duyệt hiểu cách diễn giải trang web hiện tại vì ngôn ngữ HTML tồn tại trong một số phiên bản.

Ngoài ra, còn có các ngôn ngữ đánh dấu khác ngoài HTML, chẳng hạn như XHTML.

Lưu ý: XHTML là Ngôn ngữ đánh dấu siêu văn bản mở rộng, được dịch là ngôn ngữ đánh dấu siêu văn bản mở rộng.

XHTML tương tự như HTML nhưng cú pháp thì khác. Để trình duyệt không bị nhầm lẫn giữa các ngôn ngữ, bạn cần hiển thị nó ở dòng mã đầu tiên, loại tài liệu hiện tại là DOCTYPE.

Khái niệm thẻ trong HTML

Bạn có nhận thấy rằng toàn bộ cấu trúc của một tài liệu HTML được chỉ định bởi một số thẻ nhất định - một số từ nhất định được đặt trong dấu ngoặc nhọn.

Từ được đặt trong dấu ngoặc nhọn trong tài liệu HTML được gọi là thẻ. Mỗi thẻ có ý nghĩa riêng, được xác định bởi quy tắc đánh dấu.

  • Tag có nghĩa là tiêu đề của tài liệu html. Thẻ head lưu trữ thông tin cho trình duyệt và công cụ tìm kiếm. Bao gồm ở dạng thẻ meta;
  • Thẻ có nghĩa là nội dung chính của tài liệu html. Cụ thể là văn bản, hình ảnh, tập lệnh Java Script, v.v.;
  • Thẻ [p] là một phần tử khối và luôn bắt đầu trên một dòng mới. Nó có nghĩa là đoạn nội dung chính của tài liệu html.

Quan trọng! Tất cả các thẻ đánh dấu HTML phải được ghép nối. Tức là thẻ mở phải được đóng bằng thẻ đóng, sau đó là dấu gạch chéo.

Thẻ tiêu đề và tiêu đề phụ h1-h6

Để cải thiện cấu trúc văn bản tài liệu, cũng như cải thiện SEO của các trang web, có thêm các thẻ nội dung cơ thể. Chúng được gọi là thẻ tiêu đề và thẻ tiêu đề phụ từ h1 đến h6, tổng cộng là 6.

Chúng, giống như thẻ [p]-paragraph, cho phép bạn làm nổi bật các phần ngữ nghĩa của văn bản, cho phép bạn chia văn bản thành các phần ngữ nghĩa, đặt tiêu đề riêng cho mỗi phần.

Thẻ h1 – h6 có phần phụ thuộc cấp dưới, cấp độ thấp hơn của phần phụ thuộc này là một đoạn văn.

Điều quan trọng cần lưu ý là việc vi phạm tính phụ thuộc cấp dưới của thẻ h1 - h6 - p sẽ không làm hỏng tính hiển thị và tính hợp lệ của tài liệu mà chỉ làm xấu đi khả năng tối ưu hóa của nó đối với các công cụ tìm kiếm.

Một ví dụ về cấu trúc tài liệu HTML được phát triển

Hãy để tôi cho bạn một ví dụ học thuật về cấu trúc tài liệu HTML phát triển hơn:

Kiểm tra Tiêu đề chính Tiêu đề chính Tiêu đề phụ thứ nhất Tiêu đề chính Tiêu đề phụ thứ hai Tiêu đề phụ thứ nhất

Cấu trúc HTML5

Trong HTML 5, cấu trúc tài liệu sẽ như thế này:

Đây là tuyên bố cho thấy tài liệu này là HTML5;

đây là phần tử gốc của trang HTML;

Một phần tử có thẻ meta về tài liệu;

Phần tử này xác định tiêu đề cho tài liệu;

Phần tử này chứa nội dung hiển thị của trang;

Phần tử xác định một tiêu đề lớn

Phần tử xác định một đoạn văn.

Thẻ H2 - h6 hoạt động trong html5

Tất cả các thẻ đều gấp đôi. Thẻ bắt đầu được gọi là thẻ mở và thẻ kết thúc được gọi là thẻ đóng.

Đánh dấu HTML trên trang web WordPress

Mặc dù thực tế là tập lệnh WordPress được viết bằng PHP, nhưng tất cả các tệp trang web, hay đúng hơn là tất cả các tệp trong mẫu làm việc của trang web, đều có đánh dấu html. Hãy xem ví dụ trong tệp header.php của mẫu Twenty Seventeen:

Bạn có thể thấy điều đó nếu tất cả các chức năng của WordPress được đặt trong đánh dấu HTML cổ điển. Có một loại tài liệu:

Thẻ được ghép nối,

Thẻ mở.

Thẻ đóng có thể được tìm thấy trong tệp footer.php.

Cách xem mã HTML của trang web WordPress

Những gì bạn viết trong trình chỉnh sửa trang web, tạo bài viết hoặc trang, chỉ là một phần của trang HTML của trang web. Đây thậm chí không phải là toàn bộ nội dung của trang.

Để xem mã HTML của trang web WordPress và điều này rất cần thiết, bạn cần:

Mở trang trong trình duyệt;

Chuyển sang phông chữ bàn phím tiếng Anh;

Nhấn các nút sau:

  • Chrome: Ctrl+U
  • Opera: Ctrl+U
  • Mozilla: Ctrl+U

Có thể bạn chưa biết tại sao điều này lại cần thiết. Tin tôi đi, bạn sẽ cần điều này nhiều lần để phân tích trang web của bạn và có thể cả trang web của đối thủ cạnh tranh.

Phần kết luận

Tóm lại, tôi muốn đưa ra một kết luận, nhưng điều duy nhất tôi nghĩ đến là bài viết hóa ra hoàn toàn dành cho người mới bắt đầu. Thoạt nhìn, có sự khác biệt lớn giữa ví dụ về mã bài viết và ví dụ từ các trang web thực. Tuy nhiên, tất cả các tệp đều có cấu trúc tài liệu HTML giống nhau và điều cực kỳ quan trọng là không vi phạm cấu trúc này khi làm việc với trang web.

Ngày tạo: 2012-03-03 21:08:27
Chỉnh sửa lần cuối: 2012-03-03 21:10:19

Hôm nay chúng ta sẽ nói về các tài liệu HTML, tức là. về các tập tin chứa mã HTML.

Tạo tài liệu HTML

Bất kỳ tài liệu HTML nào cũng là một tệp văn bản đơn giản, có nghĩa là nó có thể được đọc trong trình soạn thảo văn bản (ví dụ: Notepad).

Tạo một tệp văn bản trong bất kỳ thư mục nào trên hệ thống và thay đổi phần mở rộng của nó thành html hoặc htm. Bây giờ, nếu bạn cố đọc một tệp như vậy, nó sẽ được mở trong trình duyệt web (mà bạn đang sử dụng theo mặc định).

Tôi đang sử dụng Opera và tệp trống mà tôi gọi sẽ trông như thế này trong trình duyệt tài liệu HTML:

Bình luận:
Nhân tiện, tốt hơn là bạn nên viết tên tệp (đặc biệt nếu chúng được lưu trữ trên Internet) bằng tiếng Latinh.

Để thay đổi nội dung của tệp, bạn cần mở tệp đó thông qua trình soạn thảo văn bản. Nhấp chuột phải vào biểu tượng tệp trong Explorer và chọn Mở bằng -> Notepad. Tất nhiên, tốt hơn là sử dụng trình soạn thảo văn bản mạnh mẽ hơn. Ví dụ: trong tất cả các ví dụ tôi sẽ sử dụng Notepad++ miễn phí. Tệp .html trống sẽ trông như thế này trong trình soạn thảo văn bản Notepad++:

Chà, chúng tôi có một tài liệu HTML trống đang mở trong trình duyệt. Tất cả những gì còn lại là điền vào nó.

Tài liệu HTML5 được định dạng tốt

Bất kỳ tài liệu HTML5 nào cũng phải bắt đầu bằng dòng:

Dòng này dành cho một chương trình đặc biệt (trình xác thực html) để kiểm tra tính tuân thủ của nội dung tài liệu với tiêu chuẩn HTML5. Đặt dòng này vào mỗi tệp html của bạn.

Nhận xét HTML

HTML cung cấp các nhận xét để đánh dấu văn bản mà bạn không muốn hiển thị cho người dùng cuối. Những thứ kia. Văn bản được đặt trong bình luận không hiển thị trong trình duyệt. Bình luận được định dạng như thế này:

Bình luận nằm giữa các công trình.

Bình luận được sử dụng để giải thích mã.

html, cái đầu

Sau DOCTYPE là thẻ html gốc:

Tất cả nội dung trang phải được chứa trong thẻ html. Thẻ này có thuộc tính lang (từ ngôn ngữ - ngôn ngữ), ảnh hưởng đến ngôn ngữ mà công cụ tìm kiếm nhìn thấy trang của bạn.

Một tài liệu HTML được chia thành hai phần chính: phần đầu và phần thân:

Thẻ head chứa thông tin dịch vụ: mã hóa, tiêu đề trang, mô tả, từ khóa và nhiều thông tin khác mà chúng ta sẽ làm quen trong các bài học tiếp theo. Hãy xem trang thông tin dịch vụ sẽ trông như thế nào:

tài liệu HTML

Thẻ tiêu đề lưu trữ tiêu đề của trang. Đây là văn bản sẽ được hiển thị trong kết quả của công cụ tìm kiếm.

Thẻ meta không cần thẻ đóng. Nó bao gồm hai thuộc tính. Thuộc tính đầu tiên có thể là: charset, name, http-equiv.

Tôi nghĩ rằng mọi thứ đều rõ ràng với mô tả và từ khóa, điều duy nhất là các từ khóa có thể được nhập cách nhau bằng dấu phẩy hoặc cách nhau bằng dấu cách. Nhưng chúng ta sẽ tập trung vào mã hóa chi tiết hơn.

Mã hóa tài liệu HTML

Việc chỉ định mã hóa là cần thiết để trình duyệt có thể xác định chính xác những ký tự mà người tạo đã sử dụng khi viết trang.

Bây giờ Unicode được sử dụng ở mọi nơi và trên Internet, Unicode được biểu thị bằng utf-8 (có các cách biểu thị khác). Unicode cho phép bạn sử dụng các ký tự từ các ngôn ngữ khác nhau.

Các mã hóa trước đó chỉ cho phép sử dụng các ký tự Latinh và một tập lệnh khác. Ví dụ: để sử dụng bảng chữ cái Cyrillic, bạn có thể sử dụng đoạn mã sau:

Nhưng sau đó, bạn sẽ không thể sử dụng ký hiệu của bất kỳ tập lệnh nào khác trên các trang của mình ngoại trừ tiếng Latin và Cyrillic. Vì vậy, hãy luôn sử dụng utf-8. Điều này sẽ cho phép trình duyệt dễ dàng hiển thị, ví dụ: văn bản như thế này:

Xin chào! Xin chào! नमस्कार।

Mã hóa sẽ được thảo luận chi tiết hơn (tôi có thể nói một cách đầy đủ) trong các bài học khác trên trang web.

Để Unicode được hiển thị chính xác, các trang phải được lưu dưới dạng utf-8.

thân hình

Trong thẻ body, tất cả nội dung hiển thị của trang sẽ được hiển thị.

Vì vậy, tài liệu HTML cuối cùng trông như thế này:

tài liệu HTML

Trong bài học tiếp theo chúng ta sẽ bắt đầu điền trang.

Xem mã html của trang

Nhân tiện, bạn có thể xem mã nguồn của bất kỳ trang nào. Ví dụ: trong Opera, bạn có thể nhấp chuột phải vào bất kỳ khoảng trống nào (không phải trên hình ảnh/liên kết) và chọn "Mã nguồn". Mã HTML nguồn của một trong các trang của trang web shatalov.su trông như thế này:

Bây giờ chúng ta đã sẵn sàng để làm bẩn tay mình bằng mực. Cảm thấy giống như một nhà thiết kế bố cục trong một nhà in giữa thế kỷ 20. Tiếng ồn ào nhịp nhàng của máy in, mùi giấy in mới, tiếng lách cách của những con chữ bằng đồng được đẩy vào đúng vị trí. Những cuộn giấy in báo lớn còn nguyên sơ đang chờ nhận một phần thông tin lưu hành. Còn bạn ngồi bên máy sắp chữ hãy đặt khối thông tin vào đúng chỗ...

Thật tốt khi máy tính đã nghĩ ra điều này. Bạn có thể tạo ra bầu không khí phù hợp cho chính mình để bắt đầu sáng tạo trong một môi trường yên tĩnh. Trên thực tế, đây là những gì chúng ta sẽ làm bây giờ.

Để hoàn thành các nhiệm vụ bạn sẽ cần (sẽ có lý do để nâng cấp):

Nếu quan tâm, bạn có thể kiểm tra xem trình duyệt web của bạn hỗ trợ chuẩn HTML5 đến mức nào. Theo liên kết http://html5test.com, ở đó bạn sẽ thấy các điểm, tổng của chúng được hình thành bởi số điểm được hỗ trợ từ tiêu chuẩn. Tại thời điểm viết bài, trên máy của tôi (Ubuntu10.10), Opera11.10 đạt 258 điểm và FireFox4 chỉ có 240. Không biết bạn có gì?

Trong hướng dẫn này, chúng tôi:

  • Chúng tôi sẽ cùng bạn tạo một trang theo tiêu chuẩn HTML5
  • hãy sử dụng các yếu tố ngữ nghĩa mới,
  • hãy vẽ một chút,
  • Hãy kiểm tra cách video được hiển thị trên trang của chúng tôi,
  • Hãy kiểm tra hoạt động của các thành phần biểu mẫu mới.

Để làm việc, chúng ta chỉ cần tạo một file HTML chỉ mục.html và một tệp CSS style.css. Các tập lệnh sẽ xuất hiện trên trang khi bạn hoàn thành nhiệm vụ, vì vậy hãy chuẩn bị tinh thần để trình duyệt cảnh báo bạn về điều này. Bạn sẽ cần cho phép các tập lệnh chạy trên trang.

Chuẩn bị khung trang

Trình duyệt phải biết trang này bằng mắt! Nếu bạn không cho anh ấy biết cô ấy là ai và cô ấy đến từ đâu, anh ấy sẽ bật chế độ tương thích và bạn sẽ phải đoán “lời nói của bạn sẽ phản hồi như thế nào” trong trình duyệt của khách hàng. Để ngăn chặn điều này xảy ra, bạn cần ghi đúng loại tài liệu tương ứng với mã trang ở đầu trang.

Rõ ràng, sau khi nghe được lời cầu xin của các nhà thiết kế bố cục, những người đến từ W3C đã thương hại và tạo một thẻ ngắn cho chuẩn HTML5. Bất kỳ trang web nào hỗ trợ tiêu chuẩn mới nhất đều phải bắt đầu với tiêu chuẩn đó. Bạn có nhớ trước đây nó như thế nào không? công cộng … chuyển tiếp hoặc nghiêm ngặt... cũng là địa chỉ của tệp mô tả loại tài liệu, quá dài.

Bắt đầu nào. Tạo một thư mục trên màn hình của bạn, nó sẽ chứa một số tệp HTML và CSS thú vị của chúng tôi. Tạo một tệp văn bản đơn giản index.html, ở dạng mã hóa utf-8. Mã hóa ký tự này từ lâu đã là tiêu chuẩn cho tất cả các văn bản không phải tiếng Anh.

Dòng đầu tiên là nơi chúng ta viết loại tài liệu.
Thứ hai, chúng tôi mở thẻ chính của toàn bộ tài liệu html và chỉ định tham số lang, viết ở đó ngôn ngữ cơ bản của trang - tiếng Nga.
Hãy chuyển sang tiêu đề.
Điều đầu tiên chúng tôi sẽ chỉ ra là mã hóa ký tự của tài liệu.
Sau đó là tiêu đề cho cửa sổ trình duyệt.
Sau đó, không do dự, chúng tôi sẽ kết nối tệp kiểu.
Cuối cùng, hãy thêm một vùng chứa nội dung tài liệu trống.

Mọi thứ chúng tôi mô tả ở đây đều có trong Danh sách số 1:

Liệt kê 1. Cấu trúc tài liệu HTML5 cơ bản

Nhà đầu tư nhìn thấy tương lai

Xin lưu ý rằng hầu hết các thẻ hiện nay không còn dài như trước nữa. Thẻ không cần gì hơn lang. Đối với thẻ meta, chỉ cần viết bộ ký tự. Ngoài ra, đối với thẻ liên kết không cần phải chỉ định kiểu.

Khung đã sẵn sàng nhưng còn quá sớm để chúng tôi hiển thị trang trên trình duyệt. Hãy chuyển sang các yếu tố ngữ nghĩa của trang.

Chúng tôi đánh dấu nội dung Chúng tôi đặt các khối ngữ nghĩa trên khung

Bây giờ hãy nói chính xác hơn về những gì chúng ta sẽ có trên trang. Chúng ta sẽ tiến hành như sau: chúng ta cần tận dụng tối đa các yếu tố ngữ nghĩa mới của HTML5.

Trang của chúng tôi sẽ phục vụ để hiển thị toàn bộ nội dung tin tức về công ty mà trang web dành riêng. Quá trình chuyển đổi sang nó sẽ diễn ra từ trang chính nơi đăng tin tức mới nhất hoặc từ kho lưu trữ tin tức.

Hãy đặt các khối vào một thùng chứa. Chúng tôi sẽ tuân thủ trình tự sau đây của các yếu tố này:

– tiêu đề
– – nhóm
– điều hướng
- bài báo
– – tiêu đề
- - "nội dung"
- - phần
– – – tiêu đề
- - - "nội dung"
– chân trang

Lúc đầu chúng ta sẽ có một khối - tiêu đề trang. với một nhóm tiêu đề nói về trang web. Sau đó là một khối ngữ nghĩa cho menu. Hãy làm cho các liên kết trong menu là hư cấu. Sau đó, bài viết bắt đầu, được biểu thị bằng khối ngữ nghĩa tương ứng. Nó chứa một khối tiêu đề để ghi lại tiêu đề của bài viết và ngày xuất bản. Tiếp theo là nội dung bài viết, trong đó có bổ sung thêm những kết luận của chính tác giả viết tin. Tiện ích bổ sung này được thiết kế dưới dạng một phần và cũng đi kèm với khối tiêu đề và nội dung. Ở cuối trang có một khối chân trang, trong đó chúng tôi sẽ đăng thông tin bổ sung về nội dung các trang của chúng tôi.

Mọi thứ chúng tôi mô tả ở đây đều được trình bày trong Liệt kê số 2. Chúng tôi không cung cấp mã đầy đủ của trang mà chỉ cung cấp những gì nằm giữa các thẻ... .

Liệt kê 2. Đặt các khối ngữ nghĩa HTML5

LLC Horns and Hooves Toàn văn bản tin

  • trang chủ
  • Về chúng tôi
  • Liên lạc
  • Lưu trữ tin tức
26/04 Nhà đầu tư nhìn thấy triển vọng

Không có gì ngăn cản người ta sử dụng sừng của loài thỏ rừng. Tuy nhiên, anh ta không có móng guốc.

Công chúng nghĩ gì

Trên thực tế, chỉ có Ubuntu có cái tên lạ lùng như vậy là "Harelope".

2011 LLC Sừng và Móng guốc. Chúng tôi giữ quyền của mình ở một nơi an toàn.

Bây giờ trang có thể được xem trong trình duyệt. Tuy nhiên, nó vẫn trông không hấp dẫn. Nhưng không phải vô ích khi chúng tôi đã quan tâm và đưa vào tệp các kiểu.

Hãy sơn mặt tiền

Trang của chúng tôi trông vẫn buồn tẻ và kém hấp dẫn. Hãy trang điểm cho cô ấy. Hãy triển khai nó trong tệp style của chúng ta style.cssĐiều đầu tiên chúng ta sẽ làm là quyết định phông chữ cho toàn bộ tài liệu. Nếu ai đó không biết, giả sử rằng nghiên cứu đã được tiến hành để tìm ra phông chữ nào được cảm nhận tốt hơn từ màn hình điều khiển và hóa ra đó là phông chữ không có serif. Những phông chữ như vậy được gọi là sans-serif - không có serif. Chúng bao gồm, ví dụ: Arial, Helvetica, Verdana. Hãy tiếp tục, chúng tôi sẽ xác định theo thứ tự các quy tắc thiết kế của tất cả các thành phần trên trang của chúng tôi. Để không đi quá xa, bây giờ chúng ta hãy sử dụng một số tính năng - bóng và các cạnh tròn trên các khối.

Hầu hết những gì chúng ta viết mã ở đây đều có sẵn trong các tiêu chuẩn CSS đầu tiên. Chúng tôi sẽ liệt kê các tính năng mới.

bóng hộp
Tham số này được chỉ định cho một thành phần trang khối và tạo bóng xung quanh nó. Bốn số đầu tiên lần lượt là các tham số tuyến tính của bóng, chúng được biểu thị bằng pixel; px hoặc các đơn vị tuyến tính khác ( em, điểm) hoặc không có chúng, trong trường hợp kích thước bằng 0. Số đầu tiên có nghĩa là đổ bóng theo chiều ngang sang bên phải; nếu bạn muốn đổ bóng sang bên trái, hãy đặt số âm. Cái tiếp theo là dọc xuống; để bù lại, hãy đặt một số âm. Tiếp theo là lượng bóng mờ, sau đó là bóng lan tỏa. Sau kích thước tuyến tính, màu bóng được chỉ định và nếu bạn muốn có bóng bên trong thì từ khóa chèn vào. Nếu một cái bóng là không đủ đối với bạn, thì hãy nhận ra những tưởng tượng về bóng tối của bạn được phân tách bằng dấu phẩy.

bóng văn bản
Tham số này có cài đặt tương tự như tham số trước, điểm khác biệt duy nhất là không có phân tán bóng và bóng bên trong. Và không ai ngăn cản bạn tưởng tượng về số lượng bóng được phân tách bằng dấu phẩy.

bán kính đường viền (-moz-bán kính đường viền, -webkit-bán kính đường viền)
Bán kính làm tròn của khối. Một khối có thể có bốn góc, vì vậy tham số này có thể có cùng số phần tử. Được liệt kê theo chiều kim đồng hồ bắt đầu từ góc trên bên trái. Tên của các tham số được nêu trong ngoặc được sử dụng trong các trình duyệt thuộc họ Mozilla và trên công cụ Webkit (Chrome, Safari). Vì vậy, hãy sao chép trong quy tắc các cài đặt được chỉ định cho bán kính đường viền cũng trong vài thông số này.

Thiết kế mà chúng tôi nghĩ ra và mã hóa sẽ trông như trong Danh sách số 3. Mã này bạn cần đặt vào một tập tin style.css.

Liệt kê 3. CSS cho các phần tử ngữ nghĩa HTML5 mới

* ( họ phông chữ: Lucida Sans, Arial, Helvetica, sans-serif; ) body ( width: 480px; lề: 0px tự động; ) header.mainH ( -webkit-border-radius: 6px; -moz-border-radius: 6px; bán kính đường viền: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400 text-align: center; : 36px; lề: 0px; ) tiêu đề h2 ( cỡ chữ: 18px; lề: 0px; màu: #888; kiểu phông chữ: in nghiêng; ) điều hướng ul ( kiểu danh sách: không; hiển thị: khối; màu nền: #666; chiều cao: 24px; : 12px; bán kính đường viền: 12px; ) điều hướng ul li ( hiển thị: nội tuyến; phần đệm: 0px 20px 5px 10px; chiều cao: 24px; đường viền bên phải: 1px rắn #ccc; ) điều hướng ul li a ( color: #EFD3D3; text -trang trí: none; cỡ chữ: 13px; font-weight: đậm; ) điều hướng ul li a:hover ( color: #fff; ) bài viết > thời gian tiêu đề ( font-size: 14px; display : khối; chiều rộng: 26px; căn chỉnh văn bản: giữa; màu nền: #993333; màu sắc: #fff; độ dày phông chữ: đậm; -moz-biên giới-bán kính: 6px; -webkit-biên giới-bán kính: 6px; bán kính đường viền: 6px; nổi: trái; lề dưới: 10px; ) bài viết > khoảng thời gian tiêu đề ( font-size: 10px; font-weight: normal; text-transform: chữ hoa; ) bài viết > tiêu đề h1 ( font-size: 20px; float: left; Margin-left: 14px; text-shadow : 2px 2px 1px #FFFFFF, 2px 2px 5px #888; ) bài viết > tiêu đề h1 a ( color: #993333; text-trang trí: none; ) bài viết > tiêu đề phần h1 ( font-size: 16px; ) bài viết p ( xóa: cả hai ) chân trang p ( text-align: center; font-size: 12px; color: #888; Margin-top: 24px; ) bài viết > phần ( -moz-border-radius: 6px 0 0 0; -webkit-border -radius:6px 0 0 0; bán kính đường viền: 6px 0 0 0;

Nếu bạn mở trang chỉ mục của mình bây giờ, nó sẽ không còn buồn tẻ nữa, hãy nhìn vào Hình 1. So với chế độ xem trước đó, nó sẽ đơn giản là SIÊU

Hình 1. Xem một trang được cách điệu

Nếu trang trông khác, điều đó có nghĩa là bạn đã mở nó bằng trình duyệt sai. Khi nói “sai”, ý tôi là một trình duyệt không phải Mozilla4+, Chrome11.0+, Opera11.10+, chúng hiển thị trang theo cùng một cách - đã được kiểm tra.

Lưu ý: Ví dụ: nếu ai đó không hiểu các mục quy tắc trong danh sách, bạn không hiểu tại sao bạn cần sử dụng > trong bộ chọn? Sau đó viết câu hỏi của bạn trong các ý kiến.