Articles
แนะนำ HTML
แท็กที่เกี่ยวข้องกับการแสดงโค้ด, การอ้างอิง และรายการ

แท็กที่เกี่ยวข้องกับการแสดงโค้ด, การอ้างอิง และรายการ

บทความนี้อธิบายแท็กที่เกี่ยวข้องกับการแสดงโค้ด, การอ้างอิง และรายการ

นี่อธิบายวิธีการเขียนซอร์สโค้ด คำคม คำอธิบายประกอบ และรายการใน HTML

YouTube Video

แท็กที่เกี่ยวข้องกับการแสดงโค้ด

แท็ก <code>

Inline code example: let x = 10; 
1Inline code example: <code>let x = 10;</code>
  • แท็ก <code> เป็นองค์ประกอบแบบอินไลน์ที่ใช้ระบุซอร์สโค้ดหรือส่วนหนึ่งของโปรแกรมในเอกสาร HTML
  • โดยค่าเริ่มต้นจะแสดงด้วยฟอนต์แบบโมโนสเปซเพื่อเพิ่มความสามารถในการอ่านโค้ด

แท็ก <pre> 

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>
  • แท็ก <pre> ใช้เพื่อแสดงข้อความในรูปแบบเดิมภายในเอกสาร HTML การใช้แท็กนี้จะคงช่องว่างและการขึ้นบรรทัดใหม่ในข้อความไว้ ซึ่งช่วยรักษารูปแบบเดิมของข้อความ แท็กนี้ส่วนใหญ่ใช้สำหรับแสดงเนื้อหาที่ต้องรักษารูปแบบ เช่น ซอร์สโค้ด บทกวี หรือศิลปะจากข้อความ
    function hello() {
        console.log("Hello, world!");
    }
    
1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>
  • ในแท็ก <pre> ระยะห่างจะถูกเก็บรักษาไว้ ดังนั้นหากมีระยะห่างก่อนแท็กปิด จะมีบรรทัดว่างปรากฏที่ปลายซึ่งเป็นตัวอย่างของสิ่งนี้

แท็ก <samp>

Sample system output: Error: Invalid input. 
1Sample system output: <samp>Error: Invalid input.</samp>
  • แท็ก <samp> เป็นแท็ก HTML ที่ใช้แทนผลลัพธ์ของโปรแกรมคอมพิวเตอร์ ใช้เพื่อบ่งชี้ผลลัพธ์หรือข้อความจากโปรแกรมหรือระบบ

แท็ก <kbd>

Keyboard input example: Ctrl + C 
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>
  • แท็ก <kbd> เป็นแท็ก HTML ที่ใช้แทนการป้อนข้อมูลของผู้ใช้ ใช้แทนการป้อนข้อมูลจากแป้นพิมพ์หรือคำสั่ง เช่น คีย์ลัด

แท็ก <var>

Variable example: x = 5; 
1Variable example: <var>x</var> = 5;
  • แท็ก <var> ใช้เพื่อแทนตัวแปรในโปรแกรมหรือสมการ ใช้เน้นชื่อของตัวแปรหรือตัวแปรในสูตรคณิตศาสตร์

แท็กที่ใช้สำหรับการอ้างอิง ฯลฯ

แท็ก <blockquote>

This is a blockquote for longer quotations. 
1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>
  • แท็ก <blockquote> ใช้เพื่อแสดงการอ้างอิงข้อความยาวหรือข้อความจากแหล่งอื่น และจะแสดงในระดับบล็อก

แท็ก <q>

This is a short quote: Short quote example. 
1This is a short quote: <q>Short quote example.</q>
  • แท็ก <q> เป็นองค์ประกอบแบบอินไลน์ที่ใช้แทนการอ้างอิงข้อความสั้น แท็กนี้สามารถใช้ในการทำเครื่องหมายส่วนของข้อความหรือประโยคเป็นคำอ้างอิง ข้อความที่อยู่ในแท็ก <q> จะแสดงด้วยเครื่องหมายคำพูดตามปกติ แท็ก <q> สามารถซ้อนได้ ในกรณีนี้ ปกติจะใช้เครื่องหมายคำพูดประเภทต่าง ๆ สำหรับคำอ้างอิงที่อยู่ภายใน

