Hướng dẫn 10 thẻ tag và thuộc tính HTML5 hữu ích bạn phải biết

CCNACCNP · T.Tư 16, 2019, 03:39:37 CHIỀU

Hướng dẫn 10 thẻ tag và thuộc tính HTML5 hữu ích bạn phải biết

HTML5 đã giới thiệu nhiều thẻ, yếu tố, thuộc tính và tính năng hoàn toàn mới. Bài đăng này tóm tắt 10 thẻ và thuộc tính HTML5 mới hữu ích.

Nhìn vào trong

Như chúng ta đã biết, HTML5 hiện đang trở thành một chủ đề nóng trong số các nhà thiết kế và phát triển web cũng như các blogger. Vậy còn bạn thì sao? Quan tâm đến HTML5 cũng vậy? Sau đó, bạn đến đúng nơi.

Chúng ta đều biết rằng HTML5 đã giới thiệu nhiều thẻ và yếu tố hoàn toàn mới cũng như các thuộc tính và tính năng. Một số trong số này thực sự hữu ích và hữu ích cho các trang web của chúng tôi. Do đó, trong bài viết sau, tôi đã tóm tắt 10 thẻ và thuộc tính HTML5 hữu ích và quan trọng mà bạn phải biết và không thể bỏ lỡ! Có lẽ, bạn có thể sử dụng những thứ này như HTML5 cần thiết trước khi bắt đầu trang web HTML5 của riêng bạn.

OK, trước khi chúng tôi bắt đầu, hãy sử dụng các công cụ kiểm tra HTML5 này để xem trình duyệt của bạn hỗ trợ HTML5 tốt như thế nào.

1. Một tuyên bố DOCTYPE mới

Có vấn đề về việc nhớ tài liệu HTML4 / XHTML 1.0 dài và phức tạp như dưới đây?

Mã nguồn [Chọn]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nếu vậy, thì bạn chắc chắn sẽ yêu thích loại tài liệu mới của HTML5, trông đơn giản, gọn gàng và dễ nhớ. Đây là:

Mã nguồn [Chọn]

<!DOCTYPE html>
#Tips: Luôn thêm khai báo <!DOCTYPE> vào tài liệu HTML của bạn để trình duyệt biết loại tài liệu nào sẽ được mong đợi. - bởi w3schools

2. Bắt đầu đơn giản - Không còn thuộc tính Type cho script và link

Đây là cách bạn xác định <script> và < link> trong HTML4.

Mã nguồn [Chọn]

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>

Trong HTML5, bạn không phải chỉ định giá trị loại MIME cho <script> và <link> . Tất cả các tập lệnh và kiểu được giả sử là type="text/javascript" và type="text/css" . Bạn chỉ có thể viết mã của bạn là:

Mã nguồn [Chọn]

<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

#Tips: HTML5 đã thêm thuộc tính mới cho <script> , không đồng bộ. Với thuộc tính này, tập lệnh sẽ được thực thi không đồng bộ ngay khi có sẵn.

3. Cấu trúc ngữ nghĩa - header , footer & nav

Trước đây, chúng tôi đã thêm một id hoặc classes vào cấu trúc HTML và có lẽ, nó có thể được dùng làm cấu trúc ngữ nghĩa giả. Nhưng về bản chất, div không có cấu trúc ngữ nghĩa ngay cả sau khi thêm id .

Mã nguồn [Chọn]

<div id="header">
    ...
</div>
<div id="nav">
    <ul>...</ul>
</div>
<div id="footer">
    ...
</div>

Bằng cách này, HTML5 được tạo ra để giúp chúng tôi giải thích rõ hơn về cấu trúc ngữ nghĩa. Các thẻ HTML5 mới như <header> , <nav> và <footer> có thể được sử dụng để thay thế đánh dấu ở trên, với việc cung cấp cấu trúc ngữ nghĩa cho nội dung.

<header>
...
</header>
<nav>
<ul>...</ul>
</nav>
<footer>
...
</footer>

4. Cấu trúc ngữ nghĩa - article so với section

HTML5 cũng cung cấp các <article> và <section> để giúp chúng tôi tạo nội dung ngữ nghĩa.

Mã nguồn [Chọn]

<section>
    ...
</section>

Thẻ <section> xác định các phần trong HTML như đầu trang, chân trang hoặc bất kỳ phần nội dung nào khác.

