当前位置: 萬仟网 > IT编程>网页制作>Html5 > 与HTML5+CSS3的基础语法入门

与HTML5+CSS3的基础语法入门

2021年01月05日  | 萬仟网IT编程  | 我要评论
CSS3之3D转换一、特点近大远小物体和面遮挡不可见二、三维坐标系x轴:水平向右——右面是正值,左面是负值y轴:垂直向下——上面是正值,下面是负值z轴:垂直屏幕——往外面是正值,往里面是复制三、translatetranslateX()向x轴平移正数向右,负数向左translateY向y轴平移,整数向下负数向上translateZz轴可以理解为你与电脑屏幕之间的距离,值越大距离屏幕越近,值越小离屏幕距离越远首先Z 轴是朝向我们的,所以 看不出效果,但是,我们把它转

HTML5

一、什么是HTML5

**定义:**HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML

二、新增标签(常用)

1、结构标签

  • section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分;
  • article:特殊独立区块,表示这篇页眉中的核心内容;
  • aside:标签内容之外与标签内容相关的辅助信息;
  • header:某个区块的头部信息/标题;
  • hgroup:头部信息/标题的补充内容;
  • footer:底部信息;
  • nav:导航条部分信息
  • figure:独立的单元,例如某个有图片与内容的新闻块。

2、媒体标签

  • video:视频
  • audio:音频

video标签参数

属性描述
autoplayautoplay自动播放
controlscontrols显示控件
looploop循环播放
srcurl视频地址
<video width=500px height=300px controls autoplay muted>
        <source src="./images/1.mp4" type="video/mp4">
</video>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0265EetQ-1609943471498)(C:\Users\a\AppData\Roaming\Typora\typora-user-images\image-20210106220835383.png)]

audio标签属性

属性说明
autoplayautoplay自动播放
controlscontrols显示控件
looploop循环播放
srcurl音频地址
preloadauto/none规定是否预加载视频
posterimgUrl加载等待图片
mutedmuted静音播放
 <audio control loop>
        <source src="./images/1.mp3" type="audio/mp3">
 </audio>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lnptrh5F-1609943471505)(C:\Users\a\AppData\Roaming\Typora\typora-user-images\image-20210106221126050.png)]

**注意:**autoplay自动播放在谷歌浏览器中已禁用

3、表单标签

  • email:邮箱
  • url:网址
  • date:日期
  • time:时间
  • month:月份
  • week:星期
  • number:数字
  • tel:号码
  • search:搜索框
  • color:颜色表单

4、表单属性

  • required:必填
  • placeholder:提示信息
  • autofocus:自动聚焦
  • autocomplete:提交成功记录(需加name值)
  • multiple:多选文件提交

三、语义化

1、定义

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化

  • 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
  • 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
  • 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  • 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

CSS3

一、什么是css3

**定义:**css的第三代版本,目前还在草案,在不断改进中,移动端支持优于pc端

二、属性选择器

  • E[att]:选择具有att属性的E元素

    div[disabled]{
        cursor:default
    }
    
  • E[att=“val”]:选择att属性的值为val的元素

    input[type="checkbox"]{
        width:20px;
        height:20px;
    }
    
  • E[att^=‘val’]:选择att属性的值开头为val的元素

         div[class^='b'] {
                background-color: skyblue;
                width: 100px;
                height: 100px;
            }
    
  • E[att$=‘val’]:选择att属性的值结尾为val的元素

  • E[att*=‘val’]:选择att属性的值包含val的元素

三、结构伪类选择器

  • E:frist-child匹配父元素第一个子元素

    li:frist-child{
        color:red
    }
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XjaUABm7-1609943471519)(C:\Users\a\AppData\Roaming\Typora\typora-user-images\image-20210106211801768.png)]

  • E:last-child匹配父元素最后一个子元素

    li:last-child{
    	background-color:red
    }
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OOd87fvx-1609943471533)(C:\Users\a\AppData\Roaming\Typora\typora-user-images\image-20210106211745310.png)]

  • E:nth-child(n)匹配父元素第N个元素

    li:nth-child(2){
        background-color:yellow
    }
    

在这里插入图片描述

  • E:frist-of-type指定类型元素的第一个

     p:first-of-type {
                color: slateblue;
     }
    

在这里插入图片描述

  • E:last-of-type指定类型元素的最后一个

    p:last-of-type {
        color: slateblue;
    }
    

在这里插入图片描述

  • E:nth-of-type(n)指定类型的第n个

    p:nth-of-type(2) {
        color: slateblue;
    }
    

在这里插入图片描述

nth-child(n)详解
  • n可以是公式、关键字、公式

  • 关键字有even偶数,odd奇数

  • 常见公式

    公式取值
    2n偶数
    2n+1奇数
    5n5的倍数
    n+5从第5个开始
    -n+5前五个
