New and abandoned tags for h5

This time I will bring you the new tags and abandoned tags of h5. What are the precautions when using the new tags and abandoned tags of h5. The following is a practical case, let's take a look.

1.video tag

What is the video tag?
Function: Play video
a.The first format:

Attributes of the video tag
src: used to tell the video tag the video address to be played
autoplay: used to tell Whether the video tag needs to automatically play the video
controls: used to tell the video tag whether the control bar needs to be displayed
poster: used to tell the video tag whether the video is not played before the placeholder image is displayed
loop: generally used to do Advertising video, used to tell the video tag whether it needs to be played in a loop after the video is played.
preload: Preload the video, but you need to pay attention to the conflict between preload and autoplay. If the autoplay attribute is set, the preload attribute will be invalid.
muted :Mute
width/height: Exactly the same as img tag

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

b. The second format

2.1. Format:

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

2.2. The significance of the existence of the second format:
Since video data is very important, the five major browser manufacturers are unwilling to support other people’s video formats, so there is no video format that is supported by all browsers.
At this time, in order to solve this problem, W3C introduced the second format of video tag

The meaning of the second format of video tag is to solve the problem of browser adaptation

# The ##video element supports three video formats. We can assign all three formats

to the video tag through the source tag. Then when the browser plays the video in the future, it will choose one of the three to support. format to play

2.3. Note:

2.3.1 Although the second format currently through the video tag can specify a video format supported by all browsers, it does not want all browsers to There is also a prerequisite for all browsers to play videos through the video tag, that is, the browser must support the HTML5 tag, otherwise it will not be played.

2.3.2 In the past, some browsers did not support the HTML5 tag, so in order to allow Some browsers in the past were also able to play videos through the video tag, so in the future we can use a JS framework called html5media to achieve

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

2. audio tag

1.What is the audio tag?

Function: Play audio

2.Format:

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

3.Note:

The use of audio tags and video tags The usage is basically the same. Most of the attributes that can be used in video can be used in the audio tag, and the functions are the same
except that 3 attributes cannot be used, height/width/poster

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

3. Details and summary tags

What are details and summary tags?

Function: Use summary tag to describe summary information, use details tag to describe detailed information
Default In this case, it is a folded display. If you want to see the details, you must click

Format:

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

Sample code

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

Summary details.gif

4. marquee tag

1. What is the marquee ([mɑr'ki]) tag?

Function: Marquee

2. Format:

Content

3. Attributes:

direction: Set the scroll direction left/right/up/down
scrollamount: Set the scrolling speed, the larger the value, the faster
loop: Set the number of scrolls, the default is -1, which is infinite scrolling
behavior: Set the scrolling type slide to stop scrolling to the boundary, alternate to scroll to the boundary Just bounce back to

4. Note:

marquee tag is not a tag recommended by W3C, and this tag cannot be queried in W3C official documents, but major browsers support this tag very well

Sample code:

<!--滚动方向--><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 scrolling direction

#5. Abandoned tags

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中文网其它相关文章！

推荐阅读：

iOS webView怎样加载HTMLString

关于正则表达式的几个小练习

The above is the detailed content of New and abandoned tags for h5. For more information, please follow other related articles on the PHP Chinese website!