นักพัฒนาเบราว์เซอร์ได้ดูแลความสะดวกของผู้ที่สร้างเว็บไซต์ที่เปิดในเบราว์เซอร์เดียวกันนี้ ได้แก่ เว็บมาสเตอร์ พวกเขาได้เพิ่มเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ให้กับคุณสมบัติมาตรฐาน ซึ่งคุณสามารถเปิดและได้อย่างง่ายดาย ดูซอร์สโค้ดของหน้าเว็บไซต์ในเบราว์เซอร์: HTML, CSS, JavaScript (JS) รับข้อมูลที่เป็นประโยชน์มากมายเกี่ยวกับโครงสร้างของเว็บไซต์ ดำเนินการวิเคราะห์ทางเทคนิค โดยทั่วไปเห็นสิ่งที่มีประโยชน์มากมาย
แน่นอนว่าเครื่องมือเหล่านี้ไม่เพียงแต่ใช้โดยผู้สร้างเว็บไซต์ในการทำงานเท่านั้น แต่ยังใช้โดยผู้ใช้ทั่วไปด้วยซึ่งซอร์สโค้ดอนุญาตให้พวกเขาดูข้อมูลที่เป็นประโยชน์ต่างๆ
จากบทความนี้ คุณจะได้เรียนรู้วิธีดูซอร์สโค้ดของหน้าเว็บไซต์ในเบราว์เซอร์ (วิธีเปิดโค้ด HTML, CSS, JavaScript ของเว็บไซต์)
วิธีเปิดซอร์สโค้ดของหน้าในเบราว์เซอร์
มีสองวิธีในการเปิดซอร์สโค้ดของหน้าเว็บในเบราว์เซอร์:
- การใช้ปุ่มลัด
- เปิดจากเมนูบริบท
Ctrl+U– ปุ่มลัดเพื่อดูซอร์สโค้ดของทั้งหน้าเว็บไซต์ในหน้าต่างใหม่ที่แยกต่างหาก มาตรฐานสำหรับทุกเบราว์เซอร์: Google Chrome, Opera, Mozilla Firefox, เบราว์เซอร์ Yandex, IE
คุณยังสามารถเข้าสู่เครื่องมือสำหรับนักพัฒนาได้ดังนี้:
เพื่อให้สามารถค้นหาโค้ด คำ หรือข้อความที่ต้องการบนหน้าเว็บได้อย่างรวดเร็ว คุณสามารถใช้ชุดคีย์ลัดการค้นหามาตรฐานสำหรับเบราว์เซอร์ทั้งหมด: Ctrl + G
คำแนะนำวิดีโอ:
ดูรหัสองค์ประกอบ | สำรวจองค์ประกอบ | ตรวจสอบองค์ประกอบ
หากคุณจำเป็นต้องดูซอร์สโค้ดทั้งหมดไม่ใช่เพียงบางส่วน แต่แสดงเฉพาะบางส่วนบนหน้า เครื่องมือก่อนหน้าจะไม่ทำงาน เพื่อจุดประสงค์นี้ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จึงมีฟังก์ชันอื่น ซึ่งจะกล่าวถึงด้านล่าง
วิธีดูโค้ดขององค์ประกอบบนเพจ:
คุณยังสามารถใช้แป้นพิมพ์ลัดเพื่อเข้าถึงการตรวจสอบองค์ประกอบได้อย่างรวดเร็ว
ปุ่มลัด (ปุ่ม):
Google Chrome: Ctrl+Shift+I และ Ctrl+Shift+C
โอเปร่า: Ctrl+Shift+I และ Ctrl+Shift+C
Mozilla Firefox: Ctrl+Shift+I และ Ctrl+Shift+C
เบราว์เซอร์ Yandex: Ctrl+Shift+I และ Ctrl+Shift+C
หลังจากขั้นตอนเหล่านี้ ซอร์สโค้ดของหน้าเว็บจะเปิดขึ้นในหน้าต่างเบราว์เซอร์เดียวกัน:
โค้ด HTML ทั้งหมดจะอยู่ในคอลัมน์ด้านซ้ายขนาดใหญ่ และสไตล์ CSS อยู่ทางด้านขวา
ข้อดีของวิธีนี้คือผู้ใช้มีโอกาสเปลี่ยนซอร์สโค้ดและแก้ไขสไตล์ได้ นั่นคือคุณสามารถแก้ไขสไตล์บนไซต์และดูว่าสไตล์บางอย่างจะมีลักษณะอย่างไร โดยไม่ต้องทำการเปลี่ยนแปลงไฟล์ที่อยู่บนเซิร์ฟเวอร์โฮสติ้งทันที หากต้องการเปลี่ยนหรือเพิ่มโค้ดโปรแกรม คุณต้องดับเบิลคลิกที่ส่วนหรือพื้นที่ที่ต้องการ แน่นอนว่าการแก้ไขโค้ดในเบราว์เซอร์จะไม่เกิดขึ้นบนเซิร์ฟเวอร์ที่โฮสต์ ดังนั้นในอนาคตไม่ว่าในกรณีใดคุณจะต้องคัดลอกโค้ดนี้และเขียนลงในไฟล์
คำแนะนำแบบวิดีโอนี้อธิบายโดยละเอียดและแสดงวิธีทำงานกับเครื่องมือสำหรับนักพัฒนา:
เช่นเดียวกับที่ เพียงออนไลน์ในเบราว์เซอร์ของคุณ คุณสามารถดูซอร์สโค้ดของหน้าไซต์ รับข้อมูลพื้นฐานเกี่ยวกับโค้ด HTML และ CSS เปลี่ยนแปลงและคัดลอกได้โดยไม่ต้องดาวน์โหลดไฟล์ของไซต์นี้ลงในคอมพิวเตอร์ของคุณ .
อย่างไรก็ตาม ผู้ใช้อินเทอร์เน็ตที่ไม่มีประสบการณ์ซึ่งเปลี่ยนโค้ดของเพจและคาดว่าจะบันทึกจะต้องผิดหวัง หลังจากรีเฟรชหน้าแล้ว การเปลี่ยนแปลงทั้งหมดในหน้านั้นจะหายไป นี่ไม่เพียงพอที่จะแฮ็คไซต์ :)
วิธีดูซอร์สโค้ดบนโทรศัพท์ Android
ฉันอยากจะทราบด้วยว่าเครื่องมือสำหรับนักพัฒนานั้นมีให้ใช้งานไม่เฉพาะในเบราว์เซอร์เวอร์ชันเดสก์ท็อปเท่านั้น นั่นก็คือบนคอมพิวเตอร์และแล็ปท็อป บนโทรศัพท์และแท็บเล็ต (Android, iOS) คุณสามารถดูซอร์สโค้ดได้
ในการดำเนินการนี้ ให้เพิ่มคำนำหน้าวิวซอร์สให้กับ URL ของเพจที่กำลังตรวจสอบ:
ตัวอย่างเช่น:
ดูแหล่งที่มา:https://site/turbo-rezhim-opera/
คุณต้องเห็นการเปลี่ยนแปลงทั้งหมดบนไซต์อย่างรวดเร็ว โดยไม่ส่งผลกระทบต่อไฟล์และโค้ดของไซต์ที่โพสต์บนอินเทอร์เน็ต ตัวอย่างเช่น เปลี่ยนโทนสีของบล็อก ย้ายองค์ประกอบที่ย้ายออก เป็นต้น
ในการดำเนินการนี้ เว็บมาสเตอร์จำนวนมากใช้เซิร์ฟเวอร์ Denwer หรือ OpenServer ในเครื่อง เพื่อเรียกใช้สำเนาทั้งหมดของเว็บไซต์บนคอมพิวเตอร์ของตน วิธีนี้เป็นสากลและเหมาะสำหรับมืออาชีพ สามารถใช้ทดสอบการทำงานของสคริปต์และปลั๊กอินต่าง ๆ ทดลองเปลี่ยนการออกแบบและแก้ไขไฟล์ไซต์ทั้งหมด และหลังการทดสอบ ให้ถ่ายโอนการเปลี่ยนแปลงที่เหมาะสมไปยังไซต์โดยตรง
สำหรับผู้ใช้ที่อยู่ห่างไกลจากเว็บมาสเตอร์อาร์ต ฉันขอแนะนำให้ใช้เบราว์เซอร์เพื่อจุดประสงค์เหล่านี้ เนื่องจากฉันใช้ Chrome ฉันจะให้คำแนะนำพร้อมภาพหน้าจอสำหรับเบราว์เซอร์นี้โดยเฉพาะ ในการเปรียบเทียบคุณสามารถทำงานกับ Opera, Yandex.Browser, Mozilla Firefox และเบราว์เซอร์อื่น ๆ ได้ หลักการของเครื่องมือของพวกเขาคล้ายกัน
คำแนะนำที่ 1: วิธีดูโค้ด HTML ทั้งหมดของไซต์ในเบราว์เซอร์
เปิดหน้าเว็บที่ต้องการของเว็บไซต์ของคุณ คลิกขวาที่องค์ประกอบที่ต้องการ เมนูแบบเลื่อนลงตามบริบทของเบราว์เซอร์พร้อมคำสั่งที่ใช้ได้จะปรากฏขึ้น:
รูปที่ 1 การดูโค้ด HTML ทั้งหมดของหน้าเว็บในเบราว์เซอร์ Chrome
สำคัญ:คำสั่งในเมนูแบบเลื่อนลงอาจแตกต่างกัน เช่น สำหรับองค์ประกอบที่ใช้งานอยู่ (ลิงก์ รูปภาพ วิดีโอ) และองค์ประกอบที่ไม่ใช้งาน (ข้อความ พื้นหลัง div):
รูปที่ 2 เมนูแบบเลื่อนลงของเบราว์เซอร์ Chrome
ดังนั้นหากคุณไม่พบคำสั่งที่ต้องการ เพียงคลิกขวาที่อื่นหรือใช้ปุ่มลัดของเบราว์เซอร์
กลับไปที่รูปที่ 1 จะแสดงคำสั่งที่จำเป็นในการดูโค้ด HTML ทั้งหมดของหน้าเว็บต้นทาง เรียกว่า " ดูโค้ดหน้า- คลิกที่คำสั่งแท็บใหม่จะเปิดขึ้นพร้อมโค้ดเต็มของหน้าเว็บต้นฉบับซึ่งเป็นข้อดีอย่างมากสำหรับทุกสิ่ง - การดูสามารถทำได้ด้วยการเน้นไวยากรณ์:
รูปที่ 3 ส่วนโค้ดของไซต์นี้
เครื่องมือนี้มีประโยชน์มากสำหรับการค้นหาและแก้ไของค์ประกอบที่คุณกำลังมองหา
วิธีอื่นในการดูโค้ด HTML ทั้งหมดของหน้าเว็บ
เพื่อให้เข้าถึงได้รวดเร็วยิ่งขึ้น คุณสามารถใช้วิธีอื่นในการเรียกใช้เครื่องมือนี้ได้
- ในรูปที่ 1 เรายังเห็นว่าคำสั่งนี้สามารถใช้งานได้ผ่านแป้นพิมพ์ลัด + ;
- วาง view-source:site ลงในแถบที่อยู่ของเบราว์เซอร์แทนโดเมนของฉัน ใส่ที่อยู่ของคุณ
ทั้งสองวิธีเป็นแบบสากลและควรใช้ได้กับทุกเบราว์เซอร์
ในตอนแรก บางคนอาจคิดว่านี่ไม่ใช่เครื่องมือที่จำเป็นเลย แต่การดูโค้ด HTML ทั้งหมดของไซต์นั้นดีในการค้นหาองค์ประกอบที่จำเป็นในโค้ด ซึ่งอาจเป็นลิงก์ แท็ก เมตาแท็ก แอตทริบิวต์ และองค์ประกอบอื่นๆ .
การรวมปุ่มลัด +เปิดหน้าต่างค้นหาในเบราว์เซอร์ Chrome จะปรากฏที่ด้านบนขวา:
รูปที่ 3 ค้นหาตามรหัสไซต์
หลังจากที่คุณป้อนคำขอลงในแบบฟอร์มการค้นหา หน้าจอจะย้ายไปยังองค์ประกอบแรกที่พบ โดยใช้ลูกศรที่คุณสามารถย้ายไปมาระหว่างองค์ประกอบเหล่านั้น และเลือกองค์ประกอบที่คุณต้องการ:
รูปที่ 4 ค้นหาด้วยโค้ดไซต์ HTML
คำแนะนำที่ 2: วิธีดูและแก้ไขโค้ด HTML และ CSS ของไซต์ในเบราว์เซอร์ Google Chrome
ตอนนี้เป็นส่วนที่สำคัญที่สุด ซึ่งฉันจะแสดงให้คุณเห็นว่าคุณสามารถแก้ไขโค้ด HTML และ CSS ของเว็บไซต์ในเบราว์เซอร์ได้อย่างไร จากนั้นโอนการเปลี่ยนแปลงไปยังเบราว์เซอร์
เครื่องมือที่มีประโยชน์นี้จะพร้อมใช้งานในเบราว์เซอร์ของคุณเสมอ ทดลองใช้คำสั่งอื่นๆ ที่จะช่วยให้คุณแก้ไขไซต์ของคุณได้ง่ายขึ้น
หากคุณเปิดหน้าเว็บใด ๆ หน้าเว็บนั้นจะมีองค์ประกอบทั่วไปที่ไม่เปลี่ยนแปลงขึ้นอยู่กับประเภทและจุดสนใจของไซต์ ตัวอย่าง 4.1 แสดงโค้ดสำหรับเอกสารอย่างง่ายที่มีแท็กพื้นฐาน
ตัวอย่างที่ 4.1 ซอร์สโค้ดของหน้าเว็บ
ตัวอย่างหน้าเว็บ
หัวเรื่อง
ย่อหน้าแรก.
ย่อหน้าที่สอง
คัดลอกเนื้อหาของตัวอย่างนี้และบันทึกไว้ในโฟลเดอร์ c:\www\ เป็น example41.html หลังจากนั้นให้เปิดเบราว์เซอร์และเปิดไฟล์ผ่านรายการเมนู ไฟล์ > เปิดไฟล์ (Ctrl+O)- ในกล่องโต้ตอบการเลือกเอกสาร ให้เลือกไฟล์ example41.html หน้าเว็บที่แสดงในรูปที่ 1 จะเปิดขึ้นในเบราว์เซอร์ 4.1.
ข้าว. 4.1. ผลลัพธ์ของการรันตัวอย่าง
องค์ประกอบมีวัตถุประสงค์เพื่อระบุประเภทของเอกสารปัจจุบัน - DTD (คำจำกัดความประเภทเอกสารคำอธิบายของประเภทเอกสาร) นี่เป็นสิ่งจำเป็นเพื่อให้เบราว์เซอร์เข้าใจวิธีตีความหน้าเว็บปัจจุบัน เนื่องจาก HTML มีอยู่หลายเวอร์ชัน นอกจากนี้ยังมี XHTML (EXtensible HyperText Markup Language) ซึ่งคล้ายกับ HTML แต่แตกต่างจากในรูปแบบไวยากรณ์ เพื่อให้บราวเซอร์ “ไม่สับสน” และเข้าใจตามมาตรฐานในการแสดงหน้าเว็บจึงจำเป็นต้องตั้งโค้ดในบรรทัดแรก
.
มีหลายประเภทซึ่งจะแตกต่างกันไปขึ้นอยู่กับเวอร์ชันของ HTML ที่กำหนดเป้าหมาย ในตาราง 4.1. มีการระบุประเภทเอกสารหลักพร้อมคำอธิบาย
โต๊ะ 4.1. DTD ที่ถูกต้อง | ด็อคไทป์ |
คำอธิบาย |
|---|
| HTML4.01
|
|
|
ไวยากรณ์ HTML ที่เข้มงวด |
|
|
ไวยากรณ์ HTML เฉพาะกาล |
|
|
เอกสาร HTML ใช้เฟรม |
| HTML5
|
|
|
HTML เวอร์ชันนี้มีประเภทเอกสารเพียงประเภทเดียวเท่านั้น |
| เอ็กซ์เอชทีเอ็มแอล 1.0
|
|
|
ไวยากรณ์ XHTML ที่เข้มงวด |
|
|
ไวยากรณ์ XHTML เฉพาะกาล |
|
|
เอกสารนี้เขียนด้วย XHTML และมีเฟรม |
| เอ็กซ์เอชทีเอ็มแอล 1.1
|
|
|
นักพัฒนา XHTML 1.1 คาดว่าจะค่อยๆ แทนที่ HTML อย่างที่คุณเห็น คำจำกัดความนี้ไม่มีการแบ่งออกเป็นประเภท เนื่องจากไวยากรณ์เหมือนกันและเป็นไปตามกฎที่ชัดเจน |
ความแตกต่างระหว่างคำอธิบายเอกสารที่เข้มงวดและเฉพาะกาลคือแนวทางที่แตกต่างในการเขียนโค้ดเอกสาร HTML ที่เข้มงวดต้องปฏิบัติตามข้อกำหนด HTML อย่างเคร่งครัดและไม่ยอมให้เกิดข้อผิดพลาด Transitional HTML จะผ่อนคลายมากขึ้นเกี่ยวกับข้อบกพร่องของโค้ดบางประการ ดังนั้นจึงควรใช้ประเภทนี้ในบางกรณี
ตัวอย่างเช่น ใน HTML และ XHTML ที่เข้มงวด จำเป็นต้องมีแท็ก
และใน HTML เฉพาะกาลสามารถละเว้นและไม่ได้ระบุได้ ในเวลาเดียวกันเราจำได้ว่าเบราว์เซอร์จะแสดงเอกสารไม่ว่าในกรณีใด ๆ ไม่ว่าจะตรงกับไวยากรณ์หรือไม่ก็ตาม การตรวจสอบนี้ดำเนินการโดยใช้เครื่องมือตรวจสอบความถูกต้องและมีจุดประสงค์เพื่อให้นักพัฒนาติดตามข้อผิดพลาดในเอกสารเป็นหลัก</p>
<p>ในอนาคตเราจะใช้คำว่าเข้มงวดเป็นหลัก<!DOCTYPE>, นอกจากที่ระบุไว้. สิ่งนี้จะช่วยให้เราหลีกเลี่ยงข้อผิดพลาดทั่วไปและสอนให้เราเขียนโค้ดที่ถูกต้องตามหลักไวยากรณ์</p>
<p>คุณมักจะสามารถค้นหาโค้ด HTML ได้โดยไม่ต้องใช้อะไรเลย<!DOCTYPE>ในกรณีนี้หน้าเว็บจะยังคงแสดงอยู่ อย่างไรก็ตาม อาจเกิดขึ้นได้ว่าเอกสารเดียวกันปรากฏแตกต่างออกไปในเบราว์เซอร์เมื่อคุณใช้งาน<!DOCTYPE>และไม่มีมัน นอกจากนี้เบราว์เซอร์สามารถแสดงเอกสารดังกล่าวได้ในแบบของตนเองซึ่งส่งผลให้หน้า "พัง" เช่น จะแสดงแตกต่างไปจากที่นักพัฒนาต้องการโดยสิ้นเชิง เพื่อหลีกเลี่ยงสถานการณ์ดังกล่าว ให้เพิ่มเสมอ<!DOCTYPE>ไปที่จุดเริ่มต้นของเอกสาร</p><p>แท็ก <html>กำหนดจุดเริ่มต้นของไฟล์ HTML โดยส่วนหัวจะถูกเก็บไว้ภายใน ( <head>) และเนื้อหาเอกสาร ( <body>
).</p><p>ชื่อเอกสาร หรือที่เรียกว่าบล็อก <head>สามารถมีข้อความและแท็กได้ แต่เนื้อหาของส่วนนี้จะไม่แสดงโดยตรงบนเพจ ยกเว้นในคอนเทนเนอร์ <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>แท็ก <meta>เป็นสากลและเพิ่มความสามารถทั้งระดับโดยเฉพาะอย่างยิ่งด้วยความช่วยเหลือของเมตาแท็ก เนื่องจากโดยทั่วไปเรียกว่าแท็กนี้ คุณสามารถเปลี่ยนการเข้ารหัสหน้า เพิ่มคำหลัก คำอธิบายเอกสาร และอื่นๆ อีกมากมาย เพื่อให้เบราว์เซอร์เข้าใจว่ากำลังจัดการกับการเข้ารหัส UTF-8 (รูปแบบการแปลง Unicode, รูปแบบการแปลง Unicode) และเพิ่มบรรทัดนี้</p><p>
<title>ตัวอย่างหน้าเว็บ
แท็ก
กำหนดชื่อของหน้าเว็บ นี่เป็นหนึ่งในองค์ประกอบสำคัญที่ออกแบบมาเพื่อแก้ไขปัญหาต่างๆ ในระบบปฏิบัติการ Windows ข้อความชื่อเรื่องจะแสดงที่มุมซ้ายบนของหน้าต่างเบราว์เซอร์ (รูปที่ 4.2)</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p>
<p>ข้าว. 4.2. มุมมองส่วนหัวในเบราว์เซอร์</p>
<p>แท็ก <title>ถือเป็นข้อบังคับและจะต้องแสดงอยู่ในรหัสเอกสารอย่างแน่นอน</p><p>คุณต้องเพิ่มแท็กปิด</head>เพื่อระบุว่าบล็อกหัวเรื่องเอกสารเสร็จสมบูรณ์</p><p>เนื้อความของเอกสาร <body>มีไว้สำหรับการวางแท็กและเนื้อหาของหน้าเว็บ</p><p>
<h1>หัวเรื่อง</h1>
</p><p>HTML มีส่วนหัวของข้อความหกหัวข้อที่มีระดับต่างกันซึ่งระบุถึงความสำคัญของส่วนที่อยู่ถัดจากส่วนหัวนั้น ใช่แท็ก <h1>แสดงถึงส่วนหัวระดับแรกที่สำคัญที่สุดและแท็ก <h6>ทำหน้าที่ระบุหัวข้อระดับที่ 6 และมีนัยสำคัญน้อยที่สุด ตามค่าเริ่มต้น ส่วนหัวระดับแรกจะแสดงด้วยแบบอักษรตัวหนาที่ใหญ่ที่สุด และส่วนหัวระดับต่อมาจะมีขนาดเล็กกว่า แท็ก <h1>...<h6>อ้างถึงองค์ประกอบบล็อก โดยจะเริ่มต้นในบรรทัดใหม่เสมอ และหลังจากนั้น องค์ประกอบอื่นๆ จะปรากฏบนบรรทัดถัดไป นอกจากนี้ ยังมีการเพิ่มช่องว่างก่อนและหลังชื่อเรื่อง</p><p>
<!-- Комментарий -->
</p><p>ข้อความบางส่วนสามารถซ่อนไม่ให้แสดงในเบราว์เซอร์ได้โดยการแสดงความคิดเห็น แม้ว่าผู้ใช้จะไม่เห็นข้อความนี้ แต่ข้อความจะยังคงถูกส่งไปในเอกสาร ดังนั้นหากคุณดูซอร์สโค้ด คุณจะสามารถค้นพบบันทึกย่อที่ซ่อนอยู่ได้</p>
<p>เป็นเวลานานแล้วที่ตัวเลือก “แสดงแหล่งที่มาของหน้า” ไม่มีประโยชน์และไม่น่าสนใจสำหรับฉัน จนถึงตอนนี้ การเรียนรู้ HTML บน Codecademy และการออกแบบเว็บไซต์ของตัวเองยังไม่เติบโตเป็นงานอดิเรกใหม่ของฉัน นี่คือที่มาของคำถาม: จะหากรณีจริงและยืมวิธีแก้ปัญหาที่น่าสนใจสำหรับ "กระปุกออมสิน" ของคุณได้ที่ไหน? คำตอบนั้นง่ายอย่างไม่คาดคิด เช่นเดียวกับสิ่งที่ชาญฉลาดทั้งหมด: ดูซอร์สโค้ดของหน้าเว็บใน Google Chrome! ฉันแบ่งปันกับคุณที่พบเล็กน้อย</p>
<h2>ซอร์สโค้ดของหน้าคืออะไร</h2>
<p>หากคุณเช่นฉันเพิ่งเริ่มขั้นตอนแรกในการเขียนโปรแกรม HTML เป็นความคิดที่ดีที่จะค้นหาว่าซอร์สโค้ดของเพจคืออะไร</p>
<p>ซอร์สโค้ดหรือที่เรียกว่าโค้ดเพจ HTML เป็นข้อความในภาษา Hyper Text Markup Language (HTML) ประกอบด้วยเนื้อหาของหน้าจริง (ข้อความ ตาราง) และแท็ก ส่วนหลังทำหน้าที่เป็นคำแนะนำสำหรับเบราว์เซอร์: วิธีแสดงเนื้อหา, ประเภทของการจัดรูปแบบที่จะใช้, ตำแหน่งที่จะแทรกไฮเปอร์ลิงก์หรือไฟล์มีเดีย สำหรับเราซึ่งเป็นโปรแกรมเมอร์มือใหม่ ซอร์สโค้ดเป็นพื้นที่ฝึกอบรมที่ดีที่สุด: เราพบไซต์ที่น่าสนใจและสอดแนมมัน บันทึก และใช้แฟรกเมนต์ที่ประสบความสำเร็จ ยังไง?</p>
<h2>วิธีดูซอร์สโค้ดในหน้าเบราว์เซอร์ Google Chrome</h2>
<p>ค้นหาเพจที่คุณชอบ เช่น ฉันสนใจการออกแบบเมนูของเว็บไซต์ มีสามวิธีในการเปิดซอร์สโค้ดในเบราว์เซอร์ Google Chrome:</p>
<ol><li>คลิกที่ไอคอน <b>เมนู</b>ที่มุมขวาบนของเบราว์เซอร์และเลือก "เครื่องมือเพิ่มเติม" มีตัวเลือก "ดูซอร์สโค้ด" บอกตามตรงว่าฉันไม่ค่อยใช้วิธีนี้: มีการเคลื่อนไหวที่ไม่จำเป็นมากมาย มันสามารถทำให้ง่ายยิ่งขึ้นไปอีก</li>
<li>กดคีย์ผสม <b>Ctrl+U</b>– หน้าต่างใหม่พร้อมซอร์สโค้ดจะเปิดขึ้น</li>
<li>สำหรับผู้ชื่นชอบเมนูตามบริบท: คลิกขวาที่หน้าแล้วเลือกตัวเลือก "ดูโค้ดหน้า"</li>
</ol><p>เราจัดการกับงานในการดูโค้ด HTML ของเพจในเบราว์เซอร์ เรามาดูขั้นตอนที่น่าสนใจที่สุดกันดีกว่า</p>
<h2>วิธีแก้ไขและบันทึกซอร์สโค้ด</h2>
<p>หากต้องการเรียนรู้วิธีสร้างเว็บไซต์ การอ่านโค้ด HTML ของผู้อื่นนั้นไม่เพียงพอ คุณต้องเล่นกับมัน ทดลอง ทำการเปลี่ยนแปลง และตรวจสอบผลลัพธ์ คุณสามารถเริ่มต้นด้วยการรวบรวมตัวอย่างที่ประสบความสำเร็จบางส่วนได้ จะแก้ไขและบันทึกซอร์สโค้ดได้อย่างไร?</p>
<p>ตัวเลือก 1. “ด้วยตนเอง”</p>
<p>หลังจากที่เราเปิดซอร์สโค้ดของหน้าแล้ว ให้เรียกเมนูบริบทแล้วเลือกตัวเลือก "บันทึกเป็น" และบันทึกไฟล์ลงในฮาร์ดไดรฟ์ของคุณ เราแก้ไขไฟล์ใน Notepad หรือ Notepad บันทึกการเปลี่ยนแปลงและเปิดผ่านเบราว์เซอร์ ผลลัพธ์ของการเปลี่ยนแปลงของเรา (สำเร็จและไม่สำเร็จ) จะปรากฏในหน้าต่างเบราว์เซอร์</p><p>ตัวเลือกที่ 2. สำหรับมืออาชีพ</p>
<p>เมื่อคุณ "เล่น" ด้วยซอร์สโค้ดทุกวัน กระบวนการ "บันทึก - เปิด - เปลี่ยนแปลง - บันทึก - ตรวจสอบ" จะน่าเบื่อหน่าย สำหรับตัวฉันเอง ฉันพบวิธีแก้ปัญหาในรูปแบบของการติดตั้งปลั๊กอินสำหรับ Google Chrome - Firebug Lite ช่วยให้คุณสามารถแก้ไขและบันทึกซอร์สโค้ดได้โดยไม่ต้องออกจากหน้าต่างเบราว์เซอร์</p>
<p>ดังนั้นวันนี้เราจะมาดูเครื่องมือที่มีประโยชน์หลายอย่างสำหรับเว็บมาสเตอร์ที่ทำให้ชีวิตง่ายขึ้นเมื่อออกแบบเว็บไซต์ เริ่มจากคอนโซลสำหรับเว็บมาสเตอร์ใน Google Chrome กันก่อน มาดูคำถามที่พบบ่อยที่สุดสำหรับผู้ดูแลเว็บระหว่างการจัดวางเว็บไซต์กันดีกว่า</p>
<p>หากต้องการไปที่คอนโซล ให้เปิดเว็บไซต์ของคุณใน Google Chrome คลิกขวาที่ใดก็ได้บนหน้าเว็บ แล้วเลือก "ดูโค้ดของหน้า" ในเมนูแบบเลื่อนลงตามบริบท หรือในองค์ประกอบเฉพาะเพื่อศึกษาโดยเลือก "ดูโค้ด" องค์ประกอบ".</p>
<p>ที่ด้านบนสุด คุณจะมีหลายแท็บอยู่ในรายการ วันนี้เราจะมาพูดถึงแท็บ "องค์ประกอบ" <b>,
</b>ซึ่งนำเสนอองค์ประกอบของหน้าเว็บด้วยการเน้นแท็ก คุณสมบัติ การเน้นการซ้อนองค์ประกอบ การแสดงลำดับชั้นขององค์ประกอบในแผนผัง DOM (คำใบ้ที่ด้านล่าง จากรากแม่ถึงปัจจุบัน) ความสามารถ เพื่อแก้ไของค์ประกอบ รายการคุณสมบัติ พิจารณาค้นหาตามองค์ประกอบ ตลอดจนมาทำความคุ้นเคยกับการดูสไตล์ CSS ฯลฯ ที่เกี่ยวข้องกับองค์ประกอบต่างๆ</p>
<h3>ฉันจะดูสไตล์ทั้งหมดที่เกี่ยวข้องกับองค์ประกอบเฉพาะได้อย่างไร ตอนนี้ใช้ตัวไหนอยู่ครับ? อยู่ในไฟล์ใดบ้าง?</h3>
<p>ดังนั้นไม่มีอะไรจะง่ายไปกว่านี้อีกแล้ว! เปิดเบราว์เซอร์ Google Chrome เปิดไซต์ของเรา - แหล่งที่มาของคำถาม คลิกขวาที่องค์ประกอบที่ต้องการหากมองเห็นได้ในบริบทของหน้า และเลือก "ดูรหัสองค์ประกอบ" ในเมนูบริบท</p>
<p>ที่ด้านล่างเรามีคอนโซลพร้อมแท็บที่ไฮไลต์ทางด้านซ้าย “ องค์ประกอบ"และสไตล์ทั้งหมดที่เกี่ยวข้องกับองค์ประกอบทางด้านขวาโดยที่: <b>รูปแบบที่คำนวณ</b>– นี่เป็นสไตล์ “สรุป” ทั่วไปที่กำหนดให้กับองค์ประกอบจากกฎ CSS และการตั้งค่าของเบราว์เซอร์ของผู้ใช้ (สภาพแวดล้อมของเขา) และในเวลาเดียวกันแท็บก็ถูกยุบ</p>
<p>แต่เราสนใจแท็บ "สไตล์" ซึ่งขยายอยู่ข้างใต้ ซึ่งจะแสดงรายการสไตล์ทั้งหมดที่กำหนดให้กับองค์ประกอบ รวมถึงไฟล์ที่ระบุกฎเหล่านี้สำหรับองค์ประกอบนี้ตามประเภท รหัส คลาส ชื่อ คุณสมบัติ , คุณลักษณะ ฯลฯ ยิ่งไปกว่านั้น หากกฎ CSS ถูกขีดฆ่า นั่นหมายความว่ากฎนั้นถูกกำหนดใหม่ก่อนหน้านี้/ในภายหลัง (ซึ่งทำให้ง่ายต่อการติดตามว่ากฎ CSS ใดมีความสำคัญ และในกรณีนี้จะนำไปใช้กับองค์ประกอบ)</p>
<p>ด้านล่างคอนโซลจะมีบรรทัดที่แสดงองค์ประกอบในลำดับชั้นของเอกสาร ช่วยให้คุณสามารถดูรายการองค์ประกอบหลักทั้งหมดตั้งแต่รากไปจนถึงองค์ประกอบที่เลือกได้อย่างง่ายดาย บางอย่างเช่น "เกล็ดขนมปัง"</p>
<h3>แท็ก Html ไม่ปรากฏในบริบทของหน้า? หรือคุณจำเป็นต้องค้นหาแท็กทั้งหมด เช่น ตามคลาส ชื่อ คุณสมบัติ ประเภท?</h3>
<p>เปิดไซต์ใน Google Chrome คลิกขวา เรียกเมนูบริบท เลือก <b>«
</b>ดูโค้ดหน้า <b>»
</b>- กดคีย์ผสม “CTRL + F” พร้อมกันป้อนวลีที่เราต้องการ ( <b>ตัวอย่างเช่น</b><i>:
</i><i>คลาส =”</i><i>การขยายความ"</i>) และเลื่อนดูรายการผลลัพธ์ที่พบ โดยดูสไตล์ทั้งหมดที่เกี่ยวข้องกับองค์ประกอบที่ต้องการพร้อมกันทางด้านขวาของหน้า</p>
<h3>วิธีดูโค้ด html ขององค์ประกอบที่โหลดแบบไดนามิก (เช่น: ผ่าน Ajax)</h3>
<p>เรากำลังรอให้หน้าเว็บโหลดใน Google Chrome เราดำเนินการที่จำเป็นเพื่อให้ Ajax ทำงานได้ คลิกขวาที่ข้อมูลที่โหลด เลือก "ดูโค้ดองค์ประกอบ" ในเมนูบริบท และตรวจสอบผลลัพธ์ในคอนโซลบนแท็บ "องค์ประกอบ" ทางด้านซ้าย</p>
<h3>ดูการเปลี่ยนแปลงสไตล์ CSS แบบเรียลไทม์</h3>
<p>อย่างไรก็ตาม หากจำเป็น ยังสะดวกที่จะสังเกตสไตล์ที่กำหนดให้กับองค์ประกอบได้ทันที เช่น เมื่อเลื่อนดูแกลเลอรีและเหตุการณ์ตัวจับเวลาอื่นๆ สไตล์ทั้งหมดที่กำหนดผ่านจาวาสคริปต์แบบเรียลไทม์จะแสดงในคุณสมบัติ <b>สไตล์</b>องค์ประกอบที่เลือกในหน้าต่างบนแท็บ "องค์ประกอบ"</p>
<h3>ดูผลกระทบของกฎ CSS ต่อการนำเสนอแท็ก html แบบโต้ตอบ</h3>
<p>Google Chrome มีคอนโซลแบบโต้ตอบสำหรับสไตล์ CSS ซึ่งหมายความว่าคุณไม่เพียงแต่สามารถดูได้ว่าสไตล์ใดที่ใช้กับองค์ประกอบเท่านั้น แต่ยังเลื่อนเคอร์เซอร์ของเมาส์ไปเหนือคุณสมบัติ CSS ที่ต้องการ เปิดใช้งานโดยใช้ช่องทำเครื่องหมายป๊อปอัปทางด้านขวา หรือปิดใช้งานโดยการล้างค่าสถานะ และดู ผลลัพธ์ที่ได้บนหน้า</p>
<h3>เราเปลี่ยนโครงสร้างของการนำเสนอองค์ประกอบ html ได้ทันที (ในเบราว์เซอร์โดยตรง)</h3>
<p>ดังนั้นเราจึงได้เรียนรู้วิธีสำรวจโครงสร้างของเอกสารเว็บใน Google Chrome แล้ว ตอนนี้เราจะดูองค์ประกอบการแก้ไขแบบคร่าวๆ ทันที เราไปที่คอนโซลด้วยวิธีที่สะดวกสำหรับเรา เราพบองค์ประกอบที่ต้องการในแท็บ "องค์ประกอบ" คลิกขวาที่องค์ประกอบนั้นจึงเรียกเมนูบริบทป๊อปอัปขึ้นมา:</p>
<ul><li><b>เพิ่มแอตทริบิวต์</b>– เพิ่มแอตทริบิวต์สำหรับองค์ประกอบที่ระบุ ทันทีที่เคอร์เซอร์เริ่มทำงาน เราจะเริ่มตั้งค่าคุณสมบัติที่ต้องการ <b>ตัวอย่างเช่น</b>: เขียน name="itemImage" ซึ่งจะถูกเพิ่มลงในองค์ประกอบของเราทันที</li>
<li><b>แก้ไขแอตทริบิวต์</b>– หากคุณคลิกขวาที่แอตทริบิวต์องค์ประกอบ ไอเท็มจะพร้อมใช้งาน <b>แก้ไข</b><b>คุณลักษณะ</b>- คลิกและแก้ไข</li>
</ul><p><b>ตัวอย่างการใช้งาน:</b>เราลืมรหัสผ่านที่บันทึกไว้ภายใต้เครื่องหมายดอกจันใน Google Chrome (หากรหัสผ่านถูกบันทึกในเบราว์เซอร์นี้) คลิกขวาที่องค์ประกอบโดยป้อนรหัสผ่าน คลิกที่ "ดูรหัสองค์ประกอบ" <b>,
</b>ในคอนโซลบนแท็บด้านซ้าย <b>องค์ประกอบ</b>คลิกขวาที่แอตทริบิวต์ type="password" คลิกซ้ายที่ <b>แก้ไข</b><b>คุณลักษณะ</b>เปลี่ยนคุณลักษณะ <i>ประเภท =”</i><i>รหัสผ่าน"</i>บน <i>ประเภท =”</i><i>ข้อความ"</i>และตอนนี้ รหัสผ่านเดียวกันจะแสดงในรูปแบบข้อความแทนเครื่องหมายดอกจัน</p>
<ul><li><b>แก้ไข</b><b>html</b>– คลิกขวาที่องค์ประกอบในคอนโซล <b>องค์ประกอบ</b>, เลือก <b>แก้ไข</b><b>HTML,</b>เปลี่ยนรหัสตามที่คุณต้องการ</li>
<li><b>สำเนา</b><b>เช่น</b><b>HTML</b>– เราคัดลอกส่วนของ HTML ที่เราต้องการสำหรับการวิจัยเพิ่มเติม เช่น ในสมุดบันทึก หรือเพื่อวัตถุประสงค์อื่นที่เราจำเป็นต้องใช้เลย์เอาต์เดียวกันทุกประการ เราประหยัดเวลา</li>
<li><b>สำเนา</b><b>XPAT</b>– คัดลอกการแสดง XPATH ของโครงสร้างจากรากขององค์ประกอบหลักไปยังองค์ประกอบที่เลือก</li>
<li><b>ลบ</b><b>โหนด</b>– หากคุณต้องการลบองค์ประกอบที่เลือกในปัจจุบันและลูก ๆ ทั้งหมดออกจากบริบทของหน้าเว็บ และดูผลลัพธ์</li>
<li><b>คำ</b><b>ห่อ</b>– จะแสดงมุมมองหน้าเว็บในบริบทคอนโซล <b>องค์ประกอบ</b>อ่านง่ายขึ้น</li>
</ul><p>ในบทความต่อไปนี้ เราจะพิจารณาเครื่องมือสำหรับผู้ดูแลเว็บต่อไป และโดยเฉพาะอย่างยิ่ง เราจะทำความคุ้นเคยกับแท็บเครื่องมือที่เหลือสำหรับผู้ดูแลเว็บใน <b>Google Chrome</b>และยังพิจารณาแก้ไขข้อผิดพลาดของจาวาสคริปต์โดยใช้เบราว์เซอร์ที่แตกต่างกัน</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
</div>
</article>
</div>
</div>
<div id="secondary">
<aside id="search-2" class="widget widget_search clearfix">
<form action="/" class="search-form searchform clearfix" method="get">
<div class="search-wrap">
<input type="text" placeholder="ค้นหา" class="s field" name="s">
<button class="search-icon" type="submit"></button>
</div>
</form>
</aside>
<aside id="recent-posts-2" class="widget widget_recent_entries clearfix">
<h3 class="widget-title"><span>รายการล่าสุด</span></h3>
<ul>
<li>
<a href="https://olegshein.ru/th/applied/optimizaciya-operativnoi-pamyati-dlya-windows-xp-programmy-dlya-ochistki/">โปรแกรมสำหรับล้าง RAM</a>
</li>
<li>
<a href="https://olegshein.ru/th/contacts-and-messages/prilozhenie-chtob-govorit-po-internetu-luchshie-prilozheniya/">แอพที่ดีที่สุดสำหรับการออกเดทและการสื่อสาร</a>
</li>
<li>
<a href="https://olegshein.ru/th/applied/krymskii-rouming-ot-megafona-stoimost-zvonkov-sms-i/">โรมมิ่งไครเมียจาก Megafon: ค่าโทร SMS และอินเทอร์เน็ต</a>
</li>
<li>
<a href="https://olegshein.ru/th/instructions/pri-skanirovanii-prosmotr-mac-os-kontrast-izobrazheniya-kak/">วิธีสแกนเอกสารและภาพถ่ายใน OS X</a>
</li>
<li>
<a href="https://olegshein.ru/th/security/blade-soul-zapuskaetsya-oshibka-1073-oshibki-blade-and-soul-i-sposoby-ih/">ข้อผิดพลาดของ Blade and Soul และวิธีแก้ไข</a>
</li>
<li>
<a href="https://olegshein.ru/th/security/kak-nastroit-monitor-dlya-pravilnoi-cvetoperedachi-s-pomoshchyu-po/">คำแนะนำ: การปรับเทียบหน้าจอแล็ปท็อป - การปรับการแสดงสี การแสดงสีของจอภาพไม่ดี</a>
</li>
<li>
<a href="https://olegshein.ru/th/security/pochemu-gnezdo-usb-ne-rabotaet-kak-otklyuchit-ili-vklyuchit-usb-porty-v/">วิธีปิดหรือเปิดใช้งานพอร์ต USB ใน Windows</a>
</li>
<li>
<a href="https://olegshein.ru/th/contacts-and-messages/tipovye-neispravnosti-telefonov-lg-problemy-s-lg-g3-poprobuite-nashi-resheniya/">ปัญหาทั่วไปกับโทรศัพท์ LG</a>
</li>
</ul>
</aside>
<aside id="text-5" class="widget widget_text clearfix">
<div class="textwidget">
<script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script>
<div id="vk_groups"></div>
</div>
</aside>
<aside id="text-4" class="widget widget_text clearfix">
<div class="textwidget">
</div>
</aside>
<aside id="text-3" class="widget widget_text clearfix">
<div class="textwidget">
</div>
</aside>
</div>
</div>
</div>
<footer id="colophon" class="clearfix">
<div class="footer-socket-wrapper clearfix">
<div class="inner-wrap">
<div class="footer-socket-area">
<div class="footer-socket-right-section">
</div>
<div class="footer-socket-left-sectoin">
<div class="copyright">2024 <a href="https://olegshein.ru/th/" title="olegshein.ru"><span>olegshein.ru</span></a>- ชมรมคอมพิวเตอร์ของ Oleg Shein <br></div>
</div>
</div>
</div>
</div>
</footer>
<a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a>
</div>
<script type="text/javascript">
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = {
"sidebar": "colormag_right_sidebar",
"margin_top": 10,
"margin_bottom": 0,
"stop_id": "",
"screen_max_width": 0,
"screen_max_height": 0,
"width_inherit": false,
"refresh_interval": 1500,
"window_load_hook": false,
"disable_mo_api": false,
"widgets": ['text-3']
};
</script>
<script type="text/javascript">
(function(w, doc) {
if (!w.__utlWdgt) {
w.__utlWdgt = true;
var d = doc,
s = d.createElement('script'),
g = 'getElementsByTagName';
s.type = 'text/javascript';
s.charset = 'UTF-8';
s.async = true;
s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js';
var h = d[g]('body')[0];
h.appendChild(s);
}
})(window, document);
</script>
<div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common"
data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln."
data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true"
class="uptolike-buttons"></div>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var pwebcontact_l10n = pwebcontact_l10n || {};
pwebcontact_l10n.form = {
"INIT": "Initializing form...",
"SENDING": "Sending...",
"SEND_ERR": "Wait a few seconds before sending next message",
"REQUEST_ERR": "Request error: ",
"COOKIES_ERR": "Enable cookies and refresh page to use this form"
};
/* ]]> */
</script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {
"visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c",
"visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c",
"width": "Auto"
};
/* ]]> */
</script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script>
<script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script>
<div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr">
<div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free">
<span class="pweb-text">มีคำถามหรือไม่?</span>
<span class="pweb-icon"></span>
</div>
<div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr">
<div class="pwebcontact-container-outset">
<div id="pwebcontact1_container" class="pwebcontact-container">
<div class="pwebcontact-container-inset">
<form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8">
<div class="pweb-fields">
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-name pweb-field-name">
<div class="pweb-label">
<label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">ชื่อ</label>
</div>
<div class="pweb-field">
<div class="pweb-field-shadow">
<input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none">
</div>
</div>
</div>
</div>
</div>
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-email pweb-field-email">
<div class="pweb-label">
<label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">อีเมล <span class="pweb-asterisk">*</span> </label>
</div>
<div class="pweb-field">
<div class="pweb-field-shadow">
<input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none">
</div>
</div>
</div>
</div>
</div>
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-textarea pweb-field-message">
<div class="pweb-label">
<label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">ข้อความ <span class="pweb-asterisk">*</span> </label>
</div>
<div class="pweb-field">
<div class="pweb-field-shadow">
<textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="pweb-row">
<div>
<div class="pweb-field-container pweb-field-buttons">
<div class="pweb-field">
<button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">ส่ง</button>
</div>
</div>
</div>
</div>
</div>
<div class="pweb-msg pweb-msg-after">
<div id="pwebcontact1_msg" class="pweb-progress">
<script type="text/javascript">
document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..."
</script>
</div>
</div>
<input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token">
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function() {
jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block");
new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), {
'background_color': '#000000',
'color': '#ffffff',
'max_width': 250,
'opacity': 0.95,
'position': 'center'
});
});
</script>
<script type="text/javascript">
jQuery(document).on('ready post-load', function() {
jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox');
});
jQuery(document).on('ready post-load', easy_fancybox_handler);
jQuery(document).on('ready', easy_fancybox_auto);
</script>
<div id="mistape_dialog" data-mode="comment" data-dry-run="0">
<div class="dialog__overlay"></div>
<div class="dialog__content">
<div id="mistape_confirm_dialog" class="mistape_dialog_screen">
<div class="dialog-wrap">
<div class="dialog-wrap-top">
<h2>แจ้งการพิมพ์ผิด</h2>
<div class="mistape_dialog_block">
<h3>ข้อความที่จะส่งถึงบรรณาธิการของเรา:</h3>
<div id="mistape_reported_text"></div>
</div>
</div>
<div class="dialog-wrap-bottom">
<div class="mistape_dialog_block comment">
<h3><label for="mistape_comment">ความคิดเห็นของคุณ (ไม่บังคับ):</label></h3>
<textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea>
</div>
<div class="pos-relative">
</div>
</div>
</div>
<div class="mistape_dialog_block">
<a class="mistape_action" data-action="send" data-id="389" role="button">ส่ง</a>
<a class="mistape_action" data-dialog-close role="button" style="display:none">ยกเลิก</a>
</div>
<div class="mistape-letter-front letter-part">
<div class="front-left"></div>
<div class="front-right"></div>
<div class="front-bottom"></div>
</div>
<div class="mistape-letter-back letter-part">
<div class="mistape-letter-back-top"></div>
</div>
<div class="mistape-letter-top letter-part"></div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</html> 