浦东建设环评网站,做网站必须买云虚拟主机吗,域名和主机搭建好了怎么做网站,游戏推广代理一、HTML5新特性
1.语义化标签
header 头部标签nav 导航标签article 内容标签section 定义文档某个区域aside 侧边栏标签footer 尾部标签
2.多媒体标签
2.1视频标签vedio
》常规写法#xff08;尽量都使用mp4#xff0…一、HTML5新特性
1.语义化标签
header 头部标签nav 导航标签article 内容标签section 定义文档某个区域aside 侧边栏标签footer 尾部标签
2.多媒体标签
2.1视频标签vedio
》常规写法尽量都使用mp4 video srcmedia/mi.mp4/video》兼容性写法source
video controlscontrols width300source srcmove.ogg typevideo/ogg source srcmove.mp4 typevideo/mp4 您的浏览器暂不支持 video 标签播放视频
/ video 上面这种写法浏览器会匹配video标签中的source如果支持就播放如果不支持往下匹配直到没有匹配的格式就提示文本 》vedio属性 2.2音频标签audio
常规写法
兼容写法 audio controlscontrols source srchappy.mp3 typeaudio/mpeg source srchappy.ogg typeaudio/ogg 您的浏览器暂不支持 audio 标签。
/ audio》audio属性 3.新增表单类型表单属性
3.1新增表单type类型
》常见输入类型
text password radio checkbox button file hidden submit reset image》新的输入类型
类型很多我们现阶段重点记忆三个 number tel search
3.2新增表单input属性 4.canvas绘图
HTML5的十大新特性-CSDN博客
【HTML】【一文全解Canvas】从初学到实战彻底掌握前端绘图神器_html canvas-CSDN博客
学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程
HTML5 Canvas | 菜鸟教程
》基本用法
创建画布只有属性id和width/height 默认宽高为300*150
canvas idmyCanvas width200 height100
styleborder:1px solid #000000;
/canvas
使用javascript来绘制
script// 1.找到 canvas 元素let canvas document.getElementById(myCanvas);// 2.创建 context 对象。getContext(2d) 对象是内建的 HTML5 对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法let ctx canvas.getContext(2d);/script
》常用的canvasAPI
1获取上下文使用 getContext(2d) 获取上下文对象在该对象上进行图形绘制和变换。
const canvas document.getElementById(myCanvas);
const ctx canvas.getContext(2d);2绘制形状
// 矩形
ctx.fillRect(x, y, width, height); // 填充矩形
ctx.strokeRect(x, y, width, height); // 描边矩形// 圆形或弧形
ctx.beginPath(); // 开始一条路径描述
ctx.arc(x, y, radius, startAngle, endAngle); // 绘制弧形或圆形
ctx.closePath(); // 关闭路径
ctx.fill(); // 填充当前绘图路径区域
ctx.stroke(); // 描边当前绘图路径// 多边形
ctx.beginPath(); // 开始一条路径描述
ctx.moveTo(x1, y1); // 将绘图位置移动到 x1, y1
ctx.lineTo(x2, y2); // 连接到 x2, y2
// ... // 更多的点连接
ctx.closePath(); // 关闭路径
ctx.fill(); // 填充当前绘图路径区域
ctx.stroke(); // 描边当前绘图路径// 文本
ctx.font 16px serif; // 设置字体
ctx.fillStyle #000; // 设置字体颜色
ctx.fillText(text, x, y); // 填充文本
ctx.strokeText(text, x, y, maxWidth); // 描边文本》用例 1 绘制矩形 设置fillStyle属性可以是CSS颜色渐变或图案。fillStyle 默认设置是#000000黑色。fillRect(x,y,width,height) 方法在画布上绘制 150x75 的矩形从左上角开始 (0,0)。 scriptvar c document.getElementById(myCanvas);var ctx c.getContext(2d);ctx.fillStyle #FF0000;ctx.fillRect(0, 0, 150, 75);/script
》用例 2 绘制线条 moveTo(x,y) 定义线条开始坐标lineTo(x,y) 定义线条结束坐标然后使用 stroke() 方法来绘制线条 var cdocument.getElementById(myCanvas);
var ctxc.getContext(2d);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
》用例 3 绘制圆形 arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心以r 为半径从 startAngle 弧度开始到endAngle弧度结束。一般startAngle是0anticlockwise是2*Math.PI2π。anticlosewise 是布尔值true 表示逆时针false 表示顺时针(默认是顺时针)。 scriptvar c document.getElementById(myCanvas);var ctx c.getContext(2d);// 空心圆形ctx.beginPath();ctx.arc(120, 50, 40, 0, 2 * Math.PI);ctx.strokeStyleblue;//设置描边线条颜色ctx.lineWidth5;//描边线条宽度ctx.stroke();// 实心圆形ctx.beginPath();ctx.arc(120, 50, 40, 0, 2 * Math.PI);ctx.fill();/script
》用例4文本效果实心、空心 font - 定义字体和大小fillText(text,x,y) - 在 canvas 上绘制实心的文本。text是写的内容xy是距离左边和上边的距离。strokeText(text,x,y) - 在 canvas 上绘制空心的文本。text是写的内容xy是距离左边和上边的距离。 var c document.getElementById(myCanvas);var ctx c.getContext(2d);ctx.font 30px Arial;// 实心文本// ctx.fillText(Hello World, 10, 50);// 空心文本ctx.strokeText(Hello World,10,50);
》用例5图像 drawImage(image, x, y) 方法可以在 Canvas 上绘制图片需要传入 Image 对象、图片位置的 x 坐标和 y 坐标。 var c document.getElementById(myCanvas);var ctx c.getContext(2d);const img new Image();img.src https://img.yzcdn.cn/vant/cat.jpeg;img.onload function () {ctx.drawImage(img, 20, 20);}; 》用例6动画
【HTML】【一文全解Canvas】从初学到实战彻底掌握前端绘图神器_html canvas-CSDN博客
5.SVG绘图 6.地理定位
7.拖放API draggable
8.新增web Storage
9. 新增web worker
10.新增webbSocket
二、Css3新特性
1.选择器权重类伪类10
》属性选择器 》结构伪类选择器权重类、属性10. 》伪元素选择器权重1标签选择器 2.弹性盒布局
CSS中flex弹性盒子——弹性容器属性弹性元素属性附图_css flex-CSDN博客
》父盒子属性
开启display:flex/inline-flex;
父容器属性属性值含义flex-directiion row默认值主轴为水平方向起点在左端。row-reverse主轴为水平方向起点在右端。column主轴为垂直方向起点在上沿。column-reverse主轴为垂直方向起点在下沿。主轴的方向即项目的排列方向flex-wrap nowrap默认不换行wrap换行第一行在上方wrap-reserve换行第一行在下方如果一条轴线排不下是否换行flex-flow默认值为row/nowrap是flex-direction和flex-wrp的简写justify-content flex-start默认值左对齐flex-end右对齐center 居中space-between两端对齐项目之间的间隔都相等。space-around每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。项目在主轴的对齐方式align-items flex-start交叉轴的起点对齐。flex-end交叉轴的终点对齐。center交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch默认值如果项目未设置高度或设为auto将占满整个容器的高度项目在交叉轴的对齐方式align-contentflex-start | flex-end | center | space-between | space-around | stretch;多根轴线的对齐方式
》子元素属性
子元素属性属性值含义order默认为0数值越小排列越靠前项目的排列顺序flex-grow 默认为0 如果所有项目的flex-grow属性都为1则它们将等分剩余空间如果有的话。 如果一个项目的flex-grow属性为2其他项目都为1则前者占据的剩余空间将比其他项多一倍。 项目的放大比例flex-shrink 默认为1即如果空间不足该项目将缩小 如果所有项目的flex-shrink属性都为1当空间不足时都将等比例缩小。 如果一个项目的flex-shrink属性为0其他项目都为1则空间不足时前者不缩小。 负值无效 项目的缩小比例flex-basis 默认值为auto即项目的本来大小。 可以设为跟width或height属性一样的值比如350px则项目将占据固定空间。如果和width同时存在将会干掉width 在分配多余空间之前项目占据的主轴空间main size就是项目的初始大小flex 默认值为0 1 auto。 flex-grow, flex-shrink 和 flex-basis的简写align-self默认值为auto表示继承父元素的align-items属性如果没有父元素则等同于stretch。单个项目有与其他项目不一样的对齐方式 》flex:1代表什么 flex-grow1flex-shrink:1; flex-basis:0%; 表示子项目将会占用容器中所有可用的剩余空间实现均匀分布。 3.grid网格布局 CSS 网格布局 | 菜鸟教程
grid布局属性介绍-CSDN博客
》父容器属性 》项目属性 3.过渡效果转换效果动画效果
CSS3动画详解图文教程_css3动画教程-CSDN博客
》过渡transition transition-propertywidth height all上什么属性发生过渡transitin-duration 1s 过渡的持续时间transition-timing-function linear线性 ease减速 ease-in加速 ease-out减速 ease-in-out先加速在减速 运动曲线transition-delay1s延迟多长时间再次执行这个动画 》2D转换transform 1缩放scale transform: scale(x, y); transform: scale(2, 0.5); 参数解释 x表示水平方向的缩放倍数。y表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 取值大于1表示放大小于1表示缩小。不能为百分比。 2位移translate : transform: translate(水平位移, 垂直位移); transform: translate(-50%, -50%); 参数解释 参数为百分比相对于自身移动。 正值向右和向下。 负值向左和向上。如果只写一个值则表示水平移动。 3旋转rotate: transform: rotate(角度); transform: rotate(45deg); 参数解释正值 顺时针负值逆时针。 》3D转换 1、旋转rotateX、rotateY、rotateZ transform: rotateX(360deg); //绕 X 轴旋转360度transform: rotateY(360deg); //绕 Y 轴旋转360度transform: rotateZ(360deg); //绕 Z 轴旋转360度 2. 移动translateX、translateY、translateZ transform: translateX(100px); //沿着 X 轴移动transform: translateY(360px); //沿着 Y 轴移动transform: translateZ(360px); //沿着 Z 轴移动 3.透视perspective 4.3D呈现transform-style 》动画!!!!!animation
》动画的属性 animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) animation: move1 1s alternate linear 3; animation: move2 4s; 1动画名称 animation-name: move;2执行一次动画的持续时间 animation-duration: 4s;备注上面两个属性是必选项且顺序固定。
3动画的执行次数 animation-iteration-count: 1; //iteration的含义表示迭代属性值infinite表示无数次。
3动画的方向 animation-direction: alternate;属性值normal 正常alternate 反向。
4动画延迟执行 animation-delay: 1s;5设置动画结束时盒子的状态 animation-fill-mode: forwards;属性值 forwards保持动画结束后的状态默认 backwards动画结束后回到最初的状态。
6运动曲线 animation-timing-function: ease-in;属性值可以是linear线性 ease-in-out先加速在减速 steps()等。
注意如果把属性值写成steps()则表示动画不是连续执行而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。
》案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 100px;height: 100px;margin: 100px;background-color: red;/* 调用动画*//* animation: 动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。infinite 表示无限次*/animation: move1 1s alternate linear 3;animation: move2 4s;}/* 方式一定义一组动画*/keyframes move1 {from {transform: translateX(0px) rotate(0deg);}to {transform: translateX(500px) rotate(555deg);}}/* 方式二定义多组动画*/keyframes move2 {0% {transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}25% {transform: translateX(500px) translateY(0px);}/*动画执行到 50% 的时候背景色变成绿色形状变成圆形*/50% {/* 虽然两个方向都有translate但其实只是Y轴上移动了200px。因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */transform: translateX(500px) translateY(200px);background-color: green;border-radius: 50%;}75% {transform: translateX(0px) translateY(200px);}/*动画执行到 100% 的时候背景色还原为红色形状还原为正方形*/100% {/*坐标归零表示回到原点。*/transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}}/style
/head
bodydiv classbox/div
/body
/html
4.边框圆角 阴影 背景
border-radius 四个值顺时针box-shadow水平偏移 垂直偏移 模糊距离 阴影颜色background-image: url()background-size:宽 高
5.文本、文字样式
》文本 1text-overflow: clip默认一刀切ellipsis省略号给定字符串 切记一定要配合whhite-space:nowrap和overflow:hidden来使用 2text-shadow: 》文字 3字体类型font-family:name隶书、宋体 4艺术字体font-style:normal/italic斜体/oblique倾斜的字体 5字体粗细font-weight:normal/400正常/700加粗 6text-decoration:normal/underline下划线、blink闪烁line-through贯穿overline上划线 6.线性、径向渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);background-image: radial-gradient(shape size at position, start-color, ..., last-color);
三、HTML回顾
1.常见标签
1DOCTYPE,lang以及字符集
2标题标签h1-h6
3p双和br单
4文本格式化标签双 5div和span span是行内标签一行可以多个span 6img标签单和 相对/绝对路径 相对路径以引用文件所在位置为参考基础图片相对于HTML页面的位置绝对路径是指目录下的绝对位置直接到达目标位置通常是从盘符开始的路径。但是这种严禁使用原因如下 1绝对路径只在当前计算机生效若将网站转移服务器则路径会失效 2通过绝对路径打开图片使用的是 file 协议但网页中使用的是 http 协议因此会出 现跨域问题造成图片无法显示 网络地址使用网络上的图片链接。但是一般不使用网络地址原因是网络图片 可能由于各种原因被删除、转移位置使图片无法打开 7a超链接标签和 锚点 target 属性-blank跳转新的窗口打开 -self默认在当前窗口打开 !-- #id名字就是一个锚点 不仅可以链接当前页面也可以链接到其他的页面 -- a href#top返回顶部/a a href./快捷键.html#bottom链接到快捷键页面底部/a 8特殊字符 2.表格标签
1table :tr行: th头 td每行的单元格 》table的属性 cellspacing边框和边框的距离cellpadding边框和内容的距离
》行和列的属性 colspan跨列rowspan跨行 2表格结构标签thead tbody 1caption表格的标题通常出现在表格的顶部。 2thead定义表格表头通常表现为标题行。 3tbody定义一段表格主体一个表格可以有多个主体可以按照行来进行分组。 4tfoot定义表格的脚尾通常表现为总计行 3.列表标签
1无序列表ul li
2有序列表ol li。ol的属性 3自定义列表dl dt dd
4.表单标签
1表单域formform属性 1get 方法的特点 使用 URL统一资源定位符传递参数http://服务器地址?name1value1name2 value2其中“?”符号表示要进行参数传递“?”符号后面采用“namevalue”的形式传 递多个参数之间用“”符号连接。URL 传递的数据量有限只能传递少量数据。 而且使用 URL 传递参数并不安全所有信息可在地址栏中看到并且可以通过地址 栏随意传递其他数据。 2post 方法的特点 将数据封装后使用 http 请求传递信息在地址栏中不可见比较安全并且传递的数据 量理论上没有限制。 综上所述虽然 get 方法是表单提交的默认方法但是通常采用 post 方法传递数据。 2表单控件input
》input属性 》type属性 》注意 1.name 和 value 属性需同时存在提交时提交的是 value 中的属性值 2.radio 凭借 name 属性区分是否为同一组。name 相同为同组同组中只能选择一个 3.checked“checked” 默认选中。radio 只能选一个checkbox 可以选多个 3提示信息
