20180612-前端系统学习-HTML之嵌入内容

一. 图片

img

• 图像
• 属性

    --src 图片地址，必填

    --alt 图片不能显示时显示的内容

    --width、height 图片的宽度和高度

    --srcset

    --sizes

• srcset

    --宽度描述符

    <div>
        <img src="/res/chrome128.png" alt="chrome">
        <img src="/res/chrome128.png" alt="chrome" 
        srcset="/res/chrome256.png 256w, /res/chrome512.png 512w" 
        sizes="(max-width:1080px) 128px,256px">
    </div>

    --像素密度描述符

    <div>
        <img src="/res/chrome128.png" alt="chrome">
        <img src="/res/chrome128.png" 
        srcset="/res/chrome256.png 2x, /res/chrome512.png 3x" alt="chrome">
    </div>

• usemap  和img相关联的热点图片的名字
• ismap 布尔属性，表示图片是否是服务器端map的一部分。返回的是图片的坐标值，要放到a元素中链接。
• referrerpolicy referrer信息策略
• crossorigin 跨域图片
• longdesc 对图片的补充，内容可写很长

插入图片

• picture

    --容器

• source

    --srcset 

    --type 图片类型

    --sizes 

    --media 媒体查询

    <picture>
        <source type="image/webp" srcset="/res/chrome.webp">
        <!--Chrome浏览器支持-->
        <source type="image/png" srcset="/res/chrome256.png">
        <img src="/res/chrome256.png" alt="chrome">
        <!--都不支持时选择此选项-->
    </picture>

    <picture>
        <source srcset="/res/chrome128.png 1x, /res/chrome256.png 2x" media="(max-width:1080px)">
        <source srcset="/res/chrome256.png 1x, /res/chrome512.png 2x">
        <img src="/res/chrome128.png" alt="chrome">
    </picture>

二、图片热点

• map

    --name 名字

• area

    --alt

    --href 链接

    --shape 形状

    --coords 坐标，半径等

    <p>
        <img src="/res/shapes.png" usemap="#shapes" alt="四个形状">
        <map name="shapes">
            <area shape="rect" coords="50,50,100,100">
            <!--正方形洞-->
            <area shape="rect" coords="25,25,125,125" href="/res/red.html" alt="红色正方形">
            <area shape="circle" coords="200,75,50" href="/res/green.html" alt="绿色圆形">
            <area shape="poly" coords="325,25,262,125,388,125" href="/res/blue.html" alt="蓝色三角形">
            <area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="/res/yellow.html" alt="黄色多边形">
        </map>
    </p>

还有以下属性，同超链接中的属性

    --download 表示不用打开资源，直接下载即可

    --hreflang

    --rel

    --target

    --type

    --referrerpolicy

三、视频音频

video

• 视频，影片，带字幕的音频
• 属性

    --src

    --width，height

    --poster

    --preload

    --autoplay

    --loop

    --muted

    --controls 控制是否显示控制条

    --crossorigin

    <video src="/res/video.mp4" controls width="200" height="200">
    </video>

• poster表示封面

    <video src="/res/video.mp4" controls poster="/res/cover.png" width="200" height="200">
    </video>

• autoplay 是否自动播放，默认不自动播放
• loop 是否重复播放
• muted 是否静音
• preload 是否预加载视频

    --none 表示不用加载

    --metadata 表示加载视频元数据

    --auto 表示需要预先加载

    <video src="/res/video.mp4" controls autoplay muted loop preload="auto"
    poster="/res/cover.png" width="200" height="200">
        浏览器不支持video元素
    </video>

• source

    --src 视频地址

    --type 视频格式

    <video width="300" height="300" controls>
        <source src="/res/video.mp4" type="video/mp4;codedes='avc1.42E01E,mp4a.40.2'">
        <source src="/res/video.ogg" type="video/ogg;codecs='theora,vorbis'">
            浏览器不支持video元素
    </video>

• track  用于添加字幕

    --kind 表示字幕类型

• subtitles 表示翻译的字幕
• captions 对内容同步的翻译
• descriptions 表示对视频内容文本描述，适用于失明用户或视频不可见场景
• chapters 表示章节标题，当用户快速浏览可显示章节内容
• metadata 表示元数据信息，对用户不可见，主要给脚本使用

    <video width="300" height="300" controls>
        <source src="/res/video.mp4" type="video/mp4;codedes='avc1.42E01E, mp4a.40.2'">
        <track kind="subtitles" src="/res/video.en.srt" srclang="en" label="English">
        <track kind="captions" src="/res/video.zh.vtt" srclang="zh" label="中文">
    </video>

    --src 字幕地址

    --srclang 字幕语言

    --label 显示在控制器上的字母标签

    --default 显示当前字幕是否是默认字幕

audio

• 音频
• 属性

    --src

    --preload

    --autoplay

    --loop

    --muted

    --controls

    --crossorigin

<audio src="/res/audio.mp3" controls></audio>

• source
• track

<audio controls>
    <source src="/res/audio.mp3" type="audio/mp3">
    <source src="/res/audio.wav" type="audio/wav">
    <track kind="subtitles" src="/res/audio.en.srt" srclang="en" label="English">
    <track kind="subtitles" src="/res/audio.zh.vtt" srclang="zh" label="中文">
</audio>

四、广告

插入广告

iframe

• 内嵌的浏览上下文
• 另一个HTML页面嵌入到当前页面中
• 属性

    --src 另一个HTML页面地址

    --width、height 宽高

    --name 当前浏览环境的名称

    <iframe width="200" height="220" frameborder="0" src="http://www.baidu.com">
    </iframe>

• srcdoc 直接嵌入一个页面内容

<iframe srcdoc="<div>hello world</div>" frameborder="0" width="200" height="220"></iframe>

• sandbox 限制被嵌入内容的操作

    --allow-forms

    --allow-pointer-lock

    --allow-popups

    --allow-presentation

    --allow-same-origin

    --allow-scripts

    --allow-top-navigation 允许当前层级打开

注意：当只有一个sandbox时，里面不会允许进行任何动作，包含表单提交等

<iframe sandbox="allow-scripts" src="/res/framea.html" frameborder="0"></iframe>

如果既写了src属性又写了srcdoc属性，优先显示srcdoc的内容。

    --allowfullscreen 是否允许全屏显示内容

    --allowpaymentrequest 是否允许有支付请求

    --referrerpolicy 获取资源时refer信息应该采用哪种策略