يىپەك يولىدىكى HTML ساداسى | 3-قىسىم خاسلىقلار

Original ShirKhan shirkhan 2020-12-16

收录于话题

#تېخنىكا 60

#html_بىلىملىرى 10

ئالدىنقى قىسىمدا بىز HTML دىكى خاسلىقلارنىڭ ئاساسلىقى ئېلېمېنتلارنىڭ بەت يۈزىدە ئوخشىمىغان ئۇسلۇبتا نامايەن بولۇشىنى بەلگىلەيدىغانلىقىنى، ۋە خاسلىقلارنىڭ خاسلىق نامى ۋە قىممىتىنى ئۆز ئىچىگە ئالىدىغانلىقىنى تەكىتلەپ، ئۇلارنىڭ نامى = "قىممىتى" دەك شەكىلدە ئىشلىتىلىدىغانلىقىنى تىلغا ئېلىپ ئۆتكەن ئىدۇق.

بۇ بابتا HTML نىڭ بەلگىسى ئىچىدىكى خاسلىقنى كونترول قىلىش ئۇسۇلى ۋە بىر نەچچە خىل ئورتاق قوللىنىلىدىغان خاسلىقلار بىلەن قىسقىچە تونۇشۇپ چىقىمىز.

خاسلىقلار HTML خەتكۈچلىرى ئىچىدە تەمىنلىگەن قوشۇمچە ئۇچۇر بولۇپ، ئادەتتە مەلۇم ئېلېمېنېتنى تەسۋىرلەش ياكى ئۇنىڭ ئىپادىلىنىش شەكلىنى كونترول قىلىشقا ئىشلىتىلىدۇ.

ئورتاق خاسلىقلار

كۆپىنچە خەتكۈچلەرگە ئورتاق ئىشلىتىشكە بولىدىغان خۇسۇسىيەتلەرنى بىز «ئورتاق خاسلىق» دەپ ئاتايمىز. تۆۋەندە بىز دائىم ئۇچرىتىپ تۇرىدىغان بىر نەچچە خىل ئورتاق خاسلىقلار بىلەن تونۇشۇپ چىقايلى.

accesskey خاسلىقى

بۇ خاسلىق بولسا بىر ئىلىمىنتقا فوكۇسلىنىش تىز كۇنۇپكىسىنى بىكىتىشكە ئىشلىتىلىدۇ.

<!-- men bir qur izah, "Alt + H" konupkisini bassigiz,
 töwendiki katek fokuslinidu  -->

<input type="text" accesskey='H'/>

<a href='http://www.baidu.com' accesskey="W"> 
 "Alt + W" ni bassigiz, men fokuxlinimen
</a>

<button accesskey="B">
 "Alt + B" ni bassigiz, men fokuslinimen 
</button>

يۇقارقى كودنىڭ ئىچىگە يېزىلغان لاتىنچە چۈشەندۈرۈشتە ئېيتىلغىنىدەك، سىز Alt + X كۇنۇپكىسىنى بېسىش ئارقىلىق مۇناسىۋەتلىك ئىلىمىنتلارنى فوكۇسلىيالايسىز. شۇنى ئەسكەرتىپ قويغۇم كىلىدۇكى، بىر ئىلىمىنتنى فوكۇسلىۋالغاندىن كىيىن، سىز كۇنۇپكا تاختىسى ئارقىلىقلا تېخىمۇ ئىچكىرلىگەن مەشغۇلاتلارنى قىلالايسىز، مەسىلەن تور بەت يۈزىدىكى كۇنۇپكىنى فوكۇسلاپ Enter نى باسسىڭىز، مائۇسنى سۆرەپ ئاپىرىپ شۇ كۇنۇپكىنى چەككەن بىلەن ئوخشاش نەتىجىگە ئىرىشەلەيسىز.

class خاسلىقى

