只记录一下比较有趣的知识点。

一:新标签

1.选项列表datalist

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" list="sg">
<datalist id="sg">
<option value="apple">苹果</option>
<option value="banna">香蕉</option>
</datalist>
</body>
</html>

2.效果

  

3.元素分类fieldset

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>用户登录</legend>
用户:<input type="text"><br>
密码:<input type="password">
</fieldset>
</body>
</html>

4.效果

  

二:表单属性

1.placeholder

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
用户名:<input type="text" placeholder="请输入">
</body>
</html>

2.效果

  

3.autofocus

  自动对焦

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
用户名:<input type="text" placeholder="请输入" autofocus="autofocus">
</body>
</html>

4.效果

  

5.multiple多选

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
上传:<input type="file" multiple>
</body>
</html>

三:多媒体标签

1.标签

  embed:标签定义嵌入的内容

  audio:播放音频

  video:播放视频

2.内嵌式框架iframe

  先上传,然后使用分享

  

  代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDI1MTE4MjEzNg==' frameborder=0 'allowfullscreen'></iframe>
</body>
</html>

  效果:

  

3.audio

  支持ogg,mp3,wav格式

  autoplay:自动播放

  loop:循环

  controls:控制

4.案例

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<audio autoplay controls loop>
<source src="anangel.mp3"></source>
<!-- <source src="单身情歌.wav"></source> -->
</audio>
</body>
</html>

  效果:

  

5.video

  支持ogg,peeg4,webm

  

  

  

027 H5常用标签的更多相关文章

  1. h5常用标签语义

    <article>定义页面独立的内容区域.例如外部来的文章. <aside>定义页面的侧边栏内容.<aside> 标签定义 <article> 标签外的 ...

  2. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  3. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  4. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  5. HTML-学习笔记(常用标签)

    本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...

  6. dedecms 常用标签调用

    /*------------------单个ip调用-------------------*/ {dede:type typeid="12"} <a title=" ...

  7. 三、Html常用标签

    1,基本标签 <html>:html文档的根元素,可以指定一个xmlns属性,值只能是http://www/w3.org/1999/xhtml. <body>:页面主体部分 & ...

  8. 0426html常用标签属性

    一.基础语法 标签:作为网页的最小单元 1.双标签 内容的容器 2.单标签 控制性内容 注释    每一个模块都要写清楚注释 二.基本结构 <!DOCTYPE html>          ...

  9. html常用标签学习笔记

    本文内容: 前言:本文讲述的内容包括几类常用标签,以及这些标签的一些常用属性(有一些属性由于已经有CSS样式来代替,所以对于一些不重要的这里选择不讲) 排版标签 段落标签:p div span 标题标 ...

随机推荐

  1. Qt命名规范

    1) 类名:单词首字母大写,单词和单词之间直接连接,无需连接字符 如: MyClass,QPushButton class MainWindow { }; 2) 函数名字,变量名:第二个单词开始(不是 ...

  2. 基于k8s集群部署prometheus监控etcd

    目录 基于k8s集群部署prometheus监控etcd 1.背景和环境概述 2.修改prometheus配置 3.检查是否生效 4.配置grafana图形 基于k8s集群部署prometheus监控 ...

  3. git修改提交历史中的author信息

    当次提交 当次的提交显示指定提交者信息: git commit -m "Initial commit" --author="mn <mn@furzoom.com&g ...

  4. Btrace打印自定义引用类方法参数

    简介 BTrace是sun公司推出的一款Java 动态.安全追踪(监控)工具,可以在不用重启的情况下监控系统运行情况,方便的获取程序运行时的数据信息,如方法参数.返回值.全局变量和堆栈信息等,并且做到 ...

  5. vue 标签页以及标签页赋值

    背景: 使用vue增加了标签页,点击不同标签页传给后端的值不一样,用来做区分,如图: vue代码如下: 使用 form.PageA   form.PageB ,后端接收到的值 first.second ...

  6. .net框架 - File类与FileInfo类异同

    System.IO命名空间中提供的文件操作类有File和FileInfo,这两个类的功能基本相同,只是File是静态类,其中所有方法都是静态的,可以通过类名直接调用,不需要实例化.而FileInfo是 ...

  7. maven项目重构-使用了mybatis generator插件

    1.在worksapce下,dos窗口输入spring init -g=com.briup.apps -a=poll3 -d=mysql,mybatis,web poll3 2.下载依赖,cd到pol ...

  8. mysql跨表删除多条记录

    Mysql可以在一个sql语句中同时删除多表记录,也可以根据多个表之间的关系来删除某一个表中的记录. 假定我们有两张表:Product表和ProductPrice表.前者存在Product的基本信息, ...

  9. MYSQL 常见引擎

    Mysql常见的引擎   常用的引擎是:Innodb和Myiasm这两种引擎: innodb: 提供了对事务的ACID操作,还提供了行级锁和外键约束,,他的优势就是处理大量数据,在msql启动的时候, ...

  10. 4:ELK分析tomcat日志

    五.ELK分析tomcat日志 1.配置FIlebeat搜集tomcat日志 2.配置Logstash从filebeat输入tomcat日志 3.查看索引 4.创建索引