标签属性

preload

关键字 preload 作为元素 <link> 的属性 rel 的值，表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源。

Link types: preload: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches

What types of content can be preloaded?
Many different content types can be preloaded. The possible as attribute values are:

audio: Audio file, as typically used in <audio>.
document: An HTML document intended to be embedded by a <frame> or <iframe>.
embed: A resource to be embedded inside an <embed> element.
fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
font: Font file.
image: Image file.
object: A resource to be embedded inside an <object> element.
script: JavaScript file.
style: CSS stylesheet.
track: WebVTT file.
worker: A JavaScript web worker or shared worker.
video: Video file, as typically used in <video>.

先期经验

dom.getAttribute(‘’)是不区分大小写的,jQuery也不区分
document.all 能区分ie浏览器

浏览器可以通过tabindex属性定义元素获得焦点的顺序

禁止设备的右键。好像没有生效，因为是系统级的
Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)

e.preventDefault();

*:not(input):not(textarea) {
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
} 
html,body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }

video标签的可用性、优先权，结合controls=true考虑
video标签resize，父元素100%；也可以结合设置min-height
音视频自动播放权限受到限制：同源/用户操作等，静音可以播放
style标签结合属性contenteditable*,可以在页面直接显示样式表，并且可编辑
input file accept accept="image/gif, image/jpeg" accept="video/*"
只会在选择是只显示这些文件。用户还可以手动选所有文件类型。
需要判断 e.target.files[0].type 或者 file.name
HTML accept 属性-规定能够通过文件上传进行提交的文件类型
 html input=”file” 浏览时只显示指定文件类型 xls、xlsx、csv

contenteditable 获取光标问题，并定位到最后。需要加 tabindex 属性，不是这个
[div/span等获取焦点问题(tabindex属性的简单理解)]
[div contenteditable光标位置问题]
[input、textarea、div(contenteditable=true)光标定位到最后]

//定位input、textarea
function po_Last(obj) {
    obj.focus();//解决ff不获取焦点无法定位问题
    if (window.getSelection) {//ie11 10 9 ff safari
        var max_Len=obj.value.length;//text字符数
        obj.setSelectionRange(max_Len, max_Len);
    }
    else if (document.selection) {//ie10 9 8 7 6 5
        var range = obj.createTextRange();//创建range
        range.collapse(false);//光标移至最后
        range.select();//避免产生空格
    }
}

//定位div(contenteditable = "true")
function po_Last_Div(obj) {
    if (window.getSelection) {//ie11 10 9 ff safari
        obj.focus(); //解决ff不获取焦点无法定位问题
        var range = window.getSelection();//创建range
        range.selectAllChildren(obj);//range 选择obj下所有子内容
        range.collapseToEnd();//光标移至最后
    }
    else if (document.selection) {//ie10 9 8 7 6 5
        var range = document.selection.createRange();//创建选择对象
        //var range = document.body.createTextRange();
        range.moveToElementText(obj);//range定位到obj
        range.collapse(false);//光标移至最后
        range.select();
    }
}

iframe 上属性。" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" crossorigin还可以设置use-credentials sandbox可以设置多个值

深入浅出iframe
<iframe src="demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin allow-scripts"></iframe>
做CSP（内容安全策略）通过CSP配置sandbox和child-src可以设置iframe的有效地址，它限制适iframe的行为，包括阻止弹出窗口,防止插件和脚本的执行,而且可以执行一个同源策略。
<meta http-equiv="Content-Security-Policy" content="child-src 'unsafe-inline' 'unsafe-eval' www.easonwong.com">

或者通过HTTP头部信息加上Content-Security-Policy字段

$PS: 解决word嵌套在iframe打开错误提示，结果发现不是这个原因了。中途给chrome启动添加了参数--disable-web-security
之前好像是可以打开的。把设置都去掉报新的错误，js文件都404，比如 https://view.officeapps.live.com/op/zh/strings.js

$PS: crossorigin="anonymous crossorigin=use-credentials

在HTML5中，一些 HTML 元素提供了对 CORS 的支持，例如 <img> 和 <video>
[CORS settings attributes] (https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes)

$PS: 当时做视频avplayer 嵌套的在iframe中，好像是用了crossorign

兼容
video 在微信中的怪癖
video的库好像并不会生效，强行使用原生。video.js,和TCPlayer
video 在企业微信中播放或暂停，点击是中间会出现按钮；所以只需要一个中间的按钮，播放后去掉，就不再显示
而在微信浏览器中开始加的播放按钮播放时去掉后就不会出现了。没有可以再次点击的按钮，继续播放。需要在暂停后再显示出来
video在微信浏览器，和企业微信中是原生控件，层级比较高，播放时滚动会覆盖在页面上
安卓手机 video 标签层级问题
 html5 video在安卓大部分浏览器包括微信最顶层的问题
