คุณลักษณะที่ซ่อนอยู่ของ HTML

HTML เป็นภาษาที่ใช้กันอย่างแพร่หลายมากที่สุด (อย่างน้อยก็เป็นภาษามาร์กอัป) ไม่ได้รับเครดิตตามกำหนด
เมื่อพิจารณาว่ามีมาหลายปีแล้วสิ่งต่างๆเช่นการควบคุม FORM / INPUT ก็ยังคงเหมือนเดิมโดยไม่มีการเพิ่มการควบคุมใหม่

อย่างน้อยที่สุดจากคุณสมบัติที่มีอยู่คุณรู้จักคุณสมบัติใดบ้างที่ไม่เป็นที่รู้จักแต่มีประโยชน์มาก

แน่นอนว่าคำถามนี้เป็นไปตาม:

คุณลักษณะที่ซ่อนอยู่ของ JavaScript
คุณลักษณะที่ซ่อนอยู่ของ CSS
คุณลักษณะที่ซ่อนอยู่ของ C #
คุณลักษณะที่ซ่อนอยู่ของ VB.NET
คุณลักษณะที่ซ่อนอยู่ของ Java
คุณลักษณะที่
ซ่อนอยู่ของคุณลักษณะที่ซ่อนอยู่ของ ASP.NET แบบคลาสสิกของ ASP.NET
คุณลักษณะที่ซ่อนของ Python
คุณลักษณะที่ซ่อนอยู่ของ TextPad
คุณลักษณะที่ซ่อนของ Eclipse

อย่าพูดถึงคุณลักษณะของ HTML 5.0 เนื่องจากอยู่ในร่างการทำงาน

โปรดระบุหนึ่งคุณลักษณะต่อคำตอบ

ใช้พา ธ สัมบูรณ์ที่ไม่ขึ้นกับโปรโตคอล:

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

หากเบราว์เซอร์กำลังดูเพจใน SSL ผ่าน HTTPS ก็จะร้องขอเนื้อหานั้นด้วยโปรโตคอล https มิฉะนั้นจะขอด้วย HTTP

ซึ่งจะช่วยป้องกันข้อความแสดงข้อผิดพลาด "หน้านี้มีทั้งรายการที่ปลอดภัยและไม่ปลอดภัย" ใน IE ทำให้คำขอเนื้อหาทั้งหมดของคุณอยู่ในโปรโตคอลเดียวกัน

ข้อแม้: เมื่อใช้ใน <link> หรือ @import สำหรับสไตล์ชีต, IE7 และ IE8 ดาวน์โหลดไฟล์สองครั้ง อย่างไรก็ตามการใช้งานอื่น ๆ ทั้งหมดนั้นใช้ได้ดี

แท็กป้ายกำกับเชื่อมโยงป้ายกำกับกับองค์ประกอบฟอร์มโดยใช้แอตทริบิวต์ "for" เบราว์เซอร์ส่วนใหญ่เปลี่ยนเป็นลิงค์ที่เปิดใช้งานองค์ประกอบฟอร์มที่เกี่ยวข้อง

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

