قائمة شاملة بالميزات الجديدة واستخدامات html5

لقد أرسل لي العديد من الأصدقاء رسائل خاصة وسألوني عن الميزات الجديدة واستخدامات html5. دعني أقدم لك مقدمة تفصيلية عن الميزات الجديدة لـ html5.

1) رأس تذييل العلامات الدلالية الجديدة، وما إلى ذلك. 2) النماذج المحسنة 2.0 3) الصوت والفيديو 4) الرسم القماشي 5) رسم SVG 6) تحديد الموقع الجغرافي 7) سحب وإسقاط API 8) عامل الويب لأداء المهام التي تستغرق وقتًا طويلاً 9 ) الويب يقوم التخزين بتخزين كميات كبيرة من البيانات على جانب المتصفح 10) مقبس الويب هو اتصال مستمر (بروتوكول غير http)

(1) لن أتحدث عن العلامات الدلالية الجديدة.

على سبيل المثال <footer></footer>

(2) النموذج المحسن 2.0

1) مقارنة بين نوع الإدخال الجديد h4 و h5!

نوع الإدخال في H4: نص /كلمة مرور /راديو /مربع اختيار/ sybmit/ إعادة تعيين / ملف /مخفي / صورة/

نوع الإدخال في H5: البريد الإلكتروني/عنوان URL/الرقم/الهاتف/البحث/النطاق/اللون/الشهر/الأسبوع/التاريخ

2) عناصر النموذج الجديد

عناصر النموذج في H4: الإدخال/منطقة النص/التحديد، الخيار/التسمية

عناصر النموذج الجديدة في H5: قائمة البيانات/التقدم/المقياس/الإخراج

 <datalist id=lunchList> <option>لحم الخنزير المبشور مع صلصة بكين</option> <option>لحم الخنزير في جوباو</option> <option>لحم الخنزير المبشور مع نكهة السمك</option> <option>لحم الخنزير المبشور مع الفلفل الأخضر</option> option> <option>Di Sanxian</option></datalist>

الرجاء إدخال وجبة الغداء التي تحتاجها ：<input type=text name=lunch list=lunchList/>

هناك شكلان:

يوجد نمط إضافي للتقدم في bootstrap

 <form> اتصال الشبكة<progress></progress> <br/> <!-- بين 0-1--> تقدم التنزيل <progress id=p3 value=0></progress> <input type=number value =1 </form><script type=text/javascript> /*الفرق بين settimeout وsetInterval هو أن settimeout يتم تنفيذه مرة واحدة، ويتم تنفيذ setInterval كل مرة*/ var t=setInterval(function(){ var v = p3.value; v += p3.value = v;

 <الجسم> محتوى الزيت: <معرف المقياس = م 1 دقيقة = 0 الحد الأقصى = 100 منخفض = 30 ارتفاع = 70 الأمثل = 40 قيمة = 50> </متر> قيمة PM: <معرف المقياس = م 2 دقيقة = 0 ماكس = 500 منخفض = 100 ارتفاع = 300 الأمثل = 150 قيمة = 750></متر></body>

المقياس: الأوزان والمقاييس/المقياس/، يستخدم لتحديد النطاق: غير مقبول (أحمر)/مقبول (أصفر)/جيد جدًا (أخضر)

<meter min=可取的最小值max=可取的最大值low=合理的下限值high=合理的上限值optimum=最佳值value=当前值></meter>

3) سمات جديدة لعناصر النموذج

1. سمات عناصر النموذج في H4: <input>

المعرف/الفئة/العنوان/النوع/القيمة/الاسم/النمط/للقراءة فقط/معطل/محدد/

سمات جديدة لعناصر النموذج في H5

1) العنصر النائب: لا يمكن إرسال أحرف العنصر النائب كمطالبات

<input value=tom placeholder=请输入用户名/>

2) التركيز التلقائي: الحصول على تركيز الإدخال تلقائيًا (يمكنك الدخول دون النقر. فقط إعداد الإدخال الأول صالح)

<input autofocus>

