Course โมดูล 3 - Lecture: แท็ก HTML ยอดนิยม

4.1 a, แท็ก href

เรายังไม่ลืมว่าเรากำลังเตรียมโปรแกรมเมอร์ Java จากคุณ ดังนั้นคุณต้องเรียนรู้แท็ก 5 รายการเท่านั้น

ประการ แรกนี่คือแท็กที่สำคัญที่สุดที่จะเปลี่ยนข้อความเป็นไฮเปอร์เท็กซ์ - ลิงก์ <a>ในการสร้างลิงก์ใน HTML จะใช้แท็ก (จากจุดยึด, จุดยึด)

ลิงค์เริ่มต้นมีลักษณะดังนี้:

<a href="link-address">link text</a>

โดยที่สีน้ำเงินคือข้อความที่ผู้ใช้เห็น และสีเขียวคือที่อยู่ (ลิงก์) ที่เขาจะไปหากคลิกข้อความของลิงก์

เอกสาร HTML ทั่วไปที่มีลิงก์จะมีลักษณะดังนี้:


<html>
    plain text
        <a href="http://codegym.cc/about">
            Link to something interesting
          </a>
     some other text...
</html>

ไม่ มักจะมีลักษณะดังนี้:



<html>
    plain text  <a href="http://codegym.cc/about">Link to something interesting</a> some other text...
</html>

โลกไม่สมบูรณ์แบบ

4.2 แท็ก img และแอตทริบิวต์ src

ในการแทรกรูปภาพลงในหน้า HTML <img>จะใช้แท็ก (จากคำว่ารูปภาพ) นี่เป็นแท็กเดียว ไม่มีแท็กปิด มุมมองทั่วไปของแท็ก:

<img src="image link">

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

4.3 องค์ประกอบตาราง

นอกจากนี้ หน้า HTML ยังสามารถมีตารางที่มีข้อมูล แต่ที่นี่คุณไม่สามารถทำได้ด้วยแท็กเดียว หากคุณลองคิดดู ท้ายที่สุดแล้ว ตารางมีส่วนหัว แถว คอลัมน์ และเซลล์ พวกเขาทั้งหมดมาพร้อมกับแท็กของตัวเอง:

<table>- โต๊ะเอง
<tr>( tสามารถr ow) – ตารางแถว;
<th>( tตารางhส่วนหัว) – เซลล์ส่วนหัวของตาราง;
<td>( ข้อมูลตาราง ) – เซลล์ตาราง

นี่คือลักษณะของตาราง 3 คูณ 3 html(พร้อมแถวส่วนหัวพิเศษ)


<table>
    <tr> <th>Surname</th> <th>Name</th> <th>Surname</th> </tr>
    <tr> <td>Ivanov</td> <td>Ivan</td> <td>Ivanovich</td> </tr>
    <tr> <td>Petrov</td> <td>Peter</td> <td>Peterovich</td> </tr>
    <tr> <td>Sidorov</td> <td>Kolia</td> <td>Sidorenko</td> </tr>
</table>

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

4.4 แอตทริบิวต์รหัสและชื่อ

และอีกสองประเด็นสำคัญคือ the idและnameคุณลักษณะ นี่คือแอตทริบิวต์ ไม่ใช่แท็ก แต่ใช้บ่อยมาก

แอตทริบิวต์idแท็ก ช่วยให้คุณสามารถตั้งชื่อ ที่ไม่ซ้ำใครในเอกสารทั้งหมด สิ่งนี้มีประโยชน์หากมี JavaScript บางส่วนในเอกสาร HTML ที่เปลี่ยนค่าหรือพารามิเตอร์ของแท็กที่กำหนด จากนั้น ด้วยความช่วยเหลือของเอกลักษณ์idคุณสามารถอ้างอิงถึงแท็กที่ต้องการได้อย่างแม่นยำ

แอตทริบิวต์nameทำหน้าที่คล้ายกัน แต่ค่าไม่จำเป็นต้องซ้ำกันภายในเพจ นั่นคือ ตามทฤษฎีแล้ว สามารถมีได้หลายแท็กที่มีชื่อเดียวกัน สิ่งนี้ทำเพื่อให้ทำงานกับกลุ่มองค์ประกอบได้ง่ายขึ้น

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

แท็กใด ๆสามารถมีทั้งแอตทริบิวต์idและ nameตัวอย่าง:


<img id="image123" name="avatar" src="link to picture">