วิธีสร้างจารึกที่สวยงามใน html วิธีสร้างแบบอักษรที่สวยงามใน html: ขนาด, สี, แท็กแบบอักษร html ตามค่าเริ่มต้น ข้อความจะถูกจัดชิดซ้าย

ฉันสั่งให้สุภาพบุรุษวุฒิสมาชิกเก็บคำปราศรัยไว้เป็นลายลักษณ์อักษร
แต่ด้วยคำพูดของคุณเองเพื่อให้ทุกคนมองเห็นเรื่องไร้สาระ!
ปีเตอร์ที่หนึ่ง

ตอนนี้, ข้อความเป็น HTMLเป็นวิธีหลักในการนำเสนอข้อมูล เว็บไซต์ส่วนใหญ่บนอินเทอร์เน็ตประกอบด้วยเนื้อหาที่เป็นข้อความ ซึ่งหมายความว่าหากคุณมีทักษะ อย่างน้อยคุณก็สามารถอ่านและเขียนได้สูงสุด (มีความจริงอยู่บ้างในเรื่องตลกทุกเรื่อง)

สมมติว่าคุณพิมพ์ข้อความในโปรแกรมแก้ไข จัดรูปแบบข้อความ (เน้นคำบางคำ ตัวหนาหรือ ตัวเอียง) หรือทำอย่างอื่นกับมัน จากนั้นฉันก็คัดลอกและวางข้อความลงในโค้ด html ของฉัน คุณเปิดหน้า html ใน และการจัดรูปแบบทั้งหมดของคุณหายไปที่ไหนสักแห่ง สิ่งนี้เกิดขึ้นเนื่องจากโปรแกรมแก้ไขข้อความใช้อักขระพิเศษของตัวเองในการจัดรูปแบบข้อความ (โดยพื้นฐานแล้วจะเป็นแท็กเดียวกัน ใช้ในโปรแกรมแก้ไขข้อความเท่านั้น) ซึ่งคุณจะไม่เห็นตามค่าเริ่มต้น

ในหน้าต่างตัวแก้ไข คุณจะเห็นเพียงข้อความเท่านั้น แต่ในความเป็นจริงแล้ว ยังมีอักขระควบคุมพิเศษที่โปรแกรมแก้ไข "เข้าใจ" วิธีแสดงข้อความชิ้นนี้หรือชิ้นนั้น นั่นคือฉันขอย้ำอีกครั้งว่านี่เหมือนกับ "ปรับแต่ง" สำหรับใช้ในโปรแกรมแก้ไขข้อความเท่านั้น

แต่ถึงกระนั้นก็มีวิธีถ่ายโอนข้อความจากโปรแกรมแก้ไขและวางลงในโค้ด html ในรูปแบบดั้งเดิม และเนื่องจากเรากำลังพูดถึงเรื่องนี้ เรามาเริ่มศึกษาการจัดรูปแบบข้อความด้วยแท็กนี้กันดีกว่า มาเริ่มกันเลย

§ 2. แท็กการจัดรูปแบบเอง

ข้อความที่จัดรูปแบบล่วงหน้าสามารถแทรกลงในหน้า HTML ได้โดยใช้แท็ก และ เบราว์เซอร์จะแสดงข้อความที่อยู่ระหว่างแท็กเหล่านี้ตามที่ปรากฏ โปรแกรมแก้ไขข้อความ- พูดตามตรง ฉันไม่เคยใช้แท็กนี้ในทางปฏิบัติ ดังนั้นฉันจึงไม่สามารถพูดอะไรเกี่ยวกับมันได้อีก

แท็กยอดนิยมสำหรับการจัดรูปแบบข้อความคือ:

• - ใช้เพื่อเน้นข้อความ ตัวหนา.


• - เคยรับ ตัวเอียงข้อความ. ขอแนะนำให้ใช้แท็กแทนแท็กนี้


• - จะอนุญาต เน้นย้ำข้อความ. สิ่งสำคัญที่นี่คือผู้ใช้จะไม่สับสนข้อความที่ขีดเส้นใต้ด้วยลิงก์


• - ทำให้ข้อความถูกขีดฆ่า


• - มีไว้สำหรับเน้นข้อความตัวห้อย (ตัวห้อย) แท็กนี้จะมีประโยชน์ เช่น สำหรับการเขียนสูตรเคมี นี่คือรหัส

  น้ำ

  ทำให้เราได้สูตรนี้มา



