แท็ก HTML และ - คำจำกัดความและการใช้ข้อความตัวห้อยและตัวยก

แท็ก กำหนดข้อความตัวห้อย ข้อความใต้เส้นตรงมีความสูงเพียงครึ่งหนึ่งและปรากฏอยู่ใต้เส้นฐาน ข้อความอินเทอร์ลิเนียร์สามารถใช้ในการเขียนสูตรเคมี เช่น H 2 O

แท็ก ระบุข้อความตัวยก ข้อความตัวยกสูงเพียงครึ่งหนึ่งและปรากฏเหนือเส้นฐาน สามารถใช้ข้อความตัวยกเมื่อเขียนเชิงอรรถ เช่น WWW

รองรับเบราว์เซอร์

แท็กได้รับการสนับสนุนโดยเบราว์เซอร์หลักๆ ทั้งหมด

ความแตกต่างระหว่างแอตทริบิวต์มาตรฐาน HTML และ XHTML

คอลัมน์ DTD ระบุว่าอนุญาตให้ใช้แอตทริบิวต์ HTML 4.01/XHTML 1.0 DTD ประเภทเอกสารใด S=เข้มงวด, T=การเปลี่ยนผ่าน และ F=เฟรมเซ็ต

แท็กรองรับแอตทริบิวต์มาตรฐานต่อไปนี้:

คุณสมบัติ ค่า คำอธิบาย DTD

ระดับ	class_name	ระบุชื่อคลาสสำหรับองค์ประกอบ	สทศ
ผบ	rtl ลิตร	ระบุทิศทางของข้อความสำหรับเนื้อหาในองค์ประกอบ	สทศ
รหัส	ตัวระบุ	ระบุตัวระบุที่ไม่ซ้ำกันสำหรับองค์ประกอบ	สทศ
หลาง	ภาษา_รหัส	ระบุรหัสภาษาสำหรับเนื้อหาขององค์ประกอบ	สทศ
สไตล์	สไตล์_คำจำกัดความ	ระบุสไตล์อินไลน์สำหรับองค์ประกอบ	สทศ
ชื่อ	ข้อความ	ระบุข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ	สทศ
xml:lang	ภาษา_รหัส	กำหนดรหัสภาษาสำหรับเนื้อหาองค์ประกอบในเอกสาร XHTML	สทศ

ข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์มาตรฐาน

คุณสมบัติเหตุการณ์

แท็กและสนับสนุนแอตทริบิวต์เหตุการณ์ต่อไปนี้:

คุณสมบัติ ค่า คำอธิบาย DTD

เมื่อคลิก	สคริปต์	สคริปต์เปิดตัวเมื่อคลิกเมาส์	สทศ
ondblคลิก	สคริปต์	ดับเบิลคลิกสคริปต์	สทศ
ออนเมาส์ดาวน์	สคริปต์	สคริปต์ที่จะทำงานเมื่อกดปุ่มเมาส์	สทศ
onmousemove	สคริปต์	สคริปต์ที่จะทำงานเมื่อมีการย้ายตัวชี้เมาส์	สทศ
เมาส์ออก	สคริปต์	สคริปต์ที่จะทำงานเมื่อตัวชี้เมาส์เคลื่อนไปนอกองค์ประกอบ	สทศ
เมาส์โอเวอร์	สคริปต์	สคริปต์ทำงานเมื่อตัวชี้เมาส์เลื่อนไปเหนือองค์ประกอบ	สทศ
ออนเมาส์อัพ	สคริปต์	สคริปต์ที่จะทำงานเมื่อมีการปล่อยปุ่มเมาส์	สทศ
กดปุ่มลง	สคริปต์	สคริปต์ทำงานเมื่อกดปุ่ม	สทศ
onkeypress	สคริปต์	สคริปต์ทำงานเมื่อมีการกดปุ่มแล้วปล่อย	สทศ
ออนคีย์อัพ	สคริปต์	สคริปต์ที่จะทำงานเมื่อมีการปล่อยคีย์	สทศ

ข้อมูลเพิ่มเติมเกี่ยวกับ

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

ตัวอย่างที่ 1: การสร้างตัวยกและตัวห้อย

ตัวยกและตัวห้อย .formula ( font-size: 1.4em; /* Formula text size */ ) sup, sub ( font-style: italic; /* Italic */ color: red; /* ตัวอักษรสีแดง */ ) subscript ( สี: น้ำเงิน; /* ตัวอักษรสีน้ำเงิน */ )

