20190325-HTML框架、audio标签、vedio标签、source标签、HTML表单

1、HTML框架

frameset：框架标记

frame：框架内文件

iframe：内嵌框架

2、audio标签

src：URL（可以用source标签替代）

autoplay：自动播放

preload：预加载

loop：循环播放

controls：显示控件

3、vedio标签

src：URL（可以用source标签替代）

autoplay：自动播放

preload：预加载

loop：循环播放

controls：显示控件

poster：封面

muted：静音

4、source标签

src：URL

type：媒体的MIME类型

5、HTML表单（重点）

from：表单

input：输入框（重点）

textarea：多行文本框

select：下拉框

optgroup：下拉框分组

label：绑定input标签为其标注

内容

1、HTML框架

1.1frameset标签

1.1.1定义：框架标记，告知HTML文件为框架模式，并设定窗口边割，不可嵌套在body标签内

1.1.2属性： frameborder="1/0"（1显示边框（Default property）；0：不显示边框）

border="10"（边框粗细）

bordercolor="red"（边框颜色）

cols="30%/30/*"（纵向分割，浏览器页面的30%，30px，页面余下部分）

rows="30%/30/*"（横向分割，浏览器页面的30%，30px，页面余下部分）

ps：cols与rows尽量不要在同一个frameset标签内使用

1.2frame标签

1.2.1定义：设定某框架参数值

1.2.2属性： name（必设，框架名）

src="URL"（必设，框架显示的路径）

scrolling="auto(Default property)/yes/no"（滚动条，自适应/出现/不出现）

noresize=" /noresize"（能否手动调节框架大小，能/不能）

marginwidth="100"（框架边界与内容间的宽度）

marginheight="100"（框架边界与内容间的高度）

width="100"（框架宽度）

height="100"（框架高度）

frameborder="1/0"（1显示边框（Default property）；0：不显示边框）

bordercolor="red"（边框颜色）

1.2.3noframes标签：当浏览器完全显示不出该框架，页面会显示<noframes></noframes>的内容，目前已停用

1.2.4基本语法

 <!--田字型框架-->

 <frameset rows="50%,*">

     <frameset cols="50%,*">

         <frame src="https://www.baidu.com"></frame>

         <frame src="https://www.baidu.com"></frame>

     </frameset>

     <frameset cols="50%,*">

         <frame src="https://www.baidu.com"></frame>

         <frame src="https://www.baidu.com"></frame>

     </frameset>

 </frameset>

1.3iframe标签

1.3.1定义：内嵌框架，浮动框架，可嵌套在div等标签内

1.3.2属性： name（必设，框架名）

src="URL"（必设，框架显示的路径）

scrolling="auto(Default property)/yes/no"（滚动条，自适应/出现/不出现）

marginwidth="100"（框架边界与内容间的宽度）

marginheight="100"（框架边界与内容间的高度）

width="100"（框架宽度）

height="100"（框架高度）

frameborder="1/0"（1显示边框（Default property）；0：不显示边框）

bordercolor="red"（边框颜色）

align="left/right/center"（对齐方式）

1.3.3基本语法

<body>

    <iframe src="https://www.taobao.com/" frameborder="0"></iframe>

</body>

2、audio标签

2.1属性： src：URL（可以用source标签替代）

autoplay="autoplay"（自动播放，当值等于属性时，可以简写"autoplay"）

preload：预加载

loop：循环播放

controls：显示控件

2.2基本语法

 <audio src="song.ogg" controls="controls">阁下的浏览器不支持audio标签</audio>

 <!--如果考虑浏览器对文件的兼容性-->

 <audio width="320" height="240" controls="controls">

   <source src="song.ogg" type="audio/ogg">

   <source src="song.mp3" type="audio/mpeg">

   你的浏览器不支持<audio>标签

 </audio >

3、vedio标签

2.1属性： src：URL（可以用source标签替代）

autoplay="autoplay"（自动播放，当值等于属性时，可以简写"autoplay"）

preload：预加载

loop：循环播放

controls：显示控件

poster="URL"（封面）

muted：静音

width="100"（视频播放器宽度）

height="100"（视频播放器高度）

2.2基本语法

 <video src=“movie.mp4” controls="controls">Your browser does not support the video tag.</video>

 <!--如果考虑到不同浏览器对视频文件的兼容性-->

 <video width="320" height="240" controls="controls">

   <source src="movie.ogg" type="video/ogg">

   <source src="movie.mp4" type="video/mp4">

   <p>Your browser does not support the video tag.</p>

 </video>