• - จำเป็นต้องเน้นข้อความตัวยก (ตัวยก) ตัวอย่างเช่น ในการเขียนการยกกำลัง: เราเขียน

  (ก+ข)2,

  เราได้รับ

  (ก+ข) 2.

แท็กทั้งหมดนี้สามารถใช้เพื่อจัดรูปแบบข้อความทีละรายการหรือหลายรายการพร้อมกันได้ ซึ่งทำได้โดยการซ้อนแท็กไว้ภายในกันและกัน ตัวอย่างเช่น รหัส html ต่อไปนี้:

H2O เป็นสูตรของน้ำ

เมื่อรับชม

น้ำ- นี้ สูตรน้ำ.

§ 3. ย่อหน้า

ใน HTML ย่อหน้าจะถูกสร้างขึ้นโดยใช้นามสกุล . การใช้แท็กนี้จะแทรกบรรทัดว่างหนึ่งบรรทัด และวางองค์ประกอบหน้า HTML ที่มองเห็นได้ไว้ด้านหลังบรรทัดถัดไป ตัวอย่างเช่น ถ้าเราเขียนว่า:

ดังนั้นมันจะมีลักษณะดังนี้:

และไม่จำเป็นต้องใช้แท็กปิดเนื่องจากเบราว์เซอร์พิจารณาว่าจุดเริ่มต้นของย่อหน้าถัดไปหมายถึงจุดสิ้นสุดของย่อหน้าก่อนหน้า แต่แนะนำให้หลีกเลี่ยงความสับสน

§ 4. การจัดตำแหน่งข้อความ

หากต้องการจัดแนวข้อความ ให้ใช้แอตทริบิวต์ จัดตำแหน่งด้วยค่าที่เป็นไปได้ กลางซ้ายขวาและ ปรับให้เหมาะสม- ดังนั้นจึงจัดแนวข้อความให้อยู่ตรงกลาง ไปทางซ้าย ไปทางขวา และในเวลาเดียวกันกับสองขอบในคราวเดียว ตัวอย่างเช่น รหัส html:

align="center">ข้อความอยู่ตรงกลาง

จะจัดข้อความให้อยู่ตรงกลาง:

ข้อความตรงกลาง

และรหัสนี้:

ขวา">

จะจัดข้อความให้ชิดขวา

จัดข้อความชิดขวา

หากมีคุณสมบัติ จัดตำแหน่งไม่ได้ใช้ ข้อความจะถูกจัดชิดซ้าย สิ่งนี้เกิดขึ้นตามค่าเริ่มต้น รหัสตัวอย่าง:

จะจัดข้อความชิดซ้าย

ตามค่าเริ่มต้น ข้อความจะถูกจัดชิดซ้าย

§ 5. ตัวแบ่งบรรทัดและแถบแนวนอน

หากคุณต้องการให้แน่ใจว่ามีการเปลี่ยนไปขึ้นบรรทัดใหม่โดยไม่ต้องแทรกบรรทัดว่าง (ซึ่งจะเกิดขึ้นเมื่อคุณกด Enter ในโปรแกรมแก้ไขข้อความ) ให้ใช้แท็ก
- เช่น โค้ด html

1. บรรทัดแรก.
2. บรรทัดที่สอง.

ในเบราว์เซอร์จะมีลักษณะดังนี้:

1. บรรทัดแรก.
2. บรรทัดที่สอง.

คุณ
ไม่มีแท็กปิด คุณคงเดาได้แล้วว่าในการแทรกบรรทัดว่างหลายๆ บรรทัด คุณต้องเขียนแท็ก
หลายครั้งติดต่อกัน

คุณยังสามารถแยกส่วนของข้อความด้วยสายตาโดยใช้แท็กได้ แท็กนี้จะสร้างแถบคั่นบนหน้าเว็บ (เช่น แถบสีเขียวที่อยู่ตอนต้นของบทความนี้) แท็กมีคุณสมบัติดังต่อไปนี้:

• ขนาด- ความหนาของแถบ


• ความกว้าง- ความกว้างของแถบ


• จัดตำแหน่ง- การจัดตำแหน่ง;


• สี- สีลาย;


• ไม่มีสี- คุณลักษณะที่ไม่มีค่า หากระบุไว้ แถบสีดำทึบที่ไม่มีเงาจะถูกสร้างขึ้น

ตัวอย่างเช่น รหัส html:

align="center" size="5" width="50%" color="#3399ff">

ในเบราว์เซอร์จะมีลักษณะเช่นนี้

