html5+css3总结（一步到位）

最新推荐文章于 2025-04-01 16:10:57 发布
原创 最新推荐文章于 2025-04-01 16:10:57 发布 · 710 阅读 · 9 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html5 #css3 #前端
该博客围绕HTML5和CSS3展开，涵盖新增标签属性、选择器、过渡动画、弹性盒子、媒体查询、绘图、新增API及客户端存储等内容。详细介绍了各部分的特性和使用方法，如H5新增标签用途、CSS3选择器规则、动画效果实现等，适用于前端开发学习。

html5+css3

day1（新增标签属性）

1、H5新增标签
  • header（用来定义网页的头部）
  • nav（用来定义网页的导航栏）
  • main（用来定义网页的主体内容）
  • aside（用来定义网页的侧边栏）
  • artice（用来定义网页当中一段独立的文章）
  • setion（用来定义网页当中的一块区域）
  • footer（用来定义网页当中的底部）
2、H5常用新属性
input新增type类型

email:邮箱

    tel：手机号

    url：路径

    number：数值

    search：搜索（语义化 ）

    range：滑块

    time：时间

    week：周

    date：年月日

    month：月
3、表单属性

placeholder：占位符 提示信息

    autofocus ： 自动获取焦点

    multiple : 支持多文件上传

    autocomplete: 当提交过表单内容之后规定 某个表单控件的提示内容 关闭和打开

    required : 必填项

    tabindex : 指定表单控件获取焦点的顺序  ‘’2‘’
4、data- 自定义属性
      data-自定义的属性名

   <li data-index="0">肉类</li>

    <li data-index="1">蔬菜</li>

    <li data-index="2">水果</li>

    <li data-index="3">熟食</li>

    <li data-index="4">花生豆</li>
5、音频

多媒体音频标签 audio

 controls 是否显不默认播放控件

 autoplay 自动播放(目前很多浏览器不支持自动播放) 

  loop 循环播放
6、视频

视频标签 video

 autoplay 自动播放（18年开始，谷歌浏览器不支持自动播放）

 muted 静音播放

 controls 是否显示默认播放控件 

 loop 循环播放

 width 设置播放窗口宽度

 height 设置播放窗口的高度
7、引入外部静态资源
<iframe src="">

day2（新增选择器）

1、css3兼容性

/* 浏览器内核 */

        /* IE */

        /* O */

        /* 苹果 */

        /* 火狐 */

        /* 谷歌 */

/* IE */

        /* -ms-transition: ; */

        /* O */

        /* -o-transition: ; */

        /* 苹果 */

        /* -webkit-transition: ; */

        /* 火狐 */

        /* -moz-transition: ; */
2、相邻兄弟选择器
span+div {

        color: red;

    }
3、匹配选择器

位于div 后面的所有span元素都会被选中

.content div ~ span{

        color: red;
    }
4、属性选择器

[attribute]用于选取带有指定属性的元素。

[title] {

        color: red;

    } 

   [attribute=value] 用于选取带有指定属性和值的元素。

    [data-index="1"]{

        color: red;

    } 

    [attribute^=value]匹配属性值以指定值开头的每个元素。 

   [class^="box"]{

        color: red;

    } 

     [attribute$=value]匹配属性值以指定值开头的每个元素。 

    [class$='x']{

        color: red;

    } 

    [attribute*=value]匹配属性值中包含指定值的每个元素。 

    [class*='2'] {

        color: red;

    } 

     [attribute~=value]用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。

  [class~="box2"] {

        color: red;

    } 

     [attribute|=value]用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。

    [class|='box1']{

        font-family: "华文彩云";

    }

    鼠标选中样式

    ::selection {

        background-color: pink;

        color: white;

    }
5、整体结构性伪类选择器
     :last-child 

     :first-child 

      :last-of-type 

      :first-of-type
6、对指定序号的子元素设置样式
（从前往后数）	

:nth-child(n)

:nth-of-type(n)

2n偶数 2n+1奇数 odd奇数 even偶数

（从后往前数）

