บทความนี้สรุปคำแนะนำ 30 คู่สำหรับการเขียนรหัส HTML ตราบใดที่คุณจำไว้และใช้มันอย่างยืดหยุ่นในกระบวนการเขียนรหัส HTML คุณจะเขียนรหัสที่สวยงามและป้อนอันดับของนักพัฒนามืออาชีพโดยเร็วที่สุด
ในซอร์สโค้ดหน้าก่อนหน้าฉันมักจะเห็นข้อความดังกล่าว:
<li>some text here.<li>some new text here.<li>you get the idea.บางทีในอดีตเราสามารถทนต่อแท็ก HTML ที่ไม่ปิดตัวลงได้ แต่ในมาตรฐานของวันนี้นี่เป็นสิ่งที่ไม่พึงประสงค์มากและต้องหลีกเลี่ยง 100% ให้แน่ใจว่าได้ให้ความสนใจกับการปิดแท็ก HTML ของคุณมิฉะนั้นจะไม่ผ่านการตรวจสอบและอาจทำให้เกิดปัญหาที่ไม่คาดฝัน
เป็นการดีที่สุดที่จะใช้แบบฟอร์มนี้:
<ul><li>some text here. </li><li>some new text here. </li><li>you get the idea. </li></ul>ผู้เขียนได้เข้าร่วมฟอรัม CSS หลายแห่งก่อนหน้านี้ซึ่งหากผู้ใช้พบปัญหาเราขอแนะนำให้เขาทำสองสิ่งก่อน:
โดยปกติจะมีเอกสารสี่ประเภทให้เลือก :คำจำกัดความของ Doctype บอกเบราว์เซอร์ว่าหน้านั้นมี HTML, XHTML หรือส่วนผสมของทั้งสองเพื่อให้เบราว์เซอร์สามารถแยกวิเคราะห์แท็กได้อย่างถูกต้อง
1. <!doctype html public -//w3c//dtd html 4.01//en http://www.w3.org/tr/html4/strict.dtd>2. <!doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd>3. <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>4. <!doctype html public -//w3c//dtd xhtml 1.0 strict//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>มีความคิดเห็นที่แตกต่างกันเสมอเกี่ยวกับประเภทของการประกาศประเภทเอกสารที่จะใช้ เป็นที่เชื่อกันโดยทั่วไปว่าคำแถลงที่เข้มงวดที่สุดเป็นตัวเลือกที่ดีที่สุด แต่การวิจัยแสดงให้เห็นว่าเบราว์เซอร์ส่วนใหญ่จะแยกวิเคราะห์คำสั่งนี้ในลักษณะปกติผู้คนจำนวนมากเลือกที่จะใช้มาตรฐาน HTML4.01 บรรทัดล่างของการเลือกคำแถลงคือมันไม่เหมาะสำหรับคุณดังนั้นคุณต้องพิจารณาการเลือกคำแถลงที่เหมาะสมกับโครงการของคุณอย่างครอบคลุม
เมื่อคุณกำลังยุ่งอยู่กับการเขียนรหัสคุณมักจะเพิ่มรหัส CSS แบบฝังตัวเล็ก ๆ น้อย ๆ หรือขี้เกียจเช่นนี้:
<p style=color: red;>网页设计</p>สิ่งนี้ดูสะดวกและไม่มีปัญหา แต่จะทำให้เกิดปัญหาในรหัสของคุณ
เมื่อคุณเริ่มเขียนโค้ดคุณควรเริ่มเพิ่มรหัสสไตล์หลังจากโครงสร้างเนื้อหาเสร็จสมบูรณ์
วิธีการเข้ารหัสนี้เป็นเหมือนการต่อสู้แบบกองโจรซึ่งเป็นวิธีการเลียนแบบมาก -CHRIS COYIER
วิธีที่ดีกว่าคือการกำหนดรูปแบบของ p นี้ในไฟล์ Stylesheet:
someelement > p {color: red;}ในทางทฤษฎีคุณสามารถแนะนำ CSS Stylesheets ได้ทุกที่ แต่ข้อกำหนด HTML แนะนำให้แนะนำพวกเขาในแท็กหัวของเว็บเพจซึ่งสามารถเพิ่มความเร็วในการแสดงผลของหน้า
ในระหว่างกระบวนการพัฒนาของ Yahoo เราพบว่าแผ่นสไตล์การแนะนำในแท็กหัวจะเพิ่มความเร็วในการโหลดหน้าเว็บ
เพราะสิ่งนี้อนุญาตให้หน้าแสดงทีละขั้นตอน - ทีม Yslow
<head><title>my favorites kinds of corn</title><link rel=stylesheet type=text/css media=screen href=path/to/file.css /><link rel=stylesheet type=text/css media=screen href=path/to/anotherfile.css /></head>หลักการหนึ่งที่ต้องจดจำคือการทำให้หน้านำเสนอต่อหน้าผู้ใช้ให้เร็วที่สุด เมื่อสคริปต์ถูกโหลดหน้าจะหยุดการโหลดจนกว่าสคริปต์จะถูกโหลดเต็มที่ ดังนั้นมันจะเสียเวลามากขึ้นสำหรับผู้ใช้
หากไฟล์ JS ของคุณต้องการใช้ฟังก์ชั่นบางอย่างเช่นเหตุการณ์การคลิกปุ่มคุณสามารถแนะนำได้อย่างปลอดภัยที่ด้านล่างของร่างกายซึ่งเป็นวิธีที่ดีที่สุดในการทำ
ตัวอย่างเช่น : <p>and now you know my favorite kinds of corn. </p><script type=text/javascript src=path/to/file.js></script><script type=text/javascript src=path/to/anotherfile.js></script></body></html>หลายปีที่ผ่านมามีวิธีเพิ่มรหัส JS โดยตรงไปยังแท็ก HTML โดยเฉพาะอย่างยิ่งที่พบได้บ่อยในอัลบั้มภาพง่าย ๆ โดยพื้นฐานแล้วเหตุการณ์ onclick จะถูกแนบกับแท็กและเอฟเฟกต์ของมันเทียบเท่ากับรหัส JS บางตัว ไม่จำเป็นต้องหารือกันมากเกินไปวิธีนี้ไม่ควรใช้รหัสควรถ่ายโอนไปยังไฟล์ JS ภายนอกจากนั้น AddEventListener / AttachVent ไปยัง Time Listener หรือใช้เฟรมเวิร์กเช่น jQuery และวิธีการนาฬิกาเป็นสิ่งจำเป็น
$('a#morecorninfolink').click(function() {alert('want to learn more about corn?');});หลายคนไม่เข้าใจความสำคัญและคุณค่าของการตรวจสอบมาตรฐาน ผู้เขียนวิเคราะห์ปัญหานี้โดยละเอียดในบล็อก ในคำว่าการตรวจสอบมาตรฐานสำหรับคุณไม่ใช่เพื่อให้คุณทำให้เกิดปัญหา
หากคุณเพิ่งเริ่มมีส่วนร่วมในการผลิตเว็บเพจขอแนะนำอย่างยิ่งให้คุณดาวน์โหลดแถบเครื่องมือพัฒนาหน้าเว็บนี้และใช้การตรวจสอบมาตรฐาน HTML และการตรวจสอบมาตรฐาน CSS ได้ตลอดเวลาในระหว่างกระบวนการเข้ารหัส หากคุณคิดว่า CSS เป็นภาษาที่เรียนง่ายมากมันจะทำให้คุณตาย รหัสที่ซับซ้อนของคุณจะทำให้หน้าเว็บของคุณเต็มไปด้วยช่องโหว่และปัญหาอย่างต่อเนื่อง วิธีที่ดีคือการตรวจสอบตรวจสอบและตรวจสอบ
Firebug เป็นปลั๊กอินที่ดีที่สุดสำหรับการพัฒนาเว็บ ไม่เพียง แต่ดีบั๊ก JavaScript เท่านั้น แต่ยังช่วยให้คุณเข้าใจคุณสมบัติและตำแหน่งของแท็กหน้าได้อย่างสังหรณ์ใจ ไม่จำเป็นต้องพูดดาวน์โหลด!
จากการสังเกตของผู้เขียนผู้ใช้ส่วนใหญ่ใช้เพียง 20% ของฟังก์ชั่น Firebug ซึ่งเป็นของเสียจริงๆ คุณอาจใช้เวลาสองสามชั่วโมงในการเรียนรู้เครื่องมือนี้ในระบบและฉันเชื่อว่ามันจะให้ผลลัพธ์สองเท่ากับความพยายามครึ่งหนึ่ง
การสอน Firebug :ในทางทฤษฎีคุณสามารถเขียนเครื่องหมายอย่างไม่เป็นทางการเช่นนี้:
<div><p>here's an interesting fact about corn. </p></div>เป็นการดีที่สุดที่จะไม่เขียนด้วยวิธีนี้ มันไร้ประโยชน์ที่จะใส่ตัวอักษรมากขึ้นและมันจะทำให้รหัสน่าเกลียดซึ่งเป็นสิ่งที่ดี:
<div><p>here's an interesting fact about corn. </p></div>ผู้เขียนแนะนำให้คุณใช้ทั้งหกแท็กเหล่านี้บนหน้าเว็บของคุณ แม้ว่าคนส่วนใหญ่จะใช้เพียงสี่คนแรกเท่านั้น H ที่ใช้มากที่สุดจะมีประโยชน์มากมายเช่นที่เป็นมิตรกับอุปกรณ์ที่เป็นมิตรกับเครื่องมือค้นหา ฯลฯ คุณอาจแทนที่แท็ก P ของคุณด้วย H6
วันนี้ผู้เขียนเริ่มการสนทนาบน Twitter: ควรกำหนด H1 ในโลโก้หรือในชื่อของบทความ 80% ของคนเลือกหลัง
แน่นอนว่าจะใช้มันอย่างไรขึ้นอยู่กับความต้องการของคุณ แต่ฉันขอแนะนำว่าเมื่อคุณตั้งค่าบล็อกคุณควรตั้งชื่อชื่อของบทความเป็น H1 ซึ่งเป็นประโยชน์อย่างมากสำหรับการเพิ่มประสิทธิภาพกลไกค้นหา (SEO)
ในช่วงไม่กี่ปีที่ผ่านมาทีมงานของ Yahoo ได้ทำงานที่ยอดเยี่ยมมากมายในการพัฒนาส่วนหน้า เมื่อไม่นานมานี้พวกเขาเปิดตัวส่วนขยาย Firebug ที่เรียกว่า YSLOW ซึ่งจะวิเคราะห์ <เว็บเพจของคุณและส่งคืนการถอดเสียงซึ่งวิเคราะห์อย่างรอบคอบทุกด้านของหน้าเว็บนี้และเสนอพื้นที่ที่ต้องการการปรับปรุง แม้ว่ามันจะค่อนข้างรุนแรง แต่ก็จะช่วยคุณได้อย่างแน่นอน ขอแนะนำอย่างยิ่ง - Yslow!
โดยปกติแล้วเว็บไซต์จะมีเมนูนำทางคุณสามารถกำหนดด้วยวิธีนี้:
<div id=nav><a href=#>home </a><a href=#>about </a><a href=#>contact </a></div>หากคุณต้องการเขียนโค้ดที่สวยงามควรใช้วิธีนี้ดีที่สุด
ทำไมต้องใช้เมนูนำทางเลย์เอาต์
-เนื่องจาก UL เกิดมาเพื่อเตรียมความพร้อมสำหรับรายการคำจำกัดความ
เป็นการดีที่สุดที่จะกำหนดเช่นนี้:
<ul id=nav><li><a href=#>home</a></li><li><a href=#>about</a></li><li><a href=#>contact</a></li></ul>IE เป็นฝันร้ายสำหรับนักพัฒนาส่วนหน้าเสมอ!
หากรูปแบบ CSS ของคุณสรุปโดยทั่วไปคุณสามารถสร้างสไตล์ชีทสำหรับ IE และสิ่งนี้จะมีผลสำหรับ IE เท่านั้น:
<!--[if lt ie 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->ความหมายของรหัสเหล่านี้คือ: หากเบราว์เซอร์ของผู้ใช้คือ IE6 หรือต่ำกว่ารหัสนี้จะมีผล หากคุณต้องการรวม IE7 ให้เปลี่ยน [ถ้า LT คือ 7] เป็น [ถ้า lte ie 7]
ไม่ว่าคุณจะเป็นผู้ใช้ Windows หรือ Mac มีบรรณาธิการที่ยอดเยี่ยมมากมายให้คุณเลือก:
เมื่อมองย้อนกลับไปที่หน้าแรกพวกเราส่วนใหญ่เขียนเราจะพบนิสัยที่จริงจัง โดยปกติแล้วสัญชาตญาณของผู้เริ่มต้นคือการห่อย่อหน้าด้วย DIV แล้วใส่ divs เพิ่มเติมเพื่อควบคุมการวางตำแหน่ง - ที่จริงแล้วนี่เป็นวิธีที่ไม่มีประสิทธิภาพและเป็นอันตราย
หลังจากเขียนหน้าเว็บคุณต้องตรวจสอบหลายครั้งเพื่อลดจำนวนองค์ประกอบ
หากคุณสามารถใช้รายการเลย์เอาต์ UL ไปยังอย่าใช้ divs เพื่อจัดวาง
เช่นเดียวกับกุญแจสำคัญในการเขียนบทความคือการลดลดและลดการเขียนหน้าต้องทำตามมาตรฐานนี้ด้วย
ประโยชน์ของการเพิ่มแอตทริบิวต์ ALT ให้กับรูปภาพนั้นชัดเจนในตัวเองซึ่งจะช่วยให้ผู้ใช้ที่ปิดใช้งานรูปภาพหรือใช้อุปกรณ์พิเศษเพื่อเข้าถึงข้อมูลเจ้าชายของคุณและยังเป็นมิตรกับเครื่องมือค้นหาภาพ
Firefox ไม่รองรับการแสดงแอตทริบิวต์ ALT Image คุณสามารถเพิ่มแอตทริบิวต์ชื่อเรื่อง:
<img src=cornimage.jpg alt=网页设计title=网页设计/>ฉันมักจะเรียนและทำงานจนถึงตอนเช้าโดยไม่รู้ตัวและฉันคิดว่านี่เป็นสถานการณ์ที่ดี
ของฉัน ~ ฮ่า! เวลา (ช่วงเวลา Ah-ha หมายถึงช่วงเวลาที่แสงของต้นหลิวหรือช่วงเวลาแห่งการตรัสรู้) มักจะเกิดขึ้นตอนดึก ตัวอย่างเช่นฉันเข้าใจแนวคิดของการปิดใน JavaScript อย่างละเอียดในกรณีนี้ หากคุณยังไม่ได้สัมผัสกับช่วงเวลาที่ยอดเยี่ยมลองเลย!
ไม่มีอะไรสามารถช่วยให้คุณเรียนรู้ HTML ได้เร็วกว่าการเลียนแบบไอดอลของคุณ ตอนแรกเราทุกคนต้องเต็มใจที่จะสร้างเครื่องถ่ายเอกสารและจากนั้นค่อยๆพัฒนาสไตล์ของเราเอง ค้นคว้ารหัสของหน้าเว็บไซต์โปรดของคุณและดูว่าพวกเขาใช้งานอย่างไร นี่เป็นวิธีเดียวสำหรับผู้เชี่ยวชาญคุณต้องลอง หมายเหตุ: เพียงแค่เรียนรู้และเลียนแบบสไตล์การเข้ารหัสของพวกเขาไม่ใช่คัดลอกและคัดลอก!
ให้ความสนใจกับเอฟเฟกต์ JavaScript เย็น ๆ บนอินเทอร์เน็ต หากคุณดูเหมือนจะใช้ปลั๊กอินคุณสามารถค้นหาชื่อปลั๊กอินตามชื่อไฟล์ในแท็กหัวในซอร์สโค้ดและจากนั้นคุณสามารถเรียนรู้ที่จะใช้เพื่อการใช้งานของคุณเอง
สิ่งนี้จำเป็นอย่างยิ่งเมื่อคุณสร้างเว็บไซต์สำหรับ บริษัท อื่น ๆ คุณไม่ได้ใช้แท็ก blockquote ด้วยตัวเองเหรอ? จากนั้นผู้ใช้อาจใช้มันคุณไม่ได้ใช้ OL ด้วยตัวเองเหรอ? ผู้ใช้อาจเช่นกัน ใช้เวลาในการสร้างหน้าเว็บที่แสดงสไตล์ขององค์ประกอบเช่น UL, OL, P, H1-H6, blockquotes ฯลฯ และตรวจสอบว่ามีการละเว้นหรือไม่
หมายเหตุของนักแปล: ชื่อภาษาอังกฤษดั้งเดิมคือการใช้ Twitter
มี APIs มากมายที่สามารถเพิ่มลงในหน้าเว็บได้ฟรีตอนนี้และเครื่องมือเหล่านี้มีประสิทธิภาพมาก มันสามารถช่วยให้คุณใช้ฟังก์ชั่นที่ฉลาดมากมายและที่สำคัญกว่านั้นคือสามารถช่วยคุณโปรโมตเว็บไซต์ได้
Photoshop เป็นเครื่องมือสำคัญสำหรับวิศวกรส่วนหน้า หากคุณมีความเชี่ยวชาญใน HTML และ CSS คุณอาจเรียนรู้เพิ่มเติมเกี่ยวกับ Photoshop
แม้ว่าแท็ก HTML บางตัวจะไม่ค่อยมีการใช้งาน แต่คุณควรเข้าใจพวกเขา ตัวอย่างเช่น ABBR, Cite, ฯลฯ คุณต้องเรียนรู้ในกรณีฉุกเฉิน
มีแหล่งข้อมูลที่ยอดเยี่ยมมากมายบนอินเทอร์เน็ตและมีผู้เชี่ยวชาญหลายคนซ่อนตัวอยู่ในชุมชน ที่นี่คุณสามารถเรียนรู้ด้วยตัวเองและถามนักพัฒนาที่มีประสบการณ์
การรีเซ็ต CSS ยังรีเซ็ต CSS ซึ่งหมายถึงการรีเซ็ตรูปแบบแท็ก HTML หรือสไตล์เริ่มต้น
นอกจากนี้ยังมีการถกเถียงกันอย่างดุเดือดว่าจะใช้ CSS รีเซ็ตบนอินเทอร์เน็ตหรือไม่และผู้เขียนแนะนำ ก่อนอื่นคุณสามารถเลือกการรีเซ็ต CSS ที่เป็นผู้ใหญ่ก่อนจากนั้นค่อยๆพัฒนาเป็นสิ่งที่เหมาะกับคุณ
พูดง่ายๆคือคุณควรจัดองค์ประกอบเว็บให้มากที่สุด คุณสามารถสังเกตเว็บไซต์ที่คุณชอบและโลโก้ชื่อเรื่องแผนภูมิและย่อหน้านั้นถูกต้องอย่างแน่นอนอย่างแน่นอน มิฉะนั้นมันจะปรากฏว่าวุ่นวายและไม่เป็นมืออาชีพ
ตอนนี้คุณได้เชี่ยวชาญความรู้เกี่ยวกับ HTML, CSS และ Photoshop คุณต้องเรียนรู้วิธีการแปลง PSD เป็นรูปภาพและพื้นหลังบนหน้าเว็บ นี่คือสองบทเรียนที่ดี:
มีเฟรมเวิร์กที่ยอดเยี่ยมมากมายสำหรับ JavaScript และ CSS แต่ถ้าคุณเป็นมือใหม่อย่ารีบเร่งที่จะใช้มัน หากคุณไม่สามารถควบคุม CSS ได้อย่างชำนาญการใช้เฟรมเวิร์กจะทำให้ระบบความรู้ของคุณสับสน
กรอบ CSS ได้รับการออกแบบมาสำหรับนักพัฒนาที่มีทักษะซึ่งจะช่วยประหยัดเวลาได้มาก