在微信浏览器的video标签加上x5-video-player-type="h5" ，播放的时候会进入全屏（可以解决2的层级覆盖问题）。在全屏状态下，视频控件左上角的返回按钮可以返回页面，视频停留在当前帧（需要手动显示添加的中间播放按钮）。点击手机中间的home键，会从当前页面退出返回上一层级（就是home键的页面返回/退出）
安卓浏览器video层级最高问题解决方案
 关于移动端video标签层级问题
 安卓系统video视频层级问题

表单

在 HTML5 中，action 属性不再是必需的。
form中只有button时,默认会submit,需要指定 type=”button”
action=”javascript:void(0)” 也可以防止默认提交.正常 onsubmit:return false;

表单里没有选择路径的控件webkitdirectory,也只能是当前路径/一层,而且会有弹窗:需要指定受信任网站

// <input id="meeASP" name="mee" type="file"   webkitdirectory>
document.querySelector('#meeASP').addEventListener('change', e => {
    console.log(e)
    for (let entry of e.target.files)
    console.log(entry.name, entry.webkitRelativePath);
});

表单type=text 获取到的值(value)都是string类型,包括radio,
radio/checkbox 默认的value是”on”,不论有没有选中;option也需要设置value
jQuery prop得到radio/checkbox的值是boolean;attr是 undefined/undefined
jQuery 获得disabled, prop:true/false; attr:disabled/undefined

原生DOM Node的checked/disabled等是boolean,
checked在Node的attributes对象中没有该键值;disabled在attributes对象中有该键值,不同类型不同值.
没有selected,有selectedIndex,这些值是number;在Node.attributes对象中没有该键值.

jQuery 的 attr(‘type’),对于select为undefiend, 需要手动设置type;设置为label的属性,有for也可以生效.

其它

没有 name 和有 disable 的字段不会被提交
同一个表单中，相同name的字段值会发生覆盖，radio 和 checkbox 除外
在低版本浏览器中，name可以作为id使用
忽略或使用浏览器不支持的 type 会转为 type=text
低版本浏览器不支持动态改变 type
点击 button 会默认提交表单
低版本浏览器需要指定 button 的 type=submit 才会提交表单
文本域的光标颜色由字体颜色决定
form表单不能互相嵌套
表单元素可以不在表单的html结构内示例代码
在表单最后一个input元素中敲回车，会触发表单提交

$(‘form’).serializeArray() 多选框未选中时,没有字段,添加type=hidden的相同name input;或者重新定义jquery方法
1
2
<input name="serAuto" id="serAuto" type="checkbox">
<input name="serAuto" value="false" type="hidden">

If checkbox is not selected, form field is not submitted. That is why there is always false value in hidden field. If you leave checkbox unchecked, form will still have value from hidden field. That is how ASP.NET MVC handles checkbox values.

$.fn.ghostsf_serialize = function () {
    var a = this.serializeArray();
    var $radio = $('input[type=radio],input[type=checkbox]', this);
    var temp = {};
    $.each($radio, function () {
        if (!temp.hasOwnProperty(this.name)) {
            if ($("input[name='" + this.name + "']:checked").length == 0) {
                temp[this.name] = "";
                a.push({name: this.name, value: ""});
            }
        }
    });
    //console.log(a);
    return jQuery.param(a);
};


// ## 2 重写jQuery
(function ($) {
    $.fn.serialize = function (options) {
        return $.param(this.serializeArray(options));
    };

    $.fn.serializeArray = function (options) {
        var o = $.extend({
        checkboxesAsBools: false
    }, options || {});

    var rselectTextarea = /select|textarea/i;
    var rinput = /text|hidden|password|search/i;

    return this.map(function () {
        return this.elements ? $.makeArray(this.elements) : this;
    })
    .filter(function () {
        return this.name && !this.disabled &&
            (this.checked
            || (o.checkboxesAsBools && this.type === 'checkbox')
            || rselectTextarea.test(this.nodeName)
            || rinput.test(this.type));
        })
        .map(function (i, elem) {
            var val = $(this).val();
            return val == null ?
            null :
            $.isArray(val) ?
            $.map(val, function (val, i) {
                return { name: elem.name, value: val };
            }) :
            {
                name: elem.name,
                value: (o.checkboxesAsBools && this.type === 'checkbox') ? //moar ternaries!
                       (this.checked ? 'true' : 'false') :
                       val
            };
        }).get();
    };

})(jQuery);
 $('form').serializeArray({ checkboxesAsBools: true })

标签属性

preload

先期经验

兼容

video 在微信中的怪癖

表单

其它