ความกว้างและความหนาสามารถระบุได้ทั้งเป็นพิกเซล (จากนั้นค่าจะคงที่) และเป็นเปอร์เซ็นต์ (จากนั้นค่าจะเปลี่ยนไปตามความละเอียดของหน้าจอ)

§ 6. หัวเรื่อง

หากต้องการตั้งชื่อส่วนและส่วนย่อยใน HTML ให้ใช้ แท็กชื่อ- ส่วนหัวมีหกระดับและกำหนดไว้ดังนี้:

• - ส่วนหัวระดับแรก


• - ส่วนหัวระดับที่สอง


• - ส่วนหัวระดับที่สาม


• - ส่วนหัวระดับที่สี่


• - ส่วนหัวระดับที่ห้า


• - ส่วนหัวระดับที่หก

ส่วนหัวเป็นตัวหนาและแยกออกจากส่วนที่เหลือของข้อความ บรรทัดว่าง- ชื่อที่ใหญ่ที่สุดคือ (ชื่อเรื่องของบทเรียนนี้ถูกเน้นด้วย) และชื่อที่เล็กที่สุดคือ แท็กหัวเรื่องมีคุณสมบัติดังต่อไปนี้:

• จัดตำแหน่ง- การจัดตำแหน่งข้อความชื่อเรื่องบนหน้า (ค่าจะเหมือนกับการจัดตำแหน่งของข้อความปกติ)


• ชื่อ- คำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อคุณวางเมาส์เหนือชื่อ

ตัวอย่างเช่น รหัส HTML:

align="center" title="Tooltip. วางเมาส์ไว้เหนือชื่อเพื่อดู">Заголовок 4 уровня !}

ในเบราว์เซอร์จะมีลักษณะดังนี้:

ส่วนหัวระดับ 4

§ 7. การทำงานกับแบบอักษร

หากต้องการจัดรูปแบบแบบอักษรโดยตรง HTML จะมีแท็ก แท็กนี้มีคุณลักษณะดังต่อไปนี้:

• สี- สีข้อความแบบอักษร


• ใบหน้า- แบบอักษรแบบอักษร;


• ขนาด- ขนาดตัวอักษรตัวอักษร สามารถระบุได้แบบสัมบูรณ์ (ตั้งแต่ 1 ถึง 6) หรือ ค่าสัมพัทธ์(+1 ถึง +6 และ -1 ถึง -6) ตามค่าเริ่มต้น ขนาดข้อความคือ 3 หากคุณระบุ ขนาด="+1"

§ 8. การสร้างรายการในรูปแบบ HTML

ใน HTML รายการจะถูกสร้างขึ้นโดยใช้และแท็ก ในกรณีแรก รายการเรียงลำดับ (ลำดับเลข) จะถูกสร้างขึ้น ในรายการที่สองแบบไม่เรียงลำดับ (สัญลักษณ์แสดงหัวข้อย่อย) แต่ละองค์ประกอบของรายการจะถูกเน้นด้วยแท็ก เบราว์เซอร์แสดงรายการด้วย บรรทัดใหม่ในรูปแบบคอลัมน์ที่มีการเยื้องและเครื่องหมาย ประเภทของเครื่องหมายถูกกำหนดโดยแอตทริบิวต์ พิมพ์.

ในรายการลำดับเลข เครื่องหมาย (ประเภทค่าแอ็ตทริบิวต์) มีดังนี้:

• 1 - การนับเลข เลขอารบิก(ค่าเริ่มต้น);


• ก- อักษรละตินตัวพิมพ์ใหญ่ตามลำดับตัวอักษร


• ก- ตัวอักษรละตินขนาดเล็ก


• ฉัน- เลขโรมันขนาดใหญ่


• ฉัน- เลขโรมันเล็ก

ตัวอย่างเช่น โค้ด HTML

องค์ประกอบแรก
องค์ประกอบที่สอง
องค์ประกอบที่สาม

เบราว์เซอร์จะแสดงเช่นนี้

มันเกิดขึ้นว่าคุณต้องแสดงรูปภาพและเพิ่มชื่อ (วลีสั้น ๆ ) มีพารามิเตอร์ต่อไปนี้สำหรับสิ่งนี้:

Align="top" – จัดข้อความให้อยู่ด้านบนของภาพ
align="bottom" – จัดข้อความให้อยู่ด้านล่าง
align="middle" – จัดข้อความให้อยู่ตรงกลาง

