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

一：新标签

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. Flink源码阅读（一）——Flink on Yarn的Per-job模式源码简析

    一.前言 个人感觉学习Flink其实最不应该错过的博文是Flink社区的博文系列,里面的文章是不会让人失望的.强烈安利:https://ververica.cn/developers-resource ...

  2. 16寸屏苹果MacBook Pro悄悄上市，售价18999 元起步

    传闻了半年之久的16寸屏苹果MacBook Pro于11月13日夜晚终于上线,15寸的机身16寸的屏幕,相比于此前的13寸和15寸MacBook Pro,新品搭配了更大的屏幕.更高性能的处理器以及更大 ...

  3. abp学习（二）

    翻译下首页截图的标签: DDD Base Classes 介绍: 应用程序代码库的分层是一种被广泛接受的技术,可帮助降低复杂性并提高代码重用性.为了实现分层架构,ASP.NET样板遵循域驱动设计的原则 ...

  4. 个性化排序算法实践(二)——FFM算法

    场感知分解机(Field-aware Factorization Machine ,简称FFM)在FM的基础上进一步改进,在模型中引入类别的概念,即field.将同一个field的特征单独进行one- ...

  5. One Class SVM 对于样本不均衡处理思路——拿出白样本建模，算出outlier，然后用黑去检验效果

    One Class SVM 是指你的training data 只有一类positive (或者negative)的data, 而没有另外的一类.在这时,你需要learn的实际上你training d ...

  6. 【Bug档案01】Spring Boot的控制器+thymeleaf模板 -使用中出现静态资源加载路径不当的问题 -解决时间:3h

    总结 - thymeleaf的模板解析规则不清楚,或者忘了; - 出现bug时,瞎调试, 没有打开NETWORK 进行查看资源的加载情况 - 控制器中的其他代码,可以先注释掉,这样就可以迅速屏蔽掉其他 ...

  7. MQ的常见应用场景

    MQ的常见的应用场景为:解耦,异步,流量削峰 在解耦场景中: 不使用MQ的耦合场景: 使用解耦的场景为: 异步的方式: 不使用MQ的同步高延时请求场景: 使用异步化之后的接口性能优化: 没有使用mq的 ...

  8. Mybatis控制台打印SQL语句的两种方式

    问题描述在使用mybatis进行开发的时候,由于可以动态拼接sql,这样大大方便了我们.但是也有一定的问题,当我们动态sql拼接的块很多的时候,我们要想从*mapper.xml中直接找出完整的sql就 ...

  9. LG2662 牛场围栏 和 test20181107 数学题

    P2662 牛场围栏 题目背景 小L通过泥萌的帮助,成功解决了二叉树的修改问题,并因此写了一篇论文, 成功报送了叉院(羡慕不?).勤奋又勤思的他在研究生时期成功转系,考入了北京大学光华管理学院!毕业后 ...

  10. Oracle建立DBLINK的详细步骤记录

    测试条件:假设某公司总部在北京,新疆有其下属的一个分公司.在本次测试中,新疆的计算机为本地计算机,即本要的IP地址为:192.168.1.100 北京的总部有一个集中的数据库,其SID是SIDBJ,用 ...