많은 친구들이 나에게 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의 입력 유형: text /password /radio /checkbox/ sybmit/ Reset / file /hidden / image/
H5의 입력 유형: 이메일/url/번호/전화/검색/범위/색상/월/주/날짜
2) 새로운 양식 요소
H4의 양식 요소: 입력/텍스트 영역/선택, 옵션/레이블
H5의 새로운 양식 요소: 데이터 목록/진행/미터/출력
2. h5-datalist 제안 목록의 새로운 양식 요소<datalist id=lunchList> <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; if(v>=1){clearInterval(t); },500); 5. h5미터의 새로운 양식 요소 <body> 오일 함량: <meter id=m1 min=0 max=100 low=30 high=70 Optimal=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>
ID/클래스/제목/유형/값/이름/스타일/읽기 전용/비활성화/체크/
H5의 양식 요소의 새로운 속성
1) 자리 표시자: 자리 표시자 문자는 프롬프트로 제출할 수 없습니다.
<input value=tom placeholder=请输入用户名/>
2) 자동초점 : 자동으로 입력초점 획득 (클릭 없이 입력 가능. 최초 입력 설정만 유효함)
<input autofocus>
3) 다중: 입력 상자에 여러 개의 입력값이 나타날 수 있으며, 쉼표로 구분되어 [email protected], [email protected]
<input type=email name=emails multiple>
4) form: 입력 필드를 FORM 외부에 배치하는 데 사용됩니다.
<form id=f5></from>
<input form=f5>
=================입력 유효성 검사와 관련된 새로운 속성=========================== = =======
예를 보려면 입력 유효성 검사 관련 속성/yz.html을 참조하세요.
5) 필수: 필수, 내용은 비워둘 수 없습니다.
6) maxlength: 문자열의 최대 길이를 지정합니다.
7) minlength: 문자열의 최소 길이를 지정합니다.
8) max: 지정된 숫자의 최대값
9) min: 지정된 숫자의 최소값
10) 패턴: 입력이 일치해야 하는 정규식을 지정합니다.
위의 유효성 검사 속성은 form 요소에 해당하는 js 객체의 유효성 속성에 영향을 미치며 유효성 속성은 확인 속성입니다.
(3) 비디오 비디오 및 오디오
1. H5로 대체된 플래시는 어떤 면에서 반영되나요?플래시 드로잉(AS/FLEX) =>캔버스/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. 웹엠></source>
귀하의 브라우저는 비디오 재생을 지원하지 않습니다!
</video> 그 자체는 300*150 인라인 블록 요소입니다. 참고: 여러 줄의 소스는 다양한 브라우저와 호환되도록 작성되었습니다. 브라우저는 동영상 형식을 일률적으로 지원하지 않기 때문에 일부 브라우저 등 일부 브라우저에서는 mp4 형식을 지원하며, 지원하지 않는 경우 다음 ogg 동영상을 지원하는지 확인하세요. 지원하면 재생됩니다. 지원되지 않으면 아래로 계속하세요. 아래에 소스가 없으면 브라우저가 비디오 재생을 지원하지 않는다는 뜻입니다! .
VIDEO 태그/개체의 일반적으로 사용되는 멤버:
회원 속성:
<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>
autoplay: false, 자동 재생 여부, 기본값 falsecontrols: false, 재생 컨트롤 표시 여부, 기본값은 false loop: false, 반복 재생 여부, 기본값은 false muted: false, 재생 음소거 여부, 기본값은 false false 포스터: '', 재생 첫 번째 프레임 앞에 표시되는 포스터로, 이미지일 수 있습니다. 기본값은 비어 있고 사전 로드 없음: 비디오 사전 로드 전략, 가능한 값: 자동: 비디오의 메타데이터 및 특정 버퍼링 시간을 사전 로드합니다. 휴대폰에서 사용하면 안 됩니다(크기/지속 시간. 첫 번째 프레임 내용, 버퍼링 시간). (사전 로드는 트래픽 낭비) 메타데이터: 비디오의 메타데이터(크기/길이, 첫 번째 프레임 내용)만 사전 로드합니다. 버퍼링 기간 없음, 휴대폰에 적합 없음: 데이터를 사전 로드하지 않습니다.
------------------------------------- --------------- ID v2의 속성 사용법은 다음과 같습니다.
v2.playbackRate=3;
currentTime: 현재 재생 기간 지속 시간: 총 지속 시간 일시 중지됨: true, 현재 비디오가 일시 중지된 상태인지 여부, true는 일시 중지됨을 의미, false는 재생 볼륨을 의미함: 1 기본값은 1, 현재 볼륨 재생 속도: 1, 재생 속도가 1보다 큼 빠른 재생을 의미하고, 1보다 작으면 느린 재생을 의미합니다.
ID v2 방법:
play(): 비디오 재생 Pause(): 재생 멤버 일시 정지 event: onplay: 비디오 재생이 시작될 때 트리거되는 이벤트 onpause: 비디오가 일시 정지될 때 트리거되는 이벤트 연습: 컨트롤을 사용하지 않고 재생/일시 정지 버튼을 사용자 정의하세요. 비디오와 함께 버튼을 숨기려면 마우스를 비디오 영역 밖으로 이동하십시오. 예를 들어 비디오 오디오, 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. wav></source>
확인란 선택 여부를 결정하는 포스터 속성***이 없다는 점을 제외하면 속성 방법은 동영상과 동일합니다.
cb.onchange=function(){ this.checked true는 선택됨을 의미하고, false는 선택되지 않음을 의미합니다.}(4), 캔버스
각 캔버스에는 그리기 컨텍스트 개체라고 하는 브러시 개체가 하나만 있습니다. 이 개체를 사용하여 그리세요!
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象
캔버스 그리기---어려움! ! !
1) SVG 드로잉: 2000년에 등장하여 이후 H5 표준에 포함된 벡터 드로잉 기술 2) 캔버스 드로잉: H5에서 제안한 드로잉 기술인 비트맵 드로잉 기술: 3D 드로잉 기술. 아직 H5 표준에 통합되었습니다.
캔버스 그리기 기술 캔버스: 캔버스, H5는 2D 그리기 기술을 구현합니다.
<canvas width=500 height=400>您的浏览器不支持canvas</canvas>
캔버스 태그는 브라우저에서 기본적으로 300*150의 인라인 블록입니다. 캔버스의 너비와 높이는 CSS 스타일이 아닌 HTML/JS 속성을 통해서만 지정할 수 있습니다! 각 캔버스에는 그리기 컨텍스트 개체라고 하는 브러시 개체가 하나만 있습니다. 이 개체를 사용하여 그리세요! 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.strokRect(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은 반경이고, 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) 캔버스를 사용하여 이미지 그리기
캔버스는 클라이언트 측 기술이고 이미지는 서버에 있으므로 브라우저는 먼저 그릴 이미지를 다운로드하고 이미지가 비동기적으로 로드될 때까지 기다려야 합니다.
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. 캔버스 그리기의 그라데이션
선형 그래디언트: 선형 그래디언트 방사형 그래디언트: RadialGradient 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 너비=300 높이=200 xmlns=http://www.w3.org/2000/svg> <직선 너비=100 높이=100></ect></svg>
2. js를 사용하여 svg 태그를 만드는 방법!
//var r1 = document.createElement('direct'); 이 svg 요소는 수명 제한과 네임스페이스가 있기 때문에 생성할 수 없습니다. 즉, 이것이 작동하지 않으면 다음 방법을 사용하여 생성하세요!!! !) var r1= document.createElementNS('http://www.w3.org/2000/svg','direct');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 스트로크=#a00></ellipse></svg>
4. SVG에서 직선을 만듭니다.
<svg 너비=300 높이=200 id=c6> <line x1=0 y1=0 x2=100 y2=200 스트로크=#000 스트로크 너비=50 스트로크-라인캡=제곱></line></svg>
참고: 스트로크-라인캡=스퀘어는 더 많은 사각형을 생성하고, 스트로크-라인캡=라운드는 더 많은 원형 영역을 생성하며, 스트로크-라인캡=버트는 더 많은 사각형을 생성하지 않습니다(즉, 생성하는 직선은 시작 부분과 시작 부분 사이에 차이가 있습니다) 이 속성의 끝은 직접 시도해 보시면 세부 사항이 중요하다는 것을 알게 될 것입니다!)
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 스트로크=#000 >< /polyline> //나오는 것은 폴리라인</svg>
6. 지리적 위치(미래에는 클라이언트가 필요하지 않으며 우리 자신의 위치도 찾을 수 있습니다!)
Geolocation: JS를 사용하여 현재 브라우저의 지리적 좌표(경도, 위도, 고도, 속도) 데이터를 얻는 Geolocation, Ele.me, Amap Navigation...과 같은 LBS 애플리케이션(위치 기반 서비스)을 구현하는 데 사용됩니다.
모바일 브라우저가 위치 정보를 얻는 방법:
1) 첫 번째 선택은 휴대폰 및 위성 통신의 GPS 칩이며 위치 확인 정확도는 미터 이내입니다. 2) 두 번째 선택은 위치 확인을 위한 휴대폰 기지국이며 위치 확인 정확도는 킬로미터 이내입니다(불법). PC 브라우저를 통한 위치 정보: 1) IP 주소를 통한 역방향 분석 및 위치 확인 정확도는 IP 주소 데이터베이스의 크기에 따라 다릅니다.
HTML5는 현재 브라우저의 위치 정보를 얻기 위한 새로운 객체를 제공합니다.
window.navigator.geolocation{ getCurrentPosition:fn, //현재 위치 정보를 가져옵니다. watchPosition:fn, //위치 데이터 변경 사항을 모니터링합니다.clearWatch:fn //모니터링 취소}2. 확장: 웹페이지에 Baidu 지도를 삽입하는 방법
1) Baidu 개발자 계정 등록 map.baidu.com ---> lbsyun.baidu.com 2) Baidu Map에 로그인하고 해당 웹 사이트에 대한 지도 AccessKey를 신청합니다. 3) Baidu Map에서 제공하는 지도를 삽입합니다. Baidu 지도에 포함된 자체 웹페이지 API
여기에 이것을 삽입하는 방법에 대해서는 많이 이야기하지 않겠습니다! (바이두 지도를 이용하려면 반드시 계정을 등록한 후 다른 사람의 라이브러리를 인용해야 한다는 점을 기억하세요!)
7. 드래그 앤 드롭 API
앞서 드래그 앤 드롭에 대해 언급했습니다. 친구 여러분, 이전 블로그를 직접 찾아보세요.
여덟 개의 저장 공간
저장공간은 주로 쿠키와 세션으로 구성됩니다.(작성방법은 많이 찾아보실때 차이점과 주의사항에 대해 앞서 설명드리겠습니다): 브라우저를 닫아도 세션은 사라지고, 브라우저를 닫아도 쿠키는 사라지지 않는다는 점 꼭 기억해주세요! 참고: 쿠키가 저장될 때 시간을 추가해야 합니다. 시간을 추가하지 않으면 브라우저를 닫은 후 사라집니다. 이 브라우저 저장소는 비밀번호 기억 및 기타 기능과 같은 많은 기능적 문제를 해결하는 데 사용할 수 있습니다! !
9개의 웹 소켓
이것에 대해 이야기해야합니까? . . . . 간단히 얘기하자면, 모두 이해에 달려있습니다~~
웹 소켓은 서버와 클라이언트 사이에 설정될 수 있는 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.onclose =function(event) { / /통신 종료 시 처리} 요약위 내용은 에디터가 소개한 HTML5의 새로운 기능과 활용법에 대한 종합적인 목록입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 에디터가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!