nth-child与nth-of-type的区别
  • nth-child选择父元素 里面第几个子元素,不管什么类型
  • nth-of-type选择指定类型
案例演示
div p:nth-child(2){
	color:red;
}
<div>

    <h3>我是标题</h3>

    <p>111111</p>

    <p>222222</p>

    <p>3333333</p>

</div>
<!--结果是div的第二个子元素变红,也就是第一个p标签--!>

在这里插入图片描述

animate动画

一、什么是动画

**定义:**动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果

二、动画属性

属性说明
@keyframes规定动画
animation简写方式
animation-name动画名称
animation-duration动画周期
animation-timing-function速度曲线
animation-delay动画延时
animation-iteration-count播放次数。infinte无数次
animation-direction逆向播放
animation-play-state是否暂停
animation-fill-mode结束后状态

案例演示

        html,
        body {
            background: #ccc;
        }

        div {
            width: 200px;
            height: 100px;
            background: url(/images/bear.png);
            border: 1px solid #000;
            animation: move 0.3s steps(8) infinite
        }

        @keyframes move {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

在这里插入图片描述

CSS3之3D转换

一、特点

  • 近大远小
  • 物体和面遮挡不可见

二、三维坐标系

  • x轴:水平向右——右面是正值,左面是负值
  • y轴:垂直向下——上面是正值,下面是负值
  • z轴:垂直屏幕——往外面是正值,往里面是复制

img

三、translate

translateX()

向x轴平移正数向右,负数向左

img

translateY

向y轴平移,整数向下负数向上

img

translateZ

z轴可以理解为你与电脑屏幕之间的距离,值越大距离屏幕越近,值越小离屏幕距离越远

首先Z 轴是朝向我们的,所以 看不出效果,但是,我们把它转个身,让Z轴 面对 右边,就可以了。

img

translate3d()

translate3d是同时设置x,y,z轴的,不过其中的三个参数必须都设置,如不需要就填0

img

四、perspective透视

  • 如果想要在网页产生3d效果需要透视
  • 模拟人类的视觉位置,可认为安排一只眼睛去看
  • 透视我们也称为视距:视距就是人道屏幕的距离
  • 距离视觉点越近的在电脑平面成像越大,越远成像越小
  • 透视单位是像素

简单的说,可以模拟出我们人看电脑上的显示的像素一样。比如说

perspective:800px 意思就是,我在离屏幕800px 的地方观看这个元素。(这个属性,要设置在父元素上面)

img

那么思考一个问题,transform:translateZ 呢,可以增加 Z轴的距离, 那么Z轴越大,是不是也就代表着,这个元素,离我们的距离越近? 那么,你把一张图片,贴到你脸上,有什么效果? 是不是非常大?有人可能会问,这两者之间有什么关系吗? 肯定是有的,这个 perspective 配合 transform:translateZ 就有这种效果, 我们来看看。

有没有发现,临近 800px 的时候, 图片突然变黑了, 然后到800px的时候, 图片消失了。 这又是为啥呢? 其实很像我们现实中的例子一样,一张远处的图片,慢慢的移动到你脸上, 你会看见图片越来越大,贴到你脸上的时候,是不是 你就看不见了? 到800px 的时候,你人都和图片 融合在一体了, 如果801px 是不是你都穿过这张图片了?道理是一样的啦。

五、rotate旋转

  • transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
  • transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
  • transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
  • transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度

左手准则

  • 左手的拇指指向x轴的方向

  • 其余的手指弯曲的方向就是该元素沿着x轴旋转的方向

    img

  • 左手拇指指向y轴的正方向

  • 其余手指弯曲方向就是该元素沿着y轴旋转的方向

img

rotateX

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k6pq1Lpn-1609824951193)(D:\software\LICEcap\动图\02.gif)]

rotateY

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BCoYHmSb-1609824951194)(D:\software\LICEcap\动图\03.gif)]

rotateZ

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1hJUWCf-1609824951195)(D:\software\LICEcap\动图\01.gif)]

rotate3d

  • transform: rotate3d(x, y, z, deg) – 沿着自定义轴旋转 deg 为角度

  • x, y, z 表示旋转轴的矢量,是标识你是否希望沿着该轴进行旋转,最后一个标识旋转的角度

transform: rotate3d(1, 1, 0, 180deg) – 沿着对角线旋转 45deg

在这里插入图片描述

六、transform-style

transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。

属性

  • flat——其中flat值为默认值,表示所有子元素在2D平面呈现。
  • preserve-3d——preserve-3d表示所有子元素在3D空间中呈现。

transform-style属性需要设置在父元素中,并且高于任何嵌套的变形元素。

本文地址:https://blog.csdn.net/weixin_49115895/article/details/112228968

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com