Mã nguồn [Chọn]

<article>
    ...
</article>

Thẻ <article> được sử dụng để chỉ định nội dung độc lập và độc lập.

5. Các loại và thuộc tính đầu vào mẫu HTML5 mới

HTML5 đã giới thiệu 13 loại đầu vào mới và một số thuộc tính mới cho <form> và <input> . Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ đầy đủ các loại và thuộc tính đầu vào mới của HTML5. Nhân tiện, bạn có thể phải thử các hình thức HTML5 tuyệt vời này, một số tính năng mới đã được thêm vào, ví dụ như xác thực dựa trên trình duyệt, trình giữ chỗ tích hợp và các loại đầu vào mới.

Mã nguồn [Chọn]

<form id="myform">
    Name: <input name="name" required placeholder="Your name" pattern="[A-z]{7}" />
    <br/>
    Email: <input type="email" name="email" required placeholder="[email protected]"/>
    <br/>
    URL: <input type="url" name="url" placeholder="Homepage URL"/>
    <br/>
    Age: <input type="number" name="age" min="18" max="99" />
    <br/>
    Description: <textarea name="desc" placeholder="Describe yourself here..."></textarea>
    <br/>
    <input type="submit" value="Submit" />
</form>

Biểu mẫu ở trên sử dụng các loại đầu vào HTML5 mới như email , url và số và các thuộc tính đầu vào HTML5 mới như được yêu cầu , mẫu (regrec) , min , max và giữ chỗ .

Nhân tiện, bạn luôn có thể kiểm tra danh sách đầy đủ các loại và thuộc tính đầu vào HTML5 mới tại đây .
#Tips: Tại thời điểm này, chúng tôi không thể phụ thuộc vào xác thực trình duyệt. Một giải pháp phía máy chủ / máy khách vẫn phải được thực hiện.

6. Canvas HTML5

Tính năng thú vị nhất, <canvas> HTML5 cho phép chúng tôi hiển thị hình dạng hoặc đồ họa 2D trên trang web với sự trợ giúp của JavaScript. Hơn nữa, chúng tôi có thể tạo hoạt hình bằng HTML5 Canvas.
HTML bên dưới hiển thị khai báo HTML5 Canvas đơn giản và sử dụng JavaScript để vẽ hình chữ nhật màu xanh trên đó.

Mã nguồn [Chọn]

<canvas id="myCanvas" width="200" height="200"></canvas>
 
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#0000FF";
    ctx.fillRect(0,0,150,150);
</script>

7. Hỗ trợ âm thanh và video HTML5

Trước đây, để nhúng tệp âm thanh hoặc video trên trang web, chúng tôi phải dựa vào plugin của bên thứ ba như Flash thông qua các <object> và <embed> . Để xem phương tiện, người dùng yêu cầu quyền quản trị viên để cài đặt plugin này cũng như trình duyệt phải có khả năng hỗ trợ plugin này.

Mã nguồn [Chọn]

<object width="400" height="300">
    <param name="movie" value="video.mp4" />
    ...
    <embed src="video.mp4" type="application/x-shockwave-flash" ... ></embed>
</object>

HTML5 hiện giới thiệu một cách mới để nhúng phương tiện thông qua các <audio> và <video> . Với HTML5, ít nhất chúng ta không phải lo lắng về vấn đề bổ trợ. Nhưng hiện tại, không phải tất cả các trình duyệt mà hầu hết các phiên bản trình duyệt gần đây đều cung cấp hỗ trợ cho các <audio> và <video> HTML5.

Mã nguồn [Chọn]

<audio controls="controls">
    <source src="audio.mp3" type="audio/mp3" />
    <source src="audio.ogg" type="audio/ogg" />
    Your browser does not support the <audio> tag.
</audio>

Mã nguồn [Chọn]

<video controls="controls" width="400" height="300">
    <source src="movie.mp4" type="audio/mp4" />
    <source src="media.ogg" type="audio/ogg" />
    Your browser does not support the <video> tag.
</audio>

#Tips: Có thể chỉ định nhiều thẻ <source> thẻ HTML5 <video> và <audio> để cung cấp các định dạng khác nhau cho các trình duyệt khác nhau.
#Tips: Cách tốt nhất là chèn nội dung văn bản giữa các <video> cho các trình duyệt không hỗ trợ <video> .

