目录

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基本语法:

<input type="radio" name="sex" value="1" id="male" />

<label for="male">男</label>

<input type="radio" name="sex" value="0" id="female" />

<label for="female">女</label>

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表单的更多相关文章

  1. jQuery 浮动标签插件,帮助你提升表单用户体验

    浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...

  2. jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  3. springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据

    springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...

  4. 话说Form标签的target属性-----无刷新表单提交

    国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...

  5. HTML学习二_HTML常用的行级标签,常用实体字符及表单标签

    HTML常用的行级标签(行内元素)不独占一行### 有语义的行内元素 #### HTML链接 a标签 ```angular2html<a href="链接地址">链接文 ...

  6. form表单嵌套,用标签的form属性来解决表单嵌套的问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. a标签指定的url,在表单提交前进行js验证的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Django框架基础知识11-会话状态保持及表单

    浏览器存储cookie的方式不太安全,那有没有更好些的来存储登入状态的方式呢??? 状态保持----cookie和session: 状态保持: 1.http协议是无状态的:每次请求都是一次新的请求,不 ...

  9. 夺命雷公狗---在js里阻止a标签的跳转和form表单的跳转

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  10. 使用Yii框架自带的CActiveForm实现ajax提交表单

    Php代码:  <div class="form"> <?php $form=$this->beginWidget('CActiveForm', array ...

随机推荐

  1. scrapy的基本语法

    1.创建爬虫: scrapy genspider爬虫名 域名 注意:爬虫的名字不能和项目名相同 2. scrapy list    --展示爬虫应用列表 scrapy crawl爬虫应用名称      ...

  2. Ajax级联选择框

    Ajax级联选择框 级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...

  3. IOS - 上APPSTORE为何因IPv6被拒?

    http://blog.csdn.net/wanglixin1999/article/details/52182001

  4. JavaEE开发之Spring中的依赖注入与AOP编程

    上篇博客我们系统的聊了<JavaEE开发之基于Eclipse的环境搭建以及Maven Web App的创建>,并在之前的博客中我们聊了依赖注入的相关东西,并且使用Objective-C的R ...

  5. SUSE12Sp3-Nginx安装

    1.安装pcre(nginx 依赖) 把安装包pcre-8.12.tar.gz复制到服务器指定目录 tar -zxvf pcre-8.12.tar.gz # 解压 cd pcre-8.12 #进入目录 ...

  6. [Swift]LeetCode132. 分割回文串 II | Palindrome Partitioning II

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  7. [Swift]LeetCode217. 存在重复元素 | Contains Duplicate

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  8. [Swift]LeetCode266.回文全排列 $ Palindrome Permutation

    Given a string, determine if a permutation of the string could form a palindrome. For example," ...

  9. 如何让div内的多行文本上下左右居中

    1.首先,如果div中的文本特别少,不超过div宽度,那么这种就非常简单了,直接line-height等于height就可以了 <style type="text/css"& ...

  10. 准备PPT过程中的一些文档记录

    http://jm.taobao.org/2016/12/23/20161223/ https://www.csdn.net/article/2015-02-10/2823900 https://da ...