3) متعددة: يُسمح بظهور قيم إدخال متعددة في مربع الإدخال، مفصولة بفواصل [email protected]، [email protected]

<input type=email name=emails multiple>

4) النموذج: يستخدم لوضع حقل الإدخال خارج النموذج

<form id=f5></from>

<input form=f5>

================== خصائص جديدة تتعلق بالتحقق من صحة الإدخال =========================== = =======

على سبيل المثال، راجع السمات المتعلقة بالتحقق من صحة الإدخال/yz.html

5) مطلوب: مطلوب، لا يمكن أن يكون المحتوى فارغًا

6) maxlength: تحديد الحد الأقصى لطول السلسلة

7) الحد الأدنى: تحديد الحد الأدنى لطول السلسلة

8) الحد الأقصى: الحد الأقصى لقيمة الرقم المحدد

9) الحد الأدنى: الحد الأدنى لقيمة الرقم المحدد

10) النمط: حدد التعبير العادي الذي يجب أن يتطابق الإدخال معه

ستؤثر سمات التحقق المذكورة أعلاه على سمة الصلاحية لكائن js المطابق لعنصر النموذج، وسمة الصلاحية هي سمة التحقق.

(3) فيديو وصوت

الرسم بالفلاش (AS/FLEX) =>Canvas/SVG

رسوم فلاش متحركة => مؤقت + قماش

تشغيل الفيديو والصوت => فيديو/صوت

تخزين عميل الفلاش => WebStorage

يوفر H5 علامة تبويب جديدة لتشغيل مقاطع الفيديو:

 <video src=></video> <video src=> <source src=res/birds.mp4></source> <source src=res/birds.ogg></source> <source src=res/birds. ويب ></ المصدر>

متصفحك لا يدعم تشغيل الفيديو!

</video> إنه في حد ذاته عنصر كتلة مضمّن بحجم 300*150. ملاحظة: تمت كتابة المصدر متعدد الأسطر ليكون متوافقًا مع المتصفحات المختلفة. نظرًا لأن المتصفحات لا تدعم تنسيقات الفيديو بشكل موحد، فإن بعض المتصفحات، مثل بعض المتصفحات، تدعم تنسيق mp4، ثم ستقوم بتشغيل الفيديو الأول بتنسيق mp4 يدعمه، فسيتم تشغيله، وإذا لم يكن مدعومًا، فاستمر في الأسفل. لا يوجد مصدر أدناه، فهذا يعني أن متصفحك لا يدعم تشغيل الفيديو! .

الأعضاء الأكثر استخدامًا في علامة/كائن VIDEO:

خصائص الأعضاء:

<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>

التشغيل التلقائي: خطأ، ما إذا كان سيتم التشغيل تلقائيًا، عناصر التحكم الخاطئة الافتراضية: خطأ، ما إذا كان سيتم عرض عناصر التحكم في التشغيل، الافتراضي هو حلقة خاطئة: خطأ، ما إذا كان سيتم تشغيل التشغيل بشكل متكرر، الافتراضي هو خطأ كتم الصوت: خطأ، ما إذا كان سيتم كتم التشغيل، الافتراضي هو ملصق زائف: ''، تشغيل الملصق المعروض قبل الإطار الأول، والذي يمكن أن يكون صورة. الإعداد الافتراضي فارغ ولا يوجد تحميل مسبق: استراتيجية التحميل المسبق للفيديو، القيم المحتملة: تلقائي: التحميل المسبق للبيانات الوصفية للفيديو ووقت تخزين مؤقت معين، ويجب عدم استخدامه على الهاتف المحمول (الحجم/المدة. محتوى الإطار الأول، وقت التخزين المؤقت). (التحميل المسبق يهدر حركة المرور) البيانات الوصفية: يتم فقط التحميل المسبق للبيانات الوصفية للفيديو (الحجم/المدة، محتوى الإطار الأول،) بدون مدة تخزين مؤقت، مناسب للهواتف المحمولة لا شيء: لا يتم تحميل أي بيانات مسبقًا

