Html5 & Css3 | Bang Andre

CSS đếm số item theo chỉ mục

29/06/2015 webdesignvietnam Leave a comment

Ví dụ: chúng ta có một yêu cầu hiển thị danh sách theo chỉ mục

1. danh mục 1
1.1. danh mục con 1.1
1.1.1. danh mục con 1.1.1
1.2. danh mục con 1.2

2. danh mục 2

……

Không cần phải code, cũng ko cần phải dùng jquery để đọc các node, css hoàn toàn có thể làm được điều này

# Bước 1:
các bạn khai báo file css đặt tên format_list.css


ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

# Bước 2 tạo một file.html
– gọi file format_list.css vào trong phần header của file.html

– Test nội dung file html

// các bạn sẽ thấy output theo thứ tự & sub thứ tự thật tuyệt vời
1. Coffee
1.1. Black tea
1.2. Green tea
2. Milk

Chúc các bạn thành công
nhantam
thiết kế web Panpic

Categories: Html5 & Css3

Một số quy tắc trong html5 p1

17/07/2014 webdesignvietnam Leave a comment

Vùng Header

Vùng Header ví dụ chứa tiêu đề và phụ đề trang. Bạn sử dụng thẻ headerđể tạo ra nội dung cho vùng Header của trang. Thẻ header có thể chứa thông tin mở về một section và article ngoài chính trang web đó. Trang web được tạo ra ở đây có một vùng Header cho trang này, được hiển thị trong thiết kế cao cấp, cũng như vùng Header ở bên trong vùng Article và Section. Liệt kê 1 đưa ra một ví dụ đánh dấu thẻ header.

Ví dụ: Thẻ Header


header
    h1 Heading Text /h1
    p Text or images can be included here /p
    p Logos are frequently placed here too /p
/header

Thẻ header cũng có thể chứa một thẻ hgroup, như trong Liệt kê 2. Thẻ hgroup tạo nhóm các tiêu đề với nhau, bằng cách sử dụng các mức tiêu đề h1 đến /h1 h6 được hiển thị ở đây có một tiêu đề chính (Main Heading) và một phụ đề (Sub-heading)./h6

Ví dụ: Thẻ hgroup


header
    hgroup
          h1 Main Heading /h1
          h2 Sub-heading /h2
    /hgroup
    p Text or images can be included here /p
/header

Vùng Navigation Bạn tạo vùng Navigation (Chuyển hướng) của trang bằng cách sử dụng thẻ nav. Phần tử nav định nghĩa một vùng đặc biệt dành cho việc chuyển hướng. Thẻ nav nên được sử dụng để chuyển hướng trang web chính, không dùng để thiết lập các liên kết có chứa trong các vùng khác của trang. Vùng Navigation này có thể chứa mã như được hiển thị trong Liệt kê 3. /nav

Ví dụ: Thẻ nav


nav
     ul
          li>a href="#">Home /a /li
          li>a href="#">About Us /a /li
          li>a href="#">Our Products /a /li
          li>a href="#">Contact Us /a /li
     /ul
/nav

Vùng Article và Section

Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực sự của trang. Bạn sử dụng thẻ article để tạo vùng này, và thẻ đó định nghĩa nội dung có thể được sử dụng độc lập với các nội dung khác được tìm thấy trên trang này. Ví dụ, nếu bạn muốn tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng article để xác định nội dung duy nhất. Thẻ article xác định nội dung có thể được gỡ bỏ và được đặt trong ngữ cảnh khác và có thể hoàn toàn dễ hiểu.

Vùng Article trong trang web có thể chứa nhiều Section. Bạn tạo ra các vùng này bằng cách sử dụng thẻ section. Một section chứa các vùng thành phần của nội dung trang web có liên quan . Thẻ section— và thẻ article nữa — có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất kỳ các thành phần nào khác cần thiết để hoàn thành phần này. Thẻ section dùng cho nội dung tạo nhóm. Nội dung cho cả hai thẻ section và thẻ article thường bắt đầu bằng một header và kết thúc bằng một footer, với nội dung cho thẻ này ở giữa.