สมการคุณลักษณะของพื้นผิวระดับที่สอง

แลมบ์ - I1แล2 + I2แลม - I3 = 0

ในตัวอย่าง ทั้งตัวห้อยและตัวยกจะปรากฏพร้อมกัน หากต้องการเปลี่ยนรูปแบบแบบอักษรดัชนี จะใช้สไตล์ที่กำหนดการออกแบบที่เหมือนกัน (รูปที่ 1)

ข้าว. 1. มุมมองของดัชนีหลังจากใช้สไตล์

คุณสามารถปฏิเสธที่จะใช้สิ่งเหล่านี้ร่วมกันเพื่อสไตล์ได้ องค์ประกอบที่คล้ายคลึงกันเหล่านี้คือคุณสมบัติการจัดแนวแนวตั้ง ซึ่งทำให้ข้อความถูกเลื่อนในแนวตั้งตามระยะทางที่ระบุ โดยเฉพาะในตัวอย่างที่ 2 ค่าคือ 0.8em สำหรับตัวยกและ -0.5em สำหรับตัวห้อย Em เป็นหน่วยสัมพัทธ์เท่ากับขนาดของฟอนต์ปัจจุบัน ตัวอย่างเช่น 0.5em ระบุว่าข้อความควรเลื่อนลงครึ่งหนึ่งของขนาดตัวอักษร

ตัวอย่างที่ 2: การใช้สไตล์เพื่อจัดการดัชนี

