ในซอร์สโค้ดหน้าก่อนหน้าฉันมักจะเห็นข้อความดังกล่าว:
<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 จะปรากฏขึ้นมันจะบอกเบราว์เซอร์ว่าหน้านี้มี 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 / AttachEvent ไปยัง 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 ie 7] เป็น [ถ้า lte ie 7]
ไม่ว่าคุณจะเป็นผู้ใช้ Windows หรือ Mac มีบรรณาธิการที่ยอดเยี่ยมมากมายให้คุณเลือก:
เมื่อมองย้อนกลับไปที่หน้าแรกพวกเราส่วนใหญ่เขียนเราจะพบกับการทานอาหารที่จริงจัง โดยปกติแล้วสัญชาตญาณของผู้เริ่มต้นคือการห่อย่อหน้าด้วย Div แล้วใส่ divs เพิ่มเติมเพื่อควบคุมการวางตำแหน่ง - ที่จริงแล้วนี่เป็นวิธีที่ไม่มีประสิทธิภาพและเป็นอันตราย
หลังจากเขียนหน้าเว็บคุณต้องตรวจสอบหลายครั้งเพื่อลดจำนวนองค์ประกอบ
หากคุณสามารถใช้เลย์เอาต์ UL อย่าใช้ DIV เพื่อจัดวางรายการ
เช่นเดียวกับกุญแจสำคัญในการเขียนบทความคือการลดลดและลดการเขียนหน้าต้องทำตามมาตรฐานนี้ด้วย
ประโยชน์ของการเพิ่มแอตทริบิวต์ 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 ได้รับการออกแบบมาสำหรับนักพัฒนาที่มีทักษะซึ่งจะช่วยประหยัดเวลาได้มาก