8. Nội dung HTML5 có thể chỉnh sửa

HTML5 đã cung cấp một thuộc tính mới thú vị khác - có thể nội dung. Bạn có thể làm cho nội dung của bạn có thể chỉnh sửa bằng cách thêm thuộc tính có thể nội dung vào nó. Tính năng này sẽ hữu ích hơn nếu được ghép nối với Bộ lưu trữ cục bộ HTML5 (sẽ được giải thích bên dưới).

Mã nguồn [Chọn]

<div contenteditable="true">
    Any content here will be editable...
</div>

#Tips: Bạn có thể thêm thuộc tính có thể nội dung vào các kiểu CSS của mình để làm cho nó có thể chỉnh sửa.

9. Lưu trữ cục bộ HTML5

Bây giờ, không cần lưu trữ cookie của trình duyệt web nữa (có lẽ, tùy thuộc vào cách sử dụng của bạn)! Điều này là do HTML5 đã giới thiệu một cách mới để lưu trữ dữ liệu trong trình duyệt của người dùng, được gọi là lưu trữ phía máy khách. HTML5 cung cấp hai phương thức mới để lưu trữ dữ liệu trên trình duyệt của người dùng, đó là localStorage và sessionStorage .

Mã nguồn [Chọn]

<script>
    localStorage.variableName = "value";
    alert(localStorage.variableName);
    localStorage.removeItem("variableName");
    alert(localStorage.variableName);
</script>

localStorage lưu trữ dữ liệu không giới hạn thời gian, điều đó có nghĩa là dữ liệu có thể truy cập bất cứ lúc nào và bất kỳ cửa sổ / tab nào (với một số điều kiện như cùng tên miền và cùng trình duyệt) ngay cả khi trình duyệt được khởi động lại.

Mã nguồn [Chọn]

<script>
    sessionStorage.variableName = "value";
    alert(sessionStorage.variableName);
    sessionStorage.removeItem("variableName");
    alert(sessionStorage.variableName);
</script>

sessionStorage lưu trữ dữ liệu cho một phiên, có nghĩa là dữ liệu sẽ bị xóa khi cửa sổ trình duyệt bị đóng.

10. Dữ liệu tùy chỉnh HTML5 - Thuộc tính

Bạn đã bao giờ sử dụng các thuộc tính tùy chỉnh bên trong thẻ để lưu trữ dữ liệu tùy ý cho mục đích của JavaScript chưa? Hoặc lưu trữ các dữ liệu tùy ý này bằng cách sử dụng class hoặc thuộc tính rel thay vì tạo các thuộc tính tùy chỉnh cho mục đích đánh dấu HTML hợp lệ.

Mã nguồn [Chọn]

<div id="div1" class="style" time="3" order="1"></div>
<div id="div1" class="style" time="5" order="3"></div>
<div id="div1" class="style" time="2" order="2"></div>

Nhờ HTML5, giờ đây chúng tôi có thể tạo các thuộc tính tùy chỉnh trên tất cả các thành phần HTML bằng data- tiền tố - và đồng thời, cung cấp cho chúng tôi đánh dấu HTML hợp lệ.

Mã nguồn [Chọn]

<div id="div1" class="style" data-time="3" data-order="1"></div>
<div id="div1" class="style" data-time="5" data-order="3"></div>
<div id="div1" class="style" data-time="2" data-order="2"></div>

Mở rộng thêm: Sửa lỗi HTML5 cho Internet Explorer

Internet Explorer lên đến phiên bản 8.0 không thể đọc thẻ HTML5 đúng cách, bạn không thể tạo kiểu cho chúng. Rất may, các nhà lập trình đã tìm ra cách khắc phục cho việc này.

Mã nguồn [Chọn]

<!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Chỉ cần đưa tập lệnh này vào <header> và bạn sẽ có thể định kiểu các thành phần HTML5 trong IE.

Phần kết luận

Đó là tất cả cho lời khuyên và thủ thuật ngày nay. Tuy nhiên, điều này không có nghĩa là tất cả đối với HTML5, vẫn còn rất nhiều thẻ và thuộc tính mới của HTML5, tôi sẽ đề cập đến một số mẹo HTML5 hữu ích khác trong bài tiếp theo.

VietNetwork.Vn

Tìm kiếm