Các tính năng ẩn của HTML

HTML là ngôn ngữ được sử dụng rộng rãi nhất (ít nhất là ngôn ngữ đánh dấu) đã không nhận được tín dụng phù hợp.
Xét rằng nó đã tồn tại trong nhiều năm, những thứ như điều khiển FORM / INPUT vẫn giữ nguyên mà không có điều khiển mới nào được thêm vào.

Vậy ít nhất từ ​​những tính năng hiện có, bạn có biết những tính năng nào chưa được nhiều người biết đến nhưng rất hữu ích.

Tất nhiên, câu hỏi này thuộc về:

Tính năng ẩn của JavaScript
Tính năng ẩn của CSS
Tính năng ẩn của C #
Tính năng ẩn của VB.NET
Tính năng ẩn của Java
Tính năng ẩn của ASP cổ điển
Tính năng ẩn của ASP.NET
Tính năng ẩn của Python
Tính năng ẩn của TextPad
Tính năng ẩn của Eclipse

Không đề cập đến các tính năng của HTML 5.0, vì nó đang trong bản nháp

Vui lòng chỉ định một tính năng cho mỗi câu trả lời .

Sử dụng đường dẫn tuyệt đối không phụ thuộc vào giao thức:

<img src="//domain.com/img/logo.png"/>

Nếu trình duyệt đang xem một trang trong SSL thông qua HTTPS, thì trình duyệt sẽ yêu cầu nội dung đó bằng giao thức https, nếu không, trình duyệt sẽ yêu cầu nội dung đó bằng HTTP.

Điều này ngăn thông báo lỗi khủng khiếp "Trang này chứa cả mục an toàn và không an toàn" trong IE, giữ tất cả các yêu cầu nội dung của bạn trong cùng một giao thức.

Lưu ý: Khi được sử dụng trên <link> hoặc @import cho biểu định kiểu, IE7 và IE8 tải tệp xuống hai lần . Tuy nhiên, tất cả các mục đích sử dụng khác đều tốt.

Thẻ nhãn liên kết nhãn với phần tử biểu mẫu một cách hợp lý bằng thuộc tính "for". Hầu hết các trình duyệt biến điều này thành một liên kết để kích hoạt phần tử biểu mẫu liên quan.

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>

Các contentEditable tài sản cho (IE, Firefox, và Safari)

<table>
    <tr>
      <td><div contenteditable="true">This text can be edited<div></td>
      <td><div contenteditable="true">This text can be edited<div></td>
    </tr>
</table>

Điều này sẽ làm cho các ô có thể chỉnh sửa được! Hãy tiếp tục, hãy thử nó nếu bạn không tin tôi.

Tôi nghĩ rằng thẻ optgroup là một tính năng mà mọi người không thường xuyên sử dụng. Hầu hết những người tôi nói chuyện không có xu hướng nhận ra rằng nó tồn tại.

Thí dụ:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Bit yêu thích của tôi là thẻ cơ sở, đây là một trình tiết kiệm nếu bạn muốn sử dụng định tuyến hoặc ghi lại URL ...

Giả sử bạn đang ở:

www.anypage.com/folder/subfolder/

Sau đây là mã và kết quả cho các liên kết từ trang này.

Neo thường xuyên:

<a href="test.html">Click here</a>

Dẫn đến

www.anypage.com/folder/subfolder/test.html

Bây giờ nếu bạn thêm thẻ cơ sở

<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>

Neo bây giờ dẫn đến:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror là một sự kiện JavaScript sẽ được kích hoạt ngay trước khi hình chữ thập đỏ nhỏ (trong IE) được hiển thị.

Bạn có thể sử dụng điều này để viết một tập lệnh sẽ thay thế hình ảnh bị hỏng bằng một số nội dung thay thế hợp lệ, để người dùng không phải đối phó với vấn đề chữ thập đỏ.