:nth-last-child(n)

:nth-last-of-type(n)
7、其他伪类选择器
:root：将样式应用到页面的根元素中。

root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就        是整个“html”部分

 :empty 指定当元素内容为空白时使用的样式。

 :not(selector)排除selector选择器选中的元素，不对它们应用样式解析。

:target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生	效。
8、表单状态伪类选择器
:disabled 指定当前元素处于不可用状态时的样式。

 :enabled 指定当前元素处于可用状态时的样式。

:checked 指定表单中单选框或复选框处于选中状态时的样式。
9、内容选中伪类

::selection{

        color: purple;
        background-color: aqua;
    }
10、内容追加为元素
:before是css2的写法

   ::before是css3的写法

: :before :向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)

 ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素)
11、JS新增选择器
根据id获取元素

getElementById(id);

根据类名获取元素

getElementsByClassName(classname)[0];

根据标签名获取元素

getElementsByTagName(tagname);

JS新增一个选择器

 获取一个元素

document.querySelector(‘selector’);

获取多个元素

document.querySelectorAll()；

12、多重背景
 background-image: url(),url()url();

        background-repeat: no-repeat;

        background-size: 200px 200px;

        background-position: 0 0, 50% 50%, right bottom;
13、线性渐变

background-image: linear-gradient(to left bottom, pink, skyblue, springgreen);

14、径向渐变

