前端之HTML5，CSS3（一）

　　HTML5中常用内容标签

　　header标签

　　header标签定义文档的页眉，基本语法：<header>content</header>。

　　nav标签

　　nav标签定义导航链接部分，基本语法：<nav>content</nav>。

　　footer标签

　　footer标签定义文档的页脚，基本语法：<footer>content</footer>。

　　article标签

　　article标签定义文章内容部分，基本语法：<article>content</article>。

　　section标签

　　section标签定义文档中区域，类似于div标签，基本语法：<section>content</section>。

　　aside标签

　　aside标签定义内容之外的侧边栏部分，基本语法：<aside>content</aside>。

　　datalist标签

　　datalist标签与input标签结合使用，定义输入下拉选项，基本语法：<datalist><option>content</option>...</datalist>。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>datalist标签-测试</title>

 </head>

 <body>

     <input type="text" value="" list="language" />

     <datalist id="language">

         <option>C</option>

         <option>C++</option>

         <option>C#</option>

         <option>php</option>

         <option>python</option>

         <option>perl</option>

         <option>java</option>

         <option>javascript</option>

     </datalist>

 </body>

 </html>

　　效果

　　

　　fieldset标签

　　fieldset标签与legend标签搭配使用，定义区域范围，基本语法：<fieldset><legend>title</legend></fieldset>。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>fieldset标签-测试</title>

     <style type="text/css">

         fieldset {

             width: 300px;

         }

     </style>

 </head>

 <body>

     <fieldset>

         <legend>用户登录</legend>

         用户名称：<input type="text" name="user_name">

         <br />

         用户密码：<input type="password" name="pwd">

     </fieldset>

 </body>

 </html>

　　效果

input标签新增type属性值

属性值 实例 描述
email <input type="email"> 输入邮箱格式
tel <input type="tel"> 输入手机号码
url <input type="url"> 输入url格式
number <input type="number"> 输入数字格式
search <input type="search"> 搜索框,语义化
range <input type="range"> 自由拖动滑块
time <input type="time"> 时，分
date <input type="date"> 年，月，日
datetime <input type="tatetime"> 时间
month <input type="month"> 月，年
week <input type="week"> 星期，年

　　效果自行测试，PC端浏览器兼容性较差。

input标签新增属性

属性 实例 描述
placeholder <input type="text" placeholder="Enter your name"> 输入框内文字提示，输入内容消失
autofocus <input type="text" autofocus> 鼠标光标自动定位在输入框，无须点击输入再输入
multiple <input type="file" multiple> 支持多文件上传
autocomplete <input type="text" autocomplete="off"> 表单是否启动表单自动完成功能，属性值有：on和off
required <input type="text" required> 必填，内容不能为空
accesskey <input type="text" accesskey="s"> 指定快捷键，使用alt+s快速定位光标到输入框内

　　多媒体标签

　　audio标签：添加音频标签，基本语法：<audio src="xxx.mp3"></audio>，支持音频格式有mp3,ogg,wav，根据浏览器不同，不同格式音频支持程度有所不同。属性有：autoplay、controls、loop，autoplay设定音频自动播放，打开网页播放音频，无法中止，至音频播放完毕；controls设定音频控制，页面出现音频控件；loop设定音频循环播放。设置方法：<audio src="faded.ogg" autoplay/controls/loop></audio>。

　　解决浏览器格式不兼容的方法：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>audio标签-测试</title>

 </head>

 <body>

     <!-- 可以使用属性等于属性值的形式 -->

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

         <source src="backgroud.mp3" />

         <source src="backgroud.ogg" />

         <source src="backgroud.wav" />

     </audio>

 </body>

 </html>

　　video标签：添加视频频标签，基本语法：<video src="xxx.mp3"></video>，支持视频格式有mp4,ogg,webM，根据浏览器不同，不同格式视频支持程度有所不同。属性有：autoplay、controls、loop，autoplay设定视频自动播放，打开网页播放视频，无法中止，至视频播放完毕；controls设定视频控制，页面出现视频控件；loop设定视频循环播放。设置方法：<video src="faded.ogg" autoplay/controls/loop></video>。

　　解决浏览器格式不兼容的方法：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>video标签-测试</title>

 </head>

 <body>

     <!-- 可以使用属性等于属性值的形式 -->

     <video autoplay controls="controls" loop="loop">

         <source src="movie.mp4" />

         <source src="movie.ogg" />

         <source src="movie.webM" />

     </video>

 </body>

 </html>

认识HTML5中的新标签与新属性的更多相关文章

  1. 检测是否支持HTML5中的Video标签

    //检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...

  2. 让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...

  3. html5中的容器标签和文本标签

    html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...

  4. html5-8 如何控制html5中的视频标签和音频标签

    html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...

  5. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  6. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  7. HTML5中的语义标签兼容IE8以及更低版本的浏览器

    看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...

  8. HTML5中常用的标签(及标签的属性和作用)

    1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...

  9. html中的a标签的target属性的四个值的区别？

    target属性规定了在何处打开超链接的文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的.名称与这个目标吻合的框架或者 ...

随机推荐

  1. 【美食技术】家庭自制DIY鸡蛋饼和疙瘩汤早餐视频教程

    鸡蛋饼制作方法 食材准备面粉 150g鸡蛋饼  鸡蛋饼鸡蛋 2个盐 适量水 适量(约300ml)油 20g荵花适量也可根据自己喜好准备一些调味料. 做法 鸡蛋饼是一种家常点心,做法很多,这里提供3种. ...

  2. Web图片编辑控件升级日志-Xproer.ImageEditor

    版权所有 2009-2014 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com 产品首页:http://www.ncmem.com/webplug/image-e ...

  3. Work at a KFC fast food restaurant

    During the summer holiday of 2005,I thought I should do some meaningful instead of at home and watch ...

  4. 支付宝 iOS SDK 官方下载页面[转]

    from:http://blog.sina.com.cn/s/blog_6f72ff900102v0sw.html 藏得太深了,不得不记下来!     官方页面地址:   https://b.alip ...

  5. windows下 git+tortoiseGit的使用【转】

    一定要自己写出来才能牢记,所以我来写一下 git确实比svn好用的多了,最起码只有一个文件夹用来标记版本信息比svn所有文件夹下都要放一个文件夹来标记版本信息先进多了,不然你不想要版本管理这些文件的时 ...

  6. Tweak和app交互方案【进程通信】

    Core Foundation DEMO:Tweak端: CFNotificationCenterAddObserver(CFNotificationCenterGetDarwinNotifyCent ...

  7. Caliburn.Micro 资源随时添加

    Caliburn.Micro – Hello World http://buksbaum.us/2010/08/01/caliburn-micro-hello-world/ http://blog.c ...

  8. WPF 使用QRCoder生成二维码

    vs中使用Nuget获取QRCoder 窗体中添加按钮和Iage <Window x:Class="QRCoderTest.MainWindow" xmlns="h ...

  9. Let it crash philosophy part II

    Designing fault tolerant systems is extremely difficult.  You can try to anticipate and reason about ...

  10. order by 使用注意

    create table user ( id int primary key, name varchar(11) , depid int ); create table dept( id int pr ...