Ngay từ cái nhìn đầu tiên, điều này có thể được coi là hoàn toàn vô dụng, bởi vì, trước đây bạn không biết liệu hình ảnh có sẵn ở nơi đầu tiên hay không? Nhưng, nếu bạn cân nhắc, có những ứng dụng hoàn hảo hợp lệ cho điều này; Ví dụ: giả sử bạn đang cung cấp hình ảnh từ tài nguyên của bên thứ ba mà bạn không kiểm soát. Giống như gravatar của chúng tôi ở đây trong SO ... nó được cung cấp từ http://www.gravatar.com/ , một tài nguyên mà nhóm stackoverflow hoàn toàn không kiểm soát - mặc dù nó đáng tin cậy. Nếu http://www.gravatar.com/ bị lỗi, stackoverflow có thể giải quyết vấn đề này bằng cách sử dụng onerror.

Các <kbd>yếu tố để đánh dấu lên cho đầu vào bàn phím

Ctrl+ Alt+Del

<blink>

Phải được sử dụng cho bất kỳ thứ gì quan trọng trên trang web. Hầu hết các trang web quan trọng gói gọn tất cả nội dung trong nháy mắt.

<marquee>

Tạo hiệu ứng cuộn thực tế, tuyệt vời cho sách điện tử, v.v.

Chỉnh sửa: Các bạn dễ tính, đây chỉ là một nỗ lực hài hước

Không được biết đến nhiều nhưng bạn có thể chỉ định lowsrccho hình ảnh sẽ hiển thị lowsrctrong khi tải srchình ảnh:

<img lowsrc="monkey_preview.png" src="monkey.png" />

Đây là một lựa chọn tốt cho những ai không thích xen kẽ hình ảnh .

Một câu đố nhỏ: tại một thời điểm, thuộc tính này đủ mờ để nó được sử dụng để khai thác Hotmail , vào khoảng năm 2000.

DELvà INSđể đánh dấu nội dung đã xóa và đã chèn:

HTML <del>sucks</del> <ins>rocks</ins>!

Các nút tag là mớiinput submitthẻ và rất nhiều người dân vẫn chưa quen với nó. Ví dụ, văn bản trong nút có thể được tạo kiểu bằng thẻ nút.

<button>
    <b>Click</b><br />
    Me!
</button>

Sẽ hiển thị một nút có hai dòng, dòng đầu tiên in đậm " Nhấp vào " và dòng thứ hai nói "Tôi!". Hãy thử nó ở đây .

Chỉ định css để in

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />

cái <dl> <dt>và<dd> các mặt hàng thường bị lãng quên và họ đứng cho Danh sách Definition, Term Definition và định nghĩa.

Chúng hoạt động tương tự như một danh sách không có thứ tự ( <ul>) nhưng thay vì các mục nhập đơn lẻ, nó giống một danh sách khóa / giá trị hơn.

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>

Không chính xác bị ẩn, nhưng (và đây là lỗi của IE) không đủ người biết về thead, tbody, tfoot cho sở thích của tôi. Và có bao nhiêu người trong số các bạn biết rằng tfoot được cho là xuất hiện phía trên tbody trong đánh dấu?

Thẻ wbrhoặc ngắt từ. Từ Quirksmode:

(ngắt từ) có nghĩa là: "Trình duyệt có thể chèn ngắt dòng ở đây, nếu muốn." Trình duyệt không nghĩ rằng việc ngắt dòng không cần thiết sẽ không xảy ra.

<div class="name">getElements<wbr>ByTagName()</div>

Tôi cung cấp cho trình duyệt tùy chọn thêm dấu ngắt dòng. Điều này sẽ không cần thiết đối với độ phân giải quá lớn, khi bảng có nhiều không gian. Tuy nhiên, trên các độ phân giải nhỏ hơn, các ngắt dòng được đặt một cách chiến lược như vậy sẽ giữ cho bảng không phát triển lớn hơn cửa sổ và do đó gây ra các thanh cuộn ngang.

Cũng có ­thực thể HTML được đề cập trên cùng một trang. Điều này giống như wbrnhưng khi ngắt được chèn một dấu gạch ngang (- ) được thêm vào để biểu thị ngắt. Giống như cách nó được thực hiện trong bản in.

Một ví dụ:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Một tính năng không được sử dụng nhiều là thực tế là hầu hết mọi phần tử, cung cấp nội dung hiển thị trên trang, đều có thể có thuộc tính 'title'.

