HTML5与CSS3总结

最新推荐文章于 2024-04-15 14:55:08 发布
最新推荐文章于 2024-04-15 14:55:08 发布
阅读量303 收藏 2
点赞数
文章标签： html5 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gu200084/article/details/120912625
版权

文章目录

HTML5

一.HTML5： 新增了很多语义化标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

二.HTML兼容性问题

HTML5兼容性问题：
IE9 行级元素设置宽度的时候 会失效
IE8以下的版本，不支持语义化标签
IE8的内核，无法解析，只能用js替代
解决方案：

<script src="./html5shiv.js"></script>
<script>
    // 第一种 通过dom就是手动创建标签 
    document.createElement("nav")
    document.createElement("article")
    document.createElement("footer")
    // 第二种 就是引入别人写好的一个js文件 html5shiv.js
    
</script>

三.HTML5对表单的拓展

1.对表单元素的新增：

<body>
    <!-- 
        在html5中多了很多东西 其中就有对表单元素的新增
     -->
     <!-- email -->
     邮箱：<input type="email">
     <!-- tel -->
     电话：<input type="tel">
     <!-- url -->
     网址：<input type="url">
     <!-- number -->
     数量：<input type="number" value="0" name="" id="" max="100" min="0">
     <!-- color -->
     颜色：<input class="color" type="color" name="" id="" >
     <!-- 颜色输入框的value 是当前颜色的十六进制 -->
     <!-- time -->
     时间：<input type="time" name="" id="">
     <!-- date -->
     日期：<input type="date" name="" id="">
     <br>

     <!-- datatime -->
     日期时间：<input type="datetime" name="" id="">
     <!-- 大多数浏览器不支持这个 -->
     日期时间：<input type="datetime-local" name="" id="">
</body>

2.对扁担元素的新增：

<body>
    <select name="" id="">
        <option value="">开封</option>
        <option value="">驻马店</option>
        <option value="">郑州</option>
    </select>

    <!-- 建立联系 -->   
    城市: <input type="text" list="address">
    <datalist id="address">
        <option value="开封" label="清明上河园">开封</option>
        <option value="郑州" label="方特">郑州</option>
        <option value="驻马店" label="嵖岈山">驻马店</option>
    </datalist>
</body>

3.对表单事件的新增：

<body>
    <form action="">
    <!-- 
        新增了监听
            主要监听内容的改变
     -->
     电话:<input type="tel"  name="" id="tphone" pattern="^1\d{10}$">
     <!-- pattern是可以用验证  -->
     <!-- 
         1.15286881533
        ^1\d{11}$
        ^ 是以什么开头
        \d是指数字0-9
        {10}就表示 10位
        $以什么结尾 
        正则表达式
      -->
      <input type="submit">
    </form>
</body>
<script>
    let tel=document.getElementById("tphone");
    // 改变事件 当内容发生改变的时候 就会触发
    tel.oninput=function(){
        console.log("改变了");
    }
    // 提交不通过事件
    tel.oninvalid=function(){
        console.log("提交不通过");
    }
</script>

4.进度条：
progress 进度条标签
max 最大值
value 当前进度

<progress max="100" value="60"></progress>

meter 度量器标签
higt 规定当前的较高的值
low 规定当前较低的值
max 最大值
min 最小值
value 当前值

<meter max="100" min="0" high="80" low="40" value="30"></meter>
      <!-- 如果我们的当前值在较高值和较低值之外 就会发出黄色的警告 -->

5.HTML5多媒体标签：
对音频的控制：audio
autoplay 如果有这个属性 该音频会立即播放
controls 如果有这个 则会向用户展示控件
loop 如果出现该属性 则表示当音频结束后 会重新开始
muted 当出现这个属性的时候 静音
preload 在页面加载的时候 预备播放 和autoplay冲突
对视频的控制：video
src 视频路径
controls 播放面板
autoplay 自动播放
loop 自动循环
poster 首次进入当前视频的封面图
width
height

CSS3

一.css3就是新增了一些属性

满足各个浏览器的兼容性 我们需要加前缀

<style>
/* 圆角  就是css3中新增的 */
            -webkit-border-radius:20px;
            /* webkit指的是谷歌的浏览器内核 */
            -ms-border-radius:20px;
            /* ms指的是ie浏览器的内核 */
            -moz-border-radius:20px;
            /* moz指的是火狐浏览器的内核 */
            -o-border-radius:20px;
            /* o指的是opera浏览器的内核 */