contenteditableคุณสมบัติสำหรับการ (IE, Firefox และ 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>

สิ่งนี้จะทำให้เซลล์สามารถแก้ไขได้! เอาเลยลองดูถ้าคุณไม่เชื่อฉัน

ฉันคิดว่าแท็ก optgroupเป็นฟีเจอร์หนึ่งที่คนไม่ได้ใช้บ่อยนัก คนส่วนใหญ่ที่ฉันพูดด้วยมักไม่รู้ว่ามีอยู่จริง

ตัวอย่าง:

<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>

บิตที่ฉันชอบคือแท็กฐานซึ่งเป็นตัวช่วยชีวิตหากคุณต้องการใช้การกำหนดเส้นทางหรือการเขียน URL ใหม่ ...

สมมติว่าคุณอยู่ที่:

www.anypage.com/folder/subfolder/

ต่อไปนี้เป็นรหัสและผลลัพธ์สำหรับลิงก์จากหน้านี้

สมอปกติ:

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

นำไปสู่

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

ตอนนี้ถ้าคุณเพิ่มแท็กฐาน

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

ตอนนี้จุดยึดนำไปสู่:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror เป็นเหตุการณ์ JavaScript ที่จะเริ่มทำงานก่อนที่ภาพกากบาทสีแดงเล็ก ๆ (ใน IE) จะปรากฏขึ้น

คุณสามารถใช้สิ่งนี้เพื่อเขียนสคริปต์ที่จะแทนที่รูปภาพที่เสียด้วยเนื้อหาทางเลือกที่ถูกต้องเพื่อให้ผู้ใช้ไม่ต้องจัดการกับปัญหากาชาด

ในครั้งแรกที่เห็นสิ่งนี้อาจถูกมองว่าไร้ประโยชน์โดยสิ้นเชิงเพราะก่อนหน้านี้คุณไม่รู้ว่าภาพนั้นมีอยู่ตั้งแต่แรกหรือไม่? แต่ถ้าคุณพิจารณามีแอปพลิเคชันที่สมบูรณ์แบบสำหรับสิ่งนี้ ตัวอย่างเช่นสมมติว่าคุณกำลังให้บริการรูปภาพจากทรัพยากรบุคคลที่สามที่คุณไม่ได้ควบคุม เช่นเดียวกับ Gravatar ของเราที่นี่ใน SO ... มันถูกเสิร์ฟจากhttp://www.gravatar.com/ซึ่งเป็นทรัพยากรที่ทีม stackoverflow ไม่ได้ควบคุมเลย - แม้ว่ามันจะเชื่อถือได้ก็ตาม หากhttp://www.gravatar.com/หยุดทำงาน stackoverflow สามารถแก้ปัญหานี้ได้โดยใช้onerror.

<kbd>องค์ประกอบสำหรับการทำเครื่องหมายขึ้นสำหรับการใส่แป้นพิมพ์

Ctrl+ Alt+Del

<blink>

ต้องใช้สำหรับสิ่งที่สำคัญบนไซต์ ไซต์ที่สำคัญที่สุดจะรวมเนื้อหาทั้งหมดไว้ในพริบตา

<marquee>

สร้างเอฟเฟกต์การเลื่อนที่สมจริงเหมาะสำหรับ e-book เป็นต้น

แก้ไข: เพื่อนที่ง่ายขึ้นนี่เป็นเพียงความพยายามในการมีอารมณ์ขัน

ยังไม่เป็นที่รู้จักมากนัก แต่คุณสามารถระบุlowsrcรูปภาพที่จะแสดงlowsrcขณะโหลดsrcรูปภาพได้:

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

นี่เป็นตัวเลือกที่ดีสำหรับผู้ที่ไม่ชอบภาพที่ซ้อนกัน

เรื่องเล็กน้อย: ณ จุดหนึ่งคุณสมบัตินี้มีความคลุมเครือเพียงพอที่จะใช้เพื่อหาประโยชน์จาก Hotmailประมาณปี 2000

DELและINSเพื่อทำเครื่องหมายเนื้อหาที่ถูกลบและแทรก:

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

ปุ่มแท็กเป็นใหม่input submitแท็กและผู้คนจำนวนมากยังคงไม่คุ้นเคยกับมัน ตัวอย่างเช่นข้อความในปุ่มสามารถจัดรูปแบบโดยใช้แท็กปุ่ม

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

จะแสดงปุ่มที่มีสองบรรทัดบรรทัดแรกระบุว่า " คลิก " เป็นตัวหนาและปุ่มที่สองระบุว่า "ฉัน!" ลองมันนี่

ระบุ css สำหรับการพิมพ์

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

<dl> <dt>และ<dd>รายการที่มักจะลืมและพวกเขายืนสำหรับรายชื่อความหมายระยะนิยามและความหมาย

มันทำงานคล้ายกับรายการที่ไม่เรียงลำดับ ( <ul>) แต่แทนที่จะเป็นรายการเดียวมันเหมือนรายการคีย์ / ค่ามากกว่า

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

ไม่ได้ถูกซ่อนไว้อย่างแน่นอน แต่ (และนี่เป็นความผิดของ IE) มีคนไม่มากพอที่จะรู้เกี่ยวกับthead, tbody, tfootสำหรับรสนิยมของฉัน และมีกี่คนที่รู้ว่า tfoot ควรจะปรากฏเหนือ tbody ในมาร์กอัป?

wbrหรือคำแบ่งแท็ก จาก Quirksmode:

(ตัวแบ่งคำ) หมายถึง: "เบราว์เซอร์อาจแทรกตัวแบ่งบรรทัดไว้ที่นี่หากต้องการ" เบราว์เซอร์ไม่คิดว่าการแบ่งบรรทัดจะไม่มีอะไรเกิดขึ้น

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

ฉันให้ตัวเลือกเบราว์เซอร์ในการเพิ่มตัวแบ่งบรรทัด สิ่งนี้ไม่จำเป็นสำหรับความละเอียดที่ใหญ่มากเมื่อโต๊ะมีพื้นที่เหลือเฟือ อย่างไรก็ตามสำหรับความละเอียดที่เล็กกว่าการแบ่งบรรทัดที่วางไว้อย่างมีกลยุทธ์จะป้องกันไม่ให้ตารางขยายใหญ่กว่าหน้าต่างและทำให้แถบเลื่อนแนวนอน

นอกจากนี้ยังมี­เอนทิตี HTML ที่กล่าวถึงในหน้าเดียวกัน สิ่งนี้เหมือนกับwbrแต่เมื่อใส่ตัวแบ่งจะมีการเพิ่มขีดกลาง ( -) เพื่อแสดงถึงการหยุดพัก คล้ายกับวิธีการพิมพ์

ตัวอย่าง:

ข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความข้อความ

คุณลักษณะที่ใช้น้อยมากคือความจริงที่ว่าทุกองค์ประกอบที่ให้เนื้อหาที่มองเห็นได้บนหน้าเว็บสามารถมีแอตทริบิวต์ "title" ได้

การเพิ่มแอตทริบิวต์ดังกล่าวจะทำให้ 'คำแนะนำเครื่องมือ' ปรากฏขึ้นเมื่อเมาส์ถูก 'วางเมาส์เหนือองค์ประกอบ' และสามารถใช้เพื่อให้ข้อมูลที่ไม่จำเป็น แต่มีประโยชน์ในลักษณะที่ไม่ทำให้หน้าเว็บแออัดเกินไป . (หรืออาจเป็นวิธีการเพิ่มข้อมูลไปยังหน้าที่มีคนอยู่แล้ว)

การนำคลาส html / css หลายรายการไปใช้กับแท็กเดียว โพสต์เดียวกันที่นี่

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

เราทุกคนรู้เกี่ยวกับ DTD หรือการประกาศประเภทเอกสาร (สิ่งเหล่านี้ทำให้เพจของคุณล้มเหลวด้วยตัวตรวจสอบ W3C) อย่างไรก็ตามเป็นไปได้ที่จะขยายDTD s โดยการประกาศรายการแอตทริบิวต์สำหรับองค์ประกอบที่กำหนดเอง

ตัวอย่างเช่นตัวตรวจสอบ W3C จะล้มเหลวสำหรับหน้านี้เนื่องจากมีการbehavior="mouseover"เพิ่มลงใน<p>แท็ก อย่างไรก็ตามคุณสามารถทำให้มันผ่านไปได้โดยทำสิ่งนี้:

<!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>
]>

