目录

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 ...