Многие друзья писали мне в личные сообщения и спрашивали о новых функциях и использовании HTML5. Позвольте мне подробно рассказать вам о новых функциях HTML5.
1) Новые семантические теги, нижний колонтитул и т. д. 2) Enhanced Forms 2.0 3) Аудио и видео 4) Рисование на холсте 5) Рисование в формате SVG 6) Геолокация 7) Перетаскивание API 8) Веб-работник для выполнения трудоемких задач 9) Интернет В хранилище хранятся большие объемы данных на стороне браузера. 10) Веб-сокет — это постоянное соединение (протокол не HTTP).
(1) Я не буду говорить о новых семантических тегах.
Например, <footer></footer>
(2) Расширенная форма 2.0
один,1) Сравнение новых типов входов h4 и h5!
Тип ввода в H4: текст/пароль/радио/флажок/sybmit/reset/file/hidden/image/
Тип ввода в H5: электронная почта/url/номер/телефон/поиск/диапазон/цвет/месяц/неделя/дата
2) Новые элементы формы
Элементы формы в H4: input/textarea/select, option/label
Новые элементы формы в H5: datalist/progress/meter/output
2. Новый элемент формы в h5 — список предложений datalist.<datalist id=lunchList> <option>Натертая свинина с пекинским соусом</option> <option>Свинина в Гобао</option> <option>Натертая свинина со вкусом рыбы</option> <option>Натертая свинина с зеленым перцем</option> option> <option >Ди Саньсянь</option></datalist>
Введите желаемый обед ：<input type=text name=lunch list=lunchList/>
Есть две формы:
В бутстрапе есть стиль плагина прогресса.
<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 += 0,1; p3.value = v; if(v>=1){clearInterval(t); alert(загрузка завершена); 5. Новый элемент формы в h5-метре. <body> Содержание масла: <meter id=m1 min=0 max=100 low=30 high=70 оптимальное=40 value=50></meter> Значение PM: <meter id=m2 min=0 max=500 low= 100 высокое=300 оптимальное=150 значение=750></meter></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)required: обязательно, содержимое не может быть пустым
6) maxlength: укажите максимальную длину строки.
7) минимальная длина: укажите минимальную длину строки.
8) max: максимальное значение указанного числа
9) min: минимальное значение указанного числа
10) шаблон: укажите регулярное выражение, которому должны соответствовать входные данные.
Вышеупомянутые атрибуты проверки будут влиять на атрибут действительности объекта js, соответствующего элементу формы, а атрибут действительности является атрибутом проверки.
(3) видео видео и аудио
1. В каких аспектах отражается замена flash на H5?флэш-рисование (AS/FLEX) => Canvas/SVG
флэш-анимация => таймер+холст
Воспроизведение видео и аудио => ВИДЕО/АУДИО
флэш-клиентское хранилище => WebStorage
2.Новая функция H5 - видеоплеер (это встроенный блочный элемент. Можно задавать ширину и высоту)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. Если он не поддерживает следующее видео, он будет воспроизводить его. поддерживает его, то он будет воспроизводиться, если он не поддерживается, продолжайте вниз. Ниже нет источника, то это означает, что ваш браузер не поддерживает воспроизведение ВИДЕО! .
Часто используемые члены тега/объекта VIDEO:
Свойства участника:
<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>
автовоспроизведение: false, следует ли автоматически воспроизводить, значение по умолчанию false элементы управления: false, отображать ли элементы управления воспроизведением, значение по умолчанию — false цикл: false, зацикливать ли воспроизведение, значение по умолчанию — false приглушено: false, отключать ли звук при воспроизведении, значение по умолчанию — ложный плакат: '', воспроизводится Плакат, отображаемый перед первым кадром, который может быть изображением. По умолчанию пусто и нет предварительной загрузки: стратегия предварительной загрузки видео, возможные значения: авто: предварительная загрузка метаданных видео и определенное время буферизации. Его нельзя использовать на мобильном телефоне (размер/продолжительность. Содержимое первого кадра, время буферизации). (предварительная загрузка тратит трафик) метаданные: предварительно загружаются только метаданные видео (размер/продолжительность, содержимое первого кадра) без длительности буферизации, подходит для мобильных телефонов нет: не загружаются никакие данные
-------------------------------------------------- --------------- Использование атрибута id v2, например:
v2.playbackRate=3;
currentTime: текущая продолжительность воспроизведения, продолжительность: общая продолжительность, пауза: true, находится ли текущее видео в состоянии паузы, true означает паузу, false означает громкость воспроизведения: 1. Значение по умолчанию — 1, текущая громкость. PlayRate: 1, скорость воспроизведения больше 1. означает быстрое воспроизведение, меньше 1 означает медленное воспроизведение
идентификатор метода v2:
play(): воспроизведение видео пауза(): приостановка элемента воспроизведения event: onplay: событие, инициируемое, когда видео начинает воспроизводиться onpause: событие, инициируемое, когда видео приостанавливается. Практика: настройте кнопку воспроизведения/паузы без использования элементов управления, которые прийти с видео. Выведите указатель мыши из области видео, чтобы скрыть кнопку; переместите указатель мыши на кнопку отображения. Например: видео аудио, холст/видео.html При паузе будет отображаться реклама, а при наведении курсора мыши. воспроизводится, реклама будет скрыта.
3. Новая функция H5 — аудиоплеер.
<audio src=></audio><audio src=><source src=res/birds.mp3></source><source src=res/birds.ogg></source><source src=res/birds. wav></источник>
Метод атрибута тот же, что и для видео, за исключением того, что атрибут плаката*** не позволяет определить, установлен ли флажок.
cb.onchange=function(){ this.checked true означает, что выбрано, false означает, что не выбрано}(4), холст
На каждом холсте есть только один объект кисти, называемый объектом контекста рисования. Используйте этот объект для рисования!
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象
Рисование на холсте ---сложность! ! !
1) Рисование SVG: технология векторного рисования, которая появилась в 2000 году и позже была включена в стандарт H5. 2) Рисование на холсте: технология растрового рисования, технология рисования, предложенная H5. 3) Рисование WebGL: технология трехмерного рисования, которой еще нет. еще не был включен в стандарт H5.
Технология рисования на холсте Canvas: Canvas, H5 реализует технологию 2D-рисования
<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); координата w, h, ширина и высота ctx.strokeRect(x,y,w,h); //Обводка прямоугольника ctx.clearRect(x,y,w,h); Очистить все рисунки внутри прямоугольника
2) Используйте холст для рисования текста.
Точка привязки фрагмента текста находится в начале базовой линии текста.
ctx.textBaseline = 'alphabetic' //Значением базовой линии текста по умолчанию является третья строка ctx.font=12px без засечек //Размер и стиль шрифта 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 — радиус, start — координата; начальный угол, а конец - конечный угол
Угол: 360 = Радианы: 2PI 180 = 1PI Например
ctx.arc(100,200,30,0,2*Math.PI)ctx.stroke(); //Обводка текущего пути ctx.fill(); //Заполнение текущего пути ctx.clip();//Использовать текущий путь Обрезка //**********Угол соединения**********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. Градиент в рисунке на холсте
Линейный градиент: линейный градиент Радиальный градиент: радиальный градиент Вы можете обратиться к эффекту градиента в ps,
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); //Повернуто ctx.drawImage(img,0,0); //Рисуем картинки, что рисовать? если кисть кривая Они все кривые ctx.restore() // Исходное состояние, сохраняемое при вынимании сохранения.
(5) SVG-рисунок
Давайте сначала разберемся, что такое растровые изображения и векторы. Просто поймите это вкратце.
Растровое изображение: состоит из пикселей, расположенных один за другим, каждая точка имеет свой цвет, цвет нежный. Векторная графика: состоит из линий, идущих одна за другой. Каждая линия может указывать цвет, направление и может бесконечно масштабироваться, но детализация цвета недостаточно богата.
1. При рисовании SVG используются теги для рисования, и вы можете напрямую привязывать прослушиватели событий.
<svg width=300 height=200 xmlns=http://www.w3.org/2000/svg> <rect width=100 height=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> <ellipse rx=100 ry=40 cx=100 cy=100 fill=#faa Stroke=#a00></ellipse></svg>
4. Создайте прямую линию в SVG.
<svg width=300 height=200 id=c6> <line x1=0 y1=0 x2=100 y2=200 штрих=#000 штрих-ширина=50 штрих-linecap=square></line></svg>
Примечание. Stroke-linecap=square создаст больше квадратов, Stroke-linecap=round создаст больше круглых областей, Stroke-linecap=butt не создаст больше квадратов (то есть созданная вами прямая линия имеет разницу между началом и конец этим атрибутам! Попробуйте сами и узнаете подробности!)
5. Создайте ломаную линию, используя SVG.
<svg width=300 height=200 id=c6> <polyline Points=50,50 100,300 150,100></polyline> //Получается треугольник <polyline Points=50,50 100,300 150,100 fill=transparent Stroke=#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. Расширение: как встроить карту Baidu в веб-страницу.
1) Зарегистрируйте учетную запись разработчика Baidu на карте.baidu.com ---> lbsyun.baidu.com 2) Создайте веб-сайт, войдите в Baidu Map и подайте заявку на получение карты AccessKey для веб-сайта 3) Вставьте карту, предоставленную Baidu Map. в API вашей собственной веб-страницы, встроенном в карту Baidu
Я не буду много говорить о том, как вставить это сюда! (Помните, что для использования Baidu Maps вам необходимо зарегистрировать учетную запись, а затем просто цитировать библиотеки других людей!)
7. Перетащите API
Я уже упоминал о перетаскивании: друзья, найдите предыдущие блоги самостоятельно.
восемь накопителей
Хранилище в основном состоит из файлов cookie и сеансов (я объясню различия и меры предосторожности при поиске множества методов записи ранее): Помните, что сеансы исчезают, когда вы закрываете браузер, а файлы cookie не исчезают, когда вы закрываете браузер! Примечание. Время необходимо добавить при сохранении файла cookie. Если время не добавлено, оно исчезнет после закрытия браузера! Это хранилище браузера можно использовать для решения многих функциональных задач, таких как запоминание паролей и других функций! !
Девять веб-сокетов
Должны ли мы поговорить об этом? . . . . Давайте поговорим об этом вкратце, все зависит от понимания~~
Веб-сокет — это двустороннее соединение без HTTP, которое может быть установлено между сервером и клиентом!
Эта связь является постоянной и постоянной.
Сервер может активно отправлять сообщения.
Серверу больше не нужно опрашивать клиента на предмет запросов, а для связи между сервером и клиентом не требуется повторное установление соединения.
То есть устойчивое двустороннее общение.
Как его создать? Один фрагмент кода готов
var webSocket = новый WebSocket (ws://localhost:8005/socket); // URL-адрес должен начинаться с текста ws или wss: поскольку это не http, это веб-сокет, это ваша собственная идентификация, зашифрованная передача, просто запомните это. . webSocket.send() //Отправляем текстовые данные, можно отправлять только текст. (Используйте объект json для преобразования объекта js в текстовые данные перед отправкой) webSocket.close();//Закройте и отключите соединение. webSocket.onmessage= function(event){ var data=event.data;} // Получаем сообщения от сервера webSocket.onopen =function(event){ //Обработка при начале связи} webSocket.onclose =function(event) { / /Обработка по окончании общения} Подвести итогВыше приведен полный список новых функций и способов использования HTML5, представленных редактором. Надеюсь, он будет вам полезен. Если у вас возникнут вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!