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

一：新标签

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. zabbix Server 4.0 监控JMX监控详解

    zabbix Server 4.0 监控JMX监控详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   大家都知道,zabbix server效率高是使用C语言编写的,有很多应用 ...

  2. nodejs模块化标准

    commonjs 导出一个 a.js function add(a, b){ return a+b; } module.exports = add; b.js const add = require( ...

  3. 大数据之路week07--day05 （一个基于Hadoop的数据仓库建模工具之一 HIve）

    什么是Hive? 我来一个短而精悍的总结(面试常问) 1:hive是基于hadoop的数据仓库建模工具之一(后面还有TEZ,Spark). 2:hive可以使用类sql方言,对存储在hdfs上的数据进 ...

  4. 两点三次Hermiter插值C++代码

    #include <math.h> #include <gl/glut.h> #include <iostream> using namespace std; st ...

  5. Java - 框架之 Maven

     一. 下载依赖包 mvn help:system  2. 配置下载路径到 aliy (可选) <!-- 阿里云仓库 --> <mirror> <id>alimav ...

  6. Python3学习（一）

    基本语法 python3不向下兼容,有些语法跟python2.x不一样,IDLE shell编辑器,快捷键:ALT+p,上一个历史输入内容,ALT+n 下一个历史输入内容.#idle中按F5可以运行代 ...

  7. java.util.Properties 读取配置文件中的参数

    用法 getProperty方法的返回值是String类型. java.util.Properties 读取配置文件中的参数 //读取配置文件 FileInputStream inStream = n ...

  8. webuploader如何实现分片+断点续传

    javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1. 通过form表单向后端发送请求 <form id=&quo ...

  9. C# 中文序列按笔画排序

    问题:给定一串含中文的序列,按首字符的笔画数排序 因为默认是按拼音来排序的, 借助Globalization命名空间,包含定义区域性相关信息的类,这些信息包括语言,国家/地区,正在使用的日历,日期.货 ...

  10. Java获取类方法上的注解

    , fullName.indexOf("$$")); try { clz = Class.forName(fullName); } catch (ClassNotFoundExce ...