HTML5&CSS3(1)

1.HTML5=HTML5.0+CSS3+Javascript+API.

2.HTML5的DTD声明为:.

3.新增的HTML5标签——结构标签

(块状元素) 有意义的div

<article>—表示文档、页面、或站点中自包含成分所构成的一个页面的一部分。

<header>—标记定义一个页面或一个区域的头部
<nav>—导航链接
<section>—用来定义文档中的节。
区别:section作用是对页面上内容进行分块,article是独立完整的内容。

<aside>—侧边栏或附属信息
<hgroup>—将标题及其子标签进行分组的标签
<figure>—标记定义一组媒体内容以及它们的标题
<figcaption>—标记定义figure元素的标题
<footer>—标记定义一个页面或一个区域的底部

新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。

新增标签
<dialog>—标记定义一个对话框(会话框),类似微信
<address>—一般包含版权数据,备案信息是,联系方式等
<mark>—用于定义带有记号的文本
<progress>—定义运行中的进度(进程)
<meter>—表示范围已知是,且可度量的等级标量或分数值。
<menu>用来定义一个列表式菜单

改良标签
(1)、ol标签
新加属性:start和reversed
Start用于自定义列表项开始的编号
Reversed用于设置列表是否进行反向排序

(2)、dl标签
用于创建一个术语列表,允许在一个dl列表中包含多个带名字的术语标签dt,每个后面可跟一个或多个定义标签dd

(3)、ul标签
不支持type和compact属性
不支持li的type属性,改用CSS样式来定义列表类型。

4.多媒体标签:

<video>---标记定义一个视频
<audio>---标记定义音频内容
<source>---标记定义媒体资源
<canvas>---标记定义图片
<embed>---标记定义外部的可交互的内容或插件,如flash.

[多媒体应用]——视频video

(1)常见的视频格式
视频组成部分:画面、音频、编码格式。
视频编码:H.264,Theora,VP8(google开源)
音频编码:ACC,MP3,Vorbis。

(2)HTML5支持的格式:
Ogg=Theora+Vorbis (F C O)
MPEG4=H.264+ACC (S C)
WEBM=VP8+Vorbis (I F C O)

(3)<viedo>的使用

  <video src="文件地址" controls="controls">
                                   </vedio>  
 <video src="文件地址" controls="controls">
   您的浏览器暂不支持vedio标签。播放视频
    </vedio>
<video controls="controls" width="宽度">
<source src="….ogg" type="vedio/ogg">
<source src="….mp4" type="vedio/mp4">
您的浏览器暂不支持vedio标签。播放视频
</vedio>

(4)常见属性
autoplay—-自动播放
controls—控键
width,height—宽,高
loop—循环播放
poster—加载动画时首页的画面图片
muted—是否支持静音

[多媒体应用]——音频audio

(1)HTML5支持的音频格式:
Ogg————免费(C F O)
MP3————收费(I C S)
Mav————收费(F O S)

其余用法同video

5.表单及表单验证<form action=" " id="myform"></from>

(1)

邮箱:<input type="email" form="myform"/>
网址:<input type="url" form="myform"/>
日期:<input type="date" form="myform"/>
时间:<input type="time" form="myform"/>
月:<input type="month" form="myform"/>
周:<input type="week" form="myform"/>
数字:<input type="number" form="myform"/>
滑动条:<input type="range" form="myform"/>
按键:<input type="search" form="myform"/>
颜色:<input type="color" form="myform"/>

(2)常用属性
required—–必填项
placeholder—–默认提示信息
autofocus—–自动获取焦点(增加用户体验)
autocomplete=”on”——-增加自动记忆功能
autocomplete=”off”——-关闭自动记忆功能
使用时需要给标签加上一个name值
如:<input type="text" form="myform" autocomplete="on" name="username">

(3)detalists列表

<input id="mycar" list="cars">
<detalists id="cars">
     <option value="BMW"></option>
     <option value="Ford"></option>
     <option value="Volvo"></option>
                      </detalists>
阅读更多
个人分类: HTMI
想对作者说点什么? 我来说一句

HTML5+CSS3登陆界面例子

2016年04月16日 473KB 下载

html5&css3;的小实践

2012年11月07日 1.26MB 下载

(Yao)HTML5&CSS3; test for personal

2012年03月23日 39KB 下载

9款赏心悦目的HTML5&CSS3应用特效

2014年03月08日 1.45MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