background-image: radial-gradient(#00FFFF, #00FA9A, #000000);

15、透明度
opacity: 0; 

/* 0-1 */
16、filter过滤
       grayscale设置灰度

       filter: grayscale(100%);

    过滤

        filter: blur(100px);
17.css函数

hsla 表示色相-饱和度-亮度（Hue-saturation-lightness）模式。

hsla(颜色值0-360, 饱和度0%-100%,亮度0%-100%, 透明度0-1)

     calc() 计算

width: calc(100% - 100px);

day3（过渡动画）

1、transition过渡

过渡：给用户呈现 由一种样式到另一种样式的过程

       指定当前box具有过渡效果

         过渡的属性名称 

         transition-property: width height; 

        过渡花费的时间 

        transition-duration: 1s; 

         过渡的曲线 

        匀速 

         transition-timing-functio: linear; 

         缓慢 

         transition-timing-function: ease; 

         加速 由慢到快 

         transition-timing-function: ease-in; 

         快慢快 

         transition-timing-function: ease-in-out; 

        过渡何时开始 

         transition-delay: ; 

    过渡的简写形式 

        transition: all 1s ease;
2、平移

/* transform 变形 */

        /* 平移 */

        /* transform: translate(x,y); */

        transform: translate(100px, 0px);
3、缩放
     transform: scale(x,y); 

       transform: scale(0.5, 0.5);
4、旋转
    transform: rotate(deg); 

        transform: rotate(30deg);
5、转换原点
transform-origin: left bottom;
6、倾斜
transform: skew(30deg,30deg);
7、3D地旋转
左手定则

    transform: rotateX(180deg); 

        transform: rotateY(180deg);

        transform: rotateZ(180deg);
8、背部可见性
 backface-visibility: hidden;（不可见）

 backface-visibility: visible;（可见）
9、透视
perspective: 1000px;
10、保留子元素的3D位置
 transform-style: preserve-3d;
11、多种变幻
transform: rotateY(40deg) translateX(100px);
12、animation动画

创建动画

   创建一个自定义动画 

     @keyframes 动画名称{

        两个动画帧

        from{}

        to{}

  	  }

应用到目标元素上

         动画名称 

        animation-name: move;

         动画时间 

        animation-duration: 1s;

        动画曲线 

        animation-timing-function: ease;

         动画何时开始 

         animation-delay: 2s; 

         动画次数 

        animation-iteration-count: infinite;

         动画是否暂停 

        animation-play-state: running;

         动画是否逆向 

         reverse 颠倒 

         alternate 交替 

         alternate-reverse 颠倒交替 

        animation-direction: alternate;

        动画之外的状态 

       停留到结束的时刻

         animation-fill-mode: forwards; 

动画简写

        animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向; 

        animation: move 4s ease infinite;
13、多个动画帧

@keyframes move {

        0% {

            transform: translateX(0px) translateY(0px);

        }

        25% {

            transform: translateX(700px) translateY(0px);

        }

        50% {

            transform: translateX(700px) translateY(700px);

        }

        75% {

            transform: translateX(0px) translateY(700px);

        }

        100% {

            transform: translateX(0px) translateY(0px);

        }

    }

day4（弹性盒子）

1、把父元素设置为 弹性盒模型
        display: flex;
2、父元素的属性flex-direction

项目（子元素们）会默认按照主轴排列

    	flex-direction: 

          row 默认值        主轴正常排列

          row-reverse       主轴颠倒排列 

          column            副轴排列 

          column-reverse    副轴颠倒排列;
3、父元素的属性flex-wrap
flex-wrap: nowrap（默认） | wrap | wrap-reverse; 

        flex-wrap: nowrap;

        flex-wrap: wrap;

         flex-wrap: wrap-reverse;
4、父元素的属性flex-flow
	简写形式

         flex-flow: <flex-direction> || <flex-wrap>;
5、父元素的属性justify-conent
         主轴上面的对齐方式 

         justify-content: 

        flex-start(默认值)  正常主轴排列 

        flex-end            主轴末尾对齐 

        center              主轴居中对齐 

        space-between       主轴两端对齐 

        space-around        元素之间的间距一致 左右两边的间距加起来=元素之间的间距;
5、父元素的属性aling-items
副轴上面的对齐方式 （适用单行）

    	align-items:flex-start   正常副轴排列

	flex-end    末尾对齐 

	center      居中对齐 

	baseline    基线对齐

	stretch;  把子元素的高和父元素一致
6、父元素的属性align-conent

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

	align-content: （适用多行）

        stretch(默认)   默认排列方式

        flex-start      开始对齐

        flex-end        末尾对齐 

        center          居中对齐 

        space-between   两端对齐 

        space-around    元素之间的间隙一致
7、子元素属性order
 order规定子元素 （项目）的排列顺序 

     order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 

order: 1;
8、子元素属性flex-grow
  如果每一个项目没有宽度  那么 flex-grow: 1; 就代表平均分配宽度

        flex-grow: 1;

    flex-grow属性定义项目的放大比例，默认为0 即如果存在剩余空间，也不放大。

    (子元素宽度之和大于父元素时，没有效果)
9、子元素属性flex-shrink
	flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，越缩小       最小为盒子宽度

	 flex-shrink: 2;

10、子元素属性flex-

10、子元素属性flex-basis
 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间 

 flex-basis 跟width一样 

 flex-basis: 200px;
11、子元素属性flex
flex：flex-grow  flex-shrink   flex-basis；

默认

	flex: 0 1 auto ；

	flex: none;

平分

	flex: 1 1 auto ；

            flex: auto;

	flex:1 1 0% 

            flex: 1;

缩小（内容宽度）

	  flex:0 1 0%

             flex: 0;
12、不一样的对齐方式
   align-self属性允许单个项目有与其他项目不一样的对齐方式 

align-self: auto | flex-start | flex-end | center | baseline | stretch;

.container .item:nth-child(1) {

        align-self: flex-start;

        height: 200px;

    }

day5（媒体查询）（移动端开发）

1、媒体查询
 max-width 最大宽度 （当小于最大宽度的时候应用）

     min-width 最小宽度  （当大于最小宽度的时候应用）

当前屏幕小于992px会应用当前媒体查询里面的样式 

and 前后有空格，不然会报错

@media screen and (max-width:992px) {

        .box {

            width: 750px;

            height: 400px;

            background-color: skyblue;

                  }

       }

 当前屏幕大于768px 应用媒体查询里面的样式 

    @media screen and (min-width:768px) {

        .box {

            background-color: purple;

        }

    }
2、适配不同屏幕大小

创建多个媒体查询

   当屏幕小于1200px 

    @media screen and (max-width:1200px) {

        .container {

            width: 970px;

        }

        .container .content {

            width: 200px;

        }

    }

   当屏幕小于992 px

    @media screen and (max-width:992px) {

        .container {

            width: 750px;

        }

        .container .content {

            width: 175px;

        }

    }

   当屏幕小于768px 

    @media screen and (max-width:768px) {

        .container {

            width: 100%;

            flex-wrap: wrap;

        }

        .container .content {

            width: 100%;

        }

    }
3、多个条件媒体查询

创建媒体查询

     当前屏幕大于768 小于992时应用样式 

    @media screen and (min-width:768px) and (max-width:992px) {

        .container {

            width: 750px;

        }

        .container .content {

            width: 175px;

        }

    }
4、引入不同的css文件
<link rel="stylesheet" media="screen and (max-width:992px)" href="./css/w992.css">

<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/w768.css">

css同上（2、适配不同屏幕大小）

5、视口

布局视口

        在PC端开发的页面 切换到了移动设配上面 就会显示不全

        此时布局视口要远大于 移动设配的宽度

视觉视口

        用户正在看到的网页的区域

理想视口

        布局视口 等于 视觉视口
6、rem

html{

        font-size: 10px;

    }

     那么1rem = 10px 

     要通过媒体查询 根绝不同屏幕的大小 为html设置 font-size 

     rem 相对于html的字体大小 改变而改变

限制当前设备宽度最大能够到达多少rem

    @media screen and (min-width:375px) {

        /* 18.75 */      375/18.75=20

	20px=1rem

        html {

            font-size: 20px;

        }

    }

day6（绘图）

1、canvas

具有默认宽高300*150

设置宽高在标签里面

    您当前浏览器不支持canvas 请升级浏览器版本吧

</canvas>
2、绘制直线

您当前浏览器不支持canvas 请升级浏览器版本吧

 1.获取元素

    var canvas = document.querySelector("#can");

     2.获取画笔

    var myCan = canvas.getContext('2d');

    console.log(myCan);

     3.定义一个起点（绘制一个起点）

     moveTo(x,y) 用来绘制起点

    myCan.moveTo(200, 200);

    /4.绘制直线

     lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标

    myCan.lineTo(600, 600);

     5.填充图形

    myCan.stroke();
3、画笔的颜色和粗细
    画笔的颜色和粗细要在填充之前修改

    myCan.strokeStyle = "orange";

    myCan.lineWidth = 10;
4、绘制矩形
 1.获取元素

    var canvas = document.querySelector("#can");

    2.获取画笔

    var myCan = canvas.getContext('2d');

    console.log(myCan);

    路径的开始

    开始路径

    myCan.beginPath();

    3.定义一个起点（绘制一个起点）

     moveTo(x,y) 用来绘制起点

    myCan.moveTo(200, 200);

    4.绘制直线

    lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标

    myCan.lineTo(200, 400);

    myCan.lineTo(600, 400);

    myCan.lineTo(600, 200);

     画笔的颜色和粗细要在填充之前修改

    myCan.strokeStyle = "orange";

    myCan.lineWidth = 10;

     闭合路径

    myCan.closePath();

     5.填充图形

    myCan.stroke();
5、绘制三角形
   1.获取元素

    var canvas = document.querySelector("#can");

     2.获取画笔

    var myCan = canvas.getContext('2d');

    console.log(myCan);

     路径的开始

     开始路径

    myCan.beginPath();

     3.定义一个起点（绘制一个起点）

     moveTo(x,y) 用来绘制起点

    myCan.moveTo(400, 200);

     4.绘制直线

     lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标

    myCan.lineTo(200,500);

    myCan.lineTo(600,500);

     画笔的颜色和粗细要在填充之前修改

    myCan.strokeStyle = "orange";

    myCan.lineWidth = 10;

     闭合路径

    myCan.closePath();

     5.填充图形

    myCan.stroke();
6、快速创建矩形
1.获取元素

    var canvas = document.querySelector("#can");

     2.获取画笔

    var myCan = canvas.getContext('2d');

    myCan.rect(x, y, width, height);

    myCan.rect(200, 200, 400, 100);

    myCan.strokeStyle = "pink";

    myCan.lineWidth = 10;

     填充

    myCan.stroke();
7、快速创建描边矩形
 1.获取元素

    var canvas = document.querySelector("#can");

     2.获取画笔

    var myCan = canvas.getContext('2d');

     myCan.strokeRect(x, y, width, height);

    myCan.strokeRect(200, 200, 400, 200);
8、快速创建填充矩形
      1.获取元素

    var canvas = document.querySelector("#can");

      2.获取画笔

    var myCan = canvas.getContext('2d');

    console.log(myCan);

     myCan.fillRect(x, y, width, height);

     fillStyle 用来修改 填充颜色

    myCan.fillStyle = "pink";

    myCan.fillRect(200, 200, 400, 200);
9、填充三角形

// 1.获取元素

    var canvas = document.querySelector("#can");

    // 2.获取画笔

    var myCan = canvas.getContext('2d');

    // console.log(myCan);

    // 路径的开始

    // 开始路径

    myCan.beginPath();

    // 3.定义一个起点（绘制一个起点）

    // moveTo(x,y) 用来绘制起点

    myCan.moveTo(400, 200);

    // 4.绘制直线

    // lineTo(x,y) 直线的起点就是上一步设置 moveTo的xy坐标

    myCan.lineTo(200,500);

    myCan.lineTo(600,500);

    // 画笔的颜色和粗细要在填充之前修改

    myCan.strokeStyle = "orange";

    myCan.lineWidth = 10;

    // 填充图形

    myCan.fillStyle = "purple"

    myCan.fill();

    // 闭合路径

    myCan.closePath();

    // 5.填充图形

    myCan.stroke();
10、清除矩形
   cxt.clearRect(x, y, width, hegiht);

    myCan.clearRect(260, 380, 100, 100);
11、圆弧
var can = document.querySelector('#can');

    // 获取画笔

    var mycan = can.getContext('2d');

    // 弧度和角度的转换公式： rad = deg*Math.PI/180; deg=rad*180/Math.PI

    // 语法：cxt.arc(x, y, r, startAngle, endAngle, counterclockwise);

    // 开始路径

    mycan.beginPath();

    mycan.moveTo(400,400);

    var strat = 0 * Math.PI / 180;

    var end = 90 * Math.PI / 180;

    // mycan.arc(400, 400, 200, strat, end, false);

         默认是false。true是逆时针，false：顺时针

    mycan.arc(400, 400, 200, strat, end, true);

    // 结束路径

    mycan.closePath();

    mycan.stroke();
12、绘制文本
    mycan.fillStyle = "black";   字体颜色

    mycan.font = "700 30px serif";   字体大小

 mycan.fillText(data[0].title, 450, 500);   ’‘   x   y

day7（HTML5新增API）

1、svg
 canvas 输出的是⼀整幅画布, 就像⼀张图⽚⼀样，放⼤会失真或者锯⻮。 

  svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮
2、location

// http 协议

    console.log(window.location);

    // 一个完整的url都包含什么

    // 协议+域名+端口号+虚拟目录+文件名+?参数+#锚链接

    // http://127.0.0.1:5500/04-H5-C3/07h5c3/01-location.html?id=1&gender=男#like

    // origin

    // 返回页面来源的域(当前协议 + 主机名+端口号)

    console.log(location.origin);

    // file:// 文件协议 没有域名

    // host返回一个URL的主机名和端口

    console.log(location.host);

    // hostname返回URL的主机名

    console.log(location.hostname);

    // port返回一个URL服务器使用的端口号

    console.log(location.port);

    // pathname返回的URL路径名。

    console.log(location.pathname);

    // protocol返回一个URL协议

    console.log(location.protocol);

    // href返回完整的URL

    console.log(location.href);

    // http://127.0.0.1:5500/%E7%81%AB%E8%8A%B1238/%E8%AF%BE%E7%A8%8B/04-HTML5-CSS3/07-html5-css3/code/02-location.html

    // hash返回从井号 (#) 开始的 URL（锚）

    console.log(location.hash);
3、search
 // 返回一个完整的url

    console.log(location.href);

    // search返回从问号 (?) 开始的 URL（查询部分）

    console.log(location.search);

    var arr = location.search.split("?")[1].split("&");

    console.log(arr);

    var obj = {};

    for (var i = 0; i < arr.length; i++) { 

       console.log( arr[i].split("="));;

       obj[arr[i].split('=')[0]] = arr[i].split('=')[1]

    }

    console.log(obj);

    var _id = Math.floor(Math.random()*10);

    btn.onclick = function(){

        location.href = "./01-svg.html?id="+_id;

    }
4、locaiton
// assign()加载新的文档。跟href一样，可以跳转页面

    // replace()用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退

    // reload()重新加载当前文档。

 location.assign("http://www.4399.com")
5、跳转手机端和PC端

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

        window.location.href = "./01-svg.html?id=1";     //跳转到手机端的页面

    } else {

        // window.location.href = "./05-search.html?id=1";     //跳转到pc端的页面

    }
