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

一：新标签

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. 使用Junit测试框架学习Java

    前言 在日常的开发中,离不开单元测试,而且在学习Java时,特别是在测试不同API使用时要不停的写main方法,显得很繁琐,所以这里介绍使用Junit学习Java的方法.此外,我使用log4j将结果输 ...

  2. mysql 压力测试工具sysbench

    2.1 只读示例 ./bin/sysbench --test=/usr/share/sysbench/tests/include/oltp_legacy/oltp.lua --mysql-host=1 ...

  3. 设置grep高亮显示匹配项和基本用法

    设置grep高亮显示匹配项 方法1:设置别名 编辑vim~/.bashrc 添加如下一行内容: alias grep = 'grep --color=auto' source ~/.bashrc // ...

  4. 使用Cloudera Manager部署Spark服务

    使用Cloudera Manager部署Spark服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 1>.点击添加服务进入CM服务安装向导 2>.选择需要安装的spa ...

  5. rest-assured-doc接口自动化测试，数据驱动测试平台

    原文:https://github.com/rest-assured/rest-assured/wiki/Usage 本文github地址:https://github.com/RookieTeste ...

  6. markdown种嵌入html标签，实现自定义样式

    转:https://www.cnblogs.com/buwuliao/p/9578918.html -------------------------------------------------- ...

  7. Centos7安装nginx后提示“Welcome to nginx on Fedora！”，conf.d目录下无default.conf文件

    问题描述 在腾讯云centos7上安装nginx sudo yum install nginx 打开默认网页显示 Welcome to nginx on Fedora! 且 /etc/nginx/co ...

  8. 用python实现多线程爬取影视网站全部视频方法【笔记】

    我拿这个站点作为案例:https://91mjw.com/  其他站点方法都是差不多的. 第一步:获得整站所有的视频连接 html = requests.get("https://91mjw ...

  9. python API _ 1 (EasyDict)

    作用:参数调用文件一:from easydict import EasyDict as edictimport numpy as np config = edict() config.IMG_HEIG ...

  10. (转载) 从0开始搭建SQL Server AlwaysOn 第三篇（配置AlwaysOn）

    这一篇是从0开始搭建SQL Server AlwaysOn 的第三篇,这一篇才真正开始搭建AlwaysOn,前两篇是为搭建AlwaysOn 做准备的 步骤 这一篇依然使用step by step的方式 ...