ก่อนที่จะอธิบายหลักสูตรนี้: ลองดูว่าเบราว์เซอร์คืออะไร:
เบราว์เซอร์ที่เรียกว่าเป็นเครื่องมือที่สามารถตีความและเรียกใช้รหัส HTML มีแนวคิดอื่นที่เราต้องคิดออกเบราว์เซอร์! = เช่นคือคือเพียงหนึ่งในเบราว์เซอร์ นอกจาก IE แล้วยังมีเบราว์เซอร์มากมายคุณสามารถรู้ได้จาก Google เราจะไม่เข้าไปดูรายละเอียด
ก่อนอื่นเรามาเข้าใจกันว่า HTML คืออะไร
HTML คืออะไรชื่อเต็มของ HTML: ภาษาทำเครื่องหมายข้อความไฮเปอร์ (ภาษามาร์กอัพไฮเปอร์ข้อความ) มันเป็นข้อความที่อธิบายถึงลักษณะที่ปรากฏของหน้าเว็บและเนื้อหาของหน้าเว็บ เหตุผลที่ HTML สามารถแสดงเอฟเฟกต์ต่าง ๆ คือฟังก์ชั่นของเบราว์เซอร์
เนื้อหาเพิ่มเติม: ที่นี่เราจะขยายเนื้อหาบางส่วนซึ่งเป็นข้อความ HTML เดียวกันและเอฟเฟกต์อาจแตกต่างกันโดยไม่ต้องเบราว์เซอร์ นี่เป็นเพราะเบราว์เซอร์หลายตัวปรากฏขึ้นก่อนแล้วจึงมีมาตรฐานที่สอดคล้องกัน ด้วยสถานการณ์นี้เราสามารถใช้ IETESTER เพื่อทดสอบปัญหาความเข้ากันได้ของรหัส HTML เดียวกันบนเบราว์เซอร์ที่แตกต่างกัน
2. หน้าคงที่และหน้าแบบไดนามิก
อีกสิ่งหนึ่งที่เราต้องรู้คือความแตกต่างระหว่างหน้าคงที่และหน้าแบบไดนามิก
ก่อนอื่นหน้าของเว็บไซต์จะถูกแบ่งออกเป็นหน้าคงที่และหน้าแบบไดนามิก
หน้าคงที่: หน้าคงที่ทั้งหมดที่มีคำต่อท้าย HTML หรือ HTML เป็นหน้าคงที่และมีหน้า HTML คงที่บนเซิร์ฟเวอร์
Dynamic Page: ไม่มีหน้าบนเซิร์ฟเวอร์ที่ผู้ใช้จำเป็นต้องเรียกดู แต่เซิร์ฟเวอร์สามารถสร้างหน้า HTML แบบไดนามิกที่ลูกค้าต้องการจากนั้นแสดงให้กับลูกค้า
เพื่อสรุปความแตกต่างระหว่างสองในหนึ่งประโยค: หน้าแบบไดนามิกเรียกใช้รหัสฝั่งเซิร์ฟเวอร์หน้าคงที่ไม่เรียกใช้รหัสฝั่งเซิร์ฟเวอร์ (คุณสามารถเรียนรู้ได้ก่อนมันก็โอเคหลังจากทั้งหมดหน้าคงที่เป็นจุดสนใจของการสนทนาของเราในวันนี้)
3. จะเขียนหน้า HTML ได้อย่างไร?
มีเครื่องมือมากมายสำหรับการเขียน HTML ฉันเชื่อว่าทุกคนรู้สมุดบันทึกและคุณสามารถเขียนหน้า HTML ด้วย Notepad แน่นอนว่าคุณสามารถเขียนด้วยแผ่นจดบันทึกขั้นสูงเช่น EditPlus/UltraEdit หรือใช้เครื่องมือเช่น Dreamweaver
รูปต่อไปนี้เป็นโครงสร้างพื้นฐานของหน้าเว็บ HTML
จากภาพด้านบนเราจะเห็นว่าเนื้อหาทั้งหมดอยู่ในแท็ก <html> </html> <head> </head> วางข้อมูลหัวและคำอธิบายของหน้าจะไม่ปรากฏบนหน้า ชื่อเรื่องของหน้าถูกตั้งค่าใน <title> </title> และ <title> สามารถวางไว้ใน <head>; <body> </body> เป็นตัวหลักของหน้าและข้อความในแท็กนี้จะปรากฏบนหน้าเว็บ แน่นอนว่าทุกหน้าควรมีส่วนเหล่านี้อย่างน้อย
เคล็ดลับ: หากแท็กสุดท้ายของแท็กชื่อไม่ปิดหน้าทั้งหมดจะไม่ปรากฏขึ้น
4. ความเหมือนและความแตกต่างระหว่าง HTML และ XML
ความคล้ายคลึงกัน: พวกเขาทั้งหมดเป็นภาษามาร์กอัปพวกเขาสามารถเข้าถึงได้ผ่าน DOM และสามารถเปลี่ยนแปลงได้ผ่าน CSS
ความแตกต่าง:
XML มีความเข้มงวดกว่าไวยากรณ์ HTML: หากมีแท็กเริ่มต้นคุณต้องมีแท็กปลาย, เคสที่สอดคล้องกัน, คำพูดสองเท่าของแอตทริบิวต์ ฯลฯ XML มุ่งเน้นไปที่การจัดเก็บข้อมูลในขณะที่ HTML มุ่งเน้นไปที่การแสดงข้อมูล5.xhtml และ dhtml
XHTML: ภาษามาร์กอัปที่ขยายได้เป็น HTML ที่สอดคล้องกับข้อมูลจำเพาะ XML ไวยากรณ์มากขึ้น การเกิดขึ้นของ XHTML ส่วนใหญ่จะเปลี่ยนเป็น XML XHTML ต้องการ: ตัวพิมพ์เล็กทั้งหมดการจับคู่แท็กและแอตทริบิวต์ในคำพูดสองเท่า
DHTML: ตัวย่อของ HTML แบบไดนามิกคือ HTML แบบไดนามิก การรวมกันของ HTML, Stylesheets และ JavaScript
อาหารเสริม: มาตรฐานเว็บไม่ใช่มาตรฐาน แต่เป็นชุดของชุดมาตรฐาน
หน้าเว็บประกอบด้วยสามส่วน: โครงสร้างประสิทธิภาพและพฤติกรรม
โครงสร้าง: ข้อความรูปภาพและภาษาอื่น ๆ ที่เกี่ยวข้อง: XML, XHTML
การแสดงออก: หรือที่รู้จักกันในชื่อสไตล์เช่นขนาดข้อความและสี ฯลฯ สิ่งเหล่านี้ยังทำได้ผ่านสไตล์ CSS
พฤติกรรม: ผลแบบไดนามิกของลูกค้าโดยทั่วไปจะเสร็จสมบูรณ์ผ่าน JavaScript dom, ecmascript
ถัดไปมาที่หัวข้อ: เรียนรู้แท็กที่ใช้กันทั่วไปสำหรับ HTML
6. แท็ก html
01, H TAG (ชื่อ), HTML กำหนดแท็ก H หกแท็กจาก <H1> </h1> ถึง <H6> </h6> ซึ่งเป็นตัวอักษรที่มีขนาดต่างกันตามลำดับ H1 นั้นใหญ่ที่สุดและ H6 นั้นเล็กที่สุด
02, <br/> เพียงแค่ป้อนมันเป็นแท็กที่ปิดตัวเอง
03, <p> คือการแบ่งส่วน <p> จะมีพื้นที่ว่างเปล่าค่อนข้างใหญ่ก่อนและหลัง แต่จะไม่มี
04, <enter> ศูนย์ </enter> ศูนย์> ศูนย์กลาง (ไม่แนะนำ)
05, <b> a </b> ตัวหนาแนะนำ <i> B </i> ตัวเอียง <u> c </u> ขีดเส้นใต้ <em> จักรพรรดินีตัวเอียง </em>
06, <font> </font> แท็กตัวอักษร, <font color = "red" size = "7" face = "lishu"> สีแดง </font>
07, <Hr> คุณสมบัติทั่วไปของเส้นแนวนอน: ขนาดสี (ความหนา) ความกว้าง (ความยาว) จัดเรียง = ซ้าย/กึ่งกลาง/ขวา (ค่าเริ่มต้นจะแสดงในการเล่น)
7.HTML อักขระพิเศษ
& quot;
& & amp;
<& lt;
> & gt;
พื้นที่ & nbsp;
© & Copy;
® & reg;
² & sup2;
¥ & yen;
³ & sup3;
8. ส่วนขยายรูปแบบภาพ
9. แท็กรูปภาพ: <img alt = "ข้อความแจ้งเมื่อไม่สามารถแสดงได้">>
Alt: ข้อความพรอมต์เมื่อไม่สามารถแสดงภาพได้
10. ไฮเปอร์ลิงก์:
HREF ชี้ไปที่หน้าเป้าหมายที่จะเชื่อมต่อเป้าหมายที่ชี้ไปที่หน้าต่างเป้าหมายคือค่าและค่าถูกนำมาใช้
_blank: เปิดในหน้าต่างใหม่
_self: เปิดในหน้าต่างของคุณเอง
_parent: เปิดในหน้าต่างหลัก
_top: หมายถึงการเปิดในหน้าต่างระดับบนสุด
ชื่อเฟรม: เปิดในเฟรมที่ระบุ (เรียนรู้)
Anchor Link: 01 ตั้งตำแหน่งจุดยึด
<a name = showbigimg> <img src = image/02.jpg> </a>
02. โทรหาสมอเรือ
<a href =#showbigimg> ดูผู้หญิงสวย </a>
11. รายการใน HTML:
แบ่งออกเป็นรายการที่ไม่ได้เรียงรายการรายการที่สั่งซื้อและรายการที่กำหนดไว้
มาดูไดอะแกรมเอฟเฟกต์การแสดงผลของรายการต่างๆ
รายการที่ไม่ได้เรียงลำดับ:
<ul>
<li> </li>
<li> </li>
</ul>
รายการที่สั่งซื้อ
<ol>
<li> </li>
<li> </li>
</ol>
รายการนิยาม:
<Dl>
<Dt> จีน </dt>
<dd> เซี่ยงไฮ้ </dd>
<dd> กวางโจว </dd>
<Dd> ปักกิ่ง </dd>
</dl>
ค่าของประเภทสามารถเป็น: 1 , a, a, i, i, disc, circle, square
12. ตาราง: แสดงข้อมูลปกติบางครั้งใช้สำหรับเค้าโครง
ดังที่เห็นได้จากรูปด้านบนตารางประกอบด้วยแถวและคอลัมน์แถวจะแสดงด้วย TR และคอลัมน์แสดงโดย TD นอกจากนี้คุณยังสามารถใช้ Rowspan (รวมแถว), Colspan (และขนาน) เพื่อผสานเซลล์
แบบฝึกหัด 1: ใช้รหัส HTML เพื่อส่งออกตาราง
แบบฝึกหัด 2: แถวข้ามและคอลัมน์ข้ามของตาราง
13. แบบฟอร์ม
การดำเนินการส่งข้อมูลไปยังหน้านี้โดยค่าเริ่มต้น
หากคุณต้องการส่งข้อมูลไปยังเซิร์ฟเวอร์คุณต้องใส่องค์ประกอบฟอร์มเช่น <put>, <PelectArea>, <Select>, ฯลฯ ลงในแบบฟอร์ม ค่าของประเภทของอินพุตมีดังนี้:
แอตทริบิวต์ตรวจสอบจัดทำขึ้นสำหรับปุ่มตัวเลือกและกล่องกาเครื่องหมาย
ปุ่มตัวเลือกใช้สำหรับชุดของค่าพิเศษร่วมกันไดอะแกรมเอฟเฟกต์มีดังนี้
ไดอะแกรมเอฟเฟกต์ช่องทำเครื่องหมายมีดังนี้
ปุ่มหลักสามประเภท: ปุ่มส่งปุ่มรีเซ็ตและปุ่มปกติ
กล่องรายการดรอปดาวน์
ไวยากรณ์:
14. กล่องข้อความหลายบรรทัด:
<Textarea> ข้อความ </textarea>, cols = "50", rows = "15" แอตทริบิวต์แสดงจำนวนแถวและคอลัมน์
องค์ประกอบแบบฟอร์มทั่วไปใช้:
นี่คือจุดสิ้นสุดของการสนทนาของเราเกี่ยวกับ HTML วันนี้