ด้านล่างนี้เป็นโค้ดที่สาธิตการทำงานของพารามิเตอร์ที่อธิบายไว้ข้างต้น

ผึ้งแสนสวย

ผึ้งน่ารักมาก

ไม่มีอะไรเช่นกัน

ตอนนี้เรามาดูวิธีการแสดงภาพเมื่อใด ปริมาณมากข้อความ.
มีสองตัวเลือก:

Align="left" – รูปภาพ "ตัดข้อความ" ทางด้านซ้าย
align="right" – รูปภาพ “ตัดข้อความ” ไปทางขวา

เพื่อความชัดเจน ให้เขียนโค้ดต่อไปนี้:

รูปร่างของดวงอาทิตย์ใกล้เคียงกับทรงกลมในอุดมคติโดยมีเส้นผ่านศูนย์กลาง 1,392,000 กม. มันพอดีกับวงโคจรของดวงจันทร์และยังมีพื้นที่เหลืออีกมาก ในความเป็นจริง ดาวเคราะห์เช่นโลกมากกว่าหนึ่งล้านดวงจะพอดีภายในดวงอาทิตย์ได้อย่างสะดวกสบาย นอกจากนี้ หากคุณสามารถขับรถยนต์ข้ามพื้นผิวด้วยความเร็ว 88 กม./ชม. คุณจะใช้เวลา 5 ปีครึ่งในการโคจรรอบดวงอาทิตย์หนึ่งครั้ง (โดยไม่หยุด) แต่ขนาดของดวงอาทิตย์ไม่คงที่ การวิจัยสมัยใหม่แสดงว่าเส้นผ่านศูนย์กลางของดวงอาทิตย์ลดลงประมาณ 1 เมตรต่อชั่วโมง หากปรากฏการณ์นี้เกิดขึ้นในศตวรรษที่ผ่านมา ดวงอาทิตย์ที่เราเห็นในปัจจุบันจะอยู่ห่างจากดวงอาทิตย์ที่บรรพบุรุษของเราเห็นถึง 800 กม. บางทีการหดตัวของแสงอาทิตย์นี้อาจเป็นส่วนหนึ่งของการโยกเยกในระยะยาวที่ช่วยรักษาเสถียรภาพของการปล่อยพลังงานมหาศาล

ดวงจันทร์

มันเป็นดาวเทียมธรรมชาติเพียงดวงเดียวของโลก มวลของดวงจันทร์คือ 0.0123 มวลของโลก (ประมาณ 1/81) หรือ 7.6.1022 กิโลกรัม เส้นผ่านศูนย์กลางของดวงจันทร์มากกว่าหนึ่งในสี่ของโลกเล็กน้อย (0.273) หรือ 3,476 กม. ดวงจันทร์ทำให้โลกสว่างน้อยกว่าดวงอาทิตย์ 500,000 เท่า) บนดวงจันทร์ไม่มีบรรยากาศที่เราคุ้นเคย ไม่มีแม่น้ำ ทะเลสาบ พืชพรรณ และสิ่งมีชีวิตใดๆ แรงโน้มถ่วงบนดวงจันทร์น้อยกว่าบนโลกถึงหกเท่า กลางวันและกลางคืนโดยอุณหภูมิเปลี่ยนแปลงสูงถึง 300 องศา อยู่ได้นานถึงสองสัปดาห์

แต่อย่างที่คุณเห็นอาจเป็นได้ว่าข้อความและรูปภาพอยู่ใกล้กันเกินไป เพื่อแก้ไขปัญหานี้ คุณเพียงแค่ต้องตั้งค่าความหนาของเฟรมและสีเช่นพื้นหลังตามที่ต้องการ

ปรากฏการณ์ทางดาราศาสตร์ที่ดวงจันทร์บัง (สุริยุปราคา) ดวงอาทิตย์ทั้งหมดหรือบางส่วนจากผู้สังเกตการณ์บนโลก สุริยุปราคาจะเกิดขึ้นได้เฉพาะในช่วงข้างขึ้นข้างแรมเท่านั้น เมื่อด้านของดวงจันทร์หันหน้าเข้าหาโลกไม่ส่องสว่างและมองไม่เห็นดวงจันทร์ด้วย สุริยุปราคาจะเกิดขึ้นได้ก็ต่อเมื่อดวงจันทร์ใหม่เกิดขึ้นใกล้กับจุดใดจุดหนึ่งจากสองจุดบนดวงจันทร์ (จุดที่วงโคจรที่มองเห็นได้ของดวงจันทร์และดวงอาทิตย์ตัดกัน) โดยอยู่ห่างจากจุดใดจุดหนึ่งไม่เกิน 12 องศา

