เรียนรู้วิธีใช้ HTML <head> องค์ประกอบบนเว็บไซต์ของคุณ
HTML <head> องค์ประกอบคือที่เก็บสำหรับข้อมูลเมตา (ข้อมูล) เกี่ยวกับหน้าเว็บของคุณ เช่น ชื่อหน้า สไตล์ และสคริปต์
เนื้อหาภายใน <head> องค์ประกอบคือ เป็นหลัก อ่านและประมวลผลโดยเครื่อง (เช่น เบราว์เซอร์) ไม่ใช่โดยผู้เยี่ยมชมเว็บไซต์ของคุณ
<head> องค์ประกอบไม่ควรสับสนกับ <header> องค์ประกอบซึ่งมีจุดประสงค์ที่แตกต่างกัน
<head> องค์ประกอบถูกวางไว้ใต้การเปิด <html> และก่อนเปิด <body> แท็ก:
<!DOCTYPE html>
<html>
<head>
<!-- Contains Metadata primarily for machine processing -->
</head>
<body></body>
</html>
องค์ประกอบ HTML ต่อไปนี้สามารถใส่ใน <head> องค์ประกอบ:
</li> <li><link></li> <li><style></li> <li><code><meta></code> </li> <li><script></li> <li><code><base></code> </li> <li><noscript></li> </ul> <h2 id="examples" style="position:relative;">ตัวอย่าง</h2> <p> มาดูตัวอย่างการใช้ <code><head></code> . กัน องค์ประกอบที่มีองค์ประกอบข้อมูลเมตาที่ใช้กันทั่วไปอยู่ภายใน</P> <h3 id="the-title-element" style="position:relative;">องค์ประกอบ <title></h3> <p> <code><title></code> องค์ประกอบกำหนดชื่อเอกสาร HTML ของคุณ ซึ่งจะแสดงในแท็บหน้าเบราว์เซอร์:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> </head> <body></body> </html></code></pre> <p> หากคุณเลื่อนเมาส์ไปที่แท็บหน้าของเว็บไซต์ใดๆ และกดค้างไว้สักครู่ คุณจะเห็นป๊อปอัปขนาดเล็กแสดงชื่อหน้าทั้งหมด</P> <h3 id="the-style-element" style="position:relative;">องค์ประกอบ <style></h3> <p> <code><style></code> องค์ประกอบมีข้อมูลการจัดรูปแบบสำหรับเอกสาร HTML ของคุณ (การพิมพ์ การเว้นวรรค สี ภาพเคลื่อนไหว ฯลฯ) ที่เขียนด้วย CSS:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <style type="text/css"> body { background-color: red; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body></body> </html></code></pre> <h3 id="the-link-element" style="position:relative;">องค์ประกอบ <link></h3> <p> วิธีที่ทันสมัยกว่าในการใช้สไตล์กับเอกสาร HTML คือการนำเข้าสไตล์ชีต CSS ภายนอกด้วย <code><link></code> องค์ประกอบ:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html></code></pre> <p> นานาน่ารู้:ถ้าคุณใช้ทั้ง <code><style></code> และ <code><link></code> องค์ประกอบในเอกสารเดียวกัน สไตล์จะถูกนำไปใช้ในลำดับที่คุณรวมไว้ในเอกสารของคุณ CSS cascades ดังนั้นอะไรก็ตามที่อยู่หลังสุด (จากบนลงล่าง) จะแทนที่สไตล์ก่อนหน้า ถ้าพวกมันระบุองค์ประกอบ HTML เดียวกัน</P> <h3 id="the-script-element" style="position:relative;">องค์ประกอบ <script></h3> <p> <code><script></code> องค์ประกอบใช้เพื่อรัน JavaScript ในสองวิธีที่แตกต่างกัน:</P> <ol> <li>โดยการฝังโค้ด JavaScript ลงในเอกสารของคุณโดยตรง (เช่นที่คุณเห็นใน <code><style></code> องค์ประกอบ).</li> <li>โดยการนำเข้าไฟล์สคริปต์ JavaScript ภายนอกผ่าน <code>src</code> แอตทริบิวต์</li> </ol> <p> ฝังโค้ด JavaScript โดยตรงในเอกสารของคุณ:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <script> // Make background color red document.body.style.backgroundColor = "red" </script> </head> <body></body> </html></code></pre> <p> นำเข้าไฟล์ JavaScript ภายนอก:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <script src="/scripts/main.js"></script> </head> <body></body> </html></code></pre> <br> </article> <div class="ad ad5"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4480737146802772" crossorigin="anonymous"></script><!-- computer.wsxdn --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4480737146802772" data-ad-slot="4467655591" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <section id="turn-page" class="t-over"> <div class="f-start f-align"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkPrevArticle' href='https://th.wsxdn.com/db044w/zx451s/1004054549.html' >วิธีหลีกเลี่ยงอักขระ HTML </a> </div> <div class="f-start f-align"> <i><img loading='lazy' src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkNextArticle' href='https://th.wsxdn.com/db044w/zx451s/1004054551.html' >วิธีใช้ HTML <script> Element </a> </div> </section> <section class="box1-3"> <ol class="f-between"> <li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004054544.html" class="title"> <p class="r-over r-over-2" title="วิธีใช้ HTML <noscript> Element "> วิธีใช้ HTML <noscript> Element </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004054553.html" class="title"> <p class="r-over r-over-2" title="วิธีใช้ HTML <title> Element "> วิธีใช้ HTML <title> Element </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004063875.html" class="title"> <p class="r-over r-over-2" title="จะใช้แอตทริบิวต์ที่จำเป็นใน HTML ได้อย่างไร? "> จะใช้แอตทริบิวต์ที่จำเป็นใน HTML ได้อย่างไร? </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004064182.html" class="title"> <p class="r-over r-over-2" title="จะเพิ่มมูลค่าขององค์ประกอบใน HTML ได้อย่างไร? "> จะเพิ่มมูลค่าขององค์ประกอบใน HTML ได้อย่างไร? </p> </a> </div> </li> </ol> </section> </section> <aside class="box-r"> <section class="box4-1"> <strong> HTML </strong> <ol> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004054537.html" title="วิธีใช้ HTML <figcaption> Element "> <p class="r-over r-over-2">วิธีใช้ HTML <figcaption> Element </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004054539.html" title="วิธีใช้ HTML Defer Attribute "> <p class="r-over r-over-2">วิธีใช้ HTML Defer Attribute </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004054540.html" title="วิธีใช้แอตทริบิวต์เป้าหมาย HTML "> <p class="r-over r-over-2">วิธีใช้แอตทริบิวต์เป้าหมาย HTML </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004054542.html" title="วิธีใช้ HTML <meta> Element "> <p class="r-over r-over-2">วิธีใช้ HTML <meta> Element </p> </a> </li> <li class="f-start"> <i> <img loading='lazy' src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004054545.html" title="วิธีใช้รายการ HTML (<ul>, <ol>, <dl>) "> <p class="r-over r-over-2">วิธีใช้รายการ HTML (<ul>, <ol>, <dl>) </p> </a> </li> </ol> </section> <ul> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004054559.html" class="i-text"><p class="r-over r-over-3">วิธีใช้ HTML <main> Element </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004054560.html" class="i-text"><p class="r-over r-over-3">วิธีใช้ HTML <div> Element </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004063834.html" class="i-text"><p class="r-over r-over-3">จะใช้แท็ก <output> ใน HTML ได้อย่างไร? </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004064014.html" class="i-text"><p class="r-over r-over-3">จะเพิ่มความสูงขององค์ประกอบใน HTML ได้อย่างไร? </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004064127.html" class="i-text"><p class="r-over r-over-3">จะตั้งชื่อองค์ประกอบใน HTML ได้อย่างไร? </p></a> </li> </ul> <ul class="types f-between"> <li><a class='childclass' href='https://th.wsxdn.com/db044w/hf444z/' target="_self">การเขียนโปรแกรม C</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/bz445u/' target="_self">C++</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/tr446l/' target="_self">Redis</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/rp447j/' target="_self">การเขียนโปรแกรม BASH</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/wu448o/' target="_self">Python</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/nl449f/' target="_self">Java</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ig450a/' target="_self">ฐานข้อมูล</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/zx451s/' target="_self">HTML</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ec452w/' target="_self">Javascript</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/db453v/' target="_self">การเขียนโปรแกรม</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/if454a/' target="_self">CSS</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ge455y/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/xv456p/' target="_self">SQL</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/jh457b/' target="_self">IOS</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/om458g/' target="_self">Android</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/mk459f/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/rp460j/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/qn461i/' target="_self">C#</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/jh465b/' target="_self">PHP</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/kh471c/' target="_self">SQL Server</a></li> </ul> </aside> </section> <footer> <section class="msg f-center container"> <span class="f-start"> ลิขสิทธิ์ © <a href="https://th.wsxdn.com">https://th.wsxdn.com</a> สงวนลิขสิทธิ์ </span> </section> </footer> </body> </html>