मैंने इस साइट और इस साइट को देखा है , लेकिन यह पचाने के लिए बहुत कुछ है। HTML5 के बारे में मुख्य बातें क्या हैं जो इसे नियमित (पुराने) HTML / CSS से अलग / बेहतर बनाती हैं?
मैंने इस साइट और इस साइट को देखा है , लेकिन यह पचाने के लिए बहुत कुछ है। HTML5 के बारे में मुख्य बातें क्या हैं जो इसे नियमित (पुराने) HTML / CSS से अलग / बेहतर बनाती हैं?
जवाबों:
एचटीएमएल 5 बहुत बड़ा है , लेकिन यह भी बहुत बढ़िया है ।
मेरे विचार में, यह ज्यादातर अंतर के बारे में है । युक्ति जाती है और यहां तक कि किनारे के मामलों को भी निर्दिष्ट करने का प्रयास करती है और यह सुनिश्चित करने के लिए कि सभी ब्राउज़र मार्कअप को उसी तरह पढ़ते हैं ।
दूसरे स्थान पर, एचटीएमएल 5 में वीडियो और ऑडियो हैं, जो वास्तव में वही करते हैं जो नाम कहता है। यदि आप वीडियो या ऑडियो को शामिल करना चाहते हैं, तो एचटीएमएल 5 को आपकी प्लगइन जरूरतों को कम करना चाहिए।
तीसरे स्थान पर, HTML5 में बहुत अधिक पहुंच और अर्थ संबंधी मदद शामिल है। उदाहरण के लिए, जैसे तत्व <section>और <article>मशीनें यह पता लगाने में मदद करती हैं कि सामग्री क्या होनी चाहिए। नए इनपुट प्रकार <input type=email>भी उन्हीं कारणों से उपयोगी हो सकते हैं, हालांकि नए इनपुट प्रकारों में कस्टम UI शामिल होते हैं जो उन्हें "आम" मानवीय पाठकों के लिए भी उपयोगी बनाते हैं।
ध्यान दें कि नए फॉर्म्स की विशेषताएं नए इनपुट प्रकारों की तुलना में बहुत अधिक हैं। इसमें प्लेसहोल्डर टेक्स्ट और कई अन्य विशेषताओं का समर्थन भी शामिल है।
HTML5 में शामिल हैं <canvas>, जो चार्ट की तरह 2D (और, WebGL, 3D) आकृतियों को ड्राइंग या गेम रेंडर करने की अनुमति देता है।
पुराना व्यवहार अब मानकीकृत है, जैसे कि इंटरनेट एक्सप्लोरर का प्राचीन contentEditable।
DOCTYPE आखिरकार सभ्य है! अब आप वास्तव में इसे याद कर सकते हैं!<!DOCTYPE html>
एन्कोडिंग निर्दिष्ट करना भी आसान है, साथ <meta charset=utf-8>।
यदि आप क्लाइंट को डेटा भेजना चाहते हैं और इसे तत्वों के साथ जोड़ना चाहते हैं, तो आप अब इसे कस्टम विशेषताओं के साथ कर सकते हैं। उदाहरण के लिए, <div data-status=open>Open</div>अब अंत में अनुमति है। ध्यान दें कि कस्टम विशेषता नाम के साथ उपसर्ग होना चाहिए data-।
अब आप HTML दस्तावेजों में SVG और MathML शामिल कर सकते हैं। पहले, आप इसे केवल XHTML दस्तावेज़ों के साथ कर सकते थे।
कई नए फ़ंक्शन और फ़ील्ड्स HTML5 को परिभाषित करता है, सबसे प्रभावशाली में से एक क्लासलिस्ट है, जो आपको क्लास विशेषता को आसानी से हेरफेर करने में सक्षम बनाता है। GetAttribute / setAttribute करने और जटिल हैक्स का उपयोग करने के बजाय यह पता लगाने के लिए कि किसी तत्व में कौन से वर्ग हैं और एक विशिष्ट वर्ग को हटाते हैं, classList उन कठिन परिस्थितियों को बहुत सरल बनाता है।
कई संबंधित चश्मा भी हैं, जैसे वेब वर्कर्स, वेब सॉकेट्स और इंडेक्सडीडीबी, जो वास्तव में एचटीएमएल 5 का हिस्सा नहीं हैं, लेकिन हर कोई उनके बारे में बात करता है जैसे कि वे थे। वे बहु-कोर कंप्यूटरों का लाभ उठाने, सर्वरों के साथ संचार करने और स्थानीय स्तर पर डेटा संग्रहीत करने के लिए बहुत उपयोगी हैं।
CSS3 के लिए, इसमें एनिमेशन , संक्रमण , गोल बॉर्डर और लचीले बॉक्स मॉडल के लिए समर्थन शामिल है ।
CSS3 में भी नए नए चयनकर्ता हैं, जो किसी पृष्ठ पर विशिष्ट तत्वों (जैसे किसी तालिका में केवल विषम या यहां तक कि पंक्तियों) से मेल करना आसान बनाते हैं।
अपारदर्शिता, नई इकाइयां, मार्की और रूबी भी CSS3 का हिस्सा हैं।
मुझे लगता है कि बहुत महत्वपूर्ण सभी महत्वपूर्ण भागों को कवर करता है।
सुविधाओं और विशिष्टताओं का समर्थन रखने के लिए आप जांच सकते हैं कि मैं कब उपयोग कर सकता हूं । इसमें HTML5 और CSS3 सुविधाएँ और SVG, PNG, CSS2.1 और CSS2 जैसी चीज़ें शामिल हैं। यह उनकी अनुमोदन की स्थिति (सिफारिश, प्रस्तावित सिफारिश, उम्मीदवार की सिफारिश, कार्य ड्राफ्ट, IETF मानक) को भी ट्रैक करता है। FindMeByIP केवल ब्राउज़र द्वारा समर्थित CSS3 सुविधाओं के मैट्रिसेस को बनाए रखता है।
नट और बोल्ट में कुछ सिंटैक्स की सरलीकरण और सरलीकरण हुआ:
<!DOCTYPE html>languageलिए सरलीकृत विशेषता <html>: <html lang="en">xmlnsऔर xml:langयदि आप XML अनुपालन चाहते हैं)<meta>टैग charset:<meta charset="utf-8" />scriptदूरस्थ स्क्रिप्ट के लिए अब typeविशेषता को स्वीकार नहीं करता है charset: <script src="/media/js/jquery.js" charset="utf-8"></script>(इनलाइन स्क्रिप्ट को अतिरिक्त विशेषताओं की आवश्यकता नहीं है)HTML5 आपके मार्कअप की क्षमता को बहुत अधिक अर्थपूर्ण बनाता है, और समग्र रूप से पढ़ने / लिखने और छोटे फ़ाइल आकार के लिए बहुत आसान है। होने के बजाय <div id="nav">, आपके पास बस है <nav>। ज्यादा नहीं लगता है, लेकिन यह कहते हैं।
XHTML1 और HTML4 से कई तत्वों को हटा दिया गया है। निम्नलिखित तत्वों एचटीएमएल 5 में समर्थित नहीं हैं: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>और <xmp>।
एचटीएमएल 5 में कई नए तत्व केवल अधिक अर्थ मार्कअप जोड़ने के लिए हैं, और इसके अलावा अधिक सार्थक विकल्प प्रदान करने के अलावा कुछ नहीं करेंगे <div>। इन नए तत्वों में शामिल हैं: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>, और <figcaption>।
HTML5 फॉर्म में बहुत सुधार हुआ है।
नए इनपुट प्रकार
नई विशेषताएँ:
नए तत्व
हम पूरे दिन फॉर्मों में जा सकते हैं, लेकिन यहां इस नए सामान को बेहतर तरीके से समझाने के लिए कुछ संसाधन दिए गए हैं।
CSS3 मीडिया क्वेरी का कमाल लाता है । मीडिया क्वेरीज़ इतनी हैं, इतनी बढ़िया हैं। IE8 और नीचे में उपलब्ध नहीं है, लेकिन IE9 द्वारा समर्थित किया जाएगा।
CSS3 में काउंटरों की वृद्धि होती है । आप :beforeछद्म चयनकर्ता और contentशैली का उपयोग करके एक आदेश-सूची के बिना ऑटो-संख्या तत्वों का उपयोग कर सकते हैं जब एक आदेश-सूची या क्रमांकन शब्दार्थ गलत होगा। (उदाहरण के लिए, फ़ॉर्म फ़ील्ड भरने के चरणों की संख्या।)
यदि आप CSS Resets के प्रशंसक हैं, तो HTML5 डॉक्टर से HTML5 CSS रीसेट उपलब्ध है। मैंने अपने व्यक्तिगत पृष्ठों के लिए इस रीसेट में तीन जोड़ दिए हैं:
text-rendering: optimizeLegibility; के लिए परिभाषा में शैलियों में जोड़ा गया <body>labelके साथ परिभाषा में शामिल है inputऔर selectइसकी जरूरत हैvertical-align: middle;insऔर :focusसे एरिक मेयेर के सीएसएस रीसेट में वापस जोड़ाकहा जाता है एक प्रतिस्पर्धा रीसेट reset5 उपलब्ध है, लेकिन मैं अभी तक यह व्यक्तिगत रूप से मूल्यांकन नहीं किया। यह एरिक मेयर और एचटीएमएल 5 डॉक्टर रीसेट दोनों पर आधारित है ।
एचटीएमएल 5 सुरक्षा cheatsheet कीड़े पटरियों एचटीएमएल 5 सुविधाओं विभिन्न ब्राउज़र में लागू के रूप में, और यह भी कि अच्छे हैं मौजूदा सुविधाओं में कीड़े भी शामिल है के रूप में अच्छी नज़र रखने के लिए में।
HTML5 तत्वों का उपयोग करना आपके कोड को स्वचालित रूप से अर्थपूर्ण नहीं बनाता है। WHATWG ने एक लेख लिखा है जिसका नाम है <अनुभाग> केवल एक "अर्थ <div>" नहीं है, यह बताते हुए कि यह केवल एक कंटेनर तत्व नहीं है।
HTML 5 में, दस्तावेज़ों की रूपरेखा के निर्माण के लिए एक एल्गोरिथ्म है। इसका उपयोग AT द्वारा किया जा सकता है, उदाहरण के लिए, किसी दस्तावेज़ के माध्यम से उपयोगकर्ता को नेविगेट करने में मदद करने के लिए। और <अनुभाग> और दोस्त इस एल्गोरिथ्म का एक महत्वपूर्ण हिस्सा हैं। हर बार जब आप एक <अनुभाग> को घोंसला बनाते हैं, तो आप 1 से रूपरेखा की गहराई बढ़ाते हैं (यदि आप सोच रहे हैं कि इस मॉडल के फायदे पारंपरिक <h1> - <h6> मॉडल की तुलना में क्या हैं, तो एक वेब आधारित फीडरीडर पर विचार करें जो चाहता है आसपास की साइट के साथ सिंडिकेटेड सामग्री के दस्तावेज़ संरचना को एकीकृत करें। HTML 4 में इसका मतलब है कि सभी सामग्री को पार्स करना और सभी शीर्षकों को फिर से जोड़ना। एचटीएमएल 5 में शीर्ष लेख मुफ्त में सही गहराई पर समाप्त होते हैं)।
...
यदि आप अपने पृष्ठों पर सभी <div> s को नेत्रहीन रूप से परिवर्तित करते हैं तो यह आपके अनुभागों की अपेक्षा के अनुरूप होगा। और, सिमेंटिक फॉक्स-पेस होने के अलावा, यह उन लोगों से नरक को भ्रमित करेगा जो नेविगेशन के लिए शीर्षकों पर भरोसा करते हैं।
इस दुनिया में बाकी सब चीजों की तरह, HTML5 वेब अनुप्रयोगों के लिए एक फ्रेमवर्क है , जिसे SproutCore कहा जाता है , जिसे चार्ल्स रौली नाम के एक पूर्व-Apple इंजीनियर द्वारा बनाया गया है ।
Html5rocks.com के अलावा आप html5doctor.com और html5gallery.com के साथ मेल रख सकते हैं ।
सीमा-त्रिज्या, छाया (बॉक्स / पाठ), आरजीबीए समर्थन, और इसी तरह की बुनियादी लेआउट चीजें हैं; यह वही है जो CSS3 के लिए सबसे अधिक जाना जाता है। अधिक दिलचस्प कैनवास टैग, वीडियो टैग, स्थानीय भंडारण, वेबस्कैट और इतने पर सादे HTML / JS / CSS में बहुत समृद्ध उपयोगकर्ता अनुभव पैदा करेंगे। इन सुविधाओं में अतिरिक्त प्लगइन्स की आवश्यकता के बिना वेब पर फ्लैश के लिए एक बढ़िया विकल्प होने की क्षमता है।
मुझे नए एचटीएमएल तत्व दिलचस्प लगे ... उनमें से कुछ सामान्य divएस के लिए अर्थ प्रतिस्थापन का वादा कर रहे हैं । का वादा नए तत्वों में शामिल हैं article, section, aside, figure, nav, header, और footerदूसरों के बीच। मुझे अर्थहीन कंटेनरों के स्थान पर शब्दार्थ तत्वों का विचार पसंद है।
ओह, हाँ, एक संबंधित आइटम: बहुत सरल doctype- अंत में कुछ मैं स्मृति से टाइप कर सकता हूं!
( यह webapps.stackexchange.com पर एक समान प्रश्न पर मेरा उत्तर है )
कैनवास और वेब कर्मचारी धागे मेरे लिए एचटीएमएल 5 के सबसे रोमांचक पहलू हैं। मैंने कुछ वेब ऐप लिखे हैं जो उन सुविधाओं का उपयोग करते हैं:
GioAUTHor [sic] कैनवास का व्यापक उपयोग करता है, ताकि आप मानचित्र पर पथों को बना सकें और फिर शुरू से अंत तक सबसे छोटा मार्ग खोजें (जावास्क्रिप्ट में डायजेक्स्ट्रा के एल्गोरिदम के माध्यम से)।
जावास्क्रिप्ट थ्रेड डेमो कैनवास का सीमित उपयोग करता है लेकिन डेमो कोड के साथ, वर्कर थ्रेड्स का उपयोग दिखाता है। यह HTML5 इनपुट प्रकार = "रेंज" स्लाइडर नियंत्रण का उपयोग भी करता है ।
HTML5 ब्राउज़र समर्थन स्वयं ब्राउज़र के रूप में विविध है। HTML5 तत्परता के बारे में एक अच्छी साइट (HTML5 में, natch) है जो दिखाती है कि कौन क्या तैयार है।
CSS3 के संबंध में - http://css3please.com/ पर देखें कि आप क्या कर सकते हैं।
बाद में आपका ब्राउज़र, अधिक संभावना है कि आप प्रभाव देख पाएंगे।
ऑडियो और वीडियो टैग फ्लैश या सिल्वरलाइट जैसे प्लगइन की आवश्यकता के बिना मीडिया को प्रस्तुत करने की अनुमति देते हैं, और सबसे महत्वपूर्ण रूप से iPhone और iPad ब्राउज़र पर काम करता है। कुछ मुद्दे हैं जिन पर कोडेक्स और डिजिटल अधिकार प्रबंधन के बारे में काम करने की आवश्यकता है।
जेरेमी कीथ ने सिर्फ "वेब डिजाइनर के लिए HTML5" विषय पर एक बहुत अच्छी पुस्तक जारी की। आप उसकी जांच करना चाह सकते हैं।
यह A Book Apart की पहली पुस्तक है। अत्यधिक यह उन्नत डिजाइनरों के लिए मध्यवर्ती करने के लिए सलाह देते हैं। A ++
नोट : आपको हार्ड कॉपी प्राप्त करने के लिए इंतजार करना पड़ सकता है
यह महत्व पर एक राय प्रदान नहीं करता है, लेकिन यह HTML 4 और 5 के बीच एक उपयोगी डेल्टा है।
मुख्य सुधारों पर मेरा 2 the:
<section>और नया हेडर एल्गोरिथ्म रूपरेखा (मैंने कहा था कि यह सिर्फ मेरा 2 ¢ था)<input type=email>data-* गुण<audio>और<video>क्योंकि किसी ने अभी तक इसे नहीं लगाया है:
एचटीएमएल 5 जो सभी ने सूचीबद्ध किया है, उसके लिए बहुत अच्छा है, लेकिन इसमें मानक जियोलोकेशन, वेब वर्कर्स, वेब सॉकेट, कैनवास और लोकलस्टोरीज भी शामिल हैं। ये सभी उपकरण HTML5 कल्पना के भाग हैं, जो इसे बनाने के लिए पर्दे के पीछे बहुत सारे जावास्क्रिप्ट का उपयोग करते हैं।