ดูเพิ่มเติมได้ที่เกี่ยวกับDTDs กำหนดเองที่ quirksmode

เราสามารถกำหนดสตริงที่เข้ารหัส 64 ฐานเป็นแอตทริบิวต์ source / href ของรูปภาพ, JavaScript, iframe, link

เช่น

<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>

อ้างอิง

ฉันจะสร้างรูปภาพโดยใช้มาร์กอัป HTML ได้อย่างไร

ไฟล์ไบนารีเป็นตัวเข้ารหัส / ตัวแปล Base64

ฉันเพิ่งค้นพบเกี่ยวกับชุดฟิลด์และแท็กป้ายกำกับ ข้างต้นไม่ซ่อน แต่มีประโยชน์สำหรับแบบฟอร์ม

คำอธิบาย <fieldset>

ตัวอย่าง:

<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>

คุณสามารถใช้objectแท็กแทนiframeเพื่อรวมเอกสารอื่นในหน้า:

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

<optgroup>เป็นสิ่งที่ยอดเยี่ยมที่ผู้คนมักจะพลาดเมื่อทำ<select>รายการแบบ แบ่งกลุ่ม

<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>

คือสิ่งที่คุณควรใช้แทน

<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>

ส่วนใหญ่ยังไม่ทราบว่าคุณสามารถแยกแยะปุ่มแบบฟอร์มที่กดได้โดยเพียงแค่ตั้งชื่อ / คู่ค่า เช่น

<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>

ในฝั่งเซิร์ฟเวอร์ปุ่มจริงที่กดสามารถรับได้โดยเพียงแค่ตรวจสอบการมีอยู่ของพารามิเตอร์คำขอที่เกี่ยวข้องกับชื่อปุ่ม หากไม่เป็นnullเช่นนั้นแสดงว่ากดปุ่มแล้ว

ผมเคยเห็นมากของที่ไม่จำเป็น JS แฮ็ก / การแก้ปัญหาสำหรับที่เช่นการเปลี่ยนแปลงการดำเนินการรูปแบบหรือเปลี่ยนค่าการป้อนข้อมูลที่ซ่อนอยู่ก่อนขึ้นอยู่กับการกดปุ่ม มันน่าประหลาดใจมาก

นอกจากนี้ฉันเคยเห็นการแฮ็ก JS / วิธีแก้ปัญหาเกือบทั้งหมดเพื่อรวบรวมช่องทำเครื่องหมายหลายช่องเช่นในแถวตาราง ในการเลือก / ตรวจสอบทุกแถวของตาราง JS จะเพิ่มดัชนีแถวให้กับค่าที่คั่นด้วยเครื่องหมายจุลภาคในองค์ประกอบอินพุตที่ซ่อนอยู่ซึ่งจะถูกแยก / แยกวิเคราะห์เพิ่มเติมในฝั่งเซิร์ฟเวอร์ นั่นเป็นผลมาจากความไม่ทราบว่าคุณสามารถให้องค์ประกอบอินพุตหลายรายการในชื่อเดียวกันแต่เป็นค่าที่แตกต่างกันและคุณยังสามารถเข้าถึงได้เป็นอาร์เรย์ในฝั่งเซิร์ฟเวอร์ เช่น