بۇ خاسلىق ئىلىمىنتلارنىڭ class نامى (ياكى تىپ نامى) نى بەلگىلەپ بىرىدۇ. تىپ نامى چوقۇم لاتىنچە ھەرپتىن باشلىنىشى كىرەك شۇنداقلا چوڭ-كىچىك لاتىن ھەرپلىرى ۋە - (ئوتتۇرا سىزىق) ۋە — (ئاستى سىزىق) قاتارلىق بەلگىلەرنى ئۆز ئىچىگە ئالسا بولىدۇ. تەكىتلەپ قويىدىغىنىم، بىر ئىلىمىنتقا بىردىن كۆپ تىپ نامى بەلگىلەشكە بولىدۇ، پەقەت سىز تىپ ناملىرىنى بوش ئورۇن بىلەن ئايرىۋەتسىڭىزلا بولدى

<p class="abzas mezmun qizil-xet"> 
  bu bir abzas eliminti,
  men bu abzasqa vch class nami berdim.
</p>

تىپ نامى بەلگىلەش ئۈستىدىكىدەكلا ئاددىي بولۇپ، بىز ئۇلار ئارقىلىق مەلۇم بىر تىپ ئىلىمىنتلارنى تاللاپ، ئۇلارغا قارىتا مەشغۇلات قىلالايمىز.

بۇ يەردە بىز CSS بابىدا سۆزلىنىدىغان مەزمۇنلاردىن ئالدىن شەپە بېرىپ قويمىساق بولمايدىغاندەك تۇرىدۇ. يەنى بىز يۇقارقى ئىلىمىنتقا تىپ بەلگىلىۋالغاندىن كىيىن، جاۋا سىكرىپىت ياكى CSS ئارقىلىق شۇ تىپتىكى ئىلىمىنتلارنى تاللاپ، ئۇلارغا تېخىمۇ كۆپلىگەن خاسلىقلار ياكى ئىقتىدارلارنى قۇشالايمىز. مەسىلەن تۆۋەندىكى CSS كودى پۈتۈن abzas تىپ نامى بىرىلگەن ئىلىمىنتلارنىڭ تەگلىك رەڭگىنى سېرىق رەڭگە ئۆزگەرتىدۇ.

.abzas {
    background-color: yellow;
}

id خاسلىقى

بۇ خاسلىق يۇقارقى تىپ نامى خاسلىقى بىلەن ئوخشاپ كىتىدىغان بولۇپ، ئوخشىمايدىغان يىرى id ھەر بىر بەت يۈزىدىكى يەككە ئىلىمىنتقا نىسبەتەن بىردىنبىر قىلىنىپ بەلگىلىنىشى كىرەك، خۇددى ھەر بىر ئادەمنىڭ كىملىك نۇمۇرى بىردىنبىر بولغانغا ئوخشايدۇ (ھىچ بولمىغاندا نەزەرىيە جەھەتتن شۇنداق بولۇشى كىرەك) . يۇقىرىدا تىلغا ئالغان تىپ نامى ئوخشاش تىپلىق بىر تۈركۈم ئىلىمىنتلارنى تاللاشقا ئىشلىتىلگىنىدەك، بۇ id خاسلىقى ھەر بەت يۈزىدە بىردىنبىر بولۇش سۈپىتى بىلەن، مەلۇم بىر يىگانە ئىلىمىنتنى تاللاش ئۈچۈن ئىشلىتىلىدۇ، ۋە ئوخشاشلا بىز مۇشۇ id ئارقىلىق تاللىۋالغان ئىلىمىنتقا قارىتا داۋاملىق مەشغۇلات قىلساق بولىدۇ.

<div id="sinaq">
siz mushu `sinaq` digen id arqiliq,
mini tallap chiqalaysiz
</div>

lang خاسلىقى

بۇ خاسلىق تور بېتى ياكى ئېلېمېنتلارنىڭ تىلىغا ئېنىقلىما بېرىدۇ، گەرچە بۇ خاسلىقنىڭ HTML ئىلىمىنتلىرىنىڭ بەت يۈزىدىكى كۆرسىتىلىشىگە ئانچە چوڭ تەسىرى بولمىسىمۇ، لېكىن ئىزدەش موتورى ياكى تور كۆرگۈچنىڭ مەلۇم بىر تور بەتنىڭ تىلىنى پەرقلەندۈرۈشىگە ياردەم بېرىدۇ.

<!-- pvtvn bir betning tiligha iniqlima berduq. -->

<html lang="en">
    This is an English website
</html>