4、source标签

4.1定义：为媒介元素（如 <video> 和 <audio>）定义媒介资源，允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

4.2属性： src：URL

type="vedio/mp4"

4.3基本语法：

 <video width="320" height="240" controls="controls">

       <source   src=“movie.mp4”  type="video/mp4">

 </video>

5、HTML表单（重点）

5.1from标签

5.1.1定义：一个用于向服务器传输数据的表单元素区域

5.1.2属性： name：表单名称

target="_self/_blank/_parent/_top/framename"（表单打开方式当前窗口（Default property）/新窗口/父级框架窗口/整个窗口/指定框架）

action="formation.asp"（表单提交的地址）

method="get/post"（表单提交的方式）

novalidate="novalidate"（不对输入进行检测）

enctype="ajax/api"（指明用来把表单提交给服务器时（当method值为"post"）的互联网媒体形式。其缺省值为"application/x-www-form-urlencoded"，若表单需上传文件时，值为"multipart/form-data"）

ps: <form method="post" enctype="multipart/form-data"><input type="file" name="photo"/></form>（当input为file时，form标红部分一定要写）

5.2input标签（重点）

5.2.1属性： name：（名称）

value：（文本框初始值）

size：（文本框宽度）

maxlength：（最多输入的字符数）

readonly：（是否只读，可提交数据）

disabled：（是否禁用，禁止提交数据）

placeholder="请填写你的名字"（背景提示文字）

checked="checked"（选中状态）

autocomplete="on/off"（自动完成状态，启动（Default property）/禁用）

autocomplete、form、form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)、min, max 和 step、pattern (regexp)、required

5.2.2文本框： type="text"

name="username"

5.2.3密码框： type="password"

name="pwd"

5.2.4单选框： type="radio"

name="sex"（设定同组）

5.2.5复选框： type="checkbox"

name="sex"（设定同组）

5.2.6隐藏域： type="hidden"

name="uid"

value="10"

5.2.7上传文件框： type="file"

name="photo"

multiple="multiple"（是否能同时上传多文件）

5.2.7按钮：

5.2.7.1普通按钮：type="button" name="btn" value="确定"

5.2.7.2提交按钮：type="submit" name="comit" value="提交"

5.2.7.3重置按钮：type="reset" name="reset" value="重置"

5.2.7.4图片按钮：type="image" name="img_btn" src="URL"

5.2.8引用数据列表：type="list"

5.2.8.1定义：引用数据列表，其中包含输入字段的预定义选项

5.2.8.2基本语法：

 <form action="demo_form.asp">

         Webpage: <input type="url" list="url_list" name="link" />

        <datalist id="url_list">

              <option label="W3Schools" value="http://www.w3schools.com" />

              <option label="Google" value="http://www.google.com" />

              <option label="Microsoft" value="http://www.microsoft.com" />

        </datalist>

        <input type="submit" />

 </form>

5.2.9H5表单所有input类型

5.3textarea标签

5.3.1定义：多行文本框

5.3.2属性： name（名称）

cols（文本框的宽度）

rows（文本框的高度）

5.4select标签

5.4.1定义：下拉框

5.4.2属性： name（名称）

value（选项的值）

size（显示行数）

multiple：（是否多选）

disabled：（是否禁用，禁止提交数据）

selected="selected"（选中状态）

5.4.3基本语法

 <select name="city">

     <option value="0">请选择</option

     <option value="bj">北京</option>

     <option value="gz">广州</option>

 </select>

5.4.4optgroup标签

5.4.4.1定义：组合项

5.4.4.2属性：label（组合选项名称）

5.4.4.3基本语法：

 <select name="city" multiple>

       <optgroup label="广东">

          <option value="1">广州</option>

          <option value="2">深圳</option>

       </optgroup>

       <optgroup label="其他">

          <option value="3">长沙</option>

          <option value="4">香港</option>

       </optgroup>

 </select>

5.5label标签

5.5.1定义：选项与其标签文字关联

5.5.2基本语法：

5.6其他新标签

5.6.1datalist标签：与list属性绑定使用，来定义input可能的值

5.6.2keygen标签：规定用于表单的密钥对生成器字段（当提交表单时，私钥存储在本地，公钥发送到服务器）

5.6.2.1属性： name（名称，用于在提交表单时搜集字段的值）

disabled：（禁用）

keytype="rsa"（rsa 生成 RSA 密钥）