<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>
...

การไม่ทราบจะทำให้ช่องทำเครื่องหมายแต่ละช่องมีชื่อต่างกันและละเว้นแอตทริบิวต์ค่าทั้งหมด ในบางสถานการณ์ที่ไม่ต้องใช้ JS-hack / วิธีแก้ปัญหาฉันได้เห็นเวทมนตร์ที่ครอบงำโดยไม่จำเป็นในโค้ดฝั่งเซิร์ฟเวอร์เพื่อแยกแยะรายการที่เลือก

แท็ก COLGROUP

<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>

หากไม่ได้ระบุforแอตทริบิวต์ของ<label>แท็กแท็กนั้นจะถูกกำหนดโดยปริยายเป็นลูกคนแรก<input>เช่น

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

เทียบเท่ากับ

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

ปุ่มเป็นลิงค์ไม่มี JavaScript :

คุณสามารถใส่ไฟล์ประเภทใดก็ได้ในการดำเนินการแบบฟอร์มและคุณมีปุ่มที่ทำหน้าที่เป็นลิงก์ ไม่จำเป็นต้องใช้เหตุการณ์ onclick หรือเช่นนั้น คุณยังสามารถเปิดไฟล์ในหน้าต่างใหม่ได้ด้วยการติด "เป้าหมาย" ในแบบฟอร์ม ฉันไม่เห็นเทคนิคนั้นในการใช้งานมากนัก

แทนที่สิ่งนี้

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

ด้วยสิ่งนี้:

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

วิธีที่ง่ายที่สุดในการรีเฟรชหน้าใน X วินาที - META Refresh

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

ค่าในเนื้อหาหมายถึงวินาทีหลังจากนั้นคุณต้องการให้รีเฟรชเพจ
[แก้ไข]

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

ทำการเปลี่ยนเส้นทางง่ายๆ!
(ขอบคุณ @rlb)

<html>, <head>และ<body>แท็กเป็นตัวเลือก หากคุณละเว้นพวกเขาจะถูกแทรกโดยเงียบโดยโปรแกรมแยกวิเคราะห์ในตำแหน่งที่เหมาะสม มันเป็นเรื่องที่ถูกต้องสมบูรณ์ที่จะทำในรูปแบบ HTML (เช่นเดียวกับนัย<tbody>)

HTML ในทางทฤษฎีคือแอปพลิเคชัน SGML นี่อาจเป็นเอกสาร HTML 4 ที่สั้นที่สุดที่ถูกต้อง :

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

ข้างต้นใช้ไม่ได้ทุกที่ยกเว้น W3C Validator อย่างไรก็ตามtext/htmlเอกสารHTML5 ที่สั้นที่สุดสามารถใช้ได้ทุกที่:

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

langแอตทริบิวต์ไม่ได้เป็นที่รู้จักกันเป็นอย่างดี แต่มีประโยชน์มาก แอตทริบิวต์นี้ใช้เพื่อระบุภาษาของเนื้อหาในเอกสารทั้งหมดหรือในองค์ประกอบเดียว รหัส Langage มีให้ในรหัสภาษา ISO 2 ตัวอักษร (เช่น 'en' สำหรับภาษาอังกฤษ 'fr' สำหรับภาษาฝรั่งเศส)

เป็นประโยชน์สำหรับเบราว์เซอร์ที่สามารถปรับการแสดงเครื่องหมายคำพูด ฯลฯ โปรแกรมอ่านหน้าจอยังได้รับประโยชน์จากlang แอตทริบิวต์เช่นเดียวกับเครื่องมือค้นหา

Sitepoint มีคำอธิบายที่ดีเกี่ยวกับlangแอตทริบิวต์

ตัวอย่าง

ระบุภาษาที่จะเป็นภาษาอังกฤษสำหรับทั้งเอกสารเว้นแต่จะถูกแทนที่โดยlangแอตทริบิวต์อื่นในระดับที่ต่ำกว่าใน DOM

<html lang="en">

ระบุภาษาในย่อหน้าต่อไปนี้เป็นภาษาสวีเดน

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

"! DOCTYPE" ประกาศ อย่าคิดว่าเป็นคุณสมบัติที่ซ่อนอยู่ แต่ดูเหมือนว่าจะไม่เป็นที่รู้จัก แต่มีประโยชน์มาก

เช่น

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