<!-- yaki, bir bölek mezmungha
  tilni bikitip bersek bolidu -->

<p lang="ug">
  بۇ بىر ئۇيغۇرچە ئابزاس
</p>

يۇقىرىدا كۆرىۋالغىنىمىزدەك، ug ئۇيغۇرچىغا، en بولسا ئىنگىلىزچىگە ۋەكىللىك قىلىدۇ. بۇ lang خاسلىقىنىڭ قىممەتلىرى ISO 639-1 تەرىپىدىن بىكىتىلگەن بولۇپ، تۆۋەندىكى ئادىرىستىن سىز ھەرخىل تىللارنىڭ قىسقارتىلمىسىنى ئىزدەپ ئىشلەتسىڭىز بولىدۇ.

تىللارنىڭ قىسقارتىلمىسى
http://www.loc.gov/standards/iso639-2/php/code_list.php

style خاسلىقى

مانا بۇ خاسلىقنى ئۆگۈنىۋالساق، ئەمدى نەچچە كۈندىن بېرى يېزىپ كىلىۋاتقان «تايىنى يوق» HTML ئېلېمېنېتلىرىغا بىر قۇر پەرداز قىلىپ، تويىنى قىلغىدەك چىرايلىق قىلىۋىتەلەيمىز. 😁

بۇ خاسلىقنى بىز «پاسون» دەپ ئالساق بىرئاز چۈشىنىشلىك بولسا كىرەك، يەنى ئىسمىدىن چىقىپ تۇرۇپتىكى، بۇ خاسلىق ئارقىلىق بىز ئىلىمىنتلارنىڭ پاسونىغا ئېنىقلىما بىرەلەيمىز. ھەمدە، style ئارقىلىق ئېنىقلىما بەرگەن پاسون «قۇر ئىچى پاسونى» ياكى «ئىچكى باغلانغان پاسون» دەپمۇ ئاتىلىدىغان بولۇپ، ئېلېمېنتلارغا تەسىر كۆرسىتىش دەرىجىسى ئەڭ يۇقىرى بولىدۇ.

ئۈستىدە كۆرگىنىمىزدەك، بىز sytle خاسلىقى ئارقىلىق ئېلېمېنتلارنىڭ پاسونىنى خالىغانچە ئۆزگەرتەلەيمىز.

dir خاسلىقى

مانا بۇ خاسلىق بولسا بىزنىڭ يېزىقىمىزدەك ئوڭدىن-سولغا يېزىلىدىغان يېزىقلارنىڭ «قۇتقۇزغۇچىسى» بولمىش، ئىلىمىنتلارنىڭ مەزمۇنىنىڭ يۆنىلىشىنى بەلگىلىگۈچى خاسلىق. بۇ خاسلىقنىڭ سۈكۈتتىكى تەڭشىكى ltr بولۇپ، سۈكۈتتىكى تەڭشىكى لاتىن ۋە خەن قاتارلىق يېزىقلارنىڭ بەت يۈزىدە كۆرسىتىلىشىگە ماس كىلىدۇ. بىزنىڭ يېزىقىمىزغا ئوخشاش ئوڭدىن-سولغا يېزىلىدىغان يېزىقلارنى بەت يۈزىدە ئوڭغا توغرىلاپ كۆرسىتىش ئۈچۈن، بىز شۇ توغرىلىماقچى بولغان ئىلىمىنتنىڭ dir خاسلىقىغا rtl قىممىتىنى بەرسەكلا بولىدۇ.

شۇنى تەكىتلەپ ئۆتۈپ كىتىشكە ئەرزىيدۇكى، rtl بولسا right-to-left (ئوڭدىن-سولغا) دىگەن سۆزنىڭ قىسقارتىلمىسى، ئەلۋەتتە «ئەقىللىق يىشو» لارغا ltr نىڭ كىمنىڭ قىسقارتىلمىسى ئىكەنلىكىنى سۆزلەشنىڭ ھاجىتى يوق.

تېخىمۇ كۆپ ئورتاق خاسلىقلارنى بىز داۋاملىق ئىشلىتىش جەريانىدا ئۆگۈنۈپ ماڭساق بولىدۇ. ئەگەر قىزىقىدىغانلار بولسا، تۆۋەندىكى ئۇلانمىنى چىكىپ ئورگان تەرەپ تەمىنلىگەن بارلىق خاسلىقلار بىلەن تونۇشۇپ چىقساڭلار بولىدۇ.