-------------------------------------------------- --------------- استخدام السمة للمعرف v2 على سبيل المثال:

v2.playbackRate=3;

الوقت الحالي: مدة التشغيل الحالية: إجمالي المدة المتوقفة مؤقتًا: صحيح، ما إذا كان الفيديو الحالي في حالة توقف مؤقت، صحيح يعني متوقف مؤقتًا، خطأ يعني تشغيل الصوت: 1 القيمة الافتراضية هي 1، معدل تشغيل الصوت الحالي: 1، معدل التشغيل أكبر من 1 يعني تشغيل سريع، وأقل من 1 يعني تشغيل بطيء

طريقة المعرف v2:

تشغيل (): تشغيل إيقاف الفيديو مؤقتًا (): إيقاف حدث عضو التشغيل مؤقتًا: تشغيل: حدث يتم تشغيله عندما يبدأ تشغيل الفيديو عند الإيقاف المؤقت: حدث يتم تشغيله عند إيقاف الفيديو مؤقتًا التدريب: قم بتخصيص زر التشغيل/الإيقاف المؤقت دون استخدام عناصر التحكم التي يأتي مع الفيديو حرك الماوس خارج منطقة الفيديو لإخفاء الزر؛ حرك الماوس إلى زر العرض، على سبيل المثال: صوت الفيديو، Canvas/video.html عند الإيقاف المؤقت، سيتم عرض الإعلان، وعندما يكون الماوس لعبت، سيتم إخفاء الإعلان.

3. مشغل الصوت المميز H5 الجديد

 <audio src=></audio><audio src=><source src=res/birds.mp3></source><source src=res/birds.ogg></source><source src=res/birds. واف></مصدر>

أسلوب السمة هو نفس أسلوب الفيديو، باستثناء أنه لا توجد سمة ملصق*** لتحديد ما إذا كان تم تحديد خانة الاختيار أم لا

 cb.onchange=function(){ هذا. تم التحقق من الصواب يعني أنه تم تحديده، والوسائل الخاطئة لم يتم تحديدها}

(٤)، قماش

يوجد كائن فرشاة واحد فقط في كل لوحة رسم - يسمى كائن سياق الرسم - استخدم هذا الكائن للرسم!

var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象

الرسم على القماش---صعوبة! ! !

1) رسم SVG: تقنية الرسم المتجه، والتي ظهرت في عام 2000 وتم دمجها لاحقًا في معيار H5 2) الرسم القماشي: تقنية رسم الصور النقطية، وهي تقنية رسم مقترحة من قبل H5 3) رسم WebGL: تقنية الرسم ثلاثي الأبعاد، والتي لم تظهر بعد حتى الآن تم دمجها في معيار H5.

تقنية الرسم على القماش: قماش، تطبق H5 تقنية الرسم ثنائية الأبعاد

<canvas width=500 height=400>您的浏览器不支持canvas</canvas>

علامة اللوحة القماشية عبارة عن كتلة مضمّنة بحجم 300*150 افتراضيًا في المتصفح. لا يمكن تعيين عرض اللوحة القماشية وارتفاعها إلا باستخدام سمات HTML/JS، وليس أنماط CSS! يوجد كائن فرشاة واحد فقط في كل لوحة قماشية - يسمى كائن سياق الرسم - استخدم هذا الكائن للرسم! var ctx = Canvas.getContext('2d') // الآن يحصل 2d فقط على كائن اللوحة القماشية على اللوحة القماشية

1) استخدم القماش لرسم مستطيل

ارسم مستطيلاً

 ctx.lineWidth = 1 عرض الحد ctx.fillStyle='#000' لون نمط التعبئة ctx.strokeStyle='#000' لون نمط الحد ctx.fillRect(x,y,w,h); // املأ المستطيل x , y إحداثيات العرض والارتفاع والارتفاع ctx.strokeRect(x,y,w,h); // رسم مستطيل ctx.clearRect(x,y,w,h) مسح كافة الرسومات داخل المستطيل