Việc thêm một thuộc tính như vậy khiến 'chú giải công cụ' xuất hiện khi con chuột được 'di chuột qua' trên phần tử và có thể được sử dụng để cung cấp thông tin không cần thiết - nhưng hữu ích - theo cách không khiến trang trở nên quá đông đúc . (Hoặc nó có thể là một cách để thêm thông tin vào một trang đã đông đúc)

Áp dụng nhiều lớp html / css cho một thẻ. Bài tương tự ở đây

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>

Tất cả chúng ta đều biết về Khai báo loại tài liệu hoặc của DTD (những thứ khiến trang của bạn bị lỗi với trình xác thực W3C). Tuy nhiên, có thể mở rộng DTD bằng cách khai báo danh sách thuộc tính cho các phần tử tùy chỉnh.

Ví dụ: trình xác thực W3C sẽ không thành công cho trang này vì behavior="mouseover"đã thêm vào <p>thẻ. Tuy nhiên, bạn có thể làm cho nó trôi qua bằng cách làm như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

Xem thêm về DTD tùy chỉnh tại QuirksMode .

Chúng tôi có thể gán chuỗi mã hóa cơ sở 64 làm thuộc tính nguồn / href của hình ảnh, JavaScript, iframe, liên kết

ví dụ

<img alt="Embedded Image" width="297" height="246" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />

div.image {
  width:297px;
  height:246px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

Người giới thiệu

Làm cách nào để tạo hình ảnh bằng cách sử dụng đánh dấu HTML?

Tệp nhị phân đến Bộ mã hóa / Bộ dịch Base64

Gần đây tôi đã tìm hiểu về tập trường và thẻ nhãn. Như trên, không ẩn nhưng hữu ích cho các biểu mẫu.

giải thích <fieldset>

Thí dụ:

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>

Bạn có thể sử dụng objectthẻ thay vì một iframeđể đưa tài liệu khác vào trang:

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>

<optgroup>là một điều tuyệt vời mà mọi người thường bỏ qua khi thực hiện <select>danh sách được phân đoạn .

<select>
  <optgroup label="North America">
    <option value='us'>United States</option>
    <option value='ca'>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value='fr'>France</option>
    <option value='ir'>Ireland</option>
  </optgroup>
</select>

là những gì bạn nên sử dụng thay vì

<select>
  <option value=''>----North America----</option>
  <option value='us'>United States</option>
  <option value='ca'>Canada</option>
  <option value=''>----Europe----</option>
  <option value='fr'>France</option>
  <option value='ir'>Ireland</option>
</select>

Hầu hết cũng không biết thực tế là bạn có thể phân biệt nút biểu mẫu được nhấn bằng cách chỉ cho chúng một cặp tên / giá trị. Ví dụ

<form action="process" method="post">
     ...
     <input type="submit" name="edit" value="Edit">
     <input type="submit" name="delete" value="Delete">
     <input type="submit" name="move_up" value="Move up">
     <input type="submit" name="move_up" value="Move down">
</form>

Ở phía máy chủ, nút thực được nhấn sau đó có thể nhận được bằng cách chỉ kiểm tra sự hiện diện của tham số yêu cầu được liên kết với tên nút. Nếu không phải vậynull , thì nút đã được nhấn.

Tôi đã nhìn thấy rất nhiều của không cần thiết hacks JS / cách giải quyết cho điều đó, ví dụ như thay đổi hình thức hành động hoặc thay đổi một giá trị đầu vào ẩn trước tùy thuộc vào nút nhấn. Nó chỉ đơn giản là đáng kinh ngạc.

Ngoài ra, tôi đã thấy gần như nhiều phương pháp hack / cách giải quyết JS để thu thập những cái đã chọn của nhiều hộp kiểm như trong các hàng bảng. Trên mỗi lần chọn / kiểm tra hàng trong bảng, JS sẽ thêm chỉ mục hàng vào một số giá trị được phân tách bằng dấu phẩy trong một phần tử đầu vào ẩn, sau đó sẽ được tách / phân tích cú pháp thêm ở phía máy chủ. Đó là kết quả của việc bạn không biết rằng bạn có thể cung cấp cho nhiều phần tử đầu vào có cùng tên nhưng giá trị khác và bạn vẫn có thể truy cập chúng dưới dạng một mảng ở phía máy chủ. Ví dụ

<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...

Việc không biết sẽ đặt cho mỗi hộp kiểm một tên khác nhau và bỏ qua toàn bộ thuộc tính giá trị. Trong một số tình huống JS-hack / workaround-free, tôi cũng đã thấy một số phép thuật áp đảo không cần thiết trong mã phía máy chủ để phân biệt các mục đã chọn.

Thẻ nhóm .

<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>Column 1<!--This column will have 40% width--></td>
            <td>Column 2<!--This column ill have 60% width--></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>

Nếu forthuộc tính của <label>thẻ không được chỉ định, thì nó sẽ được đặt ngầm định là thẻ con đầu tiên<input> , tức là

<label>Alias: <input name="alias" id="alias"></label>

tương đương với

<label for="alias">Alias:</label> <input name="alias" id="alias">

Nút dưới dạng liên kết, không có JavaScript :

Bạn có thể đặt bất kỳ loại tệp nào trong hành động biểu mẫu và bạn có một nút hoạt động như một liên kết. Không cần sử dụng các sự kiện onclick hoặc như vậy. Bạn thậm chí có thể mở tệp trong một cửa sổ mới bằng cách dán một "mục tiêu" vào biểu mẫu. Tôi không thấy kỹ thuật đó được ứng dụng nhiều.

Thay thế cái này

<a href="myfile.pdf" target="_blank">Download file</a>

Với cái này:

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>

Cách đơn giản nhất để làm mới trang trong X giây - META Refresh

<meta http-equiv="refresh" content="600">

Giá trị trong nội dung biểu thị số giây mà sau đó bạn muốn trang làm mới.
[Biên tập]

<meta http-equiv="refresh" content="0; url=foobar.com/index.html">

Để thực hiện một chuyển hướng đơn giản!
(Cảm ơn @rlb)

<html>, <head>Và <body>thẻ là không bắt buộc. Nếu bạn bỏ qua chúng, chúng sẽ được trình phân tích cú pháp chèn vào những vị trí thích hợp. Đó là hoàn toàn hợp lệ để làm như vậy trong HTML (giống như ngụ ý<tbody> ).

Về lý thuyết, HTML là một ứng dụng SGML. Đây có lẽ là tài liệu HTML 4 hợp lệ ngắn nhất :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/

Phần trên không hoạt động ở bất kỳ đâu ngoại trừ W3C Validator. Tuy nhiên, text/htmltài liệu HTML5 hợp lệ ngắn nhất hoạt động ở mọi nơi:

<!DOCTYPE html><title></title>

Các lang thuộc tính không phải là rất nổi tiếng nhưng rất hữu ích. Thuộc tính được sử dụng để xác định ngôn ngữ của nội dung trong toàn bộ tài liệu hoặc trong một phần tử đơn lẻ. Mã Langage được cung cấp bằng mã Ngôn ngữ 2 chữ cái ISO (tức là 'en' đối với tiếng Anh, 'fr' đối với tiếng Pháp).

Nó hữu ích cho các trình duyệt có thể điều chỉnh việc hiển thị dấu ngoặc kép, v.v. Trình đọc màn hình cũng được hưởng lợi từ lang thuộc tính cũng như các công cụ tìm kiếm.

Sitepoint có một số giải thích hay vềlang thuộc tính này.

Ví dụ

Chỉ định ngôn ngữ là tiếng Anh cho toàn bộ tài liệu, trừ khi bị ghi đè bởi một langthuộc tính khác ở cấp thấp hơn trong DOM.

<html lang="en">

Chỉ định ngôn ngữ trong đoạn văn sau là tiếng Thụy Điển.

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>

Các "! DOCTYPE" tuyên bố . Đừng nghĩ đó là một tính năng ẩn, có vẻ như nó không được nhiều người biết đến nhưng lại rất hữu ích.

ví dụ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">