แท็ก <cite>

Reference to a book: The Great Gatsby 
1Reference to a book: <cite>The Great Gatsby</cite>
  • แท็ก <cite> เป็นองค์ประกอบแบบอินไลน์ที่ใช้ระบุแหล่งข้อมูลของการอ้างอิงหรือคำอ้างอิง โดยหลักแล้วใช้เพื่อระบุแหล่งที่มาของผลงาน เช่น ชื่อผลงาน บทความ เอกสาร หน้าเว็บ หรือหนังสือ

แท็ก <address>

123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>
  • แท็ก <address> ใช้เพื่อแสดงข้อมูลติดต่อที่เกี่ยวข้องกับผู้เขียนหรือเจ้าของเอกสารหรือส่วนต่างๆ แท็กนี้มักจะมีที่อยู่อีเมล หมายเลขโทรศัพท์ ที่อยู่ทางกายภาพ และข้อมูลที่คล้ายกัน

แท็ก <time> 

1<time datetime="2024-12-04">December 4, 2024</time>
  • แท็ก <time> ใช้เพื่อแสดงจุดเวลาเฉพาะ ช่วงเวลา หรือเวลาที่เกิดขึ้นซ้ำ แท็กนี้สามารถรวมวันที่และเวลาเพื่อให้ความหมายเชิงความหมายกับเอกสาร

แท็ก <data>

Current Year 
1<data value="2024">Current Year</data>
  • แท็ก <data> ใช้เพื่อเชื่อมโยงเนื้อหาที่มนุษย์สามารถอ่านได้กับค่าเชิงเครื่องที่สามารถตีความได้ แท็กนี้มีประโยชน์สำหรับการจัดระเบียบข้อมูลในรูปแบบที่โปรแกรมสามารถประมวลผลได้ง่าย

แท็ก <details> และ <summary>

More information

Here is some additional content.

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>
  • แท็ก <details> สร้างวิดเจ็ตที่สามารถย่อและขยายได้ โดยการใช้ร่วมกับแท็ก <summary> คุณสามารถตั้งค่าพื้นที่ที่คลิกได้เพื่อเปิดเผยรายละเอียดเพิ่มเติม ซึ่งมักใช้สำหรับการแสดงผลแบบโต้ตอบเช่น 'อ่านเพิ่มเติม'

แท็กที่ใช้สำหรับการแสดงรายการ

แท็ก <ul>

  • Item 1
  • Item 2
  • Item 3
1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>
  • นี่คือแท็กที่ใช้สร้างรายการแบบไม่มีลำดับ แต่ละรายการในรายการจะถูกกำหนดด้วยแท็ก <li> ตามค่าเริ่มต้น จะมีจุดสีดำแสดงอยู่หน้ารายการแต่ละรายการ

แท็ก <ol>

  1. Step 1
  2. Step 2
  3. Step 3
1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>
  • แท็กนี้ใช้เพื่อสร้างรายการแบบมีลำดับ แต่ละรายการในรายการจะถูกกำหนดด้วยแท็ก <li> ตามค่าเริ่มต้น จะมีตัวเลขแสดงเพื่อระบุลำดับของรายการ

แท็ก <dl>

Term 1
Definition of Term 1
Term 2
Definition of Term 2
1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>
  • แท็กนี้ใช้เพื่อสร้างรายการคู่ที่ประกอบด้วยคำศัพท์และคำจำกัดความ หรือชื่อและรายละเอียด รายการจะถูกกำหนดด้วยแท็ก <dt> และ <dd> คำศัพท์หรือชื่อจะถูกเขียนในแท็ก <dt> และคำจำกัดความหรือคำอธิบายจะถูกเขียนในแท็ก <dd>

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

แท็กที่เกี่ยวข้องกับข้อความแท็กที่เกี่ยวกับตาราง