집 >웹 프론트엔드 >H5 튜토리얼 >h5의 새로운 태그와 버려진 태그

h5의 새로운 태그와 버려진 태그

php中世界最好的语言원래의: 2018-03-13 09:55:023217검색

이번에는 h5의 새 태그와 폐기된 태그에 대해 알려드리겠습니다. h5의 새 태그와 폐기된 태그를 사용할 때의 주의사항은 무엇인가요?

1.video tag

동영상 태그란 무엇인가요?
기능: 동영상 재생
a.첫 번째 형식:

> ;

비디오 태그의 속성
src: 재생해야 하는 비디오 주소를 비디오 태그에 알리는 데 사용됩니다.
autoplay: 비디오를 자동으로 재생해야 하는지 여부를 비디오 태그에 알리는 데 사용됩니다.
controls: 비디오 태그에 알리는 데 사용됩니다. 컨트롤 바를 표시해야 하는지 여부
poster: 동영상이 재생되기 전에 표시된 자리 표시자 이미지가 재생되지 않음을 동영상 태그에 알리는 데 사용됩니다.
loop: 일반적으로 광고 동영상에 사용되며, 이후에 반복해야 하는지 여부를 동영상 태그에 알리는 데 사용됩니다. 동영상 재생이 완료되었습니다
preload: 동영상을 미리 로드하지만, preload와 자동 재생의 차이에 주의해야 합니다. 예, autoplay 속성이 설정되어 있으면 preload 속성이 무효화됩니다
muted: muted
width/height: 정확히 img 태그와 동일

//设置 自动播放 + 控制条<video></video>//控制条 + 占位图<video></video>//广告视频 : 自动播放 + 无限循环 + 静音 + 宽度<video></video>

b. 두 번째 형식

2.1. 형식:

<video>
    <source></source>
    <source></source>
</video>

2.2. 두 번째 형식의 존재 의미:
비디오 데이터가 매우 중요하기 때문에 5대 브라우저는 제조업체는 다른 사람의 비디오 형식을 지원하지 않기 때문에 모든 브라우저에서 지원되는 비디오 형식은 없습니다.
현재 이 문제를 해결하기 위해 W3C는 비디오 태그의 두 번째 형식을 도입했습니다. 태그는 브라우저 적응 문제를 해결하기 위한 것입니다. 비디오 요소는 세 가지 비디오 형식을 지원합니다. 세 가지 형식 모두

소스 태그를 통해 비디오 태그에 지정됩니다. 그러면 브라우저가 나중에 비디오를 재생할 때

2.3. 참고:

2.3.1 비디오 태그를 통한 현재 두 번째 형식은 모든 브라우저에서 지원되는 비디오 형식을 지정할 수 있지만 모든 브라우저에 대한 전제 조건이 있습니다. 비디오 태그를 통해 비디오를 재생하려면 브라우저가 HTML5 태그를 지원해야 합니다. 그렇지 않으면 재생이 불가능합니다.

2.3.2 과거에는 일부 브라우저에서 HTML5 태그를 지원하지 않았기 때문에 일부 브라우저를 허용했습니다. 과거에는 video 태그를 통해 동영상을 재생했지만 앞으로는 html5media라는 JS 프레임워크를 통해 구현할 수 있습니다

//示例代码:
<video>
    <source></source>
    <source></source>
    <source></source>
</video>

2. 오디오 태그

1. 기능: 오디오 재생

2. 형식:

<audio></audio>
<audio>    <source></source></audio>

3. 참고:
audio 태그와 비디오의 사용 태그의 사용은 기본적으로 오디오 태그에서 사용할 수 있습니다. , 기능은 동일

사용할 수 없는 속성이 3개 있습니다

//第一种格式<audio></audio>
//第二种格式<audio>    <source></source></audio>

세 가지. 세부정보 및 요약 태그

세부정보 및 요약 태그가 무엇인가요?
기능: 요약 태그를 사용하여 요약 정보를 설명하고, 세부 정보 태그를 사용하여 세부 정보를 설명합니다

기본적으로 접힌 상태로 표시되므로 클릭해야 세부 정보를 볼 수 있습니다

형식:

<details>
    <summary>概要信息</summary>
    详情信息</details>

샘플 코드

<details>
    <summary>郑伊健</summary>简介：郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。1991年...</details>

요약 세부 정보.gif

4. marquee 태그

1. marquee([mɑr'ki]) 태그란 무엇인가요? h5의 새로운 태그와 버려진 태그 기능: Marquee

2. 형식:

Content

3. 속성:

방향: 스크롤 방향을 왼쪽/오른쪽/위/아래로 설정

scrollamount: 스크롤 속도, 값을 설정합니다. 클수록 빨라집니다.
loop: 스크롤 수를 설정합니다. , 기본값은 -1이며 무한 스크롤입니다.

동작: 스크롤 유형 슬라이드가 경계로 스크롤할 때 멈추고 경계로 스크롤할 때 바운스되도록 설정합니다

4. 참고:
marquee 태그는 W3C에서 권장하는 태그이며 W3C 공식 문서에서는 쿼리할 수 없지만 주요 브라우저에서는 이 태그를 매우 잘 지원합니다

샘플 코드:

<!--滚动方向--><marquee>随便写点内容</marquee><marquee direction="right">随便写点内容</marquee><marquee direction="up">随便写点内容</marquee><marquee direction="down">随便写点内容</marquee><hr><!--设置滚动速度--><marquee scrollamount="1">随便写点内容</marquee><marquee scrollamount="100">随便写点内容</marquee><hr><!--设置滚动次数--><marquee loop="1">随便写点内容</marquee><hr><!--设置滚动类型--><!--滚动到边停止--><marquee behavior="slide">随便写点内容</marquee><!--往返滚动--><marquee behavior="alternate">随便写点内容</marquee><!--滚动图片--><marquee>
    ![](images/NJ.jpg)</marquee>

marquee 스크롤 방향

강하다>

1.为什么HTML中有一部分标签会被废弃?
因为当前的HTML中的标签只有一个作用, 就是用来添加语义
而早期的HTML标签中有一部分标签是没有语义的,
有一部分标签是用来修改样式的
所以这部分标签就被淘汰了

<strong>被废弃标签</strong>
<br> <hr> <font>
<b> <u> <i> <s>以上标签都是没有语义的,都是用来修改样式的
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本天津下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的

注意点:
以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用

<strong>推出的新标签</strong>
strong == b
ins == u
em == i
del == s
strong语义: 定义重要性强调的文字
ins语义(inseted): 定义插入的文字
em语义(emphasized  音标:[&#39;ɛmfə,saɪz]): 定义强调的文字
del语义(deleted): 定义被删除的文字

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

h5의 새로운 태그와 버려진 태그

관련 기사