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

一：新标签

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. China International Industry Fair 2019

    Today i visit the CIIF 2019, as a "professional visitor"  since i have made an appointment ...

  2. 基于ATtiny85轻松制作一款智能手表

    这是基于ATtiny85系列的简约手表系列中的第三款.该款手表通过在微型64x48 OLED显示屏上绘制模拟的手表来显示时间.它使用独立的晶振控制的低功耗RTC芯片来保持每月几秒钟的时间,并在不显示时 ...

  3. 十大排序代码实现（python）

    目录 冒泡排序 快速排序 简单插入排序 希尔排序 简单选择排序 堆排序 二路归并排序 多路归并排序 计数排序 桶排序 基数排序 写在前面: 参考文章:十大经典排序算法 本文的逻辑顺序基于从第一篇参考博 ...

  4. mingw控制台中文乱码

    乱码原因 直接先用一段话讲乱码原因,看不懂老老实实就往下看吧 其实我用Sublime或者VSCode等编辑器写代码出现的控制台中文乱码问题是编译器mingw输出的数据使用的是UTF-8编码,而控制台用 ...

  5. 《你说对就队》第九次团队作业：【Beta】Scrum meeting 1

    <你说对就队>第九次团队作业:[Beta]Scrum meeting 1 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 团队名称 < ...

  6. Python 冒泡排序只适用位数相同,位数不同用a.sort()方法

    数组内容双位数排序: #coding:utf-8 print u"中文" a = ['] b = 0 c = 0 print a i =0 for j in range (len( ...

  7. Exec Maven插件

    1.为什么使用exec? 现在的工程往往依赖 众多的jar包,不像war包工程,对于那些打包成jar包形式的本地java应用来说,通过java命令启动将会是一件极为繁琐的事情,原因很简单,太 多的依赖 ...

  8. windows下面同时部署多个tomcat的方法

    下面我们把配置的详细过程写在下面,以供参考:(此例以配置三个Tomcat为例)1. 下载apache-tomcat-7.0.63,下载下来的文件为apache-tomcat-7.0.63.zip.2. ...

  9. Go读写文件

    Go序列化和反序列化 package main import ( "bufio" "encoding/json" "fmt" "o ...

  10. Apache Kylin v3.0.0-alpha 发布

    Apache Kylin v3.0.0-alpha 发布 Apr 19, 2019 • Shaofeng Shi 近日 Apache Kylin 社区很高兴地宣布,Apache Kylin v3.0. ...