> 웹 프론트엔드 > H5 튜토리얼 > HTML5 컬렉션

HTML5 컬렉션

php中世界最好的语言
풀어 주다: 2018-03-09 09:45:19
원래의
2398명이 탐색했습니다.

이번에는 HTML5 모음을 가져왔습니다. HTML5 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1. HTML5에 요소 추가:

<canvas> </canvas>    用于图形绘制,通过脚本(常用JS)来完成;具体请参考JavaScript;
<svg> </svg>         矢量图,支持内联;
<math> </math>        用于书写数学字符;
<video> </video>      显示视频;(支持MP4,WebM,Ogg);内容里边需要有sorce标签给定的源文件;具体请参考JavaScript;
<audio> </audio>      显示视频;(支持MP3,wav,Ogg);内容里边需要有sorce标签给定的源文件;具体请参考JavaScript;
<source>              定义media元素 (<video> 和 <audio>)的媒体资源
<bdi> </bdi>          设置一段文本的方向,可与父元素方向不同;
<mark> </mark>        带有记号的文本;
<time> </time>        时间;属性有datetime
<embed>               一个容器,可用来嵌入部应用或插件,属性有width,height,src,type;
로그인 후 복사

2. 새로운 요소 및 속성

(1) 새로운 태그의 새로운 속성:

type属性新增值:
    color          颜色选择框;
    date            日期选择器(部分浏览器不支持);
    datetime-local  日期和时间选择器;
    time            时间选择器;
    week          周选择器;
    email           邮件地址验证;
    url             url验证;
    month         月份选择;
    number        数值输入,可用以下属性进行更多限定,    disabled,max,min,maxlengh,pattern(正则表达式),readonly,requried,size,step,value;
    range          数值选择,显示为一个滑块,需用更多属性进行限定:max,min,step,value;
autofocus          不需要值,如果给定此属性,则在加载页面时输入域自动获得焦点;
form               设置输入域属于某一个或多个表单,多个表单之间用空格分隔;
formaction         值会覆盖<form>元素中的action属性;
formenctype        值会覆盖<form>元素中的enctype属性;
formmethod         值会覆盖<form>元素中的method属性;
formnovalidate     值会覆盖<form>元素中的novalidate属性;
formtarget         值会覆盖<form>元素中的target属性;
height             设置image类型<input>标签高度;
width              设置image类型<imput>标签宽度;
multiple           不需要值,如果给定此属性,则在输入元素中可选择多个值;
pattern            值为正则表达式,用来验证输入值;
placeholder        值为用来显示在输入域中来提示用户;
requried           不需要值,如给定此属性,则输入不能为空;
로그인 후 복사

(2) 새로운 양식 요소:

<datalist> </datalist>        与<input>一起使用,来设定预定义值,每个值用<option value="value">来设定;
<keygen>                      提交表单时会生成私钥和公钥两个键,私钥存于客户端,公钥发送给服务器;
<output>                      元素用于不同类型的输出,比如计算或脚本输出.
<form>/<input>的autocomplete属性,如果值为on则会保留最后一次输入的值作为下次输入的默认值,如果为off则不会记录保留;
<form>的novalidate属性,不需要值,如果给定了此属性则在提交表单时不应该验证 form 或 input 域。
로그인 후 복사

( 3) 새로운 의미 요소

의미 요소는 웹 페이지의 여러 부분을 식별하는 데 사용됩니다.

<header> </header>
<nav> </nav>                定义导航链接的部分;
<section> </section>        定义文档中的节;
<article> </article>        标签定义独立的内容;
<aside> </aside>            定义页面主区域内容之外的内容;
<figcaption> </figcaption>  <figure> 元素的标题,应该被置于 "figure" 元素的第一个或最后一个子元素的位置;
<figure> </figure>          标签规定独立的流内容(图像、图表、照片、代码等等),元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
<footer> </footer>          描述了文档的底部区域;
로그인 후 복사

(4) 새로운 전역 속성:

contenteditable                元素是否可编辑,值有true,false;
contextmenu                    指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单,值为要打开<menu>元素的id;
data-*                         存储页面的自定义数据;
draggable                      元素是否可拖动,值有true,false,auto;5 hidden
로그인 후 복사

(5) 새로운 저장 방법:

localStorage                 本地存储,永久性的;
sessionStrorage           针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除;
로그인 후 복사

하지만 이 두 가지 방법은 모두 구현됩니다.

3. 전역 이벤트 속성(HTML4 이후 지원, 주로 브라우저가 이벤트를 트리거한 후 실행되는 스크립트에 사용, 값은 모두 스크립트임):

1. 창 이벤트 속성

onafterprint         打印文档后运行脚本;
    onbeforeprint        打印文档前;
    onbeforeonload       文档加载前;
    onload               文档加载时;
    onoffline            文档离线时;
    ononline             文档上线时;
    onhaschange          文档改变时;
    onredo               文档再次执行时;
    onundo               文档执行撤销时;
    onerror              出现错误时;
    onmessage            触发消息时;
    onunload             用户离开文档时;
    onblur               窗口失去焦点时;
    onfocus              窗口获得焦点时;
    onpagehide           窗口隐藏时;
    onpageshow           窗口可见时;
    onpopstate           窗口历史记录改变时;
    onresize             窗口大小改变时;
    onstorage            web storage区域更新时;
로그인 후 복사

믿습니다. 이 기사의 사례를 읽고 나면 방법을 익힐 수 있습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

React를 사용하여 이미지 캐러셀 구성 요소 완성

태그를 사용하여 HTML로 개인 즐겨찾기를 작성하는 방법

위 내용은 HTML5 컬렉션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