目录

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. js深度复制三种方法

    1.用递归的方式进行深度复制 2.用JSON.stringify加上JSON.parse()进行深度复制 3.用jquery中自带的方法$.extend()进行深度复制 具体实现代码可百度自行查询

  2. android 2018 面试题

    四大组件:activity.service.content provider.broadcast receiver [一]Activity 1.生命周期 onCreate:表示activity正在被创 ...

  3. 深港澳大湾区(深圳).NET技术交流会圆满成功

    2018年7月7日一场以.NET Core微服务和机器学习为主题的交流会成功在深圳职业技术学院落下帷幕.这次活动在短短的一周时间内,报名人数超过了170人,除了一些同学临时有事,基本都到现场了,特别感 ...

  4. Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  5. SUSE12Sp3-.NET Core 2.2.1 runtime安装

    1.安装libicu依赖 1.在线安装 sudo mkdir /usr/local/dotnet #创建目录 cd /usr/local/dotnet sudo wget https://downlo ...

  6. [SQL]LeetCode196. 删除重复的电子邮箱 | Delete Duplicate Emails

    Write a SQL query to delete all duplicate email entries in a table named Person, keeping only unique ...

  7. 超全MyBatis动态SQL详解！( 看完SQL爽多了)

    MyBatis 令人喜欢的一大特性就是动态 SQL. 在使用 JDBC 的过程中, 根据条件进行 SQL 的拼接是很麻烦且很容易出错的. MyBatis 动态 SQL 的出现, 解决了这个麻烦. My ...

  8. 微信公众号的开发 Senparc.Weixin.dll使用

    项目需要,做个微信公众号,之前从未做过,前期挺懵的,再次记录一下,一切困难都是纸老虎(哈哈) 服务号是公司申请的微信公共账号,订阅号是个人申请的.建议开发者自己申请一个测试账号,方便使用,但是测试账号 ...

  9. Python内置函数(8)——bytes

    英文文档: class bytes([source[, encoding[, errors]]]) Return a new “bytes” object, which is an immutable ...

  10. Zara带你快速入门WPF(2)---布局篇

    一.章节目标 这几章节我们会创建一个完整的Window程序,包括使用DataGrid空间,数据绑定是把.NET类中的数据提供给用户界面的一个重要概念,还允许修改数据,包括.NET4.5新增的INoti ...