Home > Article > Web Front-end > html basics (4) new elements
html basics (4) new elements
- WBOYOriginal
- 2016-08-08 08:49:521190browse
html5 new elements
html5 semantic elements
Defines the header of the document or a part of the document
Defines the part of the navigation link
Defines a certain area of the document, such as a chapter, header, bottom or other area of the document
Defines an independent content area of the page. The content itself must be meaningful and must be independent from the rest of the document
Defines the sidebar content of the page
Defines the footer of a document or a part of a document
Usually includes the name of the document’s creator, the document’s copyright information, a link to the terms of use, contact information, etc.
Defines the main content of the document
In a document, more than one
Defines independent stream content (images, charts, photos, code, etc.)
The content should be related to the main content, and the position of the element is independent from the main content. If it is deleted, it should not have an impact on the document flow
Define audio, such as music or other audio streams
Currently supported 3 audio formats: MP3, Wav, Ogg
<span style="font-size: 13px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">audio </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="song.ogg"</span><span style="color: #ff0000;"> controls</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">audio</span><span style="color: #0000ff;">></span><span style="color: #000000;">
如果考虑到不同浏览器对音频文件的兼容性：
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">audio </span><span style="color: #ff0000;">controls</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="song.ogg"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="audio/ogg"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="song.mp3"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="audio/mpeg"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Your browser does not support the audio tag.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">audio</span><span style="color: #0000ff;">></span></span>
autoplay: autoplay If this attribute appears, the audio will be played as soon as it is ready
controls: controls If this attribute is present, audio controls (such as play/pause buttons) are displayed to the user
loop: loop If this attribute appears, playback will be restarted whenever the audio ends
muted: muted If this attribute appears, the audio output is muted
preload: auto, meta, none specifies whether to load audio after the page is loaded. If the autoplay attribute is set, this attribute is ignored
Define video, such as a movie clip or other video stream
Currently supports 3 video formats: MP4, WebM, Ogg
<span style="font-size: 13px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">video </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">=“movie.mp4” </span><span style="color: #ff0000;">controls</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span><span style="color: #000000;">
如果考虑到不同浏览器对视频文件的兼容性：
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">video </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="320"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="240"</span><span style="color: #ff0000;"> controls</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="movie.ogg"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/ogg"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="movie.mp4"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/mp4"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Your browser does not support the video tag.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span></span>
width 设置视频播放器的宽度
height 设置视频播放器的高度
autoplay：autoplay 如果出现该属性，则音频在就绪后马上播放
controls：controls 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）
loop：loop 如果出现该属性，则每当音频结束时重新开始播放
muted：muted 如果出现该属性，则音频输出为静音
preload：auto、meta、none 规定是否在页面加载后载入音频，如果设置了autoplay属性，则忽略该属性
poster：url 指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
定义了一个容器，用来嵌入外部应用或者互动程序（插件）
<span style="font-size: 13px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">embed </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="helloworld.swf"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">=" "</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">=" "</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="MIME类型"</span><span style="color: #0000ff;">></span></span>
定义为媒体元素规定外部文本轨道
用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的
<span style="font-size: 13px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">video </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="320"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="240"</span><span style="color: #ff0000;"> controls</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="forrest_gump.mp4"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/mp4"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="forrest_gump.ogg"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/ogg"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">track </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="subtitles_en.vtt"</span><span style="color: #ff0000;"> kind</span><span style="color: #0000ff;">="subtitles"</span><span style="color: #ff0000;"> srclang</span><span style="color: #0000ff;">="en" </span><span style="color: #ff0000;">label</span><span style="color: #0000ff;">="English"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">track </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="subtitles_no.vtt"</span><span style="color: #ff0000;"> kind</span><span style="color: #0000ff;">="subtitles"</span><span style="color: #ff0000;"> srclang</span><span style="color: #0000ff;">="no" </span><span style="color: #ff0000;">label</span><span style="color: #0000ff;">="Norwegian"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span></span>
default：default 规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道
kind 规定文本轨道的文本类型
captions 该轨道定义将在播放器中显示的简短说明
chapters 该轨道定义章节，用于导航媒介资源
descriptions 该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见
metadata 该轨道定义脚本使用的内容
subtitles 该轨道定义字幕，用于在视频中显示字幕
label 规定文本轨道的标题，例如当用户选择字幕轨道时，标题会显示出来
srclang 规定轨道的语言，如果kind属性的值是"subtitles"，则srclang属性是必需的
为
<span style="font-size: 13px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="1.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="The Pulpit Rock"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="300"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="300"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>A view of the pulpit rock in Norway.<span style="color: #0000ff;"></</span><span style="color: #800000;">figcaption</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">figure</span><span style="color: #0000ff;">></span></span>
规定了用户可见的或者隐藏的需求的补充细节
用来供用户开启关闭的交互式控件，任何形式的内容都能被放在标签里边
元素的内容对用户是不可见的，除非设置了open属性
元素定义一个可见的标题，当用户点击标题时会显示出详细信息
<span style="font-size: 13px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">details </span><span style="color: #ff0000;">open</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">summary</span><span style="color: #0000ff;">></span>Copyright 1999-2011.<span style="color: #0000ff;"></</span><span style="color: #800000;">summary</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> - by Refsnes Data. All Rights Reserved.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>All content and graphics on this web site are the property of the company Refsnes Data.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">details</span><span style="color: #0000ff;">></span></span>
定义度量衡，仅用于已知最大和最小值的度量，比如磁盘使用情况，查询结果的相关性等
<span style="font-size: 13px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">meter </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> min</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> max</span><span style="color: #0000ff;">="10"</span><span style="color: #0000ff;">></span>2 out of 10<span style="color: #0000ff;"></</span><span style="color: #800000;">meter</span><span style="color: #0000ff;">> <</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meter </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="0.6"</span><span style="color: #0000ff;">></span>60%<span style="color: #0000ff;"></</span><span style="color: #800000;">meter</span><span style="color: #0000ff;">></span></span>
high 规定被界定为高的值的范围
low 规定被界定为低的值的范围
max 规定范围的最大值
min 规定范围的最小值
optimum 规定度量的最优值
value 规定度量的当前值
定义运行中的任务进度，请将
<span style="font-size: 13px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">progress </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> max</span><span style="color: #0000ff;">="100"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">progress</span><span style="color: #0000ff;">></span></span>
定义高亮显示文本
规定在文本中的何处适合添加换行符
html5已移除的元素