随笔，记录的比较随便。

今天新学习了9个标签、

<audio> 简单的说就是一个音频标签，他的主要常用属性有src=""音频的路径 controls="controls" 控制参数，他就是可以让其在页面显示一个播放器的效果autoplay="autoplay"自动播放属性 loop="loop"循环次数

<video>同audio标签一样。是一个视频标签。主要常用的属性同上面一样

<datalist>定义选项列表。这个其实是一个比较大的改进，不过也有不足，这个标签其实组合了《input标签中的text》和select标签、生产的一个可以输入和下拉选项的输入组合框》。不足之处在于如果不通过JS控制，只有当输入框中为空，定义的下拉选项中才会生效

<details>定义文档细节。这个标签其实用的地方也比较多，常和summary标签用。summary标签里面写文档的标题。p标签写文档的细节

<mark>一个高亮的显示标签，再也不用标记某一段文字要用font属性了。

<menu>快速创建一个list列表。用法是menu li结合

<address>存放地址的标签

<progress>这个是一个进度条标签。他的主要属性有value和max。value表示当前进度条位置，max表示进度条的总共长度。

<time>标签放时间的标签。

初步接触html5的标签。给人的第一感觉就是望文知义。这个标签能够很容易让人记住。

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Html5学习之路</title>

</head>

<body>

<header style="text-align: center; color: blue;">欢迎来到Html5的学习之路，我是header标签。</header>

这是一个定义选项列表的标签datalist 这个的作用就是将text文本框与select标签结合起来

<input type="text" list="phone">

<datalist id="phone">

	<option></option>

	<option>IPhone</option>

	<option>华为	</option>

	<option>小米	</option>

	<option>三星</option>

</datalist>

<br/>

<br/>

<font color="red">这里我发现了两者一个不同之处在于，datalist只有在输入框为空的时候才会有自己定义下拉的内容!</font>

<br/>

而这个select选项框是不管什么内容它都会存在的

<select>

	<option>IPhone</option>

	<option>华为	</option>

	<option>小米	</option>

	<option>三星</option>

</select>

<br>

<br>

<br>

------------------------

<br><br><br>

这是一个定义文档细节的标签。detail标签。它的主要作用很简单。

<details>

	<summary>这是一个detail标签，下面就是他的使用方法</summary>

		<p>detail标签是什么？</p>

		<p>detail标签有什么作用？</p>

		<p>detail标签能干什么？</p>

		<p>detail标签我改怎么用它？</p>

</details>

<br>

detail标签常与sunmmary标签用在一起。比如这个标签是高亮标签<mark>mark</mark>比重不一样。

<br><br>

接下来这个标签是定义列表标签。menu。

<menu>

	<li>西游记</li><li>水浒传</li><li>红楼梦</li><li>三国演义</li>

</menu>

<br><br>

进度条标签我们用的比较多。比如这个。<mark>progress</mark>

<progress value="5" max="10">value=5 max=10</progress>

<br>

<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>

<footer>我是底部footer标签</footer>

</body>

</html>

　　

Html5新增标签的学习。的更多相关文章

  1. html5新增标签/删除标签

    闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...

  2. 盒子模型，定位技术，负边距，html5 新增标签

    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...

  3. 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题

    https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...

  4. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  5. 第十课html5 新增标签及属性 html5学习5

    一.常用新增标签 1.header:定义页面的页眉头部 2.nav:定义导航栏 3.footer:定义页面底部,页脚 4.article:定义文章 5.section:定义区域 6.aside:定义侧 ...

  6. HTML5新增标签及具体用法

    html5自从推广普及以来,迅速被各大浏览器支持.采用html5设计的网页逐渐成为网页设计的时尚.下面就温习下html5的新增标签. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数 ...

  7. HTML5新增标签的汇总与详解

    趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析.这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦. ...

  8. 第二篇、HTML5新增标签

    <html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title&g ...

  9. html5新增标签兼容性

    很多低版本的浏览器是不识html5新增的标签的,所以为了解决浏览器兼容性问题,主要有两种方法: js可以创建我们自定义的标签,例如,我们可以用js语句 document.createElement(' ...

随机推荐

  1. Oracle merge合并更新函数

    本博客介绍一下Oracle merge合并函数,业务场景:新增数据的时候要先查询数据库是否已经有改数据,有数据就更新数据,没数据才新增数据,这是很常见的业务场景,如果是用Oracle数据库的话,其实直 ...

  2. bootstrap treeview实现菜单树

    本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...

  3. IntelliJ IDEA 与 SVN配置

    问题背景 如果开发工具使用的是IntelliJ IDEA,版本管理工具使用的是SVN. 就涉及到SVN集成的问题,但是可能会遇到选择在IDEA中配置SVN的时候,在SVN的安装bin目录找不到文件 s ...

  4. linux定时任务执行没结果，手动执行有结果问题总结

    今天写了个脚本手动执行有结果,但是放到系统定时任务跑却没结果,之前也遇到这种问题解决了没记录后面又懵逼了一次~~~ 如下图: 手动执行有结果 放到定时任务中每五分钟执行一次 解决方法: 脚本中加载系统 ...

  5. mysql 开发进阶篇系列 53 权限与安全(账号管理的各种权限操作 上)

    一. 概述 在了解前两篇的权限系统介绍后,这篇继续讲账号的管理,这些管理包括账号的创建,权限更改,账号删除等.用户连接数据库的第一步都是从账号创建开始. 1.  创建账号 有两种方法可以用来授权账号: ...

  6. sql server 高可用故障转移(5)

    测试故障转移群集报告 在SQL-CL01(hsr 50)进行故障转移群集的创建,如图下图所示,在SQL-CL01和SQL-CL02的“服务器管理”中右键点击“功能”,选择“添加功能 勾选故障转移群集  ...

  7. 【python】版本35 正则-非库-爬虫-读写xlw文件

    #交代:代码凌乱,新手一个,论坛都是高手,我也是鼓了很大勇气,发出来就是被批评和进步的   #需求:需要对某网站的某id子标签批量爬取,每个网页的id在xlw里,爬取完,再批量存取到这xlw里的第6行 ...

  8. spring-boot-maven-plugin插件的作用

    要记住:spring-boot-maven-plugin插件在打Jar包时会引入依赖包 可以打成直接运行的Jar包 maven项目的pom.xml中,添加了org.springframework.bo ...

  9. python 要掌握面向对象，你得会做这些题

    1,面向对象三大特性,各有什么用处,说说你的理解. 继承:解决代码重用问题 多态:多态性,可以在不考虑对象类型的情况下而直接使用对象 封装:明确的区分内外,控制外部对隐藏属性的操作行为,隔离复杂度 2 ...

  10. Jenkins入门之执行定时任务

    通过前面我们讲解了如何通过Jenkins执行windows command,powershell脚本,此时我们便可以开始完成一些简单任务了,然而可能看到我们都是通过手动按下Build Now按钮来执行 ...