金山网站建设费用,如何对产品进行推广,批量域名注册查询,广告网站怎么设计制作HTML5
HTML5是最新的HTML标准#xff0c;它的主要目标是提供所有内容而不需要任何像flash#xff0c;silverlight等的额外插件#xff0c;这些内容来自动画、视频、富GUI等。HTML5是万维网联盟#xff08;W3C#xff09;和网络超文本应用技术工作组#xff08;WHATWG它的主要目标是提供所有内容而不需要任何像flashsilverlight等的额外插件这些内容来自动画、视频、富GUI等。HTML5是万维网联盟W3C和网络超文本应用技术工作组WHATWG之间合作输出的。几乎所有的浏览器Safari、Chrome、Firefox、Opera、IE都支持HTML5。
HTML5没有使用SGML或者XHTML它是一个全新的东西因此不需要参考DTD。仅需放置! DOCTYPE html的文档类型代码告诉浏览器识别这是HTML5文档。如果不放入! DOCTYPE html 浏览器将不能识别它是HTML5文档同时HTML5的标签将不能正常工作。
DOCTYPE标签是一种标准通用标记语言的文档类型声明它的目的是要告诉标准通用标记语言解析器它应该使用什么样的文档类型定义DTD来解析文档。
!DOCTYPE 声明必须是 HTML 文档的第一行位于 html 标签之前。
如果不写浏览器将无法识别HTML文件并且HTML 5标签将无法正常工作。
文档声明
!DOCTYPE html
元素
新增文档结构标签块级元素
section、article、nav、aside、header、footer、figure
新增内联行内元素
mark、time、meter、progress
新增input类型
email、url、number、tel、range、search、color、date、month等。
创建画布语法
canvas idmyCanvas width200 height100/canvas
datalist 标签
如果我们想要用户自由输入的同时又有一些建议选项可以使用datalist。
datalist 标签定义选项列表。与 input 元素配合使用该元素来定义 input 可能的值。datalist 及其选项不会被显示出来它仅仅是合法的输入值列表。
使用 input 元素的 list 属性来绑定 datalist。
input idmyCar listcars /
datalist idcars option valueBMW option valueFord option valueVolvo
/datalist
CSS3
1. 圆角边框
border-radius1-4 length 1%/1-4 length 1%
/*水平半径/垂直半径*/
四个值的顺序自左上角开始顺时针方向。
2. 边框阴影
box-shadow: h-shadow(必需) v-shadow(必需) blur spread color inset;
3. 2D转换
1translate()方法平移
2rotate()方法旋转
3scale()方法缩放
4. 3D转换
1translateZ()方法延Z轴移动
2rotateX()、rotateY()、rotateZ()方法分别绕X、Y、Z轴旋转
3perspective()方法定义3D转换的透视视图
5. CSS3的选择器
1E:last-child 匹配父元素的最后一个子元素E。
2E:nth-child(n)匹配父元素的第n个子元素E。
3E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
6. keyframes规则
用于创建动画。
CSS3实现动画主要有3种方式
第一种是transition 实现渐变动画
第二种是transform 转变动画
第三种是animation 实现自定义动画
7. Font-face 特性
可以用来加载字体样式而且它还能够加载服务器端的字体文件让客户端显示客户端所没有安装的字体。
8. 多列布局 multi-column layout CSS3 的多列布局有很多属性例如
column-count div元素的文本分成三列。
column-gap 在div元素的文本分成三列并指定一个30像素的列之间的差距。
column-rule 指定列之间的规则宽度样式和颜色。
在规定的多列布局容器内的元素要使用displayinline-block属性否则会出现脱节和错乱。