6、map

引用百度地图API

7、online
 // 判断用户设备是否处于脱机状态（没网）

    // navigator.onLine

    console.log(navigator.onLine);

    if (navigator.onLine) {

        console.log("网络状态处于正常");

    } else {

        console.log("世界上最遥远的距离就是没网");

    }

    // 当前设备网络状态正常

    window.ononline = function () {

        console.log('你的浏览器在线工作');

    };

    // 当前设备处于没网状态

    window.onoffline = function () {

        console.log('你的浏览器离线工作');

    }
8、History对象

// 历史 包含了用户在浏览当中访问过的 记录

    console.log(window.history);

    // 返回浏览器历史列表中的 URL 数量。

    console.log(history.length);

    // 返回浏览器在当前 URL 下的状态信息，如果没有调用过

 pushState() 或 replaceState() 方法，则返回默认值 null。

    console.log(history.state);

// 返回历史列表当中的上一个访问记录

// 跳转页面

        history.back();

// 加载历史列表当中的下一个

        history.forward();

// 刷新页面

        // history.go(0)

        // 前进

        // history.go(1)

        // 后退

        history.go(-1);

// 用于在当前历史记录当中添加一个记录

    // history.pushState();

    // 用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。

    // history.replaceState();

    // ctrl + shift + T 恢复之前关闭的标签页

    // try

    // 把你觉得可能会报错的代码放在try里面

    // catch里面会给你返回错误的结果