Thẻ section cũng có thể chứa các thẻ article, cũng giống như thẻ article có thể chứa các thẻ section. Thẻ section nên được dùng để tạo nhóm các thông tin giống nhau, và thẻ article nên được sử dụng cho các thông tin như một bài viết hoặc một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới mà không ảnh hưởng đến ý nghĩa của nội dung. Thẻ article như tên gọi của nó, cung cấp một gói thông tin đầy đủ. Ngược lại, thẻ section chứa thông tin liên quan, trừ thông tin không thể được đặt trong một ngữ cảnh khác với chính nó, do nghĩa của nó sẽ bị mất.

Xem Liệt kê 4 với một ví dụ về cách sử dụng thẻ article và section.

Ví dụ: Thẻ article và thẻ section


 article 
      section 
          Content
      section 
      section 
          Content
      section 
 article 
 section 
      article 
          Content
      article 
      article 
          Content
      article 
 section

Các phần tử hình ảnh Cả hai thẻ section và thẻ article cũng như thẻ header và thẻ footer có thể chứa thẻ figure. Bạn sử dụng thẻ này để chứa các ảnh, các sơ đồ, và các ảnh chụp. Thẻ figure có thể chứa thẻ figcaption, thẻ này chứa lần lượt các chú thích cho hình minh họa có trong thẻ figure, cho phép bạn nhập một mô tả để có thể gắn hình minh họa chặt chẽ hơn với nội dung. Liệt kê 5 đưa ra một ví dụ về cấu trúc thẻ figure và thẻ figcaption.

Ví dụ: Thẻ figure và thẻ figcaption


 figure 
      img src="/figure.jpg" width="304" height="228" alt="Picture" 
      figcaption Caption for the figure figcaption 
 figure

Các phần tử đa phương tiện

Các thẻ section và article cũng có thể chứa các phần tử phương tiện khác nhau. HTML5 cung cấp các thẻ để truyền đạt nhanh nội dung của chúng. Các phần tử đa phương tiện, chẳng hạn như âm thanh và video trước đây thường chỉ được nhúng vào, bây giờ có thể được sử dụng chính thống hơn.

Thẻ audio xác định nội dung âm thanh, chẳng hạn như âm nhạc hoặc luồng âm thanh khác bất kỳ. Thẻ audio có các thuộc tính để kiểm soát những gì, khi nào, và làm thế nào để phát âm thanh. Các thuộc tính là src, preload (nạp trước), control (điều khiển), loop (vòng lặp), và autoplay (phát tự động). Trong ví dụ ở Liệt kê 6, âm thanh bắt đầu phát ngay sau khi tải trang này và sẽ phát liên tục, đồng thời hiển thị các nút điều khiển để người dùng có thể dừng lại hoặc phát lại âm thanh.

Ví dụ: thẻ audio


audio src="MyFirstMusic.ogg" autoplay="autoplay" loop="loop" controls="controls"
     Your browser does not support the audio tag.
/audio

Thẻ video cho phép bạn phát các đoạn video hoặc tạo luồng phương tiện trực quan. Nó có tất cả các thuộc tính của thẻ audio cộng thêm ba thuộc tính nữa là: poster (quảng cáo), width (chiều rộng), và height (chiều cao). Thuộc tính poster cho phép bạn xác định một hình ảnh được sử dụng trong khi video đang tải hoặc trong hoàn cảnh không may khi các video sẽ không tải được chút nào.

Ví dụ: Thẻ video


video src="MyFirstMovie.ogg" controls="controls" width="300" height="150"
     Your browser does not support the video tag
/video