</style>

1.透明度：
透明度的表示方式 有三种：
1.rgba（在css3.0中提出的表示颜色的方式,a指的是透明度）
2.opacity（透明度）
3.transparent 表示全透明
rgba的透密和opcity的透明区别
rgba的不会继承，opcity会继承

2.盒子阴影：box-shadow
水平方向上的阴影： box-shadow: 5px 0;
竖直方向上的阴影：box-shadow: 0px 5px;
右下方有阴影 模糊：box-shadow: 5px 5px 20px;
左上方有阴影 模糊：box-shadow: -5px -5px 10px;
右下方有阴影 模糊 红色：box-shadow: 5px 5px 10px 20px red;
内部发光：box-shadow: 5px 5px 10px 20px red inset;
多个阴影：box-shadow:inset 5px 5px 10px 20px red,5px 5px 10px 20px rgb(151, 151, 151);
**3.文字阴影：text-shadow **
text-shadow: 5px 5px 10px blue;
4.背景裁剪：background-clip:
padding-box 把边框下面去掉
content-box 内边距下面 也没有背景
5.背景大小：background-size
6.渐变背景： background-image:linear gradient deg
左往右：background-image: linear-gradient(90deg,red,blue);
下往上： background-image: linear-gradient(0deg,red,blue);
右往左：background-image: linear-gradient(45deg,red,blue);
7.径像渐变： background-image:radial-gradient(100px 100px, red,yellow,pink);
8.多背景:
background: url(…/images/30/ab.png) content-box no-repeat center ,url(…/images/30/xiaoming.jpg) padding-box;
9.插入图片的bug：

<style>
/* 插入图片的时候 两张图片之间会产生一个10px的白边 */
        /* 解决方式 把图片转成块级元素 */
        /* img{
            display: block;
        } */
        /* 第二种方式 */
        img{
            vertical-align: middle;
        }
</style>

二.CSS3 2D动画