9、读取文件

elefiles.onchange = function () {

        console.log(this.value);

        // FileList

        console.log(this.files[0]);

        console.log(this.files);

        // 创建实例化对象

        var reader = new FileReader();

        console.log(reader);

        // reader.readAsDataURL()：DataURL形式读取文件

        // console.log();

        reader.readAsDataURL(this.files[0])

        // 当文件读取完成时进行显示图片结果

        reader.onload = function () {

            console.log(reader.result);

            console.log(123);

            _img.style.display = "block";

            _img.src = reader.result;

        }

    }

 // 1.给文件控件input 添加事件监听 监听内容的改变

    // 2.创建文件读取的 对象 new FileReader();

    // 3.使用readAsDataURL读取用户上传的this.files[0]

    // 4.当读取完成之后 _img.src = reader.result; 完成缩略图展示
10、读取文本
    elefiles.onchange = function () {

        // 1.获取当前上传的文件

        console.log(this.files);

        // 2.创建FileReader对象

        var reader = new FileReader;

        for (var i = 0; i < this.files.length; i++) {

            readerEveryFile(this.files[i], list);

        }

    }

    // everyfile 每次调用函数都必须传进一个文件

    // ele 元素

    function readerEveryFile(everyfile, ele) {

        var reader = new FileReader;

        // 一次只能读一个

        reader.readAsText(everyfile);

        reader.onload = function () {

            var li = document.createElement("li");

            li.innerText = reader.result;

            ele.appendChild(li);

        }

    }

