หากคุณไม่ได้มุ่งมั่นที่จะเป็นศิลปินจากนั้นในฐานะนักพัฒนาคุณสามารถเข้าใจ HTML และทำการดัดแปลงง่ายๆหากจำเป็น ทำตามแนวคิดของฉันด้านล่างเพื่อให้แน่ใจว่าบทความช่วยให้คุณเข้าใจ HTML แน่นอนในระหว่างกระบวนการอ่านอีกครั้งควรลองด้วยตัวเองเพื่อให้ความเข้าใจจะลึกซึ้งยิ่งขึ้น ตกลงเริ่มต้นจากด้านล่าง: (สัญลักษณ์ด้านล่างทั้งหมดถูกป้อนเป็นภาษาอังกฤษ)
1. กฎพื้นฐานของ HTML<html>
<head>
<tite> หน้าเว็บของฉัน </title>
-
</head>
<body>
-
</body>
</html>
เว็บเพจเกือบทั้งหมดอยู่ในรูปแบบนี้ นี่เป็นเครื่องหมายที่ต้องมีสำหรับหน้าเว็บ แต่ละเครื่องหมายถูกวางไว้ใน <> และจบลงด้วย </> ยกเว้นว่ามีสิ่งที่ยุ่งเหยิงมากมายเพิ่มเข้าไปในจุดไข่ปลาซึ่งเป็นสิ่งที่เราเห็น
คัดลอกรหัสด้านบนไปยัง Notepad และบันทึกเป็นไฟล์ A.HTML และกลายเป็นหน้าเว็บ ลองกันเถอะ
ด้านล่างเปิดใน Notepad เพิ่มโฮมเพจคำระหว่าง <body> บันทึกไว้แล้วเปิดดูดูภาพต่อไปนี้:
จากนั้นเพิ่มเครื่องหมายที่ด้านหน้าและด้านหลังของโฮมเพจและเปลี่ยนเป็น <a href =#> หน้าแรก </a> บันทึกและดูว่าเอฟเฟกต์คืออะไร?
มันคือการเชื่อมโยงหลายมิติที่เรามักจะเห็นออนไลน์หรือไม่? แต่หน้าแรกจะไม่เปลี่ยนแปลงเมื่อคลิกที่โฮมเพจที่นี่เพราะเราเพิ่มการเชื่อมต่อที่ว่างเปล่าและกดเหล็กในขณะที่มันร้อน เราทำตามวิธีก่อนหน้าและสร้างหน้าบันทึกเป็น b.html จากนั้นแทนที่ # ด้านบนด้วย b.html หลังจากเปิดให้คลิกที่หน้าแรกเราจะข้ามไปที่หน้า B หรือไม่? (แน่นอนหน้า A และ B ต้องอยู่ในไดเรกทอรีเดียวกัน) จนถึงที่นี่คุณควรเข้าใจว่าในความเป็นจริงฟังก์ชั่นทั้งหมดบนหน้าเว็บจะถูกนำไปใช้โดยแท็กต่าง ๆ เช่น <a> และคุณจำฟังก์ชั่นของแท็กเหล่านี้เมื่อคุณต้องการทำ
2. โครงสร้างเว็บไซต์หากคุณให้ความสนใจเมื่อท่องอินเทอร์เน็ตหน้าเว็บจะถูกแบ่งออกเป็นชิ้น ๆ ตามที่แสดงในภาพ
แน่นอนว่านี่เป็นเพียงโครงสร้างทั่วไป นอกจากนี้คุณยังสามารถแบ่งออกเป็นหลายช่วงตึกตามความต้องการของคุณ บล็อกส่วนใหญ่สำหรับการปรับเปลี่ยนด้านและการกำหนดรูปแบบการแสดงออกที่เกี่ยวข้อง
นี่คือความสำเร็จส่วนใหญ่ผ่านแท็ก <div> </div> ให้ฉันลองเพิ่มแท็ก <div> ในหน้าแรก:
<div>
<a href = b.html> หน้าแรก </a>
</div>
บันทึกลองเมื่อเปิดมันจะมีเอฟเฟกต์อะไร?
มันยังคงเหมือนก่อนการดัดแปลงหรือไม่? มาเพิ่มการแก้ไขบางอย่าง:
<div style = ความกว้าง: 200px; ความสูง: 100px; สไตล์ชายแดน: ของแข็ง; -
เมื่อวิ่งชิ้นส่วนที่เราทำเครื่องหมายจะแสดงด้วยพื้นหลังสีน้ำเงิน!
เพิ่มบล็อก </div> </div> จำนวนมากเพื่อลบหน้าเว็บออกจากจำนวนมากฮ่าฮ่าจากนั้นใส่สิ่งที่คุณต้องการใส่ในแต่ละบล็อก
แน่นอนว่า <div> หลายคนมีสไตล์ = หากการตั้งค่าสไตล์เหล่านี้คล้ายกันการตั้งค่าแต่ละครั้งของเราจะลำบากเกินไป เรามักจะวางสไตล์ในไฟล์. css อื่น (ควบคุมรูปแบบการแสดงผลของแต่ละเครื่องหมายในหน้าเว็บ) จากนั้นเรียกพวกเขาว่าพวกเขาจะต้องเรียกว่า ลองดูด้านล่าง
สร้าง Notepad ใหม่เปลี่ยนชื่อเป็น C.CSS และเปิดมันและเขียนถึง:
#header {width: 200px; ความสูง: 100px; สไตล์ชายแดน: ของแข็ง;}
และลบใน a.html
จากนั้นเพิ่ม <link rel = stylesheet type = text/css href = c.css/> ก่อน </head>
นั่นคือแนะนำไฟล์ C.CSS ข้อได้เปรียบของการวาง CSS ในไฟล์แยกต่างหากคือถ้าหลายสถานที่อ้างถึงสไตล์นี้ตราบใดที่เราแก้ไขสถานที่นี้ทั้งหมดจะเปลี่ยนไปมิฉะนั้นเราต้องปรับเปลี่ยนแต่ละสถานที่ด้วยตนเองซึ่งไม่เอื้อต่อการบำรุงรักษาในภายหลัง
สุดท้ายเปลี่ยน <div> ของ A.HTML เป็น <div id = ส่วนหัว>
เอฟเฟกต์เหมือนเดิมหรือไม่?
เกือบ ณ จุดนี้ฉันอาจไม่สามารถเขียนบทกวีและท่องได้ บทความนี้เป็นหลักเพื่อให้ทุกคนมีความเข้าใจทั่วไปเกี่ยวกับ HTML และรู้ว่าเกิดอะไรขึ้น ยังมีแท็กมากมายที่ไม่เกี่ยวข้อง คุณต้องหาหนังสือเล่มนี้สำหรับการออกแบบเว็บและจดจำมัน