当前位置：文档之家 › html5笔记

html5笔记

  • 格式：doc
  • 大小：55.00 KB
  • 文档页数：5

一、html5常用标签
1 header 网页的头部区
2 nav 网页的导航
3 footer 网页的底部区
4 article 网页的文章
5 aside 网页的侧边栏
6 hgroup 标题组
7 time 日期时间
8 video 视频文件
<video src=”视频文件路径” controls autoplay></video>
Controls --- 控制面板（播放与暂停）autoplay --- 自动播放
9 audio 音频文件
<audio src=”音频文件路径” controls autoplay><audio>
10 section 文档章节（相对比较完整独立的一组内容）
清浮动
结构中：<div>
<div></div>
<div></div>
<div class=”clear”></div>
</div>
在浮动元素组的最后，父级盒里面，创建一组空的<div class=”clear”></div>
样式中：.clear{ clear:both; }
没有浮动的clear盒会把父级盒撑高，清浮动一般用于内容页;
二、css3常用样式
1 background-size 背景图片的尺寸设定
(1)auto 自动（默认）
(2)w h 给定宽高尺寸
(3)contain 背景图片等比例缩放到容器刚好包含（contain）背景图片;
(4)cover 背景图片等比例缩放到图片刚好覆盖（cover）容器;
多重背景：多组背景合写（没有颜色）中间使用逗号分隔;
2 text-shadow 文字阴影
Text-shadow: 10px 20px 30px color;
10px 水平偏移| 20px 垂直偏移| 30px 羽化值| color 阴影颜色
3 box-shadow 盒阴影
Box-shadow ：10px 20px 30px 40px color inset;
40px-- 扩展值| inset -- 内阴影（最前面或最后面）
多重阴影：逗号分隔不同阴影，前面的阴影会覆盖后面的阴影
非主流字体
(1)定义字体
@font-face{
font-family:”英文字体名称”;
src:url(‘字体文件路径’);
}
(2) 应用字体
#box{
font-family:’字体名称’
}
注意：字体名称可以自定义，但不要与主流字体重名，只能是英文名称字体图标应用
(1)将字体图标对应的字体库以及定义字体的css文件拷贝到网站目录;
(2)在应用字体图标的网页中引入字体定义的css文件;
(3)在应用字体图标的元素上增加类名（字体类名，字体图标名称）;
样式兼容性
谷歌浏览器-webkit-
火狐浏览器-moz-
Ie浏览器-ms-
欧朋浏览器-0-
4 背景渐变
(1) 线性渐变
background:linear-gradient(方向, 颜色1 范围1, 颜色2 范围2)
方向：left 或left top | 角度：0deg 45deg 90deg
有前缀：0deg 由左向右（逆时针旋转）| 无前缀0deg 由下往上
(2)径向渐变
background:radial-gradient(方向, 颜色1 范围1,颜色2 范围2)
中心位置: at left | at left top
注意：radial-gradient 不需加前缀
5 display:inline-block
对外表现为行级元素，对内可以给元素设置宽高或留白
6 伪元素选择器
(1 )选择器:before{content:”要插入的内容”; 其他样式}
在选择器内部，标签里的内容之前插入新内容;
(3)选择器:after{content:”要插入的内容”;其他样式}
在选择器内部，标签里的内容之后插入新内容;
7 伪类选择器
选择器:first-child 第一个子元素;
选择器:last-child 最后一个子元素;
选择器:nth-child(n) 第n个子元素
nth-child(2n) 偶数个子元素
nth-child(2n+1) 奇数个子元素
8 transition 状态过渡动画
transition: 样式属性时间1 类型时间2;
样式属性：针对哪些样式属性变化应用过渡动画（all—所有样式属性）
时间1：动画执行时间（1s）
类型：ease 平滑过渡| ease-in 加速| ease-out 减速| ease-in-out 先加速后减速| linear 匀速
时间2：动画延迟时间
9 transform 变形动画
(1)rotate 旋转rotate(45deg) 正值顺时针旋转，负值逆时针旋转
(2)scale 缩放scale(1.2,0.8) 1.2 水平方向缩放比，0.8 垂直方向缩放比没有单位
scaleX() 水平方向缩放scaleY() 垂直方向缩放
(3)skew 倾斜skew(45deg,0) 45deg 水平方向倾斜0 垂直方向倾斜
skewX() 水平方向倾斜skewY() 垂直方向倾斜
(4)translate 位移translate(10px,20px) 10px 水平向偏移20px 垂直向偏移
正值往右往下，负值往左往上
translateX() 水平向偏移translateY() 垂直向偏移
10 opacity 元素的不透明度
取值：0-1 0 - 完全透明 1 - 完全不透明
11 animation 关键帧动画
(1)定义动画
@keyframes 动画名称（英文）{
0%{ … }
50%{ … }
100%{ 样式}
}
(2)应用动画
#box{
animation:动画名称动画时间动画类型延迟时间循环;
}
循环：n -- 循环n次; infinite 动画无限循环
12 媒体查询
@media screen and (max-width:980px){
样式
}
位置：其他css样式后面
作用：当屏幕尺寸满足条件时其中的样式生效
13 获取焦点
input:focus { 样式} 当input获取焦点时，样式生效
14 绝对居中
方法一
#box{
position:absolute;
left:0; right:0; top:0; bottom:0;
margin:auto;
}
方法二
#box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}。