Các thẻ video và audio có thể chứa thẻ Source, để định nghĩa tài nguyên đa phương tiện cho các thẻ video và audio. Với phần tử này, bạn định rõ các tệp video và âm thanh thay thế để từ các tệp này sau đó trình duyệt có thể lựa chọn dựa vào kiểu phương tiện của mình hoặc sự hỗ trợ của codec (bộ mã hóa/giải mã). Trong Liệt kê 8, có hai sự lựa chọn. Nếu không thể phát phiên bản WMA của tệp này trong trình duyệt đang được sử dụng, thì hãy thử MP3. Nếu không, sẽ hiển thị thông báo để người sử dụng biết lý do âm thanh không có sẵn.

Ví dụ: Thẻ source


audio
     source src="/music/good_enough.wma" type="audio/x-ms-wma"
     source src="/music/good_enough.mp3" type="audio/mpeg"


Your browser does not support the HTML 'audio' element.

/audio

Thẻ embed định nghĩa nội dung nhúng có thể được đưa vào một trang — ví dụ, một plug-in cho các tệp SWF của Adobe Flash. Liệt kê 9 có chứa thuộc tính type (kiểu), xác định nguồn nhúng là một tệp Flash.

Ví dụ: Thẻ embed


 embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" width="300" height="150" /embed

Ngoài các thuộc tính src và type, thẻ embed width=”300″ height=”150″ /embed còn có thuộc tính height (chiều cao) và width (chiều rộng).

Vùng Aside
Bạn tạo vùng Aside theo kế hoạch Acme United bằng cách sử dụng thẻ aside. Hãy sử dụng thẻ này khi bạn muốn tạo nội dung bổ sung mà không còn chỗ nào để thêm vào bài viết. Trong các tạp chí, các vùng nhận xét thường được sử dụng để làm nổi bật một điểm nào đó và được thực hiện trong chính bài viết đó. Thẻ aside chứa nội dung có thể được loại bỏ mà không ảnh hưởng đến các thông tin được truyền đạt bởi bài viết, phân đoạn, hoặc trang chứa nó.

Ví dụ: Thẻ aside


 p Panpic Technology. /p 
 aside 
      h4 Thiết kế web /h4 
      p Panpic là công ty thiết kế web hàng đầu ở việt nam. /p 
 /aside

Vùng Footer

Phần tử footer chứa thông tin về một trang, bài viết, hoặc một phần, chẳng hạn như tác giả hoặc ngày viết bài. Là phần cuối trang, nó có thể chứa bản quyền hoặc các thông tin pháp lý quan trọng khác.

Ví dụ: Thẻ footer


footer
     p Copyright 2013 - 2014 Panpic technology. All rights reserved. /p
/footer

Lưu ý:

– Do không hiển thị được thẻ html5 nên các bạn tự thêm vào các ký tự đóng “</” mở “<“ của các thẻ tag
– Khi dùng thẻ section các bạn buộc phải dùng thẻ h1 – h6 ở bên trong để validate html5 tại http://validator.w3.org/ , nếu không sử dụng thẻ h bên trong section sẽ báo lỗi.
Ví dụ: cách sử dụng section đúng cú pháp


body
     section 
	h2 thẻ h phải có trong vùng /h2 
	Nội dung chi tiết ...thiết kế web bán hàng online
   /section 
/body

– Các bạn xem thêm tài liệu tại W3Schoools

nhantam
PHP Developer

Categories: Html5 & Css3 Tags: cách dùng thẻ html5, html simple, html5 sample, một số thẻ html5

Older Entries

Bang Andre

Archive

CSS đếm số item theo chỉ mục

Một số quy tắc trong html5 p1

Bài viết mới

Danh mục

nhantam

Sitemap

Liên kết

Thẻ

Bang Andre

Archive

CSS đếm số item theo chỉ mục

datepicker not working within bootstrap modals

Một số quy tắc trong html5 p1

Bài viết mới

Danh mục

nhantam

Sitemap

Liên kết

Thẻ