ตัวยกและตัวห้อย .formula ( font-size: 1.6em; /* Text size */ font-style: italic; /* Italic style */ ) .sup, .sub ( Font-style: Normal; /* Normal style * / ขนาดตัวอักษร: 0.6em; /* ขนาดดัชนี */ สี: สีแดง; /* สีตัวยก */ แนวตั้ง: 0.8em; /* เลื่อนข้อความขึ้น */ .sub ( สี: สีน้ำเงิน; /* สีตัวห้อย */ จัดแนวตั้ง: -0.5em; /* เลื่อนข้อความลง */ )

พหุนามของดีกรี n

f(x) = a0 + a1 x + ... + an-1 xn-1 + xn

ในตัวอย่าง สูตรจะแสดงในขนาดที่ขยายใหญ่ขึ้น สัญลักษณ์ตัวยกจะแสดงเป็นสีแดง และสัญลักษณ์ด้านล่างจะแสดงเป็นสีน้ำเงิน (รูปที่ 2)

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

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

“ทั้งหมดนี้ก็ดีอยู่แล้ว แต่เมื่อใดจึงจะจำเป็น?” - คุณถาม ลองจินตนาการถึงสถานการณ์ที่คุณต้องแสดงรายการเมนูทั้งหมดด้วยตัวพิมพ์ใหญ่ ในการดำเนินการนี้ ไม่จำเป็นต้องพิมพ์รวมถึงปุ่ม CapsLock หรือในขณะที่กดปุ่ม Shift ค้างไว้ การตั้งค่ารายการทั้งหมดให้แสดงเป็นตัวพิมพ์ใหญ่โดยการสร้างกฎที่เกี่ยวข้องในไฟล์ CSS ก็เพียงพอแล้ว และนี่เป็นเพียงหนึ่งในหลาย ๆ สถานการณ์ที่เป็นไปได้

คุณสมบัติการแปลงข้อความ

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

สิ่งสำคัญคือไม่ต้องตกใจ...

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

ใช้อักษรตัวพิมพ์ใหญ่

ก่อนอื่น ฉันขอแนะนำให้ตั้งค่าข้อความทั้งหมดเป็นตัวพิมพ์ใหญ่ ซึ่งเราสร้างกฎ CSS ต่อไปนี้:

เนื้อความ ( การแปลงข้อความ: ตัวพิมพ์ใหญ่; )

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

ทั้งหมดด้วยตัวพิมพ์ใหญ่... ตัวพิมพ์เล็ก - นำไปใช้กับทั้งหมด

ขั้นตอนต่อไปคือการใช้อักษรตัวพิมพ์เล็กทุกที่โดยเขียนดังนี้:

เนื้อความ ( การแปลงข้อความ: ตัวพิมพ์เล็ก; )

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

หน้าเว็บที่เปิดใช้งานตัวพิมพ์เล็ก เราจะเน้นตัวอักษรตัวแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่

ในการทำเช่นนี้ เราเพียงแค่ต้องใช้ค่าที่เกี่ยวข้อง:

เนื้อความ ( การแปลงข้อความ: ตัวพิมพ์ใหญ่; )

ฉันไม่รู้ว่าคุณจะใช้กฎ CSS ดังกล่าวบ่อยแค่ไหน แต่การรู้เกี่ยวกับความเป็นไปได้ดังกล่าวจะไม่เสียหาย โดยเฉพาะอย่างยิ่งเมื่อแก้ไขปัญหาเล็กๆ น้อยๆ ผลลัพธ์สามารถดูได้ในภาพด้านล่าง

ข้อความหลังจากใช้ตัวพิมพ์ใหญ่

สุดท้ายนี้ เรามาดูค่าสุดท้ายกันก่อน - ไม่มีเลย อย่างที่ผมบอกไปแล้วว่าสามารถใช้เพื่อยกเลิกการรับมรดกจากผู้ปกครองได้ ตัวอย่างเช่น สมมติว่าเราใช้กฎก่อนหน้านี้ทั้งหมดแล้ว และสำหรับย่อหน้าเราควรยกเลิกกฎเหล่านั้น โดยเขียนดังนี้:

P (การแปลงข้อความ: none; )

ฉันกล้าที่จะถือว่าทุกอย่างชัดเจนสำหรับคุณหากไม่ถามคำถามของคุณในความคิดเห็น และนั่นคือทั้งหมดสำหรับฉัน ฉันหวังว่าบทช่วยสอน CSS นี้จะช่วยคุณได้ ถ้าใช่:

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

ที่นี่ฉันจะไม่บอกลาคุณ ขอขอบคุณที่ให้ความสนใจและพบกันใหม่ในฉบับหน้า!

ในบทเรียนวิดีโอที่แล้ว เราได้เรียนรู้วิธีลบและเพิ่มข้อมูลใหม่ลงในเอกสาร HTML เวอร์ชันใหม่ พร้อมทั้งรายงานไปยังเครื่องมือค้นหาและไฮไลต์ด้วยภาพเพื่อให้ผู้เยี่ยมชมเห็นการเปลี่ยนแปลงด้วย สำหรับสิ่งนี้ เราใช้แท็ก del และ ins

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

แท็ก sup HTML เป็นตัวยกของข้อความในรูปแบบ HTML

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

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

แท็กย่อย HTML เป็นตัวห้อยของข้อความในรูปแบบ HTML

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

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

แปลงอักษรตัวพิมพ์เล็กเป็นตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ตัวแรกโดยใช้ CSS(8)

ไม่มีตัวเลือก cap clause ใน CSS คำตอบอื่น ๆ ที่แนะนำการแปลงข้อความ: การใช้ตัวพิมพ์ใหญ่ไม่ถูกต้องเนื่องจากใช้ตัวเลือกนี้ ทุกคำสำหรับทุกคำ .

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

P ( การแปลงข้อความ: ตัวพิมพ์เล็ก; ) p:อักษรตัวแรก ( การแปลงข้อความ: ตัวพิมพ์ใหญ่; )

นี่เป็นประโยคตัวอย่าง

นี่เป็นอีกประโยคตัวอย่าง

และนี่ก็เป็นอีกอย่างหนึ่ง แต่มันจะเป็นตัวพิมพ์เล็กทั้งหมด

วิธีแปลงตัวอักษร UPPERCASE เป็นตัวพิมพ์เล็กและตัวอักษรตัวแรกของ Uppercase สำหรับแต่ละประโยคดังภาพด้านล่างโดยใช้ CSS เท่านั้น

จาก: นี่คือแอปพลิเคชันตัวอย่าง

ถึง: นี่เป็นประโยคโดยประมาณ

อัปเดต: เมื่อฉันใช้ text-transform: capize; ผลลัพธ์ก็ยังเหมือนเดิม

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

คุณอาจต้องการดูโซลูชัน JS หรือโซลูชันฝั่งเซิร์ฟเวอร์

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

การแปลงข้อความ: พิมพ์ใหญ่

ฉันไม่คิดว่าการแปลงข้อความจะทำงานกับตัวพิมพ์ใหญ่เป็นอินพุตได้

หากคุณต้องการใช้สิ่งนี้จะไม่ได้ผล สำหรับหรือพื้นที่ข้อความคุณต้องใช้ Javascript

ฟังก์ชั่น capitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )