H5和部分CSS

最新推荐文章于 2024-03-22 00:27:59 发布

韩宇朔

最新推荐文章于 2024-03-22 00:27:59 发布

阅读量239

点赞数

分类专栏： java全栈从零到有文章标签： js全栈

本文链接：https://blog.csdn.net/Prague_hyy/article/details/99745837

版权

java全栈从零到有专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.HTML5新特性:

1. 画布canvas，小游戏，绘图
2. 多媒体vedio视频，audio音频
3. 对本地离线存储更好的支持.localstorage、sessionstorage、indexDB-nosql数据库
4. 新的语义标签：article/nav/main..section
5. 新的表达元素：calendar、date、time...

2.video和audio

1. src属性:设置源url
2. controls=controls:有控制菜单
3. video > source:source标签源的意思。src去关联，如果多个source找到有效的源运行

#3. drag与drop 拖与放
1. -event.stopPropagation();阻止事件冒泡
2. -event.preventDefault();取消浏览器默认动作，取消submit功能

4.canvas画布

1. beginPath();开始画
2. closePath();一段画结束
3. .fill();填充
4. .stroke();画出来，线条
5. .lineTo(m,n);划到线的终点
6. .moveTo(m,n);起点

例子：    
<canvas width="500px" height="500px" style="border: 1px solid black"></canvas> 333  
<script>
var ele = document.getElementsByTagName("canvas")[0];
//画布的上下文。 域对象
var ctx = ele.getContext("2d");//设置画布为2d平面画布
//设置填充颜色
ctx.fillStyle = "#FF0000";
//矩形rect(x,y,宽,高)
ctx.fillRect(100,100,100,100);
//移动到某个坐标

ctx.moveTo(300,100);//矩形左上点
//线到
ctx.lineTo(400,100);//矩形左上点到右上点
ctx.moveTo(400,100);//矩形右上点
ctx.lineTo(400,200);//矩形右上点到右下点
ctx.moveTo(400,200);//矩形右下点
ctx.lineTo(300,200);//矩形右下点到左下点
ctx.moveTo(300,200);//矩形左下点
ctx.lineTo(300,100);//矩形左下点到左上点
ctx.strokeStyle = "yellow" //更换画笔颜色
//把线画出来
ctx.stroke();
ctx.closePath();//取消画笔

    ctx.fillStyle = "green";
ctx.arc(300,300,50,0,2*Math.PI,true)
ctx.fill();//把线填充

5.svg:可伸缩矢量图

1. 可以不丢失质量伸缩（不失真）
2. 是一种xml格式编写的

6.geolocation:地理定位

1. window.navigator.gelocation;
2. navigator:浏览器信息，还能获取地理定位
3. location:地址栏：url
4. history:.go()
5. screen:屏幕

7.本地存储：

1. localStorage:需要手动清除
2. sessionStorage:当前tab页共享

8.manifest:离线查看

<html mainfest = "demo.appcache"></html>

9.webwork

解决js的单线程问题。是一种异步js

postMessage(数据);在webwork.js中发送数据
//接收postMessage的数据，回调事件
weebwork.onmessage = function(event){
	event.data; //回调数据
}

10.input的form指向某个form的id

表单提交时会带着输入项

11.属性选择器[]

[属性='属性值'];
*= :包含
^= :以**开始
$= :以**结束

12.text-indent:首行缩进

13.word-spacing:单词间距。[以, 。空格为基准分间距]

14.letter-spacing:字母间距，文字间距

15.white-space:nowrap;强制不换行，相当于

16.overflow:hidden/scroll;超出时处理，隐藏/滚动条

17.text-overflow:ellipsis;文本超出部分变成省略号

18.word-break;break-all;强制换行

19.outline:1px solid black;边框的外沿

20.选择器

+ 同辈相邻
~ 弟弟标签
> 一级子标签
例子：
<style>
    .a1+h1{color: red;}
    .a1~h2{color: red;}
    .a1>div{border:1px solid black;}
</style>
<div class="a1">1
    <div>2
        <div>a</div>
    </div>
</div>
<h1>hello1</h1>
<h1>hello1</h1> 
<h2>hello1</h2>
<h2>hello1</h2>