HTML5&CSS3(1)

原创 2017年11月14日 18:56:57

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>

HTML5&CSS3(2)

1.边框 border:solid/dashed/dotted/double 线宽 颜色2.盒阴影 box:shadow h-shadow水平位置(左负右正) v-shadow垂直位置(下...
  • zhy0509
  • zhy0509
  • 2017年11月14日 20:57
  • 50

html5&css3 Learning

http://learn.shayhowe.com/html-css/
  • sonyCheng
  • sonyCheng
  • 2015年03月13日 10:32
  • 235

HTML5&CSS3学习

HTML5&CSS3 【探索HTML5第二弹04】响应式布局(上),让我们一起来响应式布局吧 摘要: 前言第一次看到响应式布局这个东西的时候,我还以为又出了新东西呢,稍微研究了下才...
  • binyao02123202
  • binyao02123202
  • 2013年05月15日 18:05
  • 787

HTML5&CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像,等待一下,网页就加载到浏览器窗口中。一个典型的网页是由文本、图像和链...
  • wma664620
  • wma664620
  • 2017年01月15日 19:47
  • 86

HTML5&CSS3:[1]如何使用Flexbox伸缩盒

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,它可以轻松实现以往需要多个相互配合才能实现的功能,下面就简单介绍一下flexbox的应用。(下面的例子都是在chrome上实现的,如果需...
  • songjunyan
  • songjunyan
  • 2016年04月12日 17:59
  • 443

[HTML5&CSS3]Transform详解

Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一...
  • abv123456789
  • abv123456789
  • 2014年11月17日 11:46
  • 3687

HTML5&CSS3第二周总结

实战是提高技能很好的办法,这周收获满满的,简单分类下 一、 基本知识 1、 pt em px 的区别 em: 元素设置的font-size 值。5em 则表示font-size的5倍大小。如果没有设置...
  • u013032439
  • u013032439
  • 2013年12月16日 11:00
  • 595

Image Gallery --- Html5&Css3

http://blog.templatemonster.com/2011/04/14/jquery-css3-photo-gallery-tutorials-html5-website/ http:...
  • wyqlxy
  • wyqlxy
  • 2012年02月15日 15:00
  • 548

[HTML5&CSS3]应用程序缓存

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。什么是应用程序缓存(Application Cache)?HTML5 引入了应用程序缓存,这...
  • abv123456789
  • abv123456789
  • 2014年11月21日 09:46
  • 1578

HTML5&CSS3常用属性和方法

DOM扩展 获得元素 document.querySelector(‘selector’) 获得符合的第一个元素 document.querySelectorAll(‘selector...
  • weixin_38388339
  • weixin_38388339
  • 2017年06月04日 11:05
  • 183
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5&CSS3(1)
举报原因:
原因补充:

(最多只允许输入30个字)