Გე! Html5. ამჟამად, იგი უკვე აქტიურად გამოიყენება ვებ ინტერფეისებისა და პროგრამების შემუშავებისას. ჩვენ ყველამ ვიცით, რომ HTML5 მოუტანა ბევრი ახალი tags, ატრიბუტები და ელემენტები. ზოგიერთი მათგანი ნამდვილად სასარგებლოა ჩვენი საიტებისთვის. ამდენად, ამ სტატიაში მე მოკლედ ვუთხრა რამდენიმე სასარგებლო და მნიშვნელოვანია HTML5 Tags და ატრიბუტებითქვენ უნდა იცოდეთ და გამოიყენოთ პრაქტიკაში!
სტრუქტურული მარკირების HTML5
რამდენიმე ახალი tags გამოჩნდა HTML5, რომელიც განკუთვნილია შეცვალოს უკვე ჩამორთმეული div ბლოკები (არა ყველა რა თქმა უნდა 🙂). გარეგნულად, ასე რომ საუბარი, არაფერი შეიცვალა, მაგრამ არსებითად ახალი tags ატარებს სემანტიკური (სემანტიკური) დატვირთვა, და მკაცრად განსაზღვრავს თავის ადგილს და როლს თითოეული ბლოკისთვის:
- - განსაზღვრავს "სარდაფს", საიტების ვებ-გვერდს ან დანაყოფს, რომელშიც დამატებითი ინფორმაცია, როგორც წესი, კატაში არის განთავსებული;
- - განსაზღვრავს სანავიგაციო ფართს, როგორც ბმულების სიას;
Ფორმა
ახალი ტიპის შეყვანის სფეროები
HTML5 გააცნო ახალი ტიპები შეყვანის სფეროები. ისინი საშუალებას მოგცემთ დაწეროთ მობილური მოწყობილობებისთვის ადაპტირებული უფრო სემანტიკურად სწორი კოდი. მაგალითად, ელფოსტის ტიპის გამოყენებისას, შეყვანილი ტექსტის ავტომატური დადასტურება ხდება ელექტრონული ფოსტის მისამართის იდენტურობის შესახებ.
1 | <შეყვანის ტიპი \u003d "URL"\u003e
|
რეგულარული Validation გამონათქვამები
სანამ გამოჩენა HTML5, როდესაც გამოყენებით ფორმა თქვენს საიტზე, თქვენ უნდა გამოტოვოთ შეყვანილი ტექსტი მეშვეობით JavaScript. შეამოწმეთ. ახლა HTML5 და ნიმუში ატრიბუტი, შეგიძლიათ განსაზღვროთ რეგულარული გამოხატვის თარგი მონაცემების გადამოწმების მიზნით.
1 |
|
AutoComplete HTML5 Datalist
მონაცემთა ბაზის HTML5 ელემენტის გამოყენებით საშუალებას გაძლევთ შექმნათ მონაცემთა სია ავტოფილების შეყვანის სფეროებში. სუპერ სასარგებლო!
1 |
|
ავტოფოკუსის საველე სფეროები
AutoFocus ატრიბუტი საშუალებას მოგცემთ შექმნას რაიმე ფორმის ელემენტის (მათ შორის ღილაკი).
დამალული ელემენტები HTML5- ით
დამალული ატრიბუტი შევიდა HTML5, რომელიც საშუალებას გაძლევთ დამალვა გარკვეული ელემენტი, ისევე როგორც ეს ეხება CSS გამოყენებით Dispaly: None
Pellentsque Habitant Morbi Tristice Senect და Netus .... Pellentesque Habitant Morbi Tristice Senectus და Malesuada ... შექმენით აკორდეონი საიტზე - HTML5- ში, ახალი ატრიბუტი გამოჩნდა ცნობებისთვის. ახლა მიუთითეთ ბრაუზერი, რომ ბმული უნდა იყოს გადმოწერილი, და არ გახსნას საკმარისი იმისათვის, რომ გამოიყენოთ ეს ატრიბუტი. დარჩენა დღემდე ახალი სტატიები და გაკვეთილები Watch დიდი ხნის წინ, XHTML / HTML4- ის დროს, დეველოპერებს მხოლოდ რამდენიმე ფუნქცია ჰქონდათ, რომ მათ შეეძლოთ გამოიყენონ DOM- თან დაკავშირებული თვითნებური მონაცემების შესანახად. თქვენ შეგიძლიათ გამოგონება საკუთარი ატრიბუტები, მაგრამ ეს იყო სარისკო - თქვენი კოდი არ იქნება სწორი, ბრაუზერები შეიძლება იგნორირება თქვენი მონაცემები, და ეს შეიძლება გამოიწვიოს პრობლემები, თუ სახელი დაემთხვა სტანდარტული HTML ატრიბუტები. აქედან გამომდინარე, ყველაზე დეველოპერებს მიბმული კლასის ან rel ატრიბუტები, რადგან ისინი ერთადერთი გონივრული გზაა დამატებითი ხაზების შესანახად. მაგალითად, დავუშვათ ვიჯეტის შექმნა შეტყობინებები, როგორიცაა Twitter- ში დროებითი შეტყობინება ხაზის მსგავსად. იდეალურ შემთხვევაში, JavaScript უნდა შეეძლოს კონფიგურაცია გარეშე საჭიროება გადაწერა კოდი, ამიტომ ჩვენ განსაზღვრავს მომხმარებლის ID კლასის ატრიბუტი, მაგალითად:
სათაური 2.
ატრიბუტი ჩამოტვირთვა
ჩვენი JavaScript კოდი გამოიყურება ელემენტს პირადობის მოწმობა msglist.. სკრიპტის გამოყენებით, ჩვენ ვეძებთ კლასების დაწყებას მომხმარებელი, და "ბობ" ჩვენს შემთხვევაში იქნება მომხმარებლის ID, და ჩვენ ყველა მომხმარებლის ყველა შეტყობინებას გამოვხატავთ.
ვთქვათ, ჩვენ ასევე მინდა, რომ შევქმნათ მაქსიმალური რაოდენობა შეტყობინებები და გამოტოვოთ შეტყობინებები ექვსი თვის განმავლობაში (180 დღე):
ჩვენი ატრიბუტი Კლასი ეს არის ძალიან სწრაფად ასვლა - ადვილია შეცდომის დაშლა და JavaScript- ზე სიმებიანი ანალიზი უფრო გართულებულია.
HTML5 მონაცემთა ატრიბუტები
საბედნიეროდ, HTML5- ში, საბაჟო ატრიბუტების გამოყენების უნარი. თქვენ შეგიძლიათ გამოიყენოთ ნებისმიერი სახელი ქვედა რეესტრში პრეფიქსით მონაცემთა-, მაგალითად:
საბაჟო მონაცემთა ატრიბუტები:
- ეს ხაზები მათშია, თქვენ შეგიძლიათ შეინახოთ ნებისმიერი ინფორმაცია, რომელიც შეიძლება იყოს წარმოდგენილი ან კოდირებული, როგორც სიმებიანი, როგორიცაა JSON. სახეები უნდა მოიყვანონ JavaScript- ის გამოყენებით
- უნდა იქნას გამოყენებული იმ შემთხვევებში, როდესაც არ არის შესაფერისი HTML5 ელემენტები ან ატრიბუტები
- გამოიყენეთ მხოლოდ გვერდზე. MicroFormors- ისგან განსხვავებით, ისინი უნდა იგნორირებას უკეთებენ გარე სისტემებს, როგორიცაა საძიებო სისტემები და ძებნის რობოტები
JavaScript- ზე დამუშავების პირველი 1: Getattribute და Setattribute
ყველა ბრაუზერი საშუალებას გაძლევთ მიიღოთ და შეცვალონ მონაცემთა ატრიბუტები Getattribute და Setattribute მეთოდების გამოყენებით:
Var msglist \u003d document.getelementbyid ("msglist"); var show \u003d msglist.getattribute ("მონაცემთა სია-ზომა"); msglist.Setattribute ("მონაცემთა სიის ზომა", + შოუ + 3);
იგი მუშაობს, მაგრამ უნდა იყოს გამოყენებული, რათა შეინარჩუნოს თავსებადობა ძველი ბრაუზერები.
მაგალითი # 2 JavaScript- ზე დამუშავება: მონაცემთა () მეთოდი jQuery ბიბლიოთეკა
JQuery 1.4.3 მონაცემთა () მეთოდი პროცესების HTML5 მონაცემთა ატრიბუტები. თქვენ არ გჭირდებათ მკაფიოდ განსაზღვროთ პრეფიქსი მონაცემთა-ასე რომ, ასეთი კოდი იმუშავებს:
Var msglist \u003d $ ("# msglist"); var show \u003d msglist.data ("სია ზომის"); msglist.data ("სია ზომა", ჩვენება + 3);
მაგრამ, როგორც ეს შეიძლება, გაითვალისწინოს, რომ jQuery ცდილობს გარდაქმნას ღირებულებების ასეთი ატრიბუტები sweeping ტიპის (ლოგიკური ღირებულებები, ციფრები, ობიექტები, მასივები, ან null) და იმოქმედებს DOM. განსხვავებით setatttribute., მეთოდი მონაცემები () ფიზიკურად არ შეცვლის ატრიბუტს მონაცემთა სიის ზომა - თუ თქვენ შეამოწმეთ მისი ღირებულება გარეთ jQuery - ის მაინც რჩება 5.
მაგალითი JavaScript- ზე დამუშავების პირველი 3: API მონაცემთა კომპლექტით მუშაობისთვის
და ბოლოს, ჩვენ გვაქვს API მუშაობა HTML5 მონაცემთა კომპლექტი, რომელიც დააბრუნებს domstringmap ობიექტი. უნდა აღინიშნოს, რომ მონაცემთა ატრიბუტები ობიექტშია ნაჩვენები პრეფიქსების გარეშე მონაცემთა-სახელებიდან ამოღებულნი არიან ჰიპენას ნიშნები და სახელები თავად მოაქვთ camelcase, მაგალითად:
| ატრიბუტის სახელი | სახელი მონაცემების კომპლექტი API |
| მონაცემთა მომხმარებელი. | მომხმარებელი. |
| მონაცემთა მაქსიმალური. | მაქსიმალური. |
| მონაცემთა სიის ზომა | ზეიმი |
ჩვენი ახალი კოდი:
Var msglist \u003d document.getelementbyid ("msglist"); var show \u003d msglist.dataset.listsize; msglist.dataset.listsize \u003d + show + 3;
ეს API მხარს უჭერს ყველა თანამედროვე ბრაუზერს, მაგრამ არა IE10 და ქვემოთ. ასეთი ბრაუზერებისთვის, არსებობს სამუშაო ადგილი, მაგრამ, ალბათ, ეს უფრო პრაქტიკულია, რომ გამოიყენოთ jQuery თუ თქვენ წერენ ძველი ბრაუზერები.
HTML - ჰიპერტექსტის მარკირების ენა. იგი ეფუძნება ე.წ. tags. Tags - ეს არის რამდენიმე ელემენტები overtakes, რომ მიუთითოთ ფორმატში და თვისებები ვებ გვერდი ელემენტები. იმავე გვერდზე, ჩვენ შეგროვებული აქტუალური HTML საკვანძო დირექტორია თქვენთვის.
საერთო ჯამში არსებობს ასი მარკირების ელემენტები. თითოეულს აქვს რიგი ატრიბუტები და საკუთარი სინტაქსი. HTML Tag Guide დაეხმარება სწრაფად იპოვოს ნივთი თქვენ გჭირდებათ.
HTML ტეგების სია
ქვემოთ მოყვანილი ცხრილი გვიჩვენებს HTML5 ტეგების ჩამონათვალს რუსულ ენაზე მოკლე აღწერით.
| ტაგ | Მოკლე აღწერა |
|---|---|
| კომენტარი. | |
| განსაზღვრავს დოკუმენტის ტიპს. | |
| ბმული, ჰიპერბმულის, წამყვანის. | |
| განსაზღვრავს ტექსტს, როგორც აბრევიატურა. | |
| Საკონტაქტო ინფორმაცია ავტორი ან მფლობელი დოკუმენტი. | |
| განსაზღვრავს ფართობი რუკაზე გამოსახულებას | |
| ნივთი | |
| კონტენტი განზე (შინაარსი არ არის მთავარი გვერდიდან) | |
| საშუალებას გაძლევთ ჩაწეროთ რეპროდუცირებადი აუდიო ფაილი. | |
| თამამი ტექსტი. | |
| განსაზღვრავს საბაზისო URL ან სამიზნე ატრიბუტი დოკუმენტში ნათესავი ცნობას. | |
| ტერიტორია, სადაც ტექსტის წერილს შეიძლება ჰქონდეს სხვა მიმართულებები. | |
| ადგენს წერილობით ტექსტს. განსხვავებით მიმართულება მიუთითებს ფიზიკური მიმართულებით | |
| Quote. | |
| განსაზღვრავს სხეულის დოკუმენტის არეალს. | |
| ხაზის შესვენება. | |
| დააჭირეთ ღილაკს | |
| გამოიყენება გრაფიკის გამოყენებით სკრიპტების გამოყენებით | |
| ხელმოწერის მაგიდები. | |
| სქოლიო მასალის სახელით. | |
|
გამოიყენება კომპიუტერის კოდის ჩასმა ტექსტის ფორმაში. |
| განსაზღვრავს მაგიდაზე სვეტების მახასიათებლებს. | |
| განსაზღვრავს ერთი ან მეტი მაგიდის სვეტის ჯგუფს ფორმატირებისთვის. | |
| გამოიყენება წინასწარ განსაზღვრული ვარიანტების დასადგენად ტექსტის სფეროში შესვლისას | |
განსაზღვრავს ტერმინის ტერმინის აღწერას
|
|
| ტექსტი, რომელიც ამოღებულია ახალი ვერსია დოკუმენტი. | |
| განსაზღვრავს დამატებით ინფორმაციას, რომ მომხმარებელს შეუძლია იხილოს ან დამალვა | |
| მიუთითებს, რომ შინაარსი არის ტერმინი. | |
| განსაზღვრავს დიალოგურ ყუთს ან ინტერაქტიულ ელემენტს | |
| ბლოკის ელემენტი განლაგების ერთ-ერთი მთავარი ელემენტია. | |
| განსაზღვრავს განმარტების სიას. | |
განმარტებების სიაში ვადის სახელი
|
|
| ტექსტის მიძღვნილი ტექსტი (ჩვეულებრივ, ტექსტში შერჩეული ტექსტი). | |
| კონტეინერი გარე გამოყენებისათვის | |
| ფორმით დაკავშირებული ელემენტების ჯგუფი | |
| სათაური |
|
| განსაზღვრავს რამდენიმე ელემენტის ავტონომიურ ჯგუფს (მაგალითად, ხელმოწერის სურათს) | |
| ყელიანი | |
| განსაზღვრავს მომხმარებლის მომხმარებლის შეყვანის სახს | |
- |
HTML სათაურები სხვადასხვა დონეზე: , , , |
| მიუთითებს ხელმძღვანელის არეალს. | |
| ბლოკ ჰედერი | |
| ჰორიზონტალური ხაზი - თემატური გამყოფი. | |
| Root ელემენტი. ანგარიშები ბრაუზერი, რომ ეს დოკუმენტი არის HTML დოკუმენტი. | |
| ირჩევს ტექსტს დახასიათება. | |