form="formname"（定义该 keygen 字段所属的一个或多个表单）

autofocus（使 keygen 字段在页面加载时获得焦点）

challenge（如果使用，则将 keygen 的值设置为在提交时询问）

5.6.2.2基本语法：

 <form action="/example/html5/demo_form.asp" method="get">

 用户名：<input type="text" name="usr_name" />

 加密：<keygen name="security" />

 <input type="submit" />

 </form>

5.6.3output标签：定义不同类型的输出，如脚本输出

5.6.3.1属性： name（定义对象的唯一名称。（表单提交时使用））

for="element_id"（定义输出域相关的一个或多个元素）

form="form_id"（定义输入字段所属的一个或多个表单）

5.6.3.2基本语法：

 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

    <input type="range" id="a" value="50">100

    +<input type="number" id="b" value="50">

    =<output name="x" for="a b"></output>

 </form>

20190325-HTML框架、audio标签、vedio标签、source标签、HTML表单的更多相关文章

jQuery 浮动标签插件，帮助你提升表单用户体验
浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
springboot框架中集成thymeleaf引擎，使用form表单提交数据，debug结果后台获取不到数据
springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据表单html: <form class="form-horizontal ...
话说Form标签的target属性-----无刷新表单提交
国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...
HTML学习二_HTML常用的行级标签，常用实体字符及表单标签
HTML常用的行级标签(行内元素)不独占一行### 有语义的行内元素 #### HTML链接 a标签 ```angular2html<a href="链接地址">链接文 ...
form表单嵌套，用标签的form属性来解决表单嵌套的问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
a标签指定的url，在表单提交前进行js验证的实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
Django框架基础知识11-会话状态保持及表单
浏览器存储cookie的方式不太安全,那有没有更好些的来存储登入状态的方式呢??? 状态保持----cookie和session: 状态保持: 1.http协议是无状态的:每次请求都是一次新的请求,不 ...
夺命雷公狗---在js里阻止a标签的跳转和form表单的跳转
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
使用Yii框架自带的CActiveForm实现ajax提交表单
Php代码: <div class="form"> <?php $form=$this->beginWidget('CActiveForm', array ...

随机推荐

[Swift]LeetCode67. 二进制求和 | Add Binary
Given two binary strings, return their sum (also a binary string). The input strings are both non-em ...
[Swift]LeetCode179. 最大数 | Largest Number
Given a list of non negative integers, arrange them such that they form the largest number. Example ...
[Swift]LeetCode271. 加码解码字符串 $ Encode and Decode Strings
Design an algorithm to encode a list of strings to a string. The encoded string is then sent over th ...
[Swift]LeetCode290. 单词模式 | Word Pattern
Given a pattern and a string str, find if str follows the same pattern. Here follow means a full mat ...
Jquery的详细解析和用法
一.Jquery简介 Jquery是一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari ...
超全MyBatis动态SQL详解！( 看完SQL爽多了)
MyBatis 令人喜欢的一大特性就是动态 SQL. 在使用 JDBC 的过程中, 根据条件进行 SQL 的拼接是很麻烦且很容易出错的. MyBatis 动态 SQL 的出现, 解决了这个麻烦. My ...
MT2018笔试题之计算数字位数
一.计算数字位数 1.题目给定一个数字T,计算从1到T的所有正整数的位数和.比如T=13,则12345678910111213有17位数字. 输入描述 3 13 4 5 输出 17 4 5 2.思路 ...
Elasticsearch Document
1. 基本概念回顾 1.1. Node 节点是一个服务器,它是集群的一部分,存储数据,并参与集群的索引和搜索功能节点有一个名称标识,该名称在缺省情况下是在启动时分配给节点的随机全局惟一标识符(U ...
asp.net core系列 37 WebAPI 使用OpenAPI (swagger)中间件
一.概述在使用Web API时,对于开发人员来说,了解其各种方法可能是一项挑战.在ASP.NET Core上,Web api 辅助工具介绍二个中间件,包括:Swashbuckle和NSwag .NE ...
SpringBoot修改Redis序列化方式
前言由于Springboot默认提供了序列化方式并不是非常理想,对于高要求的情况下,序列化的速度和序列化之后大小有要求的情况下,不能满足,所以可能需要更换序列化的方式. 这里主要记录更换序列化的方式 ...

20190325-HTML框架、audio标签、vedio标签、source标签、HTML表单

20190325-HTML框架、audio标签、vedio标签、source标签、HTML表单的更多相关文章

随机推荐

热门专题