ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5与CSS3基础教程第八版学习笔记16-21章 - 平凡世界平凡人
属性 | 总结 |
accept | 限制用户可上传文件类型 |
autocomplete | 对form元素或特定字段添加autocomplete=“off”,将关闭浏览器的自动填写行为 |
autofocus | 页面加载后将焦点放到该字段 |
multiple | 允许输入多个电子邮件地址,或上传多个文件 |
list | 将datalist与input联系 |
maxlength | 指定textarea的最大字符数,文本框在H5之前就支持此属性 |
pattern | 定义一个用户所输入的文本在提交之前必须遵循的模式 |
placeholder | 出现在文本框中的提示文本 |
required | 在提交表单前必须填写该字段 |
formnovalidate | 关闭H5自动验证功能,应用于提交按钮 |
novalidate | 关闭H5自动验证功能,应用于表单元素 |
<span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="check.png"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="21"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="21"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">/></span><span style="color: #000000;">Create Profile </span><span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span></span></span>
注:如果表单需要一个以上的提交按钮,就应避免使用button元素
<span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #0000ff;">></span>Reset<span style="color: #0000ff;"></span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 都可以对表单进行重置 </span><span style="color: #008000;">--></span></span></span>
选择器 | 应用 | 浏览器支持情况 |
:focus | 获得焦点的字段 | IE8+及其他 |
:checked | 选中的单选按钮或复选框 | IE9+及其他 |
:disabled | 具有disabled属性的字段 | IE9+及其他 |
:enable | 与:disabled相反 | IE9+及其他 |
:required | 具有required属性的字段 | IE10+、Safari5+及其他 |
:optional | 与:required相反 | IE10+、Safari5+及其他 |
:invalid | 其值与pattern属性给出的模式不匹配的字段等非法字段 | IE10+、Safari5+及其他 |
:valid | 与:invalid相反 | IE10+、Safari5+及其他 |
<span style="color: #0000ff;"><span style="color: #800000;">video </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="my-video.ext"</span><span style="color: #0000ff;">></span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span></span>
属性 | 描述 |
src | 视屏URL |
autoplay | 视频可播放时自动播放 |
controls | 添加浏览器为视频设置的默认控件 |
muted | 静音 |
loop | 循环 |
poster | 指定视频加载时所要显示的图像(而不是视频第一帧),接受所需图像的URL |
width | 视频宽度,默认300 |
height | 视频高度,默认150 |
preload | 告诉浏览器要加载视频内容的多少 none:不加载任何视频 metadata:仅加载视频元数据(长度、尺寸等) auto:让浏览器决定怎么做 |
<span style="color: #0000ff;"><span style="color: #800000;">video </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="my-video.ext"</span><span style="color: #ff0000;"> controls</span><span style="color: #0000ff;">></span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">video </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="my-video.ext"</span><span style="color: #ff0000;"> autoplay controls</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span></span></span>
<span style="color: #0000ff;"><span style="color: #800000;">video </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="my-video.ext"</span><span style="color: #ff0000;"> autoplay loop</span><span style="color: #0000ff;">></span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">video </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="my-video.ext"</span><span style="color: #ff0000;"> poster</span><span style="color: #0000ff;">="paddle-steamer-poster.jpg"</span><span style="color: #ff0000;"> controls</span><span style="color: #0000ff;">></span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span></span></span>
<span style="color: #0000ff;"><span style="color: #800000;">video </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="my-video.ext"</span><span style="color: #ff0000;"> proload</span><span style="color: #0000ff;">="none"</span><span style="color: #ff0000;"> controls</span><span style="color: #0000ff;">></span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">video </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="369"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="208"</span><span style="color: #ff0000;"> controls</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="paddle-steamer.mp4"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/mp4"</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 浏览器支持则播放,忽视后面所有文件,否则跳到下一个source</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="paddle-steamer.webm"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/webm><!-- 类推 --> <p><a href="</span><span%20style=" color:>paddle-steamer.mp4"</a></p></span><span style="color: #0000ff;">></span>Download the video<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 在浏览器不支持时显示 </span><span style="color: #008000;">--></span> <span style="color: #0000ff;"></span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span></span>
source的属性
名称 | 描述 |
src | 视屏来源URL |
type | 用于指定视频类型,帮助浏览器决定是否能播放 该属性的值反映的是视频格式,即编解码器, 如video/mp4,video/webm,video/ogg |
media | 用于为视频来源指定CSS3媒体查询,从而为不同屏幕尺寸设备指定不同的视频 |
名称 | 描述 |
src | 音频文件URL |
autoplay | 音频可播放时自动播放 |
controls | 添加浏览器默认控件 |
muted | 静音 |
loop | 循环 |
preload | 与video一致 |