HTML دىكى بارلىق خاسلىقلار تىزىملىكى
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

HTML5 تە يىڭىدىن قېتىلغان خاسلىقلار

تۆۋەندە بىز HTML5 كە يىڭىدىن قوشۇلغان بىر نەچچە كۆپ ئۇچرايدىغان خاسلىقلار بىلەن تونۇشۇپ چىقايلى.

contenteditable خاسلىقى

بۇ خاسلىق بىر ئىلىمىنتنى «تەھرىرلىگىلى بولىدىغان» تىپقا ئايلاندۇرۇشتا ئىشلىتىلىدۇ. بۇ خاسلىق HTML5 ئۆلچىمىگە كىرگۈزۈلۈشتىن ئىلگىرىلا، بىر قىسىم تور كۆرگۈچلەر بۇ خاسلىقنى قوللاشنى باشلىغان. ئادەتتە بىز input ياكى textarea دىگەندەك خەتكۈچلەر ئارقىلىق بىر تەھرىرلىگىلى بولىدىغان ئىلىمىنتنى قۇرۇپ چىقالايمىز. بۇ خاسلىق بولسا ئىلىمىنتلارنىڭ مەزمۇنىنى تەھرىرلىگىلى بولىدىغان ھالەتكە ئۆزگەرتىپ بىرىدۇ. مەسىلەن، تۆۋەندىكى مۇشۇ خاسلىق بىرىلگەن <p> ئېلېمېنتىغا ئوخشاش.

تەكىتلەپ قويىدىغان يىرى شۇكى، ھازىرقى بەزى تور بەت يۈزى تەھرىرلىگۈچلىرى دەل مۇشۇ خاسلىقتىن پايدىلىنىپ ياسالغان. مەسىلەن UEditor، TinyMCE، Quill دىگەنلەرگە ئوخشاش. ئەلۋەتتە بۇ مەزمۇنلار بۇ قوللانمىنىڭ مۇزاكىرە قىلىش دائىرىسىدە ئەمەس.

*-data خاسلىقى

بۇ خاسلىق مەلۇم بىر ئىلىمىنتقا ئىختىيارى خاسلىق قىممىتى بىرىش ئۈچۈن ئىشلىتىلىدىغان بولۇپ، بۇ خاسلىق ئارقىلىق بىز بەت يۈزىدىكى ئىلىمىنتلارغا ئۆزىمىز خالىغان ئۇچۇرلارنى باغلىيالايمىز.

<!-- `data-rank` xasliqi html ölchemide yoq,
    bu peqet bir ixtiyari hasliq -->

<li data-rank="1">
</li>
<li data-rank="2">
</li>
<li data-rank="3">
</li>

draggable خاسلىقى

بۇ خاسلىق «سۆرىگىلى بولىدىغان» دىگەن مەنىدە بولۇپ، بىر ئىلىمىنتنىڭ سۆرىگىلى بولىدىغان ياكى بولمايدىغانلىقىغا ئېنىقلىما بىرىدۇ. توربەت يۈزىدىكى سۆرەپ-تاشلاش ياكى سۆرەپ چاپلاش دىگەن ئىقتىدارلارنى دەل مۇشۇ خاسلىق ئارقىلىق ئەمەلگە ئاشۇرغىلى بولىدۇ.

باشقا خاسلىقلار

