/ / Html & Css / Comment (0)

Các thuộc tính trong thẻ html

Ở bài trước mình đã giới thiệu qua cho các bạn các thẻ html hay sử dụng.Trong bài này mình sẽ giới thiệu các thuộc tính quan trọng trong các thẻ html.Lợi ích của các thuộc tính này mang lại rất lớn cho chúng ta khi thiết kế cũng như lập trình,dựa vào các thuộc tính này mà ta có thể selector trong css hoặc selector trong javascript hoặc jquery.

Các thuộc tính trong HTML

  • Các phần tử HTML có thể có các thuộc tính.
  • Các thuộc tính cung cấp thêm các thông tin cho một phần tử HTML
  • Các thuộc tính luôn luôn được chỉ định trong thẻ bắt đầu.
  • Các thuộc tính đi với nhau thành từng cặp là tên/giá trị, ví dụ: name=”value”

Thuộc tính class

– Đây là 1 thuộc tính rất quan trọng,nó thường được sử dụng cho những nội dung có cùng định dạng, việc sử dụng một class thuận tiện để chỉnh sửa giống nhau của các thành phần.Dựa vào thuộc tính class này mà ta có thể lựa chọn các phần tử html trong css hoặc javascript.Đối với việc sử dụng css cho class thì tất cả các phần tử html có cùng 1 class sẽ chịu những tác động định dạng của css.

– Nhiều phần tử html có thể có chung 1 class và 1 phần tử có thể chứa nhiều class,mỗi class cách nhau bằng khoảng trắng

Cấu trúc thuộc tính class trong html:

<ten_the class=”ten_class”></ten_the>

Cấu trúc css selector theo class:

.ten_class {thuộc tính: giá trị;}

Ví dụ:

<p classs='test text'>Bài học các thuộc tính quan trọng trong thẻ html tại hocphp.info</p>
<a class="test ">Học php online</a>

– Các bạn có thể thấy thẻ <p> đầu tiên có tới 2 class là test và text và các bạn có thể đặt nhiều class khác nhau cho 1 thẻ,và trong thẻ <a> cũng có class là test.Như vậy là nhiều thẻ có thẻ có chung 1 class.

Chú ý: Tên class không được bắt đầu bằng số, vì điều này chỉ hỗ trợ trong trình duyệt Internet Explorer.
Tên class lên đặt ngắn gọn dễ nhớ và gần gũi với chức năng nó sẽ được sử dụng

Thuộc tính ID

– Khác với thuộc tính class là 1 class có thể sử dụng cho nhiều thẻ khác nhau,nhưng thuộc tính ID chỉ mang tính duy nhất (giống như việc chúng ta mỗi người có 1 bằng lái xe hoặc chứng minh thư nhân dân khác nhau)

-Thuộc tính id chủ yếu sử dụng trong việc lựa chọn phần tử trong css và javascript

Cấu trúc thuộc tính ID trong html:

<ten_the id=”ten_id”></ten_the>

Cấu trúc css selector theo ID:

#ten_id {thuộc tính: giá trị;}

Ví dụ:

<p id='text'>Bài học các thuộc tính quan trọng trong thẻ html tại hocphp.info</p>
<a id="link">Học php online</a>

– Như vậy là các bạn thấy các phần tử html không lên có chung tên ID.
Chú ý: Tên id không được bắt đầu bằng số, vì điều này chỉ hỗ trợ trong trình duyệt Internet Explorer.
Tên id lên đặt ngắn gọn dễ nhớ và gần gũi với chức năng nó sẽ được sử dụng

Các thuộc tính trong thẻ html

Trong mỗi thẻ html chúng có thể chứa các thuộc tính riêng,và chúng ta cũng có thẻ thêm 1 vài thuộc tính tự định nghĩa nhằm phục vụ 1 chức năng nào đó (thường việc tự đặt thêm các thuộc tính này sử dụng selector hoặc gắn dữ liệu trong javascript)

Thuộc tính của thẻ liên kết <a>:


<a href="http://hocphp.info" title="Học php từ cơ bản tới nâng cao">Học php online miễn phí</a>

– Các bạn thấy trong thẻ <a> có thuộc tính href đây chính là thuộc tính quan trọng nhất trong thẻ này,nó sẽ chứa link liên kết khi bạn click vào liên kết này nó sẽ chuyển tới trang khai báo trong thuộc tính href này.Còn thuộc tính title khi chúng ta di chuột vào liên kết sẽ hiển thị lên tiêu đề trong thuộc tính này

Thuộc tính của thẻ hình ảnh <img>:


<img src="logo.png" alt="Học php online miễn phí" />

– Thẻ img là 1 thẻ đơn, các bạn thấy trong thẻ <img> có thuộc tính src đây chính là thuộc tính quan trọng nhất trong thẻ này,nó sẽ chứa link của file ảnh muốn hiển thị.Còn thuộc tính alt sẽ là thông tin mô tả cho file ảnh này (nó thường sử dụng trong vấn đề SEO lên các bạn lên thêm thuộc tính này vào thẻ hình ảnh)

Kết luận: qua bài này chúng ta đã nắm được các thuộc tính quan trọng trong thẻ html,ngoài ra mỗi thẻ còn có các thuộc tính khác nhau nữa trong quá trình thiết kế các bạn lên tìm hiểu thêm về các thuộc tính này.



31/08/2014
Tags:
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL