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

一：新标签

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. [转] 雷电三和typec傻傻分不清

    原文:https://club.lenovo.com.cn/thread-4921715-1-1.html 因为形状完全一致,所以很多人都误以为Type-C=雷电3. 实际上,雷电3只是采用了Type ...

  2. （Linux基础学习）第八章：命令行历史,history

    第1节:命令行历史简介保存你输入的命令历史.可以用它来重复执行命令登录shell时,会读取命令历史文件中记录下的命令~/.bash_history登录进shell后新执行的命令只会记录在缓存中:这些命 ...

  3. java 图片base64互转

    public class ImgBase64 { public static void main(String[] args) //测试 { String strImg = GetImageStr() ...

  4. Problem G: STL——整理唱片(list的使用)

    #include<iostream> #include<list> #include<iterator> #include<algorithm> usi ...

  5. java连接Oracle数据库的操作说明

    在测试中,我们常常需要连接Oracle数据库来进行查询对比.下面,我们就来看看,如何使用java代码来连接数据库,并且取出我们想要的数值. 首先,java中如果要连接Oracle数据库,需要jdbc的 ...

  6. P2756 飞行员配对方案问题[二分图最大匹配]

    题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞行员,其中1 名是英国飞行员,另1名是外籍飞行员.在众多的飞行员中,每一名 ...

  7. 《hello-world》第九次团队作业：【Beta】Scrum meeting 1

    项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目验收 团队名称 <hello--wor ...

  8. 一次完整的HTTP请求与响应

    本篇介绍的是一次完成的http请求都经过了那些步骤,这些步骤相应的作用又是什么 1.在浏览器端输入网站的url地址 只有知道了一个网站的url地址才能访问到这个网站 2.浏览器查找缓存 浏览器会查找浏 ...

  9. 开放API接口安全处理

    一.开放API接口定义 顾名思义,开放出来给其他人调用的API接口就是开放API接口.例如,短信接口.邮件接口. 二.开放API的弱点 数据窃取 用户的密码等信息被不轨之人窃取,登录账号发布敏感信息, ...

  10. 学习Spring-Data-Jpa(一)---JPA、Spring-Data-Jpa简介

    写在前面:在国内使用比较多的ORM框架应该就是Mybatis了,但是现在SpringBoot和SpringCloud这么火爆,而Spring-Data-Jpa同样作为Spring家族的成员,它们无缝的 ...