day8（客户端存储）

1、localStorage
 // 同源策略

    // 协议 域名 端口号一致 就可以访问其内容

    // 如果其中一项不同就违背了同源策略 就访问不到 - 跨域

    // 永久性存储 

    // window.localStorage

    // setItem 设置当前值（key，value）

 localStorage.setItem('anhao', '天王盖地虎');

    // getItem 获取存储在本地的数据(key)

localStorage.getItem("anhao")

    // removeItem 删除某一个本地存储数据（key）

localStorage.removeItem("anhao")

    // clear 清空所有

localStorage.clear()
2、sessionStorage

// 临时存储 当页面关闭时就失效

    sessionStorage.setItem("sessionCode", "to day is 不热");

    // sessionStorage 即使同源也不共享数据 只在当前页面有效

    var rel = sessionStorage.getItem("sessionCode")

    console.log(rel);

    // 删除

    // sessionStorage.removeItem("sessionCode");

    // 清空所有

    // sessionStorage.clear();
3、存储事件触发

// 这个页面触发 存储事件

    // - key : 修改或删除的key值，如果调用clear()时，该属性值为null

    // - newValue: 新设置的值，如果调用removeItem()时，该属性值为null

    // - oldValue : 调用改变前的value值；添加新项时，该属性值为null

    // - storageArea : 当前的storage对象

    // - url : 触发该存储变化脚本所在文档的URL（也就是说哪个页面修改的数据）

    window.addEventListener("storage", function (obj) {

        console.log(obj);

        console.log(obj.key);

        console.log(obj.newValue);

        console.log(obj.oldValue);

        console.log(obj.storageArea);

        console.log(obj.url);

    })