合集下载

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）

HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、⾃定义图像）⼀、对 canvas 的理解 <canvas>标签是 HTML5 中的新标签，像所有的 dom 对象⼀样它有⾃⼰本⾝的属性、⽅法和事件。

canvas 是⽤来在⽹页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使⽤ js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、⽂字、⾃定义图像等。

浏览器⽀持注释：Internet Explorer 8 以及更早的版本不⽀持 <canvas> 标签。

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari ⽀持 <canvas>标签。

⼆、基本⽅法绘图环境： 语法 Canvas.getContext(contextID) 参数contextID指定了您想要在画布上绘制的类型。

当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图API。

【注】：getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。

绘制图形样式style（⼀般在绘制图形前先进⾏样式设定）：context.fillStyle //填充样式context.strokeStyle //笔触颜⾊context.lineWidth //边框宽度绘制图像有两种⽅法：context.fill() //填充context.stroke() //绘制边框颜⾊的表⽰⽅式:颜⾊名称:"red" "green" "blue"⼗六进制颜⾊值: "#FFFFFF"三⾊值：rgb(1-255,1-255,1-255)四⾊值：rgba(1-255,1-255,1-255,透明度)三、使⽤ <canvas> Step1: ⾸先在html页⾯中添加<canvas>标签，规定好画布的id和尺⼨，代码如下：<!--规定了canvas元素的id名称为canvas、宽度为400px、⾼度为300px--><canvas id="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制： ⽅法⼀：<!--⽤⾕歌浏览器，获取canvas对象时需要先加载对象，所以要把该段代码放到body中，在js⽂件⾥进⾏绘制图像--><script src="canvas.js"></script> ⽅法⼆：<!--或者直接在body⾥编写代码--><script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(50,50,150,100);</script> 图解： Step3: Step2 分步骤： 通过id来捕获canvas元素 创建 context 对象 指定 fillStyle 填充颜⾊为红⾊指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, ⾼度);四、实例1--绘制线条： context.moveTo(x,y) context.lineTo(x,y)x:x坐标y:y坐标起点 moveTo 的点到终点 lineTo 的点之间画⼀条直线如果没有moveTo那么第⼀次lineTo的效果和moveTo⼀样每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前⼀次lineTo的结束点1 1 // 绘制对⾓线2 2 function demo1(id){3 3 var canvas = document.getElementById(id);4 4 var context = canvas.getContext("2d");5 5 6 6 context.strokeStyle = "#ff0000";7 78 8 context.moveTo(0,0);9 9 context.lineTo(200,100);10 10 context.stroke();11 11 }View Code实例结果：1// 绘制直⾓三⾓形2function demo1(id){3var canvas = document.getElementById(id);4 var context = canvas.getContext("2d");5 6 context.strokeStyle = "#ff0000";78 context.lineTo(20, 20);9 context.lineTo(20, 70);10 context.lineTo(70, 70);11 context.lineTo(20, 20);12 context.stroke();13 }View Code【注】：1. 三⾓形有三个点，但在连线的时候还需要连回顶点；2. 最后⼀定记得加上 stroke(); 初学时容易犯这个⽑病，这相当于你把点定好了，却没⽤线连起来，岂不......实例结果：CSS属性中有⼀圆⾓设置 radius，canvas画线段也要达到这种圆⾓匾额效果，我么也有相应的办法： lineJoin 属性,可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖⾓，默认)，bevel（斜⾓）,round（圆⾓） lineCap 属性，定义线条的端点。

