Share Button
HTML 5 Có Gì Mới (Phần Hai)
09
September
2013

Như phần một trung tâm học thiết kế web đã chia sẽ, đây là ngành công nghiệp có tốc độ phát triển nhanh và thực sự nhanh chóng! Nếu bạn không cẩn thận, bạn sẽ bị bỏ lại trong cát bụi của nó. Đây là 4 phần tiếp theo khi nói về HTML 5. 

 

5. Trích dẫn hay không Trích dẫn.
… Đó là câu hỏi. Hãy nhớ rằng, HTML5 không phải là XHTML. Bạn không có để bọc các thuộc tính trong dấu ngoặc kép nếu bạn không muốn . Bạn không cần phải đóng cửa các yếu tố. Hay hơn mà nói, không có gì sai khi làm điều đó, nếu nó làm cho bạn cảm thấy thoải mái hơn. Tôi thấy rằng điều này đúng với bản thân mình.

<p class=myClass id=someId> Bắt đầu phản ứng.

Tự mình quyết định vào cái này. Nếu bạn thích tài liệu có cấu trúc hơn, tất nhiên rồi, gắn bó với dấu ngoặc kép. 

6. Làm Nội dung của bạn có thể chỉnh sửa

contenteditable

Trung tâm đào tạo khóa học thiết kế web đà nẵng khuyến cáo các bạn cập nhật trình duyệt mới, vì trình duyệt mới có thuộc tính mới khéo léo có thể được áp dụng cho các phần tử, gọi là contenteditable. Khi tên hàm ý này để người dùng soạn thảo một trong những văn bản chứa bên trong phần tử, bao gồm hàm con của nó. Có nhiều cách sử dụng cho các xấp xỉ này, bao gồm ứng dụng đơn giản như lên danh sách những việc phải làm, cũng lợi dụng bộ lưu trữ cục bộ

<!DOCTYPE html>  
<html lang=”en”>  
<head>  
    <meta charset=”utf-8″>  
    <title>untitled</title>  
</head>  
<body>  
    <h2> To-Do List </h2>  
     <ul contenteditable=”true”>  
        <li> Break mechanical cab driver. </li>  
        <li> Drive to abandoned factory  
        <li> Watch video of self </li>  
     </ul>  
</body>  
</html>  

Hoặc, như chúng ta đã học trong thủ thuật trước, chúng tôi có thể viết nó như:

<ul contenteditable=true>  

7. Đầu vào email

Nếu chúng ta áp dụng một TYPE  “email” để tạo thành đầu vào, chúng ta có thể hướng dẫn trình duyệt chỉ cho phép chuỗi phù hợp với một cấu trúc địa chỉ email hợp lệ. Đúng vậy, được xây dựng trong hình thức xác nhận sẽ sớm được đây! Chúng ta không thể 100% dựa vào điều này chỉ được nêu ra, vì lý do rõ ràng. Trong các trình duyệt cũ mà không hiểu “email” kiểu này, họ chỉ đơn giản là sẽ rơi trở lại một hộp văn bản thường xuyên.

<!DOCTYPE html>  
<html lang=”en”>  
<head>  
    <meta charset=”utf-8″>  
    <title>untitled</title>  
</head>  
<body>  
    <form action=”” method=”get”>  
        <label for=”email”>Email:</label>  
        <input id=”email” name=”email” type=”email” />  
  
        <button type=”submit”> Submit Form </button>  
    </form>  
</body>  
</html>  

email_validation

 

Nó cũng cần lưu ý rằng tất cả các trình duyệt hiện nay đang có một chút lỗi hoặc khi nói đến những yếu tố và các thuộc tính họ làm và không hỗ trợ. Ví dụ, Opera dường như hỗ trợ kiểm tra thư điện tử, chỉ miễn là tên thuộc tính được chỉ định. Tuy nhiên, nó không hỗ trợ các thuộc tính giữ chỗ, ​​mà chúng ta sẽ tìm hiểu về trong lời khuyên tiếp theo. Tóm lại, không phụ thuộc vào hình thức xác nhận chỉ được nêu ra … nhưng bạn vẫn có thể sử dụng nó!

8. Placeholders

Trước đây, chúng tôi đã phải sử dụng một chút JavaScript để tạo ra placeholders cho hộp văn bản. Chắc chắn, bạn có thể bước đầu thiết lập các thuộc tính value như thế nào bạn thấy phù hợp, nhưng, ngay sau khi người dùng xóa văn bản đó và nhấp chuột đi, đầu vào sẽ được để trống một lần nữa. Biện pháp khắc phục các thuộc tính placeholder này.

<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />

Một lần nữa, hỗ trợ là râm tốt nhất trên các trình duyệt, tuy nhiên, điều này sẽ tiếp tục cải thiện với mỗi bản phát hành mới. Bên cạnh đó, nếu trình duyệt, như Firefox và Opera, hiện không hỗ trợ các thuộc tính placeholder, ​​không có thiệt hại thực hiện. Đôi khi các nên sử dụng các ngôn ngữ lập trình thực hiện các bài toán kiểm tra, giống như các hướng dẫn trước đây mà trung tâm đào tạo học lập trình php đà nẵng chia sẽ.

validation

Đăng bình luận

Thành viên bình luận

  • 819 View