迷失0和1
关注
【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 2942
，HTML5和CSS3核心知识
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 8339
Html5 + Css3笔记详细汇总大全
HTML5 + CSS3 基础知识梳理
weixin_57334661的博客
05-05 2122
视频播放器需要的属性controls显示或隐藏用户控制界面autoplay媒体是否自动播放loop媒体是否循环播放pause媒体是否暂停（只读属性）ended媒体是否播放完毕（只读属性）当前的播放进度duration媒体播放总时间volume0.0到1.0的音量相对值muted是否静音3.2播放器需要的方法：视频播放器用到的方法play()媒体播放Pause()媒体暂停时间更新Canplay()可以播放。
HTML5&CSS3提高
weixin_51353891的博客
05-06 508
目标 能够说出 3~5 个 HTML5 新增布局和表单标签 能够说出 CSS3 的新增特性有哪些 HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div&g.
HTML5 + CSS3
坏蛋阿土的博客
10-29 9447
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。浏
HTML+CSS基础知识汇总（含HTML5 以及 CSS3)
2401_87960467的博客
03-06 2599
HTML（超文本标记语言）通过标签构建网页基础结构，定义标题、段落等内容，而CSS（层叠样式表）负责对HTML页面进行美化，控制字体、颜色与布局等样式，二者协同打造出美观且结构清晰的网页 。
HTML5 vs HTML 和 CSS3 vs CSS：全面对比
最新发布
aA20030316的博客
04-01 1473
HTML5 vs HTML 和 CSS3 vs CSS：全面对比
HTML和HTML5，css和css3的区别,ES5和ES6的区别有那些?
海贼王某人的博客
01-27 8086
HTML和HTML5的区别: 其实说白了，就是ES5和ES6的区别，无非就是换汤不换药，其实这个说法也不太对，是加了一些调料而已，HTML是前端搭建页面的必须品，但是随着人们开发的需求和速度，后期维护和代码可读性，各个方面的需求不断增加，会发现HTML里面的一些标签满足不了，所以就更新换代，不断的更具需求整合添加了一部分新的元素标签进来，其中常用的有如下这些，如有不全请谅解，仅供参考: 新增的结构......
HTML5+css3课后习题【一】
热门推荐
缘友一世的博客
11-04 1万+
因为静态网页的访问速度快，所以现在互联网上的所有网站都是静态网页组成的。（✖️）大多数网页是动静混合模式。“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。（✔️ ）在Web标准中，表现是指网页展示给访问者的外在样式。（ ✔️）在网页中，层叠样式表指的是JavaScript。（✖️ ）CSS所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。（ ✖️）结果不一样。
html5+css3基本介绍
suhaiyuan2005的博客
08-17 4246
1.1 H5+C3 基本介绍 1，html5 本质上就是一种新的 HTML 语言版本。在国内市场来说 h5 我们会更多的认为是常见的移动端营销页面。 2，css3 也就是一个新的 css 语言版本。 3，上述的二者相对于各自之前的版本来说 其实就是新增了一些内容。【 HS当中会新增标签 、C3 当中会新增元素样式属性…】 1.2 H5 特点 1，html5 的页面骨架很简洁。 2，Html5 的语法结构很松散 有很多标签可以省略不写，有很多标签可以致谢开始不写结束。 3，HTML5 当中新增了很多结构标签。
HTML5+CSS3
weixin_51166863的博客
07-03 2053
HTML5+CSS3入门笔记
HTML5+CSS3概念与简介
m0_71322636的博客
12-12 1420
从早期的 HTML 1.0，功能相对简单，主要用于文本的展示和简单的链接，到 HTML 4.01，它增加了更多的多媒体支持、样式表（CSS 开始与之协作）和脚本语言（如 JavaScript）的交互功能。现在，HTML5 已经成为主流，它进一步强化了对多媒体的支持，比如原生的音频和视频播放，并且提升了语义化程度，使搜索引擎能够更好地理解网页内容。CSS 的发展经历了多个阶段。CSS3 在 CSS2 的基础上进行了大量的改进和新增功能，它并不是一个全新的技术，而是在 CSS2 的基础上逐步添加新模块。
前端基础HTML5&CSS3提高
shj125的博客
01-27 426
HTML5&CSS3提高 目标 能够说出 3~5 个 HTML5 新增布局和表单标签 能够说出 CSS3 的新增特性有哪些 一、HTML5新特性 概述:HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 1.语义化标签（★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“head
HTML5 + CSS3新特征
xiecheng1995的博客
05-29 1043
HTML5 1. 什么是HTML5简介 1.1 HTML5简介 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。作为新HTML语言，具有新的元素，属性和行为。 XHTML和HTML5区别： XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。我们基础班学习的是 XHTML HTML5有更大的技术集，允许更多样化和虽大的网站和应用程序。增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，
HTML5+CSS3【学习篇】
只有登上山顶，才能看到那边的风光
05-08 805
😽 觉得博主文章写的不错的话，希望大家三连（✌关注，✌点赞，✌评论），多多支持一下！！！
H5+CSS3详细总结及提升
胡毛毛的博客
02-02 4484
目录H5+CSS基础知识：Html简介（一）什么是HTML?（二）HTML 标签（三）HTML 元素（四）html5和html的区别（五）思考（1）title与h1的区别（2）b与strong的区别（3）i与em的区别（4）标签上title与alt属性的区别：（5）简述一下 src 与 href 的区别。（6）行内元素和块级元素有哪些：（7）行内元素和块级元素的区别：（8）display:none 与 visibility:hidden 的区别是什么？（9）列出 display 的值，说明他们的作用。 po
html5+css3
qq_57420582的博客
11-18 994
html5&css3
HTML5+CSS3回顾总结
m0_73560798的博客
06-01 1114
（1）get 方法的特点 使用 URL（统一资源定位符）传递参数：http://服务器地址?name1=value1&name2= value2，其中“?”符号表示要进行参数传递，“?”符号后面采用“name=value”的形式传 递，多个参数之间，用“&”符号连接。URL 传递的数据量有限，只能传递少量数据。而且使用 URL 传递参数并不安全，所有信息可在地址栏中看到，并且可以通过地址 栏随意传递其他数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值