html (Hyper Text Markup Language) ภาษาไฮเปอร์เท็กซ์มาร์กอัป ผู้ประดิษฐ์: Tim Berners-leehtml กำหนดเนื้อหาและโครงสร้างของหน้าเว็บเป็นหลัก html เป็นภาษาสำหรับเขียนเว็บเพจ HTML สามารถทำงานบนเบราว์เซอร์เท่านั้น เทคโนโลยีเว็บเพจประกอบด้วย: html (การเขียนโครงสร้างเว็บเพจ คล้ายกับโครงกระดูกมนุษย์), css (สไตล์ชีทแบบเรียงซ้อน, การเขียนสไตล์เว็บเพจ, คล้ายกับผิวหนังมนุษย์), JavaScript (การเขียนเว็บเพจแบบพิเศษ) เอฟเฟกต์และการโต้ตอบ) ฟังก์ชั่นคล้ายกับทักษะของมนุษย์ (การกระทำ) เบราว์เซอร์ที่ใช้กันทั่วไปคือ Google Chrome และ Firefox แนะนำให้ใช้ Google Chrome เปิดเบราว์เซอร์ F12 หรือคลิกขวา -> เลือกเพื่อเปิดเครื่องมือการพัฒนา (เครื่องมือ dev)
ดูหน้าเว็บผ่านโค้ด html
ตรวจสอบระยะขอบเฉพาะขององค์ประกอบผ่านการคำนวณ
โครงสร้างไดเรกทอรีพื้นฐานของเว็บไซต์: สร้างโฟลเดอร์เว็บไซต์ใหม่ -> สร้างไดเรกทอรี css, js, imgs และเขียนไฟล์หน้าเว็บภายใน w3school: https://www.w3school.com.cn/ tags/tag_wbr.asp คุณสามารถค้นหาแท็ก html คุณลักษณะและการใช้งานทั้งหมดได้ สามารถใช้เป็นคู่มืออ้างอิงสำหรับ html ได้
สร้างไฟล์ .html ซึ่งเป็นไฟล์หน้าเว็บ คลิกขวา -> สร้างเอกสารข้อความ -> เปลี่ยนส่วนต่อท้ายเป็น .html
คลิกขวา -> เปิดไฟล์ใน Notepad
. <!DOCTYPE html> ประกาศเวอร์ชันของ html5.0
<head></head> ส่วนหัวของหน้าเว็บ (เข้าใจได้เหมือนศีรษะมนุษย์)
<body>สวัสดี html!</body> พื้นที่ที่มองเห็นได้ของหน้าเว็บ (เช่น ร่างกายมนุษย์ เสื้อผ้าที่สวมใส่ สิ่งที่คนอื่นมองเห็น)</html> ส่วนท้ายของหน้าเว็บ
แท็ก HTML จะต้องเขียนโดยตรงใน <> แท็กที่อยู่ภายใน <> เรียกว่าแท็ก (แท็ก) แท็กที่มี / เรียกว่าแท็กปิด (เรียกว่าแท็กปิดท้าย html) และแท็กที่ไม่มี / เรียกว่าแท็กเริ่มต้น HTML ประกอบด้วยแท็กจำนวนมากที่มีฟังก์ชันที่แตกต่างกัน แท็กเริ่มต้นและแท็กสิ้นสุดสามารถรวมแท็กอื่นๆ ได้โดยตรง หลังจากเขียนโค้ดแล้ว คุณต้องกด Ctrl+s เพื่อบันทึกโค้ด เบราว์เซอร์ในประเทศส่วนใหญ่จะแสดง UTF-8 ตามค่าเริ่มต้น แต่เบราว์เซอร์บางตัวอาจไม่จำเป็นต้องแสดงการเข้ารหัส UTF-8 ตามค่าเริ่มต้น Notepad จะบันทึกเป็น UTF-8 ตามค่าเริ่มต้น หากหน้าเว็บแสดงโดยไม่มีการเข้ารหัส UTF-8 อักขระที่อ่านไม่ออกจะปรากฏขึ้น
แท็ก: แท็กเป็นหน่วยพื้นฐานของภาษา HTML ประกอบด้วย <> และคำภาษาอังกฤษอยู่ข้างใน แท็กปิด: ประกอบด้วยแท็กเริ่มต้น <ชื่อแท็ก> และแท็กปิดซึ่งปรากฏเป็นคู่ แท็กส่วนใหญ่ใน html จะเป็นแท็กปิด แท็กปิดตัวเอง: เริ่มต้นและลงท้ายด้วย <> เวอร์ชัน html4 ไม่จำเป็นต้องเพิ่ม / และข้อกำหนด html5 จำเป็นต้องเพิ่ม / (โดยทั่วไปคือ: meta, hr, link, br, input, img) การซ้อน: แท็กปิดของ html สามารถซ้อนกันได้และซ้อนได้ไม่จำกัด เช่นเดียวกับต้นไม้ โครงสร้างนี้เรียกว่าโครงสร้างต้นไม้ เพื่อแสดงถึงโครงสร้างนี้ โดยทั่วไปป้ายกำกับจะมีบรรทัดด้วยตัวมันเอง และจำเป็นต้องมีการเยื้อง (คีย์แท็บ 8 บรรทัดใหม่) เพื่อแสดงโครงสร้างแบบลำดับชั้น คุณลักษณะ: คำหลังช่องว่างในชื่อแท็กมักจะมี = หรืออาจไม่มีเครื่องหมายเท่ากับ คุณลักษณะที่แตกต่างกันอาจทำให้แท็กแสดงผลหรือฟังก์ชันต่างกันได้ คุณลักษณะส่วนกลาง: แท็ก html ส่วนใหญ่สามารถใช้แอตทริบิวต์ชื่อได้ การเลื่อนเมาส์ไปเหนือแท็กจะแสดงเนื้อหาพร้อมท์ เช่น:
<h2 title="สวัสดี h2">ชื่อ h2</h2>
แอตทริบิวต์ส่วนตัว: องค์ประกอบแอตทริบิวต์เฉพาะแท็ก: เนื้อหาที่ล้อมรอบด้วยแท็กเริ่มต้นและแท็กปิด รวมถึงแท็กเริ่มต้นและแท็กสิ้นสุด เนื้อหาองค์ประกอบ: เนื้อหาที่ล้อมรอบด้วยแท็กเปิดและแท็กปิด
8.
องค์ประกอบระดับบล็อก: องค์ประกอบที่ใช้หนึ่งบรรทัด แม้ว่าเนื้อหาจะไม่เต็มความกว้างของหน้าเว็บ แต่ก็จะครอบครองทั้งบรรทัด ——》h1-h6,p,blockquote องค์ประกอบอินไลน์ (องค์ประกอบอินไลน์): พวกมันจะไม่ครอบครองบรรทัดเดียว ขนาดจะถูกคำนวณโดยอัตโนมัติและขึ้นอยู่กับความกว้างและความสูงของเนื้อหา——》span,strong, i,em,b, cite, q, code, markhtml กฎการขึ้นบรรทัดใหม่: html มีชุดกฎการประมวลผลของตัวเอง ช่องว่างและตัวแบ่งบรรทัดที่จุดเริ่มต้นและจุดสิ้นสุดของเนื้อหาแท็กจะถูกละเว้น และช่องว่างและตัวแบ่งบรรทัดระหว่างเนื้อหาจะถูกประมวลผลเป็น 1 ช่องว่าง
ภาษามาร์กอัป HTML ประกอบด้วยแท็กจำนวนมาก และแท็กต่างๆ ก็มีสไตล์และฟังก์ชันที่แตกต่างกัน
<h1>h1</h1>
แท็กชื่อ h1-h6 แบบอักษรจะเรียงลำดับจากใหญ่ไปเล็ก และแบบอักษรจะมีเอฟเฟกต์ตัวหนา
align แอตทริบิวต์: ตั้งค่าการจัดตำแหน่งข้อความค่าแอตทริบิวต์เป็นซ้าย, กึ่งกลางและขวา ค่าเริ่มต้นคือการจัดชิดซ้าย ซึ่งสามารถละเว้นได้
<p></p>: แท็ก p, แท็กย่อหน้า, แท็ก p มาพร้อมกับระยะขอบ 16px ที่ด้านบนและด้านล่าง
<hr />: แสดงเส้นแนวนอน
<span></span> ไม่มีสไตล์เริ่มต้นใดๆ และส่วนใหญ่จะใช้สำหรับสไตล์ CSS
<br />: แท็กตัวแบ่งบรรทัด เนื้อหาหลังจาก br จะแสดงเป็นบรรทัดใหม่โดยไม่มีระยะขอบ
ข้อความที่อยู่ในแท็ก <b></b> b จะแสดงเป็นตัวหนาโดยไม่มีความหมายใดๆ แท็กเวอร์ชัน HTML4
<strong></strong> เน้นความหมาย และข้อความที่ตัดจะเป็นตัวหนา เพิ่มแท็กใหม่ในเวอร์ชัน html5
<i></i> ไม่มีความหมายเชิงความหมาย มีแต่ตัวเอียง แท็ก html4
<em></em> เน้นความหมาย และข้อความที่ตัดจะแสดงเป็นตัวเอียง h5 เพิ่มขึ้น
<sup>2</sup>: ตัวยก ข้อความแพ็กเกจจะแสดงที่ด้านบน
ตัวห้อย <sub>2</sub> ข้อความที่ตัดจะถูกแสดงให้เล็กลง
<blockquote></blockquote> แสดงถึงข้อความที่ยกมา (เช่น คำพูดที่มีชื่อเสียง) โดยมีระยะขอบเริ่มต้น
<cite></cite>เนื้อหาที่ยกมามาจากที่ไหนสักแห่งหรือบางคน
<q></q> แสดงถึงข้อมูลอ้างอิง และเนื้อหาล้อมรอบด้วย ""
<code></code> ระบุว่าเนื้อหาเป็นส่วนหนึ่งของโค้ด ซึ่งแสดงในรูปแบบแบบอักษรที่มีความกว้างคงที่
<code></code> ระบุว่าเนื้อหาเป็นส่วนหนึ่งของโค้ด ซึ่งแสดงในรูปแบบแบบอักษรที่มีความกว้างคงที่
<mark></mark> ทำเครื่องหมายเนื้อหาที่มีพื้นหลังสีเหลือง
<pre></pre> สามารถเก็บตัวแบ่งบรรทัดและสัญลักษณ์ช่องว่างได้ แต่เป็นการยากที่จะควบคุมเอฟเฟกต์การแสดงผลของหน้าเว็บ โดยทั่วไปจะไม่ถูกใช้เว้นแต่จะมีความต้องการพิเศษ
สัญลักษณ์ครึ่งความกว้าง ความกว้างของตัวอักษรภาษาอังกฤษหนึ่งตัว ความกว้างของตัวอักษรจีนครึ่งหนึ่ง
สัญลักษณ์เต็มความกว้าง กว้าง 2 ตัวอักษร กว้าง 1 ตัวอักษร
<small></small> แบบอักษรมีขนาดเล็กกว่าเนื้อหาชื่อเรื่องหนึ่งขนาด เอฟเฟกต์เริ่มต้นจะมีผลในแท็ก h h5 การเพิ่มใหม่
<time></time> หมายถึงเวลา และข้อความวันที่ล้อมรอบด้วยแท็กนี้ - "แอตทริบิวต์ datetime: ไม่บังคับ คุณสามารถกำหนดวันที่เฉพาะเพื่ออำนวยความสะดวกในการรวบรวมข้อมูลของเครื่องมือค้นหา
<data value="100">100 หยวน</data> ใช้สำหรับข้อความข้อมูล -> แอตทริบิวต์ค่า: ไม่จำเป็น คุณสามารถตั้งค่าเพื่ออำนวยความสะดวกในการรวบรวมข้อมูลของเครื่องมือค้นหา
<address></address> ใช้สำหรับข้อความที่อยู่ โดยค่าเริ่มต้นจะเป็นตัวเอียง
<del>190.00</del> หมายถึงเนื้อหาที่ถูกลบ และข้อความจะมีเส้นแนวนอน
<ins>ลด 7.9%</ins> หมายถึงเนื้อหาที่แทรก และข้อความจะถูกขีดเส้นใต้
<abbr title="">HTML</abbr> ใช้สำหรับข้อความคำศัพท์ทางวิชาชีพ - "เนื้อหาของแอตทริบิวต์ title สามารถใช้เป็นคำอธิบายของคำศัพท์ได้
<!-- ฉันเป็นเนื้อหาความคิดเห็น --> เนื้อหาความคิดเห็นเป็นอินเทอร์เฟซที่เบราว์เซอร์จะไม่แสดงผล และมีไว้สำหรับโปรแกรมเมอร์เป็นหลัก ปุ่มลัดความคิดเห็นใน vscode คือ ctrl+/
ดาวน์โหลดที่อยู่: http://vscode.bianjiqi.net/
ติดตั้งแพ็คเกจจีน
ปลั๊กอินที่ใช้กันทั่วไป
ตัวอย่าง HTML แจ้งรหัส html
แท็กเปลี่ยนชื่ออัตโนมัติจะปิดแท็กโดยอัตโนมัติและแก้ไขแท็กพร้อมกัน
HTML CSS รองรับชื่อคลาส CSS และชื่อรหัสอัจฉริยะ
เปิดในเบราว์เซอร์ ไฟล์ html ปัจจุบันสามารถเปิดได้ด้วยเบราว์เซอร์
Live Server สร้างเซิร์ฟเวอร์ท้องถิ่นเพื่อเปิดไฟล์
shift+! เลือกอันแรกเพื่อสร้างโครงสร้างพื้นฐานของหน้าเว็บอย่างรวดเร็ว
<div></div> มีสไตล์และความหมายตามค่าเริ่มต้น ซึ่งระบุพื้นที่ระดับบล็อก ซึ่งเป็นพื้นที่เค้าโครงหน้าเว็บหลัก
<header></header> แสดงถึงส่วนหัวของหน้าเว็บหรือบทความ สามารถใช้ในสถานการณ์ต่างๆ ได้ ตัวอย่างเช่น ในบทความ จะแสดงส่วนหัวของบทความ โดยทั่วไปแล้ว ยังคงแสดงถึงส่วนหัวของหน้าเว็บ
<main></main> หมายถึงเนื้อหาธีมของหน้าเว็บ หน้าเว็บจะมีเนื้อหาหลักเพียงรายการเดียว
<section></section> แสดงถึงธีมอิสระเป็นหลักและสามารถแทนที่องค์ประกอบ div ได้
<aside></aside> สามารถแสดงแถบด้านข้างของหน้าเว็บได้ หากอยู่ในระดับไฟล์ จะแสดงความคิดเห็นของบทความ
<article></article> หมายถึงบทความหรือโพสต์ ซึ่งสามารถประกอบด้วยส่วนหัว ส่วนท้าย ส่วน ด้านข้าง และองค์ประกอบอื่นๆ
<footer></footer> หมายถึงพื้นที่ด้านล่าง ซึ่งสามารถแสดงที่ด้านล่างของหน้าเว็บหรือด้านล่างของบทความ
<nav></nav> องค์ประกอบการนำทาง ซึ่งเป็นตัวแทนของโมดูลการนำทาง โดยทั่วไป หน้าเว็บจะมีการนำทางเพียงอันเดียว
กฎการซ้อนแท็ก HTML: 1. องค์ประกอบเค้าโครงสามารถซ้อนองค์ประกอบใดก็ได้ 2. องค์ประกอบระดับบล็อกสามารถซ้อนองค์ประกอบแบบอินไลน์ได้ 3. องค์ประกอบแบบอินไลน์ไม่สามารถซ้อนองค์ประกอบระดับบล็อกได้ 4. แท็ก p ไม่สามารถซ้อนองค์ประกอบระดับบล็อกอื่น ๆ ได้
แท็กไฮเปอร์ลิงก์:
<a href="https://www.baidu.com" target="_self">ถึง Baidu</a> สามารถคลิกแท็กนี้เพื่อข้ามไปยัง URL
คุณสมบัติ
1.href คือที่อยู่ของหน้าเว็บที่ถูกเปลี่ยนเส้นทาง:
href="tel:13111111111" โปรโตคอลโทรศัพท์สามารถสร้างลิงก์โทรศัพท์ได้ บนเบราว์เซอร์มือถือ ผู้ใช้สามารถคลิกเพื่อโทรออกเพื่อโทรออกได้ href="mailto:[email protected]": การใช้โปรโตคอล mailto หลังจากคลิกแล้วเบราว์เซอร์จะเปิดโปรแกรมเมลเริ่มต้นของเครื่องทำให้ผู้ใช้สามารถส่งเมลไปยังที่อยู่อีเมลที่ระบุ Anchor: คุณสามารถระบุ ID ได้ แอตทริบิวต์สำหรับแท็ก html จากนั้นข้ามไปยังตำแหน่งที่ระบุผ่าน href="#id" โดย # แสดงถึง id
ตัวอย่างเช่น
<a href="#fyp">ชีวิต</a> <h3 id="fyp">ดีมาก</h3>
ดาวน์โหลดไฟล์: หาก href เป็นที่อยู่ไฟล์ คุณจะดาวน์โหลดไฟล์ได้
เป้าหมายคือวิธีข้ามเพื่อเปิดหน้าเว็บ ค่าแอตทริบิวต์เริ่มต้นคือ _self หน้าต่างปัจจุบันถูกเปิด และ -blank คือการเปิดหน้าต่างใหม่
ปิง: คลิกที่ป้ายกำกับเพื่อส่งคำขอโพสต์ไปยังที่อยู่ที่ระบุโดยปิง ส่วนใหญ่จะใช้เพื่อติดตามพฤติกรรมของผู้ใช้
แท็กรูปภาพ:
<img src="./imgs/shop_33.jpg" alt="" height="50" กำลังโหลด="ขี้เกียจ" />
คุณสมบัติ
คุณลักษณะ src คือที่อยู่รูปภาพ ซึ่งอาจเป็นที่อยู่รูปภาพในเครื่องหรือที่อยู่รูปภาพเครือข่าย แอตทริบิวต์ alt จะกำหนดคำอธิบายข้อความของรูปภาพ เมื่อรูปภาพไม่แสดง เนื้อหาของแอตทริบิวต์ alt จะปรากฏขึ้น width กำหนดความกว้างของรูปภาพ และ height กำหนดความสูงของรูปภาพ หากมีการตั้งค่าเพียงรายการเดียว อีกรายการหนึ่งจะถูกคำนวณโดยอัตโนมัติ หน่วยกำลัง pxloading แอตทริบิวต์จะตั้งค่าลักษณะการโหลดรูปภาพ มีค่าแอตทริบิวต์ 3 ค่าตามค่าเริ่มต้นคืออัตโนมัติ ซึ่งหมายความว่าไม่ได้ใช้แอตทริบิวต์การโหลด ขี้เกียจ เปิดใช้งานการโหลดแบบขี้เกียจ (รูปภาพจะโหลดเฉพาะเมื่อปรากฏในพื้นที่ที่มองเห็นได้เท่านั้น) กระตือรือร้น โหลดรูปภาพทันที ไม่ว่ารูปภาพจะปรากฏในพื้นที่ที่มองเห็นหรือไม่ก็ตาม องค์ประกอบพื้นที่รูปภาพ
<รูป> <img src="F" /> <figcaption>รูปภาพของสะพาน</figcaption> </รูป> รูปภาพแสดงถึงพื้นที่รูปภาพที่สามารถตัดรูปภาพและข้อมูลที่เกี่ยวข้องได้ figcaption อธิบายรูปภาพและสามารถใช้เป็นชื่อเรื่องของรูปภาพได้
รายการ
รายการสั่งซื้อเฒ่า
<ol type="1" start="5"> <li>ชั้นประถมศึกษาปีที่ 1 รุ่นที่ 1</li> <li>บอร์ดชั้นประถมศึกษาปีที่ 2</li> - </ol>
รายการเรียงลำดับโดยมีตัวเลขอยู่หน้าแต่ละคอลัมน์
คุณสมบัติ
แอตทริบิวต์ประเภท
ค่าแอตทริบิวต์กำหนดประเภทตัวเลขที่ด้านหน้าของคอลัมน์:
ตัวเลขอารบิค 1 ตัว (ค่าเริ่มต้น)
ลำดับตัวอักษรตัวพิมพ์เล็ก
ลำดับตัวอักษรตัวพิมพ์ใหญ่
ฉันเรียงลำดับเลขโรมันตัวพิมพ์เล็ก
I. การเรียงลำดับเลขโรมันตัวพิมพ์ใหญ่
Reversed Reverse Order Start ตั้งค่าเริ่มต้นของตัวเลข
ul รายการที่ไม่เรียงลำดับ
<ul type="สี่เหลี่ยม"> <li>ชั้นประถมศึกษาปีที่ 1 รุ่นที่ 1</li> - </ul>
รายการแบบไม่เรียงลำดับ ไม่มีหมายเลขลำดับ แต่ละคอลัมน์มีสัญลักษณ์อยู่ข้างหน้า
แอตทริบิวต์ type จะกำหนดสัญลักษณ์สำหรับแต่ละคอลัมน์ของรายการ: วงกลมทึบของดิสก์ (ค่าเริ่มต้น), วงกลมกลวง, สี่เหลี่ยมจัตุรัส สามารถใช้เป็นองค์ประกอบเค้าโครงสำหรับหน้าเว็บ
รายการที่กำหนดเองของ dl
<ดล> <dt>ส่วนหน้าของเว็บ</dt> <dd>แผนกต้อนรับส่วนหน้าบนเว็บ</dd> </ดล>
dl รายการ สามารถมี dt และ dd รวมกันได้หลายรายการใน dl
dt แสดงถึงคำศัพท์ dd คือคำอธิบายของคำศัพท์
เว็บคอนเทนเนอร์ iframe
<iframe src="https://player.youku.com/ ฝัง/XNTg2MzEyMjY2NA==" frameborder="0" อนุญาตแบบเต็มหน้าจอ> </iframe>
คอนเทนเนอร์หน้าเว็บ iframe ซึ่งสามารถแสดงหน้าเว็บและเนื้อหาเว็บอื่น ๆ ในพื้นที่ได้ คุณลักษณะ src จะกำหนดที่อยู่ของหน้าเว็บที่แสดง ความกว้าง จะกำหนดความกว้างของ iframe และความสูงจะกำหนดความสูงของ frameborder ขนาดของเส้นขอบ อนุญาตแบบเต็มหน้าจอ คลิกปุ่มเต็มหน้าจอเพื่อแสดงแท็กมัลติมีเดียแบบเต็มหน้าจอ
วิดีโอ: สามารถเล่นวิดีโอได้
<วิดีโอ src="./media/test.mp4" การควบคุม เล่นอัตโนมัติ ปิดเสียง วนซ้ำ ความสูง = "300" โปสเตอร์="./imgs/shop_33.jpg" โหลดล่วงหน้า = "อัตโนมัติ" </วิดีโอ>
src คือที่อยู่วิดีโอซึ่งอาจเป็นที่อยู่ในเครื่องหรือที่อยู่เครือข่าย ควบคุมการเล่นอัตโนมัติของแถบควบคุมของผู้เล่น (เบราว์เซอร์ Chrome จำเป็นต้องตั้งค่าปิดเสียง) ปิดเสียงลูป ความกว้างการเล่นของวง ความกว้างของการตั้งค่า ความสูงที่ตั้งไว้ โดยทั่วไปจะตั้งค่าหนึ่งรายการ ขนาดอื่น คำนวณภาพหน้าปกวิดีโอโปสเตอร์โดยอัตโนมัติ ซึ่งอาจเป็นภาพเครือข่ายหรือภาพในเครื่องที่โหลดล่วงหน้า ค่าแอตทริบิวต์แคชวิดีโอ: อัตโนมัติ (ค่าเริ่มต้น) บัฟเฟอร์วิดีโอทั้งหมด ไม่มีเลยที่ไม่บัฟเฟอร์ ข้อมูลเมตาบัฟเฟอร์ข้อมูลเมตาของไฟล์วิดีโอ โดยทั่วไปไม่ได้ตั้งค่าไว้ และคงค่าเริ่มต้นไว้
<การควบคุมวิดีโอเล่นอัตโนมัติแบบปิดเสียง> <แหล่งที่มา src="./media/test.webm" type=" วิดีโอ/เว็บเอ็ม"> <แหล่งที่มา src="./media/test.mp4" type=" วิดีโอ/mp4"> </วิดีโอ>
เพื่อให้เข้ากันได้กับรูปแบบของไฟล์วิดีโอที่เล่นโดยเบราว์เซอร์ต่างๆ ให้ใช้องค์ประกอบแหล่งที่มาจนกว่าคุณจะพบไฟล์วิดีโอที่สามารถเล่นได้
อินพุตสัญลักษณ์ html:
คุณสามารถใช้วิธีการป้อนข้อมูล Sogou เพื่อป้อนสัญลักษณ์พิเศษได้
แสดงสัญลักษณ์ผ่านซอร์สโค้ดสัญลักษณ์ html (วิธีที่แนะนำ)
โต๊ะ โต๊ะ
ตารางแสดงถึงตาราง
คุณสมบัติ:
borderThe width of the table border width set the width of the table cellspacing theช่องว่างระหว่างเซลล์เซลล์padding the direct spaceing (ว่าง) between cells and content, also called inner margin.align table allowance, left left aligned, center aligned, right right align bgcolor ภาพพื้นหลังสำหรับเค้าโครงเว็บ
tr แสดงถึงเส้น
เซลล์ส่วนหัว - แบบอักษรเริ่มต้นเป็นตัวหนา จัดกึ่งกลางแนวนอน
เซลล์มาตรฐาน td จะแสดงข้อมูลเป็นหลัก (เนื้อหาที่แสดงอยู่ภายในองค์ประกอบ td)
colspan จะรวมเซลล์ข้ามคอลัมน์ หลังจากรวมเซลล์แล้ว เซลล์ที่เหลือจะต้องถูกลบออก rowspan ผสานเซลล์ข้ามแถวและผสานเซลล์ในแถวถัดไป หลังจากผสานแล้ว จำเป็นต้องลบเซลล์ส่วนเกินออก สีพื้นหลังของเซลล์ bgcolor: ค่าแอตทริบิวต์: 1. ชื่อสี (สีแดง สีเทา ฯลฯ) 2. รหัสสีฐานสิบหก (#000000 สีดำ #ffffff สีขาว) 3. โหมด rga: เช่น rga (204,97,70 )cellpadding คือระยะห่างโดยตรง (ว่าง) ระหว่างเซลล์และเนื้อหา หรือที่เรียกว่าขอบด้านใน จัดตำแหน่งคือการจัดแนวแนวนอนของข้อความในเซลล์ ด้านซ้าย (ค่าเริ่มต้น) กึ่งกลาง (กลาง), ขวา (ขวา) valign การจัดตำแหน่งข้อความของเซลล์ในแนวตั้ง, การจัดตำแหน่งบนสุด, กึ่งกลางกลาง, การจัดตำแหน่งด้านล่างล่าง
Caption ชื่อของตาราง
thead คือส่วนหัวของตาราง (หากไม่มี header ก็ไม่ต้องเขียน ถ้าเขียน header ก็ต้องมี tbody และ tfoot) โดยทั่วไปเซลล์ที่อยู่ส่วนหัวของตารางจะใช้องค์ประกอบส่วนหัว th .
tbody ส่วนของร่างกายของตาราง
ที่ด้านล่างของโต๊ะ
url: ตัวระบุทรัพยากรแบบเดียวกันหรือที่เรียกว่า URL
โปรโตคอล: วิธีที่เบราว์เซอร์ใช้เพื่อขอทรัพยากรเซิร์ฟเวอร์:
สามารถละเว้นโปรโตคอล http ซึ่งเป็นพอร์ตเริ่มต้น 80 ได้ ข้อมูลถูกส่งในรูปแบบข้อความที่ชัดเจนและสามารถถูกแย่งชิงได้ง่าย
โปรโตคอล https และโปรโตคอล HTTP เพิ่มใบรับรอง SSL (พร้อมรหัสสาธารณะและรหัสลับ) เพื่อเข้ารหัสข้อมูลที่ส่งบนหน้าเว็บ พอร์ตเริ่มต้นคือ 443 ซึ่งสามารถละเว้นได้
โฮสต์: ที่อยู่ IP หรือชื่อโดเมนของเซิร์ฟเวอร์เว็บไซต์ พอร์ต: แต่ละแอปพลิเคชันบนคอมพิวเตอร์มีพอร์ตแยกกัน เส้นทาง: ตำแหน่งของทรัพยากรบนเว็บไซต์ พารามิเตอร์การสืบค้น: ข้อมูลเพิ่มเติมที่มอบให้กับเซิร์ฟเวอร์ โดยส่วนใหญ่เป็นข้อมูลที่ส่งจากส่วนหน้าไปยังส่วนหลัง
**แบบฟอร์ม:** แท็ก มีตัวควบคุมแบบฟอร์มหลายรายการ ตัวควบคุมแบบฟอร์มอนุญาตให้ผู้ใช้ป้อนข้อมูลอินพุตและส่งข้อมูลเหล่านี้ไปยังแบ็กเอนด์ผ่านแท็กแบบฟอร์ม (ตัวควบคุมแบบฟอร์มทั้งหมดมีแอตทริบิวต์ชื่อ ซึ่งสามารถส่งข้อมูลที่ป้อนโดยตัวควบคุมแบบฟอร์มไปยังแบ็กเอนด์ผ่านพารามิเตอร์แบบสอบถามได้)
คุณสมบัติ:
การกระทำ ที่อยู่ของวิธีการส่งข้อมูล วิธีการส่งข้อมูล:
ค่า: ข้อมูลคำขอรับ (ค่าเริ่มต้น) ถูกส่งผ่านเป็นพารามิเตอร์การสืบค้น ข้อดี: การส่งข้อมูลค่อนข้างรวดเร็ว ข้อเสีย: สามารถดูข้อมูลได้โดยตรงบนเว็บไซต์ มีข้อ จำกัด เกี่ยวกับขนาดของข้อมูลที่ส่งและสามารถส่งผ่านได้เฉพาะสตริงเท่านั้น ถ้าเป็นการร้องขอ get คุณไม่จำเป็นต้องเขียนแอ็ตทริบิวต์ method
โพสต์คำขอ ข้อมูลจะถูกส่งผ่านเนื้อหาคำขอ และข้อมูลจะไม่ปรากฏด้านหลัง URL ข้อเสีย: การส่งข้อมูลไม่เร็วเท่าที่ได้รับ ข้อเสีย: ข้อมูลค่อนข้างปลอดภัยในเนื้อหาคำขอ
enctype ระบุคำขอโพสต์และประเภท MIME ของข้อมูลที่ส่งผ่านโดยเบราว์เซอร์ (แบ็กเอนด์ใช้ค่าที่แตกต่างกันตามประเภท mime ที่แตกต่างกัน)
ป้ายกำกับกล่องอินพุต, ป้ายกำกับปิดตัวเอง
คุณสมบัติ
ความยาวสูงสุดคืออักขระอินพุตสูงสุด ไม่สามารถป้อน Placeholder ได้หากเกินเนื้อหาที่ป้อน ข้อความแจ้งที่แสดงจะเป็นแบบอ่านอย่างเดียวและสามารถดูได้เท่านั้น ไม่สามารถเลือกองค์ประกอบได้ . ปิดใช้งาน ถูกปิดใช้งาน องค์ประกอบจะเป็นสีเทาและไม่สามารถเลือกได้ รูปแบบค่าที่แสดง (เนื้อหา) ขององค์ประกอบ คุณสามารถป้อนนิพจน์ทั่วไปได้ หากช่องป้อนข้อมูลไม่ตรงตามนิพจน์ทั่วไป ระบบจะแจ้งให้คุณเลือกตัวเลือกเริ่มต้นของปุ่มตัวเลือก คุณลักษณะ หากไม่มีค่าอินพุตในกล่องอินพุต จะมีข้อความแจ้งเตือนเมื่อส่ง type กำหนดรูปแบบของแท็กอินพุต ค่าที่แตกต่างกันจะแสดงในรูปแบบที่แตกต่างกัน
ประเภทค่าแอตทริบิวต์:
ข้อความ (ค่าเริ่มต้น) ข้อมูลรหัสผ่านการป้อนข้อความจะแสดงในกล่องป้อนตัวเลขตัวเลขตัวเลขสามารถป้อนได้เฉพาะตัวเลขเท่านั้นแอตทริบิวต์ของช่องป้อนตัวเลข ----> มักจะรวมกับแอตทริบิวต์ต่อไปนี้: ค่าต่ำสุดขั้นต่ำ, ค่าสูงสุดสูงสุด, ขั้นตอน คือปุ่มทางด้านขวาเพื่อเพิ่มความยาวสเต็ป (ปุ่มทางด้านขวาของ 3 แอ็ตทริบิวต์นั้นใช้ได้) การค้นหาจะใช้เพื่อค้นหาในช่องป้อนข้อมูลหลังจากป้อนเนื้อหาแล้วจะมีไอคอนชัดเจนทางด้านขวา สำหรับปุ่มตัวเลือกวิทยุ ต้องตั้งค่าซึ่งเป็นค่าที่เลือกโดยวิทยุ คุณสมบัติชื่อจะต้องสอดคล้องกันเพื่อให้ได้การเลือกวิทยุ ช่องทำเครื่องหมาย กล่องเลือกหลายรายการ ต้องตั้งค่าซึ่งเป็นค่าที่เลือกโดยการเลือกหลายรายการ และแอตทริบิวต์ชื่อจะต้องตั้งค่าอย่างสม่ำเสมอ email คือช่องกรอกอีเมล์ หากข้อมูลไม่อยู่ในรูปแบบอีเมล์ จะมีข้อความแจ้ง ช่องป้อนหมายเลขโทรศัพท์จะต้องตั้งค่าด้วยแอตทริบิวต์รูปแบบเพื่อตั้งค่า URL ปกติ หากอินพุตไม่ใช่ URL จะมีการแสดงสีขึ้นมา คุณสามารถเลือกแถบเลื่อนช่วงสี และเลื่อนค่าที่เลือกได้ ในช่วงที่ระบุ - มีค่าต่ำสุด, ค่าสูงสุดสูงสุด, ขั้นตอน ขนาดขั้นตอนของแต่ละสไลด์ (ค่าเริ่มต้นคือ 1) ช่องป้อนข้อมูลที่ซ่อนอยู่จะถูกซ่อนไว้และไม่สามารถมองเห็นได้บนหน้าเว็บ วันที่ การเลือกวันที่ เวลา การเลือกเวลา เดือน เดือน สัปดาห์สัปดาห์ วันที่เวลา-ปีท้องถิ่น เดือน วันเวลา - โดยขั้นต่ำคือวันที่ขั้นต่ำที่เป็นตัวเลือก สูงสุดที่เป็นตัวเลือกวันที่สูงสุด ค่าของปุ่มแอตทริบิวต์วันที่ที่เลือกจะแสดงเป็นปุ่มปกติ ไม่มีเลย ปุ่มส่งฟังก์ชัน คลิกเพื่อส่งข้อมูลไปยังแบ็กเอนด์ผ่านการรีเซ็ตชื่อ เรียกคืนค่าที่ควบคุมโดยฟอร์มฟอร์มเป็นค่าเริ่มต้น ไฟล์อัพโหลดไฟล์ ฟอร์มฟอร์มต้องตั้งค่า enctype="multipart/form-data"
แท็กชุดสนาม
แท็ก fieldset เป็นคอนเทนเนอร์ระดับบล็อกที่แสดงถึงคอลเลกชันของส่วนประกอบของแบบฟอร์ม คำอธิบายจะตั้งชื่อของตัวควบคุม fieldset โดยปกติจะเป็นองค์ประกอบแรกของ fieldset และจะถูกฝังอยู่ที่มุมด้านบนของ fieldset ไวยากรณ์: <แบบฟอร์ม> <ปิดใช้งานชุดฟิลด์> <legend>ข้อมูลส่วนบุคคล</legend> </ฟิลด์เซ็ต> </แบบฟอร์ม>
คุณลักษณะที่ปิดใช้งานสามารถทำให้การควบคุมแบบฟอร์มที่ห่อเป็นสีเทาและไม่พร้อมใช้งาน
ฉลากฉลาก
คำอธิบายข้อความของการควบคุมแบบฟอร์มฉลากโดยทั่วไปจะใช้ในแบบฟอร์มผลิตภัณฑ์ที่ขึ้นรูปขั้นต้น
สำหรับแอตทริบิวต์สามารถเชื่อมโยงกับการควบคุมแบบฟอร์ม และค่าที่เป็นค่าแอตทริบิวต์ id ของการควบคุมแบบฟอร์ม
<input type="ช่องทำเครื่องหมาย" value="test" id="c" > <label for="c">ไม่ทราบ</label>
คุณสามารถใส่การควบคุมแบบฟอร์มลงในแท็กป้ายกำกับและเชื่อมโยงการควบคุมเหล่านั้นได้โดยอัตโนมัติ <ฉลาก> <input type="radio" value="man"name="sex">ชาย</label>
ปุ่มปุ่ม
คุณสมบัติ:
ประเภทปุ่มประเภท: ส่ง (ส่งข้อมูลแบบฟอร์ม) รีเซ็ต (รีเซ็ตข้อมูลแบบฟอร์มเป็นสถานะเริ่มต้น) ปุ่มเป็นปุ่มธรรมดาที่ไม่มีพฤติกรรม ——》แท็กปุ่มสามารถใช้นอกแท็กแบบฟอร์มได้ จะมีแอตทริบิวต์ส่งและสามารถส่งได้
ปุ่มปิดใช้งานจะปิดใช้งานชื่อของปุ่ม เมื่อส่งข้อมูล ให้ส่งข้อมูลในรูปแบบ name=value (เพื่อให้ตรงกับค่า) ค่าของปุ่มแบบฟอร์มที่เกี่ยวข้องกับปุ่ม คุณลักษณะของแบบฟอร์มแบบฟอร์ม หากละเว้น การเชื่อมโยงเริ่มต้นจะอยู่ในแบบฟอร์มหลัก
<form id="form1"></form> <button form="form1" value="test">ส่ง</button>
เลือกเมนูแบบเลื่อนลง
สร้างเมนูแบบเลื่อนลงซึ่งจำเป็นต้องตั้งค่าด้วยแท็กตัวเลือก
<select name="province" need dmultiple size="8"> <optgroup label="ใต้"> <option value="sc">เสฉวน</option> <option value="gd" ที่เลือก>กวางตุ้ง</option> </เลือกกลุ่ม> <optgroup label="ภาคเหนือ" ปิดการใช้งาน> <option value="sc">เสฉวน</option> </เลือกกลุ่ม> </เลือก>
คุณสมบัติ
1.select——ชื่อฟอร์ม ชื่อ ข้อมูลจะถูกส่งไปยังแบ็กเอนด์ในรูปแบบของ name=value (value คือค่า vlaue ของตัวเลือกที่เลือก)
ไม่สามารถเลือกแบบฟอร์มที่ปิดใช้งานได้
จำเป็น จำเป็น
หลายรายการสามารถเลือกได้หลายตัวเลือก (คุณต้องกด Ctrl เพื่อเลือกหลายรายการ) ขนาด หากตั้งค่าหลายรายการ คุณสามารถกำหนดจำนวนแถวที่มองเห็นได้ในคราวเดียว
2. ตัวเลือกตั้งค่าตัวเลือกในเมนูแบบเลื่อนลง ——》value ค่าที่เลือกที่เลือก ตั้งค่าเริ่มต้นของรายการที่เลือก
3. <optgroup label="南>Group options——》label คือชื่อของกลุ่มและไม่สามารถเลือกกลุ่มได้ หลังจากตั้งค่าปิดใช้งานแล้ว ตัวเลือกทั้งหมดภายใต้กลุ่มจะไม่สามารถเลือกตัวเลือกได้
คอนเทนเนอร์ดาต้าลิสต์
<ดาต้าลิสต์ id="ข้อมูล"> <option value="a" label="A11"> <option value="b" label="B11"> <option value="c" label="C11"> </ดาต้าลิสต์>
datalist คือคอนเทนเนอร์แท็กที่สามารถจัดเตรียมชุดข้อมูลสำหรับการควบคุมที่ระบุ โดยปกติจะใช้สำหรับการป้อนข้อมูลในกล่องอินพุต แอตทริบิวต์ id ใช้เพื่อเชื่อมโยงการควบคุมอินพุต แอตทริบิวต์รายการของอินพุตสามารถเชื่อมโยงกับตัวเลือกดาต้าลิสต์คอนเทนเนอร์เพื่อตั้งค่าแต่ละตัวเลือก value คือค่าตัวเลือก ป้ายกำกับคือคำอธิบายของค่า และเบราว์เซอร์ Chrome จะแสดงค่านั้นในบรรทัดถัดไปของค่า
textarea กล่องใส่ข้อความหลายบรรทัด
textarea เป็นช่องป้อนข้อความแบบหลายบรรทัด ตามค่าเริ่มต้น คุณสามารถแก้ไขขนาดได้โดยการกดและลาก เนื้อหาของแพ็คเกจคือข้อความพร้อมท์ตัวยึดค่า แถว ความสูงของกล่องข้อความ มีหน่วยเป็นแถว คอลัมน์ ความกว้างของกล่องข้อความ หน่วยเป็นอักขระที่ปิดใช้งาน ห้ามป้อนข้อมูล ความยาวสูงสุด อักขระอินพุตสูงสุด ความยาวขั้นต่ำ อักขระอินพุตขั้นต่ำที่จำเป็น จำเป็น
เอาท์พุท
10+10<output name="result">20</output> แสดงถึงผลลัพธ์ของการดำเนินการของผู้ใช้
ความคืบหน้า
<progress max="100" value="50">50%</progress>s เป็นองค์ประกอบแบบอินไลน์ที่บ่งบอกถึงความคืบหน้าในการดำเนินการให้เสร็จสิ้น ซึ่งโดยปกติจะแสดงในรูปแบบของแถบความคืบหน้า
max คือค่าสูงสุดของแถบความคืบหน้า ค่าเริ่มต้นคือตัวเลขระหว่าง 1value ถึง 0-max ซึ่งบ่งบอกถึงความคืบหน้าในปัจจุบัน
ตัวบ่งชี้มิเตอร์
<ชื่อมิเตอร์="455" นาที="100" สูงสุด = "500" ค่า = "455" ต่ำ = "150" สูง = "350"></meter>
ตัวบ่งชี้มิเตอร์จะแสดงค่าภายในช่วงที่ทราบ ค่าจะแสดงเป็นสีเขียวในส่วนต่ำและสูง และเป็นสีส้มในพื้นที่อื่นๆ
min คือค่าต่ำสุดของช่วง max คือค่าสูงสุดของช่วง ค่าปัจจุบัน ต่ำ เกณฑ์ขั้นต่ำ (มากกว่า min) สูง เกณฑ์ที่สูงกว่า (น้อยกว่าสูงสุด)
รายละเอียดแท็กยุบ
แท็กยุบรายละเอียด ตามค่าเริ่มต้น เบราว์เซอร์จะยุบแท็กเพื่อรวมเนื้อหา คลิกเพื่อขยายและดูเนื้อหา
ตั้งชื่อการพับ
<รายละเอียด> <summary>ยุบชื่อ</summary> <ul> <li>ทดสอบ1</li> </ul> </รายละเอียด>
แท็กระดับบล็อก (องค์ประกอบ) div, p, แบบฟอร์ม, ul, h1-h6, dl, ส่วนหัว, nav, ส่วน, นอกเหนือ, หลัก, บทความ, แท็กอินไลน์ส่วนท้าย ( องค์ประกอบ) span, em, แข็งแกร่ง, การป้อนข้อมูล ( ข้อความ, รหัสผ่าน , วิทยุ, ช่องทำเครื่องหมาย, ไฟล์), ปุ่ม, เลือก, ป้ายกำกับจะแสดงในรูปแบบแถบความคืบหน้า
- สูงสุด ค่าสูงสุดของแถบความคืบหน้า ค่าเริ่มต้นคือ 1 - ค่าเป็นตัวเลขระหว่าง 0-max แสดงถึงความคืบหน้าในปัจจุบัน **ตัวแสดงมิเตอร์**
ตัวบ่งชี้มิเตอร์จะแสดงค่าภายในช่วงที่ทราบ ค่าจะแสดงเป็นสีเขียวในส่วนต่ำและสูง และเป็นสีส้มในพื้นที่อื่นๆ - min ค่าต่ำสุดของช่วง - สูงสุดคือค่าสูงสุดของช่วง - ค่าคือค่าปัจจุบัน - ต่ำคือเกณฑ์ขั้นต่ำ (มากกว่าค่าต่ำสุด) - สูง เกณฑ์ที่สูงกว่า (น้อยกว่าสูงสุด) #### รายละเอียด ยุบแท็กรายละเอียด ยุบแท็ก เบราว์เซอร์จะยุบแท็กเพื่อล้อมเนื้อหาตามค่าเริ่มต้น คลิกเพื่อขยายและดูเนื้อหา <summary>ตั้งชื่อการพับ
ยุบชื่อ
ทดสอบ1
-
แท็กระดับบล็อก (องค์ประกอบ) div, p, แบบฟอร์ม, ul, h1-h6, dl, ส่วนหัว, nav, ส่วน, นอกเหนือ, หลัก, บทความ, แท็กอินไลน์ส่วนท้าย ( องค์ประกอบ) span, em, แข็งแกร่ง, อินพุต ( ข้อความ, รหัสผ่าน , วิทยุ, ช่องทำเครื่องหมาย, ไฟล์), ปุ่ม, เลือก, ตารางป้ายกำกับ
ข้างต้นเป็นการแนะนำโดยละเอียดเกี่ยวกับ HTML และบทสรุปของโค้ดที่ใช้กันทั่วไป สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแนะนำ HTML และโค้ดที่ใช้กันทั่วไป โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องใน downcodes.com!