2) استخدم القماش لرسم النص

تقع نقطة ربط جزء من النص في بداية الخط الأساسي للنص

 ctx.textBaseline = 'alphabetic' // القيمة الافتراضية للخط الأساسي للنص هي السطر الثالث ctx.font=12px sans-serif // حجم الخط ونمطه ctx.fillText(str,x,y) // املأ ctx.strokeText (str ,x,y) // رسم جزء من النص ctx.measureText(str) // قم بتعيين نص القياس بناءً على حجم النص الحالي والخط، والكائن الذي تم إرجاعه هو {width: x}

3) استخدم القماش لرسم المسارات

المسار: يشبه أداة القلم في PS، وهو شكل عشوائي يتكون من نقاط إحداثية متعددة، المسار غير مرئي ويمكن استخدامه في الرسم والتعبئة والاقتصاص.

 ctx.beginPath() // ابدأ مسارًا جديدًا ctx.ClosePath() // أغلق المسار الحالي ctx.moveTo(x,y) // انتقل إلى النقطة المحددة ctx.lineTo(x,y) // من الحالي أشر إلى النقطة المحددة ارسم خطًا مستقيمًا ctx.arc(cx,cy,r,start,end); // ارسم مسار القوس // cx cy هو الإحداثي المركزي للدائرة xy r هو نصف القطر، البداية هي زاوية البداية، والنهاية هي زاوية النهاية

الزاوية: 360 = راديان: 2PI 180 = 1PI ​​على سبيل المثال

 ctx.arc(100,200,30,0,2*Math.PI)ctx.stroke(); // حد المسار الحالي ctx.fill(); // ملء المسار الحالي ctx.clip();// استخدم المسار الحالي Crop //************زاوية الاتصال**********ctx.lineJoin='miter' //تظهر زاوية حادة عند اتصال الخط ctx. lineJoin='جولة' // تظهر الزوايا المستديرة عند اتصال الخط ctx.lineJoin = 'bevel' // تظهر الزوايا المربعة عند اتصال الخط

4) استخدم القماش لرسم الصور

Canvas هي تقنية من جانب العميل، والصورة موجودة في الخادم، لذلك يجب على المتصفح أولاً تنزيل الصورة المراد رسمها وانتظار تحميل الصورة بشكل غير متزامن:

 var img = new Images();img.src='x.png';console.log(img.width); //0 طلب غير متزامن للصور img.onload=function(){console.log(img.width, img .height); // اكتمل تحميل صورة القيمة // ابدأ في رسم الصورة على القماش ctx.drawImage(img,x,y); // الرسم بالحجم الأصلي ctx.drawImage(img,x,y,w,h);

استمع إلى أحداث حركة الماوس فوق اللوحة القماشية

 ctx.onmousemove = function(e){x=e.offsetX;y=e.offsetY;console.log(x,y);}

2. التدرج في الرسم على القماش

التدرج الخطي: التدرج الخطي التدرج الشعاعي: التدرج الشعاعي يمكنك الرجوع إلى تأثير التدرج في ملاحظة،

 var g = ctx.createLinearGradient(x1,y1,x2,y2);g.addColorStop(0,'#f00');g.addColorStop(0.5,'#ff0');g.addColorStop(1,'#0f0' );ctx.strokeStyle=g;

الصعوبة: هناك العديد من محاور الإحداثيات والكلمات في نظام الإحداثيات

3. رسم التشوه

 ctx.rotate(radians) // قم بتدوير كائن سياق الرسم (أي الفرشاة)، ونقطة المحور هي أصل اللوحة القماشية ctx.translate(x,y) // ترجمة أصل اللوحة القماشية بأكملها إلى النقطة المحددة ctx. sava(); // احفظ جميع قيم حالة التشوه الحالية للفرشاة (من الحفظ في اللعبة) ctx.restore(); // استعادة حالة التشوه للفرشاة إلى آخر حفظ (اقرأ الحفظ في اللعبة) ctx.save(); // احفظ الحالة الأولى الأصلية var deg = 10*Math.PI/180; // يتم تدوير الزاوية المراد تدويرها بمقدار 10 درجات ctx.rotate(deg); //Rotated ctx.drawImage(img,0,0); إذا كانت الفرشاة ملتوية، فكلها ملتوية ctx.restore(); // الحالة الأصلية المحفوظة عند إخراج الحفظ