ลักษณะของข้อความบนหน้าจอขึ้นอยู่กับแท็กเท่านั้น ไม่ได้ขึ้นอยู่กับการเว้นวรรคหรือการขึ้นบรรทัดใหม่

องค์ประกอบการออกแบบทั้งหมดของเอกสาร HTML แบ่งออกเป็นสองประเภท: แบบอินไลน์และแบบบล็อก

องค์ประกอบแบบอินไลน์สามารถเป็นส่วนหนึ่งของบรรทัดได้ แต่องค์ประกอบแบบบล็อกจะใช้พื้นที่ของตัวเองบนหน้าเว็บเสมอและเริ่มต้นในบรรทัดใหม่เสมอ โดยปกติแล้ว องค์ประกอบบล็อกสามารถรวมองค์ประกอบบล็อกอื่นๆ และองค์ประกอบแบบอินไลน์ได้

ด้วยเหตุผลที่ชัดเจน องค์ประกอบในบรรทัดจึงไม่สามารถรวมองค์ประกอบบล็อกได้

การรวมองค์ประกอบของหน้าเว็บเข้ากับบล็อกทำให้คุณสามารถใช้การออกแบบเดียวกับองค์ประกอบเหล่านั้นและจัดวางเลย์เอาต์ได้ ... .

การเปลี่ยนตำแหน่งของบล็อกก็เพียงพอแล้วโดยการเปลี่ยนแท็กรวมหนึ่งแท็ก โดยปกติแล้วจะสะดวกกว่าการเปลี่ยนตำแหน่งของแต่ละองค์ประกอบของหน้าเว็บทีละรายการ องค์ประกอบแบบอินไลน์ล้อมรอบด้วยแท็กเพื่อจัดองค์ประกอบเฟรม

ประเภทบล็อก

มีการใช้คู่

).

ใช้สำหรับข้อความประเภทพิเศษที่จำเป็นต้องรักษาการจัดรูปแบบไว้  ข้อความภายในแท็กนี้จะแสดงบนหน้าเว็บเหมือนกับที่ปรากฏในโค้ดของหน้าทุกประการ  จะรักษาช่องว่างและการขึ้นบรรทัดใหม่ทั้งหมด  ข้อความจะปรากฏเป็นฟอนต์แบบเว้นวรรค แต่สามารถเปลี่ยนแปลงได้โดยใช้สไตล์

การเลือกข้อความ
HTML มีแท็กเพื่อเน้นข้อความ  แท็ก และ สร้างแบบอักษรตัวหนา  แม้ว่าแท็กเหล่านี้จะมีความแตกต่างบางประการ แต่โดยทั่วไปแล้วจะมีลักษณะเหมือนกันบนหน้าเว็บ  แท็ก และ เน้นข้อความเป็นตัวเอียง  มีแท็ก ซึ่งทำให้ข้อความขีดเส้นใต้ แต่ไม่แนะนำให้ใช้

ตัวอย่างการเลือกข้อความ:
21
22
23
24

 ประเภทตัวหนา
ประเภทตัวหนา
แบบอักษรตัวเอียง
แบบอักษรตัวเอียง

ข้อความสามารถเน้นได้โดยใช้สไตล์  ทุกคนตัดสินใจด้วยตนเองว่าจะเน้นข้อความโดยใช้แท็กหรือสไตล์อย่างไร
แท็กอื่นๆ
เราดูแท็ก HTML พิเศษสำหรับข้อความ  แต่ข้อความยังสามารถมีแท็กอื่นๆ อีกมากมายที่เพิ่มเนื้อหาลงในเพจได้  คุณยังสามารถวางข้อความนอกแท็กใดก็ได้ และมันจะยังคงปรากฏบนหน้าจอ  แต่ในทางปฏิบัติไม่มีใครทำเช่นนี้ เนื่องจากข้อความไม่สามารถจัดการนอกแท็กได้  ดังนั้นข้อความทั้งหมดจึงต้องอยู่ภายในแท็ก  และเมื่อคุณเรียนรู้ CSS แล้ว คุณจะสามารถกำหนดลักษณะที่ปรากฏของข้อความได้
โดยทั่วไปคำถามนั้นง่าย  การวางบล็อกหนึ่งทับบล็อกอื่นไม่ใช่เรื่องยุ่งยาก  แต่ถึงกระนั้นก็ยังมีอีกหลายประเด็นในประเด็นนี้ที่ควรค่าแก่การอภิปราย  ฉันคิดว่าคงมีคนสนใจเรื่องนี้
แนวคิดก็คือเพียงวางข้อความบางส่วนบนรูปภาพ  ข้อความจะแสดงเป็นบล็อกที่มีความยาวผันแปรได้ โดยถือว่าข้อความจะอยู่ทางด้านซ้าย โดยมีการเติมเลขคู่รอบๆ ข้อความ  ตัวอย่างเช่นในภาพนี้:
โครงร่างเอกสาร

