ด้วยความนิยมอย่างต่อเนื่องของมาตรฐาน WEB ในประเทศจีน แนวคิดต่างๆ เช่น การแยกพฤติกรรมประสิทธิภาพของโครงสร้าง การทำให้เป็นโมดูล ความหมาย และการลดประสิทธิภาพลงอย่างสวยงาม ได้กลายเป็นรายการสำคัญสำหรับการประเมินความเข้าใจของพนักงานส่วนหน้าเกี่ยวกับมาตรฐาน WEB ในบรรดาสิ่งเหล่านี้ มูลค่าเชิงพาณิชย์ที่อยู่เบื้องหลัง SEO นั้น "Semanticization" ได้รับความสนใจอย่างโดดเด่น ในฐานะ Front-End Worker ใหม่ ฉันเคยเชื่อเพียงว่า "Semanticization" เป็นวิธีการจัดโครงสร้าง (x) HTML โดยใช้แท็กที่เป็นประโยชน์ต่อเครื่องมือค้นหามากที่สุด น้ำหนัก.
หลังจากที่อ่านหนังสือส่วนหน้าและบทความมากมายจากรุ่นก่อนๆ ของฉัน ฉันเริ่มตระหนักถึงความตื้นเขินของจิตสำนึกของฉัน และค่อย ๆ ตระหนักถึงคุณค่าของ "ความหมาย" เนื้อหาต่อไปนี้เป็นเพียงบทสรุปของการปฏิบัติส่วนตัวในชีวิตประจำวันเท่านั้น รวบรวมความคิดเห็นของผู้อาวุโสหลายท่านและยืนอยู่บนไหล่ของยักษ์เพื่อดูเพิ่มเติม
“ความหมาย” คืออะไร
“ความหมาย” หมายถึงความสามารถของเครื่องจักรในการวิจัยและรวบรวมข้อมูลโดยมีการแทรกแซงของมนุษย์น้อยลง ทำให้เครื่องจักรสามารถเข้าใจหน้าเว็บได้ และเป็นประโยชน์ต่อมนุษย์ในท้ายที่สุด โดยเฉพาะการยืมคำอธิบายยอดนิยมจากชาวเน็ตในฟอรัม BI "ความหมายหมายถึงการไม่ปฏิบัติต่อแฟนสาวของคุณในฐานะเพื่อนธรรมดา" ต่อไปนี้เป็นตัวอย่างฟอร์ม XML ง่ายๆ:
อย่างไรก็ตาม ด้วยการควบคุม CSS เราสามารถแสดง "แฟน" เหมือน "เพื่อน" ได้อย่างง่ายดาย ถ้าเราเน้นไปที่เลเยอร์การนำเสนอเท่านั้น ป้ายกำกับก็เป็นเพียง "ตะขอ" ซึ่งมีไว้สำหรับให้ CSS และ JS ประมวลผล ยังคงเน้น "ความหมาย" ซึ่งจะกล่าวถึงรายละเอียดด้านล่าง
ความหมายเชิงความหมาย
1.เครื่องมือค้นหา
เกี่ยวกับการเพิ่มประสิทธิภาพกลไกค้นหา ผู้อาวุโสหลายคนได้ให้คำอธิบายมากมายเกี่ยวกับน้ำหนักของ Hx ข้อความที่ซ่อนอยู่ ฯลฯ ดังนั้นฉันจะไม่ลงรายละเอียดที่นี่เมื่อไม่นานมานี้ ซอฟต์แวร์ชื่อ Wolfram (http://www.wolframalpha เครื่องมือค้นหาของ .com/) ดึงดูดความสนใจ เรารู้ว่า Google จะจัดเรียงผลการค้นหาตามค่า PR ของแต่ละเว็บไซต์ เครื่องมือค้นหาอื่นๆ ก็มีอัลกอริธึมอิสระของตัวเองเช่นกัน และ Wolfram อ้างว่า "เข้าใจ" เนื้อหาที่ผู้ใช้ป้อน ตัดสินตามหลักฐาน เมื่อฉันป้อน "ใครคือเอเดรียน" วูลแฟรมให้ข้อเสนอแนะดังกล่าวแก่ฉันแม้ว่าผลลัพธ์จะไม่ถูกต้องนักก็ตาม
ที่เกี่ยวข้องกับงานส่วนหน้า ไม่ใช่ "ความหมาย" ที่เราชื่นชมเพียงเพื่อให้คอมพิวเตอร์เข้าใจเนื้อหาของเราใช่ไหม ด้วยตัวอย่างง่ายๆ เช่น <acronym title="World Wildlife Fund">WWF</acronym> คอมพิวเตอร์สามารถเข้าใจได้ว่า WWF สมควรที่จะเป็น World Wildlife Fund ไม่ใช่ World Water Forum มันไม่สมจริงเลยที่คอมพิวเตอร์จะสมบูรณ์ เข้าใจเนื้อหาของเรา ใช่ แม้ว่าเครื่องมือค้นหาอย่าง Wolfram อาจมีอายุสั้น แต่วิสัยทัศน์ที่พวกเขาใฝ่หา การทำให้ความรู้ของโลกสามารถคำนวณได้ก็คุ้มค่ากับการแสวงหาของเราอย่างแน่นอน
2.ประสบการณ์ผู้ใช้
มาดูตัวอย่างกันก่อน ต่อไปนี้คือแบบฟอร์มลงทะเบียนผู้ใช้บน Dangdang.com (https://login.dangdang.com/Register.aspx) และส่วนหนึ่งของโครงสร้าง XHTML ถูกดักจับ
มาทดลองกันว่าจะเกิดอะไรขึ้นถ้าเราเปลี่ยน <span class="span_n">ตั้งชื่อเล่น:</span> เป็น <label class="span_n" for="txtNickName">ตั้งชื่อเล่น:</label>
เมื่อคลิกเมาส์ "ตั้งชื่อเล่น" กล่องป้อนข้อความที่มีชื่อ ID "txtNickName" จะได้รับการโฟกัสโดยอัตโนมัติ คำจำกัดความของป้ายกำกับคือการกำหนดป้ายกำกับ (เครื่องหมาย) สำหรับตัวควบคุม (http://www. w3school.com cn/tags/tag_label.asp) เบราว์เซอร์กระแสหลักทั้งหมดมีการรองรับป้ายกำกับเหมือนกัน มีประสิทธิภาพมากในการควบคุมด้วยเสียง
เช่นเดียวกับ Dangdang.com รายการผลิตภัณฑ์ในหน้าแรกยังคงเป็นโค้ด XHTML ชิ้นเล็กๆ
โค้ดที่ถูกดักจับคือส่วนของราคา ไม่ว่าชื่อของคลาสจะเป็นอย่างไร มาทดลองกันว่าเราเปลี่ยน "span class="del grey s10""￥94.00 "/span" เป็น "del class="del grey s10" date=" ” cite=””》￥94.00《/del》《ins》￥46.00《/ins》 ไม่มีการเปลี่ยนแปลงด้านภาพ แต่เมื่อเราวิ่งเปลือยกายไปทั่วหน้า
ผลลัพธ์ที่ได้ชัดเจน ในฐานะคนทำงาน front-end เราต้องคำนึงด้วยว่าความเร็วอินเทอร์เน็ตของผู้ใช้อาจช้าเกินไป (บางทีเขาอาจใช้ Thunder BT) ส่งผลให้ไม่สามารถโหลด CSS ได้ รวมถึงสถานการณ์ของโทรศัพท์มือถือ และเลือกอันที่เหมาะสม ค่าใช้จ่ายของแท็กต่ำมาก คุณจะต้องเพิ่มความรู้พื้นฐานเกี่ยวกับ HTML เท่านั้น นอกจากนี้ แอตทริบิวต์ date และแอตทริบิวต์อ้างอิงยังมีประโยชน์มากอีกด้วย
นอกจากนี้ยังมีความสำคัญของแอตทริบิวต์ alt ของแท็ก abbr และแท็ก img สำหรับโปรแกรมอ่านหน้าจอ เนื่องจากเงื่อนไขไม่อนุญาต ฉันจึงไม่สามารถสัมผัสได้เป็นการส่วนตัว ที่อีกด้านหนึ่งของชายฝั่ง มีบางอย่างที่เหมือนกับมาตรา 508 อยู่แล้ว ปกป้องผู้พิการจากการถูกดูหมิ่นโดยเว็บไซต์ของรัฐบาล
3. ประสิทธิภาพการพัฒนา
โครงสร้างเว็บเพจที่เต็มไปด้วยความหมายมีผลกระทบอย่างมากต่อการพัฒนาในช่วงเริ่มต้นและการแก้ไขจุดบกพร่องในภายหลัง โดยเฉพาะอย่างยิ่ง มันเหมือนกับรหัสรายการผลิตภัณฑ์อย่างง่ายต่อไปนี้
ด้วยแท็ก "ความหมาย" "hooks" ในรายการผลิตภัณฑ์ได้รับการเสริมคุณค่าด้วยการเพิ่มรหัสและการตั้งชื่อคลาสให้กับเลเยอร์หลัก ทำให้สามารถควบคุมประสิทธิภาพทั่วโลกในรายการผลิตภัณฑ์ได้ สำหรับการปรับเปลี่ยนสไตล์ภายใต้สภาวะที่เหมาะสม จึงสามารถหลีกเลี่ยงการเปลี่ยนแปลงได้ โครงสร้างเว็บเพจผ่านนักพัฒนาแบ็คเอนด์และประหยัดค่าแรง อย่างไรก็ตาม เมื่อกลับมาสู่ความเป็นจริงและเผชิญกับความต้องการที่หลากหลายของผลิตภัณฑ์และผู้บังคับบัญชา การเปลี่ยนแปลงสไตล์โดยเพียงแค่ปรับเปลี่ยน CSS ขนาดใหญ่สำหรับขนาดเล็กก็ยังไม่สมจริง ความต้องการและจุดบกพร่อง วิธีที่ดีที่สุดคือสงวน "hooks" ไว้สำหรับเพจอย่างสมเหตุสมผลในช่วงเริ่มต้นของการพัฒนา เพื่ออำนวยความสะดวกในการแก้ไขและใช้งานในภายหลัง ในขณะนี้ แท็กความหมายที่หลากหลายนั้นค่อนข้างใช้งานได้จริง
สำหรับการทำงานร่วมกันเป็นทีม รหัสความหมายและการตั้งชื่อคลาสจะทำให้ทุกคนในทีมมีโครงสร้างที่ชัดเจน ลองจินตนาการว่าป้ายกำกับที่มีคลาสสีแดงเปลี่ยนเป็นสีน้ำเงินเนื่องจากข้อกำหนดที่เปลี่ยนแปลง และคุณจะเข้าใจได้ว่าเหตุใดจึงจำเป็นต้องมีการตั้งชื่อเชิงความหมาย
ในการสนทนาที่ผ่านมาเกี่ยวกับการแรสเตอร์และเฟรมเวิร์ก เราได้นำไปสู่การคิดเกี่ยวกับรูปแบบการตั้งชื่อ ต่อไปนี้เป็นเพียงการอภิปรายเกี่ยวกับวิธีการตั้งชื่อเท่านั้น และไม่รวมถึงอิทธิพลของปัจจัยอื่น ๆ เมื่อเร็วๆ นี้ ฉันได้สัมผัสกับชุดเค้าโครงที่สมบูรณ์ ฉันคิดว่าส่วนใหญ่เมื่อมีคนเข้ามาสัมผัสครั้งแรกพวกเขาก็รู้สึกเวียนหัวกับชื่อแบบนี้เช่น "area_01", "layout_01" เป็นต้น เพราะไม่เคยเจอเรื่องใหญ่ ขนาดของโปรเจ็กต์ที่ทีมรับช่วงต่ออยู่ในขณะนี้ เลยไม่แน่ใจว่าวิธีนี้เหมาะสมหรือไม่ แต่สิ่งหนึ่งที่แน่นอนคือ สิ่งนี้จะเพิ่มต้นทุนการเรียนรู้ของคนใหม่ และสำหรับการพัฒนาในอนาคต ผมคิดว่าวิธีนี้คือ ท้ายที่สุดแล้ว ในระยะยาว จุดประสงค์คือเพื่อปรับปรุงประสิทธิภาพและการลดข้อขัดแย้ง ฉันคิดว่านี่เป็นเพียงวิธีที่ YUI, Blueprint และ 960 Grid System เกิดขึ้น การคาดเดาและฉันหวังว่าจะได้รับการยืนยันในอนาคต
4. มาตรฐานอุตสาหกรรม
มีหมู่บ้านเล็กๆ นับพันสำหรับผู้คนนับพัน ในทำนองเดียวกัน ส่วนหน้านับพันหน้าก็สามารถเขียนหน้าได้นับพันหน้าด้วยประสิทธิภาพเดียวกันแต่มีโครงสร้างที่แตกต่างกัน นี่คือสถานการณ์ปัจจุบันในการสร้างหน้าใหม่ เราสามารถแก้ไขทุกด้านได้ ของหน้าตามต้องการ แต่มีเพียงไม่กี่คนที่ใส่ใจกับโครงสร้าง HTML ขั้นพื้นฐานที่สุด เหตุผลก็คือการขาดความหมายของแท็ก HTML ฉันคิดว่าเหตุผลเพิ่มเติมคือความไม่สนใจของผู้เขียนต่อพื้นฐานของ HTML ดังที่ Gui Ge กล่าวว่า “คนธรรมดามองไปที่ประตู ต้องการสร้างความแตกต่างในอุตสาหกรรมนี้ ความเชี่ยวชาญเป็นสิ่งจำเป็น กล่าวคือ ถ้าคุณไม่คำนึงถึงการพัฒนาตัวเอง ก็ไม่จำเป็นต้องหารือเกี่ยวกับประเด็น "ความหมาย"
เป้าหมายของ "ความหมาย" คือการบรรลุมาตรฐานที่เป็นหนึ่งเดียว อินเทอร์เน็ตในอนาคต "จะต้องเป็นอินเทอร์เน็ตแบบเปิด มันจะไม่เป็นเช่นตอนนี้ที่ข้อมูลไม่สามารถไหลได้อย่างไม่มีอุปสรรคและมีเกาะข้อมูลจำนวนมากและจุดบอดของข้อมูล" แนวปฏิบัติที่ดี อินเทอร์เฟซแบบเปิด และเนื้อหาที่แชร์จะกล่าวถึงในรายละเอียดด้านล่าง
การปฏิบัติความหมาย
ในเนื้อหาข้างต้น เนื้อหาเชิงปฏิบัติส่วนใหญ่มีการสลับกัน และนี่คือบทนำโดยสรุป
1.โครงสร้างเอกสาร
วิธีที่ง่ายที่สุดในการ "แยกความหมาย" คือการเริ่มต้นด้วยโครงสร้าง เลือกแท็กที่ตรงกับความหมายของเนื้อหามากที่สุด ทบทวน "คู่มือที่เชื่อถือได้สำหรับ HTML และ XHTML" อีกครั้ง และคิดถึงความหมายของเนื้อหาให้มากขึ้น แทนที่จะคิดแค่เพียง ตัดสินตามการแสดงผลหน้า หลายครั้งที่เราจะเผชิญกับสถานการณ์เช่นนี้ เพื่อจะเห็นผลง่ายๆ เพื่อที่จะดำเนินตามความหมายที่สมเหตุสมผล เราต้องเลือกวิธีแก้ปัญหาที่ไม่ง่ายนักที่จะนำไปใช้ ฉันคิดว่านี่เป็นความรู้สึกผิดชอบชั่วดีของผู้ปฏิบัติงานส่วนหน้าเกี่ยวกับมาตรฐานเว็บและความเข้าใจในการทำงานของเขา วิธีตัดสินใจเลือกที่สมดุลก็เป็นความรู้เช่นกัน /29/วิศวกรกับนักวิทยาศาสตร์/)
ในขั้นตอนก่อนการผลิต คุณยังสามารถพิจารณาสถานการณ์ในอนาคตและจอง hooks สำหรับเพจตามความหมายของเนื้อหาได้ แน่นอนว่าควรวิเคราะห์ปัญหาเฉพาะอย่างละเอียด ตามข้อกำหนดของโครงการที่แตกต่างกัน การพัฒนาที่นำมาใช้ควรมีความยืดหยุ่นและปรับเปลี่ยนได้ ตัวอย่างเช่น สำหรับหน้าพิเศษเพื่อการส่งเสริมการขาย เนื่องจากความจำเป็นในการปรับเปลี่ยนในภายหลังมีไม่มากนักภายใต้พื้นฐานการประชุม การใช้งานและการเข้าถึง การพัฒนาควรนำมาใช้ โหมดการพัฒนาอย่างรวดเร็วมุ่งเน้นไปที่การคืนค่าผลกระทบของร่างการออกแบบ แต่สำหรับผลกระทบของเว็บไซต์ขนาดใหญ่ ข้อกำหนดจะแตกต่างอย่างเห็นได้ชัด
2. กฎการตั้งชื่อ
รูปแบบการตั้งชื่อมาตรฐานสำหรับ ID และคลาสจะปรากฏบนอินเทอร์เน็ตเป็นครั้งคราว หลักการโดยรวมคือการตั้งชื่อตามความหมายของเนื้อหา ข้อดีของการตั้งชื่อเชิงความหมายนั้นชัดเจน
หากคุณต้องการเปลี่ยนตำแหน่งของแถบด้านข้าง คุณเพียงแค่ต้องแก้ไข CSS โดยไม่ต้องเปลี่ยนโครงสร้างหน้าเว็บ สำหรับโมดูลเพจที่เกิดขึ้นบ่อยครั้ง ฉันแนะนำให้ค่อยๆ สร้างแบบแผนการตั้งชื่อของคุณเองในระหว่างกระบวนการพัฒนา เช่น ส่วนหัว/ส่วนท้าย /main/hd/bd /nav/box/mode ฯลฯ ให้ใช้เครื่องหมายขีดกลาง "-" หรือตัวพิมพ์เล็กเพื่อสร้างชื่อที่ซับซ้อนมากขึ้น เช่น site-nav/quick-menu/secondaryContent/
แต่กลับไปสู่สถานการณ์เฉพาะ โครงการต่างๆ ควรเลือกวิธีการตั้งชื่อตามสถานการณ์เฉพาะ ควรใช้กฎการตั้งชื่อที่แตกต่างกันร่วมกัน เว็บไซต์ขนาดใหญ่ เช่น Taobao มีความเหมาะสมมากกว่าที่จะใช้การตั้งชื่อแบบแรสเตอร์และความหมายร่วมกัน สำหรับการปรับเปลี่ยนสไตล์ของเพจสามารถทำการปรับเปลี่ยนได้อย่างรวดเร็วและคล่องตัว สำหรับการผลิต มันสามารถปะติดปะต่อกันได้อย่างรวดเร็วสำหรับหน้าเดียวประเภทการประกาศส่วนใหญ่ ฉันขอแนะนำให้ใช้การตั้งชื่อที่มีโครงสร้างเพื่อทำให้เพจสมบูรณ์ได้อย่างรวดเร็วและง่ายดาย แทนที่จะใช้เวลาคิดมากเกินไปเกี่ยวกับการตั้งชื่อ
3. ไมโครฟอร์แมต
ไมโครฟอร์แมตเป็นวิธีการใหม่ในการฝังข้อมูลที่มีโครงสร้างในโค้ด XHTML มาตรฐาน พูดง่ายๆ ก็คือ ใช้ชุดมาตรฐานการตั้งชื่อคลาสที่กำหนดขึ้นเพื่อประกาศเนื้อหาของเอกสาร ความเข้าใจของคนส่วนใหญ่เกี่ยวกับไมโครฟอร์แมตเริ่มต้นด้วย hCard นี่คือตัวอย่าง hCard ง่ายๆ (http://www.oppenheim.com.au/) นี่คือ hCard ที่ใช้กับส่วนท้ายโดย James Oppenheim
ในบรรดาชื่อเหล่านั้น ชื่อคลาสภูมิภาค adr ชื่อที่กำหนด vcard url fn ถูกสร้างขึ้นสำหรับการจัดรูปแบบไมโคร คุณควรสังเกตด้วยว่ามีการเพิ่มแท็ก span หลายรายการเพื่อเพิ่มชื่อคลาส แล้วไมโครฟอร์แมตมีความสำคัญอย่างไร? ฉันส่งออกนามบัตรของฉันจากเรซูเม่ของฉันผ่านปลั๊กอิน Operator สำหรับ Firefox (http://adriancheng.name/resume.html)
ฉันสามารถนำเข้า vcf ที่ส่งออกไปยังไคลเอนต์อีเมลต่างๆ เป็นข้อมูลการติดต่อ หรือนำเข้าลงในสมุดที่อยู่ในโทรศัพท์มือถือ (http://tommyfan.com/blog/skill/add_phone_from_hcard/) จะเห็นได้ว่าผ่านไมโครฟอร์แมต มาตรฐานคุณสามารถทำได้ สะดวกสำหรับลูกค้าหลายรายในการประมวลผลข้อมูลในหน้าเว็บ บทบาทของไมโครฟอร์แมตในขณะนี้ก็คล้ายกับ API ในหน้าเว็บ แน่นอนว่าไมโครฟอร์แมตมีวิสัยทัศน์ที่กว้างขึ้น สำหรับมาตรฐานรูปแบบอื่น ๆ คุณสามารถทำได้ เยี่ยมชม http:// /microformats.org/ เรียนรู้เพิ่มเติม
บทสรุป
แนวทางปฏิบัติของ "ความหมาย" นั้นง่ายมาก อาจกล่าวได้ว่าเป็นส่วนพื้นฐานที่สุดของส่วนหน้า อย่างไรก็ตาม ด้วยเหตุผลหลายประการ จึงมีผู้เข้าใจผิดหรือเพิกเฉยและไม่ได้รับความสนใจเท่าที่ควร บทความนี้เพื่อแยกแยะขั้นตอนที่ผ่านมาของฉัน ฉันหวังว่ามันจะช่วยให้ผู้อ่านทุกคนคิดเกี่ยวกับมาตรฐานเว็บ