(5) رسم SVG

دعونا أولاً نفهم ما هي الصور النقطية والمتجهات. فقط افهمها لفترة وجيزة.

الصورة النقطية: تتكون من وحدات بكسل واحدة تلو الأخرى، ولكل نقطة لونها الخاص، واللون دقيق. الرسومات المتجهة: تتكون من خطوط واحدة تلو الأخرى، ويمكن لكل سطر تحديد لون واتجاه ويمكن تحجيمه بشكل لا نهائي، لكن تفاصيل الألوان ليست غنية بما يكفي.

1. يستخدم رسم SVG علامات للرسم، ويمكنك ربط مستمعي الأحداث مباشرةً

 <svg width=300 height=200 xmlns=http://www.w3.org/2000/svg> <العرض المستقيم=100 الارتفاع=100></rect></svg>

2. كيفية إنشاء علامة svg باستخدام js!

 //var r1 = document.createElement('rect'); لا يمكن إنشاء عنصر svg هذا لأنه يحتوي على حد عمري ومساحة اسم (أي، إذا لم ينجح ذلك، استخدم الطريقة التالية لإنشائه!!! !) فار r1= document.createElementNS('http://www.w3.org/2000/svg','rect');r1.setAttribute('width','50');r1.setAttribute('height',300);s1 .appendChild(r1);

3. إنشاء شكل بيضاوي باستخدام SVG

 <svg width=300 height=200 id=c6> <القطع الناقص rx=100 ry=40 cx=100 cy=100 fill=#faa السكتة الدماغية=#a00></ellipse></svg>

4. قم بإنشاء خط مستقيم في SVG

 <svg width=300 height=200 id=c6> <line x1=0 y1=0 x2=100 y2=200stroke=#000stroke-width=50stroke-linecap=square></line></svg>

ملاحظة: Stroke-linecap=square ستنتج المزيد من المربعات، وStroke-linecap=round ستنتج المزيد من المساحات الدائرية، وStroke-linecap=butt لن ينتج المزيد من المربعات (أي أن الخط المستقيم الذي تقوم بإنشائه له فرق بين البداية والنهاية هذه الصفات جربها بنفسك وستعرف التفاصيل مهمة!)

5. قم بإنشاء خط متعدد باستخدام SVG

 <svg width=300 height=200 id=c6> <نقاط متعددة الخطوط=50,50 100,300 150,100></polyline> // ما يخرج هو مثلث <نقاط متعددة الخطوط=50,50 100,300 150,100 تعبئة=حد شفاف=#000 >< /polyline> // ما يخرج هو خط متعدد</svg>

6. تحديد الموقع الجغرافي (في المستقبل، لا نحتاج إلى عميل، يمكننا أيضًا تحديد موقع أنفسنا!)

تحديد الموقع الجغرافي: تحديد الموقع الجغرافي باستخدام JS للحصول على بيانات الإحداثيات الجغرافية (خط الطول وخط العرض والارتفاع والسرعة) للمتصفح الحالي، ويستخدم لتنفيذ تطبيقات LBS (الخدمة المستندة إلى الموقع)، مثل Ele.me وAmap Navigation...

كيف تحصل متصفحات الجوال على معلومات الموقع:

1) الخيار الأول هو شريحة GPS في الهاتف المحمول والاتصالات عبر الأقمار الصناعية، ودقة تحديد المواقع في حدود الأمتار 2) الخيار الثاني هو محطة الهاتف المحمول الأساسية لتحديد المواقع، ودقة تحديد المواقع في حدود كيلومترات (غير قانونية) كيفية الحصول عليها معلومات تحديد الموقع من خلال متصفح الكمبيوتر: 1) العكس من خلال عنوان IP يعتمد التحليل ودقة تحديد الموقع على حجم قاعدة بيانات عنوان IP