1.transition(参数1，参数2，参数3，参数4)
参数1:发生变化的属性名
参数2:变化的时间(动画时长)
参数3:缓冲曲线
参数4:等待时间
2.贝塞尔曲线
参数3：这个属性可以控制盒子宽度从100px变到400px变化的速度
控制这个速度的变化的过程的算法就叫贝塞尔曲线
特殊值：
linear 匀速动画 cubic-bezier(0,0,1,1)/cubic-bezier(1,1,0,0)
ease-in 先慢后块 cubic-bezier(0.25,0.1,0.25,0.1)
ease-out 先快后慢 cubic-bezier(0,0,0.58,1)
ease-in-out 慢快慢
3.变形：transform
transform: rotate(180deg); //旋转45度 正方向是顺时针的方向
transform: skew(30deg , 30deg); 斜切
div:nth-child(3) img{
transform: scale(0.5);//缩放 /* 负值表示先旋转180° /
transform: translate(30px,30px); //位移
/ 第一个参数表示x轴位移的距离 /
/ 第二个参数表示y轴位移的距离 */
transform: translate(30px,30px) rotate(720deg); //多重变形

三.CSS3 3D动画

1.旋转中心点： transform-origin:
transform-origin: 200px 200px;
2.视距：perspective:
perspective:100px;
3.位移3D：transform: translate3D
右： transform: translate3D(50px,0,0);
下：transform: translate3D(0,50px,0);
右下：transform: translate3D(50px,50px,0);
前：transform: translateZ(50px);
后 :transform: translateZ(-50px);
4.翻面： transform: rotateX(-180deg);
transform: rotateY(-180deg);
transform: rotateZ(-180deg);
5.背面不可见：backface-visibility: hidden;
/* 0-90deg 是可以看到的 90-180是看不到的 */

四.CSS3 自定义动画

1.animation
自定义动画名称
动画时长
缓冲曲线
等待时间
是否停留在终点
播放次数(infinite 表示循环无穷次)
是否交替运动(alternate)
是否暂停（paused）
2.自定义动画 @keyframes就是关键词

<style>
 animation: donghua2 3s ease 0s infinite;
 @keyframes donghua1{
            from{
                margin-left: 0px;
            }to{
                margin-left: 1000px;
            }
        }
</style>

五.canvas

<body>
    <!-- 在这里我定义了一个画布 -->
    <canvas width="800" height="500" id="cvs">
        您的浏览器不支持canvas
    </canvas>
</body>
<script>
    window.onload=function(){
        // 第一步 得到我们的画布
        var cvs=document.getElementById('cvs')
        // 第二步 判断你的浏览器是否兼容canvas
        if(cvs.getContext){
            // 第三步 我们要设置画布类型 得到渲染的上下文
            var cvs_context=cvs.getContext('2d')
            // 第四步 填充颜色
            cvs_context.fillStyle="orange";
            // 第五步 绘制
            cvs_context.fillRect(200,200,200,200)
            // x, y, width, height
            cvs_context.fillStyle="rgba(0,0,255,0.5)";
            cvs_context.fillRect(100,100,200,200)
        }
    }
</script>

1.使用canvas绘制图形：

<body>
    <canvas id="cvs" width="1800" height="800">

    </canvas>
</body>
<script>
    window.onload=function(){
        let cvs=document.getElementById('cvs');
        if(cvs.getContext){
            // 绘制矩形
            let cvs_context=cvs.getContext("2d");
            cvs_context.fillStyle="skyblue";
            cvs_context.fillRect(50,0,100,100)

            // 绘制边框矩形
            cvs_context.strokeStyle="skyblue";
            cvs_context.lineWidth=3;
            cvs_context.rect(50,150,100,100)
            cvs_context.stroke();

            // 绘制线
            cvs_context.beginPath();//开始划线
            cvs_context.moveTo(50,360);//线的起始点
            cvs_context.lineTo(100,500);//线的终点
            cvs_context.lineWidth=10;
            cvs_context.strokeStyle="pink";
            cvs_context.stroke();

            // 绘制三角形
            cvs_context.beginPath();//开始划线
            cvs_context.moveTo(400,360);//线的起始点
            cvs_context.lineTo(300,500);//线的终点
            cvs_context.lineTo(500,500);//线的终点
            cvs_context.closePath();//关闭路径
            cvs_context.strokeStyle="pink";
            cvs_context.fill();
            cvs_context.stroke();

            // 画弧线
            cvs_context.moveTo(250,400);
            cvs_context.arc(150,400,100,0,2*Math.PI,false)
            // context.arc(x,y,r,sAngle,eAngle,counterclockwise);
            cvs_context.stroke();
        }
    }
</script>

2.颜色渐变

<body>
    <canvas></canvas>
</body>
<script>
    let canvas=document.querySelector("canvas");
    canvas.width=600;
    canvas.height=400;

    // 获取画笔
    let ctx=canvas.getContext("2d");
    // 线性渐变  渐变的大小
    var gradient = ctx.createLinearGradient(0,0,600,400);
    // createLinearGradient (0,0,canvas.width,canvas.height)
    // 你要渐变的距离
    // 设置颜色
    gradient.addColorStop(0,"red");
    gradient.addColorStop(0.5,"yellow");
    gradient.addColorStop(1,"pink");
    // 修改填充样式
    ctx.fillStyle=gradient;
    // 填充矩形的大小
    ctx.fillRect(0,0,600,400)
</script>

3.径向渐变

<body>
    <canvas></canvas>
</body>
<script>
    var canvas = document.querySelector('canvas');
    canvas.width = 600;
    canvas.height = 400;
    let ctx = canvas.getContext("2d");
    // 创建径向渐变
    var gradient = ctx.createRadialGradient(300, 200, 20, 300, 200, 200)
    // context.createRadialGradient(x0,y0,r0,x1,y1,r1);
    /*
    x0	渐变的开始圆的 x 坐标
    y0	渐变的开始圆的 y 坐标
    r0	开始圆的半径
    x1	渐变的结束圆的 x 坐标
    y1	渐变的结束圆的 y 坐标
    r1	结束圆的半径
    */
   gradient.addColorStop("0","skyblue")
   gradient.addColorStop("0.5","pink")
   gradient.addColorStop("1","orange")

//    修改填充样式
    ctx.fillStyle=gradient;
    ctx.fillRect(0,0,600,400)
</script>

4.文字

<body>
    <canvas></canvas>
</body>
<script>
    let canvas=document.querySelector("canvas");
    canvas.width=600;
    canvas.height=400;
    let ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(100,0);
    ctx.lineTo(100,400)
    ctx.stroke()
    ctx.beginPath();
    ctx.moveTo(0,100);
    ctx.lineTo(600,100)
    ctx.stroke()

    // 填充文字的方式 先设置再填充
    ctx.font="bold 30px 微软雅黑"

    // 充实文字
    ctx.fillText("Hello canvas",100,90);
    // 镂空文字
    ctx.strokeText("Hello canvas",100,150)
</script>

5.阴影

<body>
    <canvas></canvas>
</body>
<script>
    let canvas=document.querySelector("canvas");
    canvas.width=600;
    canvas.height=400;
    let ctx=canvas.getContext("2d");

    var x=-20;
    var y=-20;
    var blur=0;
    setInterval(function(){
        ctx.clearRect(0,0,1000,1000)
        // 设置阴影
        ctx.shadowColor="red";
        ctx.shadowOffsetX=x++;
        ctx.shadowOffsetY=y++;
        ctx.shadowBlur=blur+=0.2;
        ctx.fillStyle="yellow"
        ctx.fillRect(100,100,200,200)
    },100)
</script>

六.弹性布局

给父级加display:flex他的子元素 就会 排排坐

flex布局有一个特征：
当父盒子的高度小于所有子盒子加起来和的高度的话 子级盒子会按照比例进行缩放
当父盒子的宽度小于所有子盒子加起来和的宽度的话 自己盒子会按照比例进行缩放

flex-direction
flex中flex-direction属性
row默认值 横向排布
row-reverse 横向翻转 原本是按照子元素书写顺序从左往右排布 现在反过来了
column纵向排布
column-reverse 纵向反向
flex-wrap:
属性：
nowrap 不换行
wrap 换行
wrap-reverse 翻转换行
**flex-flow 就是flex-direction 和 flex-wrap的结合体
例如：flex-flow: column wrap;
** justify-content：用于处理富余空间
1.flex-start 子元素从主轴开始排布 富余空间在后面
2.flex-end 子元素从主轴开始排布 富余空间在前面
3.center 子元素在中间 富余空间在两边
4.space-between 富余空间在各个子元素中间
5.space-around around周围 富余空间围绕子元素
align-items： ：是用来处理元素位置 交叉轴上位置
flex-start 交叉轴上富余空间在后面
flex-end 交叉轴上富余空间在前面
center 子元素在当前行(列)的中间
baseline
stretch 元素被拉伸沾满容器（当高度写死时不适用）
align-content：:处理交叉轴富余空间
flex-start 富余空间都在下面
flex-end 富余空间都在上面
center 富余空间都在两边

可乐就是力量阿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5+css3笔记资料
02-14
html5+css3笔记资料
HTML5和CSS3详细总结
04-26
涉及了H5新增的一些接口API，如网络监听接口、全屏接口、拖拽接口等，H5新增语义标签，flex伸缩布局等内容，总结了H5常见常用的大部分知识。
HTML5+CSS3总结
石顺麟
07-12 707
HTML5+CSS3 新增标签 &lt;!-- 头部页眉 --&gt; &lt;header&gt;&lt;/header&gt; &lt;!-- 导航 --&gt; &lt;nav&gt;&lt;/nav&gt; &lt;!-- 块 --&gt; &lt;section&gt;&lt;/section&gt; &lt;!-- 侧边栏 --
background-image渐变详解
最新发布
时光清浅处，一步一安然
04-15 778
属性不仅可以用来设置背景图片，还可以用于创建线性渐变（linear gradients）和径向渐变（radial gradients）背景。这个例子创建了一个从中心向外扩展的圆形径向渐变，起始颜色为红色，中间转为半透明黑色，最外圈为蓝色。线性渐变是从起点到终点沿着一条直线逐渐过渡的一种颜色或透明度的变化。这将创建一个从左到右的渐变，开始为红色，到达一半时变为黄色，剩余部分为绿色。径向渐变是从一个中心点向外围扩散的颜色或透明度的变化。
HTML5和CSS3的一些小总结
兜兜的博客
05-08 310
在制作一个盒子滚动时，from处和to处分别添加一个颜色即可实现颜色的缓慢过渡： <style> .box{ width: 200px; height: 200px; border: 1px solid #000; text-align: center; ...
HTML5和CSS3总结
m0_46549742的博客
05-07 321
知识点罗列 1.HTML5新标签 2.HTML5兼容性 3.CSS3过渡 4.CSS3的2D转换 5.CSS3的3D转换 6.CSS3弹性flex 7.CSS3多列布局 8.CSS3动画 9.CSS3多媒体查询 10.CSS3选择器 总结 1.HTML5的新标签 （1）<canvas>新元素 <canvas>标签定义图形，比如图表和其他图像。该标签基于 JavaScript...
HTML5+CSS3
09-17
该文档是HTML5+CSS3的总结笔记，把工作中的常用的知识点个记录下来，仅供学习和工作的参考资料，不做商业用途，版权归本人所有，侵权必究！
HTML&CSS3大总结.xmind
12-19
第一阶段的思维导图,方便快捷
html5/css3响应式页面开发总结
09-22
响应式一套模板适应所有终端，但每种设备看到的版式可以是不一样的。这篇文章主要介绍了html5/css3响应式页面开发总结 ,需要的朋友可以参考下
HTML5和CSS3基础知识总结
ZTL0513的博客
09-15 174
浏览器 常用浏览器 常用的五大浏览器: IE, 火狐(Firefox), 谷歌(Chrome), Safari 和 Opera 等. 浏览器内核(渲染引擎): 负责读取网页内容, 整理讯息, 计算网页的显示方式并显示页面 IE: Trident; (IE, 猎豹安全, 360极速浏览器, 百度浏览器) Firefox: Gecko; (火狐浏览器内核) Safari: Webkit; (苹果浏览器内核) Chrome/Opera: Blink; (Chrome / Opera 浏览器内核, Blink
HTML5+CSS3学习总结.docx
11-22
HTML5+CSS3学习总结.docx
HTML5和CSS3知识点总结
yutong5528的博客
02-05 2319
1. 首先要分别建立html,img和css3的文件夹。   2. html和css3的首页放在文件夹外面。还可以建立一个公共css，比如导航和页脚可以放在公共css里面，在每个页面加上公共css超链接就可以了。减少代码的编写。 3. 文件夹的名称要写成英文形式。也不要写成汉语拼音，html识别不出来汉字。 4.class与id的区别： （1）、在CSS文件里书写时，ID加前缀"#"；CL
HTML5CSS3知识点总结（一）
qq_63778549的博客
12-20 719
DAY01-HTML基础 DAY02-表单和CSS基础 DAY03-CSS选择器和属性 DAY04CSS常用属性 DAY05CSS核心属性 DAY06页面书写 DAY07元素类型和文本溢出现实省略号
HTML5和CSS3基础总结
兔子的博客
08-11 6762
HTML5 建立在html4的基础上，新增了一些有语义的标签，新增了一些api(application programming interface) 应用程序接口，本地存储，地理位置，绘制图形canvas，音频标签，视频标签 1.h5新增语义标签 <header>头部标签</header> <nav>导航标签</nav> <section>主体 <aside>侧边栏</aside> <article>文章
HTML5与CSS3总结笔记 （DIV）
zypmmy的博客
10-27 287
HTML5与CSS3总结笔记 （DIV） CSS是web前端的漂亮衣服可以精细到像素点的不同div块儿（或者其他什么的标签比如说table啦ul啦）就是这衣服的（一针||一线||一块布）。另外，如果你是一个完美主义者+强迫症，那么恭喜你，CSS绝对够你玩儿 DIV 以上这一行代码应该是前端战斗组的兄弟姐妹们熟悉熟悉烂熟于心的代码~配上了id和class的html标签只是木有雕琢的璞玉，如果木有cs...
HTML5+CSS3学习总结(完结)
热门推荐
是日前端
06-14 2万+
一、HTML5的语义化 二、CSS3动画 三、CSS3阴影 四、CSS3过渡(非常重要) 五、弹性布局 六、栅格布局 七、渐变 八、媒体查询
Html5和css3问题总结
yutong5528的博客
02-05 276
1.  命名规范： （1）  。所有的命名最好都小写，首字母大写 （2）  。文件名用下划线，类名用 - （3）  。给图片加上 alt标签 （4）  。尽量使用英文命名原则。尽量不缩写，除非一看就明白的单词 （5）  。表现与结构完全分离，代码中不涉及任何的表现元素，如 style，font，bg c olor，border等 2.  关于一个标签： （
html5+CSS3
03-05
HTML5和CSS3是用于构建网页和网页样式的两种技术。 HTML5是最新的HTML标准，它引入了...总结一下，HTML5用于定义网页的结构和内容，而CSS3用于定义网页的样式和布局。它们的结合可以创建出现代化、交互性强的网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值