html5学习笔记

html5学习笔记

min, max 和 step
multiple
pattern (regexp) ed
通过一个单一的Socket实现一个全双工，双向通信的信道。HTML 5 Web Socket提供了一个真正的标准，你可以使用它构建可扩展的实时Web应用程序。此外，由于它提供了一个浏览器自带的套接字，消除了Comet解决方案的许多问题，Web Socket显著降低了系统开销和复杂性。
output 元素用于不同类型的输出，比如计算或脚本输出：
form属性：
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
autofocus 属性规定在页面加载时，域自动地获得焦点。
form 属性规定输入域所属的一个或多个表单。
新的 input 属性：
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
HTML5+CSS3笔记

HTML5+CSS3笔记

HTML5一、HTML5 概述二、HTML5基本格式一．HTML5 文档结构1.第一步：打开Sublime Text 3，打开指定文件夹；2.第二步：保存index.html 文件到磁盘中，.html 是网页后缀；3.第三步：开始编写HTML5 的基本格式。

<!DOCTYPE html> //文档类型声明<html lang="zh-cn"> //表示HTML 文档开始<head> //包含文档元数据开始<meta charset="utf-8"> //声明字符编码<title>基本结构</title> //设置文档标题</head> //包含文档元数据结束<body> //表示HTML 文档内容<a href="">百度</a> //一个超链接元素（标签）</body> //表示HTML</html> //表示HTML 文档结束二．文档结构解析1.Doctype文档类型声明（Document Type Declaration，也称Doctype）。

它主要告诉浏览器所查看的文件类型。

在以往的HTML4.01 和XHTML1.0 中，它表示具体的HTML 版本和风格。

而如今HTML5 不需要表示版本和风格了。

<!DOCTYPE html> //不分区大小写2.html 元素首先，元素就是标签的意思，html 元素即html 标签。

html 元素是文档开始和结尾的元素。

它是一个双标签，头尾呼应，包含内容。

这个元素有一个属性和值：lang="zh-cn"，表示文档采用语言为：简体中文。

<html lang="zh-cn"> //如果是英文则为en3.head 元素用来包含元数据内容，元数据包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。

HTML5学习笔记--------》HTML5概要与新增标签！

HTML5学习笔记--------》HTML5概要与新增标签！

HTML5学习笔记--------》HTML5概要与新增标签！⼀、HTML5概要1.1、为什么需要HTML5HTML4陈旧不能满⾜⽇益发展的互联⽹需要，特别是移动互联⽹。

为了增强浏览器功能Flash被⼴泛使⽤，但安全与稳定堪忧，不适合在移动端使⽤（耗电、触摸、不开放）。

HTML5增强了浏览器的原⽣功能，符合HTML5规范的浏览器功能将更加强⼤，减少了Web应⽤对插件的依赖，让⽤户体验更好，让开发更加⽅便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很⼩，这并不符合⼀个好产品的演进规则。

1.2、什么是HTML5HTML5指的是包括HTML、CSS和JavaScript在内的⼀套技术组合。

它希望能够减少⽹页浏览器对于需要插件的丰富性⽹络应⽤服务（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强⽹络应⽤的标准集。

HTML5是HTML最新版本，2014年10⽉由万维⽹联盟（W3C）完成标准制定。

⽬标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联⽹应⽤迅速发展的时候，使⽹络标准达到匹配当代的⽹络需求。

1.3、HTML5现状及浏览器⽀持⼤部分主流浏览器已经⽀持HTML5，但是各个浏览器⽀持的⽅式以及语法有所差异性。

⽀持Html5的浏览器包括Firefox（⽕狐浏览器），IE9 及其更⾼版本，Chrome（⾕歌浏览器），Safari，Opera等现代浏览器。

⽀持得分：如果想了解更多请看本⽂的兼容性那⼀节的内容。

PC端（总分555分）：平板（总分555分）：移动（总分555分）：1.4、HTML5特性HTML5 ⼋个特性类别对应的8个Logo 语义⽹、离线&存储、设备访问、通信多媒体、图形和特效、性能和集成、呈现（CSS3）1.4.1. 语义特性（Class：Semantic）HTML5赋予⽹页更好的意义和结构。