يوفر HTML5 كائنًا جديدًا للحصول على معلومات تحديد موضع المتصفح الحالي:

 window.navigator.geolocation{ getCurrentPosition:fn, // احصل على معلومات تحديد المواقع الحالية watchPosition:fn, // مراقبة التغييرات في بيانات تحديد المواقع ClearWatch:fn // إلغاء المراقبة}

2. الامتداد: كيفية تضمين خريطة بايدو في صفحة ويب

1) قم بتسجيل حساب مطور Baidu Map.baidu.com ---> lbsyun.baidu.com 2) قم بإنشاء موقع ويب؛ سجل الدخول إلى Baidu Map وتقدم بطلب للحصول على AccessKey للخريطة لموقع الويب 3) قم بتضمين الخريطة المقدمة من Baidu Map في واجهة برمجة تطبيقات صفحة الويب الخاصة بك، والمضمنة في خريطة بايدو

لن أتحدث كثيرًا عن كيفية تضمين هذا هنا! (تذكر أنه يجب عليك تسجيل حساب لاستخدام خرائط بايدو، ثم الاقتباس من مكتبات الأشخاص الآخرين فقط!)

7. قم بسحب وإفلات واجهة برمجة التطبيقات (API).

لقد ذكرت السحب والإفلات من قبل: أيها الأصدقاء، تابعوا البحث عن المدونات السابقة بنفسكم.

ثمانية تخزين

يتكون التخزين بشكل أساسي من ملفات تعريف الارتباط والجلسات (سأشرح الاختلافات والاحتياطات عند البحث عن الكثير من طرق الكتابة سابقًا): تذكر أن الجلسات تختفي عند إغلاق المتصفح، ولا تختفي ملفات تعريف الارتباط عند إغلاق المتصفح! ملاحظة: يجب إضافة الوقت عند تخزين ملف تعريف الارتباط، وإذا لم تتم إضافة أي وقت، فسوف يختفي بعد إغلاق المتصفح! يمكن استخدام وحدة تخزين المتصفح هذه لحل العديد من المشكلات الوظيفية، مثل تذكر كلمات المرور والوظائف الأخرى! !

تسعة مآخذ الويب

هل يجب أن نتحدث عن هذا؟ . . . . دعونا نتحدث عن ذلك باختصار، كل هذا يتوقف على الفهم ~~

مقبس الويب هو اتصال ثنائي الاتجاه غير http يمكن إنشاؤه بين الخادم والعميل!

هذا الاتصال هو في الوقت الحقيقي ودائم.

يمكن للخادم دفع الرسائل بشكل نشط.

لم يعد الخادم بحاجة إلى استقصاء العميل عن الطلبات، ولا يتطلب الاتصال بين الخادم والعميل إعادة تأسيس الاتصال.

وهذا يعني التواصل المستدام ذهابًا وإيابًا.

كيفية إنشائه؟ تم الانتهاء من قطعة واحدة من التعليمات البرمجية

 var webSocket = new WebSocket (ws://localhost:8005/socket); //url يجب أن يبدأ بنص ws أو wss: لأنه ليس http، إنه websocket، إنه هويتك الخاصة، نقل مشفر، فقط تذكره . webSocket.send() // إرسال بيانات نصية، يمكن إرسال النص فقط. (استخدم كائن json لتحويل كائن js إلى بيانات نصية قبل الإرسال) webSocket. Close();// أغلق اتصال الاتصال وقطعه. webSocket.onmessage= function(event){ var data=event.data;} // تلقي الرسائل من الخادم webSocket.onopen =function(event){ // تتم المعالجة عند بدء الاتصال} webSocket.on Close =function(event) { / /المعالجة في نهاية الاتصال}

ما ورد أعلاه عبارة عن قائمة شاملة بالميزات الجديدة واستخدامات HTML5 التي قدمها المحرر، وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!