ئەمەلىيەتتە بىز يۇقىرىدا پەقەت بىرنەچچە كۆپ ئۇچرايدىغان، شۇنداقلا كۆپىنچە ئىلىمىنتلارغا ئورتاق بولغان بىر قىسىم خاسلىقلارنىلا تىلغا ئىلىپ ئۆتۈپ كەتتۇق. ئۇنىڭ ئۈستىگە، ئالدىنقى قىسىملاردا بىز HTML نى بىر ھايات ئۆلچەمگە ئايلاندى دەپ تەسۋىرلىگىنىمىزدەك، بۇ خاسلىقلار داۋاملىق موللاشتۇرلىشى ياكى ئۆزگەرتىلىشى مۇمكىن. شۇڭا بىز پەقەت خاسلىقلارنىڭ قانداق ئىشلىتىلىدىغانلىقىنى ۋە نىمە روللىرى بارلىقىنى بىلىۋالساقلا كۇپايە. چۈنكى بىز كۈندىلىك كود يېزىش جەريانىدا داۋاملىق تۈردە HTML نىڭ ئورگان تەرەپ قوللانمىسىنى ئاختۇرۇپ، ئۆزىمىزگە لازىم بولغان خەتكۈچ ۋە ئۇلارنىڭ خاسلىقلىرىنى تېپىپ ئىشلىتىمىز.

HTML نىڭ MDN دىكى قوللانمىسى :

ئىنگلىزچە:
https://developer.mozilla.org/en-US/docs/Web/HTML

دۆلەت تىلىدىكى:
https://developer.mozilla.org/zh-CN/docs/Web/HTML

مانا يۇقارقى قوللانمىلاردىن بىز خالىغان ئېلېمېنېتنىڭ بارلىق ئۇچۇرلىرىغا ئىرىشەلەيمىز. بۇ قوللانمىنىڭ يەنە بىر ئارتۇقچىلىقى شۇكى، ئۇلار داۋاملىق تۈردە يىڭىلىنىپ تۇرىدۇ.

ئىسىڭلارغا يەنى بىر سالىمەنكى، ھەرقانداق ئىلىمىنت ياكى خاسلىقنىڭ ئىسمىنى كۆرگەندە، چوقۇم شۇلارنىڭ مەنىسىنى بىلىۋىلىپ ئۇنىڭدىن كىيىن ئىشلىتىشنى باشلىساڭلار، كود يېزىش ۋە چۈشىنىشىڭلارغا زور ئاسانلىق ئېلىپ كىلىدۇ. شۇڭلاشقا بۇيەردە قايتىدىن لوغەت ئاختۇرۇشنى مەن ئۆگەتمىسەممۇ بولا ھەقىچان 😏

‍

يازمىدا : ئارسايبەگ

باش نازارەتچى : شىرخان

كىيىنكى سانلاردىن ئالدىن مەلۇمات

◇ تېكىست ۋە ئابزاس

◇ ھەرپ-بەلگىلەرنى كودلاش

◇ URL ۋە ئۇلانما

مەزكۇر يازما ۋە مۇناسىۋەتلىك مەزمۇنلارنى مەنبەسىنى ئەسكەرتىپ تارقىتىشقا بولىدۇ.

مەزكۇر مەزمۇنلار ھەقسىز، باشقىلارنىڭ ئۆز نامىدا سودا خارەكتېرىدە ئىشلىتىشى ۋە تارقىتىشىغا بولمايدۇ. ئەمگىكىمىزگە ھۆرمەت قىلىڭ.

شىرخان سالونىنى قوللاۋاتقان بارلىق قېرىنداشلارغا چىن دىلىمىزدىن مىننەتدارلىق بىلدۈرىمىز.

بۇ مەزمۇنغا ئائىت مەسىلە، پىكىر تەكلىپلەر بولسا مۇشۇ يازمىغا ئىنكاس شەكلىدە قالدۇرسىڭىز بۇلىدۇ.

مەزمۇن تەييارلىغۇچىغا پىكىر تەكلىپىڭىز بولسا ياكى ياردىمىگە ئېھتىياجلىق بولسىڭىز سالونىمىزغا arsaybeg ۋە ياكى html سۆزىنى يوللاش ئارقىلىق ئاپتۇرنىڭ ئالاقىلىشىش ئۇچۇرىغا ئېرىشەلەيسىز.

ئالدى سۇپا بىلىملىرىنى ئۆگەنگۈچىلەر ئۈچۈن مەخسۇس توپ قۇرۇلدى، ئاپتۇرنى قۇشۇپ تەپسىلاتىنى سۈرۈشتۈرۈڭ ۋە توپقا قۇشۇلۇپ ياردەمگە ئېرىشىڭ، بىلىدىغانلىرىڭىزنى ھەمبەھىرلەڭ، باشقىلارغا ياردەم قىلىڭ.