มาร์กอัป HTML
 

 
 
ภาพยนตร์ในสวนสาธารณะ: 
กังฟูแพนด้า

แน่นอนว่า การใช้องค์ประกอบ div เพื่อแสดงรูปภาพเป็นพื้นหลังจะง่ายกว่า แต่ในกรณีนี้ ฉันคิดว่ารูปภาพนั้นเป็นเนื้อหาของเอกสาร ดังนั้นรูปภาพนั้นจึงอยู่ใน HTML  เราจะใช้องค์ประกอบ div เป็นภาชนะสำหรับวางตำแหน่งที่แน่นอนของข้อความในนั้น
ซีเอสเอส
.image ( ตำแหน่ง: สัมพันธ์; ความกว้าง: 100%; /* สำหรับ IE 6 */ ) h2 ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 200px; ซ้าย: 0; ความกว้าง: 100%; ) 
ดังนั้นเราจึงวางข้อความไว้บนรูปภาพโดยตรง  ภารกิจต่อไปของเราคือการสร้างพื้นหลังสำหรับข้อความ  ตั้งแต่ธาตุ 
เป็นองค์ประกอบบล็อก เราไม่สามารถนำไปใช้เพื่อวัตถุประสงค์เหล่านี้ได้  ลองใช้องค์ประกอบแบบอินไลน์ -  มาล้อมข้อความไว้ข้างในชื่อเรื่องกัน

 
ภาพยนตร์ในสวนสาธารณะ: 
กังฟูแพนด้า
เราจะใช้สแปนนี้เพื่อตกแต่งข้อความและพื้นหลัง:
ช่วง H2 ( สี: ขาว; แบบอักษร: ตัวหนา 24px/45px Helvetica, Sans-Serif; การเว้นวรรคตัวอักษร: -1px; พื้นหลัง: rgb(0, 0, 0); /* ในกรณีที่บรรทัดถัดไปไม่ทำงาน */ พื้นหลัง : rgba (0, 0, 0, 0.7);
ปัญหา

ดังที่คุณเห็นจากรูปภาพ ที่ท้ายบรรทัด บล็อกข้อความจะสิ้นสุดทันทีหลังจากอักขระตัวสุดท้ายในบรรทัด และเริ่มต้นทันทีทางซ้ายของบรรทัดถัดไป  คุณสมบัติช่องว่างภายในสำหรับช่วงจะไม่ช่วยเราในกรณีนี้
ในการแก้ปัญหา คุณต้องใช้ช่วงเพิ่มเติมทั้งสองด้านของแท็ก 
ในกรณีนี้เราสามารถใช้ช่องว่างภายในได้แล้ว

 

 ภาพยนตร์ในสวนสาธารณะ: 
 

 กังฟูแพนด้า

เราจะตั้งค่าคุณสมบัติการขยายช่วงใหม่เหล่านี้:
H2 span.spacer ( ช่องว่างภายใน: 0 5px; )
แล้วความหมายล่ะ?
ในขั้นตอนนี้การออกแบบเสร็จสมบูรณ์ แต่ปัญหาหนึ่งยังคงอยู่  กล่าวคือเป็นจำนวนมากเพิ่มเติม องค์ประกอบ HTMLเพิ่มเพื่อวัตถุประสงค์ในการออกแบบเท่านั้น  ฉันหมายถึงช่วง  เพื่อแก้ไขปัญหานี้ เราจะใช้ jQuery  ในการดำเนินการนี้ ให้ลบช่วงทั้งหมดในมาร์กอัปและเพิ่มแบบไดนามิก:

 
ภาพยนตร์ในสวนสาธารณะ: 
กังฟูแพนด้า
$(ฟังก์ชั่น() ( $("h2").wrapInner(" "); $("h2 br").before(" ").หลังจาก(" ");
});