一起学习 HTML5

最新推荐文章于 2021-05-08 15:31:40 发布
最新推荐文章于 2021-05-08 15:31:40 发布
阅读量382 收藏
点赞数 2
分类专栏： 前端 # HTML5 and CSS3 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45773503/article/details/104847634
版权

文章目录

HTML5

1. 什么是HTML5

1. 是html5，css3，js新版的总称
2.多了些什么呢：
  1. 新的选择器
  2. 转换transform
  3. 动画animation
  4. 浏览器私有前缀

2. 新增语义标签（部分）

1.	<header></header>   	头部标签
2.	<nav></nav>         	导航标签
3.	<article></article> 	内容标签
4.	<section></section> 	块级标签
5.	<aside></aside>     	侧边栏标签
6.	<footer></footer>   	尾部标签

7.	<audio src=""></audio> ogg Mp3 Wav格式
		
8.	<video src=""></video>

注意：

  • 这种语义化是针对搜索引擎的
  • 这些标签在页面中可以使用多次
  • 在IE9中需要把这个标签转换为块级元素
  • 移动端喜欢用这些标签

3. H5新增多媒体标签

7.	<audio src=""></audio> ogg MPEg3 Wav格式
		
8.	<video src=""></video> ogg MPEg4 WebM格式

在这里插入图片描述
选择不同的格式播放：

    <audio src="" controls>
        <source src="" type="audio/mpeg3">
        <source src="" type="audio/ogg">
            你的浏览器太low了 不支持audio播放
    </audio>

    <video src="" controls>
        <source src="" type="vidio/mpeg4">
        <source src="" type="vidio/ogg">
            你的浏览器太low了 不支持audio播放
    </video>

4. H5新增表单标签

PC端的语义化及方便，手机端的不同键盘等的触发。

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为URL类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”手机类型
type=“search”搜索框
type=“color”生成一个颜色选择类表单
    <form action="">
        <label for="">日期：</label>
        <input type="date">
        <label for="">password：</label>
        <input type="password">
        <label for="">手机号：</label>
        <input type="tel">
        <label for="">邮件：</label>
        <input type="email">
        <label for="">数字：</label>
        <input type="number" min="0" max="100">   /*字母 e 可以输入，其他不行，科学计数法*/
        <label for="">搜索框：</label>
        <input type="search">
        <label for="">颜色：</label>
        <input type="color">
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
属性值说明
requiredrequired表单拥有该属性表示其内容不能为空，必填
placeholder提示文本（占位符）表单的提示信息，存在默认值将不显示
autofocusautofocus光标自动聚焦，页面加载完成自动加载到指定表单
autocomplateoff / on当用户在字段开始键入时，浏览器基于之前键入的值，应该显示出字段中填写的选项，例：autocomplate = “off”，需要放在表单内同时加上name属性，同时成功提交
multiplemutiple可以多选文件提交

实例：

    <form action="">
        用户名：<input type="text" required placeholder="请输入用户名" autofocus name="username" autocomplete="on">
        <input type="file" name="" id="" multiple>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

CSS3

	cursor: pointer; 	/*鼠标样式*/
	disabled			/*按钮禁用，在发验证码时，避免重复发送*/

1. css3 现状

  • 在css2的基础上新增（扩展样式）
  • 移动端支持优于 PC 端
  • 不断改进中
  • 应用相对广泛

2. css3 属性选择器（权重高于标签选择器）

选择符简介
E[att]具有att属性的E标签
E[att = “val”]具有att属性的E标签 ,且值以val为属性的标签
E[att ^= “val”]具有att属性，且值以val开头的E标签
E[att $= “val”]具有att属性，且值以val结尾的E标签
E[att *= “val”]具有att属性,，且值中含有val的E标签

类选择器，属性选择器，伪类选择器， 权重为10
例：

        input[type=search] {  /*选择search框*/
            color: aqua;
        }
        
        div[class ^= "icon"] {
            color: red;
        }

    <input type="text" value="文本框">
    <input type="text" value="文本框">
    <input type="text" value="文本框">

    <input type="search" value="搜索框">
    <input type="search" value="搜索框">
    <input type="search" value="搜索框">
    
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>

.
.

        button {
            cursor: pointer;
        }
        button[disabled] {
            cursor: default;
        }

    <button>按钮</button>
    <button>按钮</button>			/*鼠标样式小手*/
    <button disabled>按钮</button>  /*被禁用*/

3. css3 结构伪类选择器

选择符简介
E:first-child匹配父元素中的第一个子元素
E:last-child匹配父元素中的最后一个子元素
E:nth-child(n)匹配父元素中的第 n(可以是关键词) 个子元素
E:first-of-type指定类型 E 的第一个
E:last-of-type指定类型 E 的最后一个
E:nth-of-type(n)指定类型 E 的第 n(可以是关键词) 个
1. :nth-child(）
  • n可以是数字关键字和公式
  • n、如果是数字，就是选择第几个
  • 常见的关键字有 even偶数 odd奇数
  • 常见的公式如下（如果n是公式，则从开始计算）
  • 但是第零个元素或者超出了元素个数会被忽略
公式取值
2n偶数
2n + 1奇数
5n5 10 15
n + 5从第五个开始（包含第五个）到最后
-n + 5前五个（包含第五个）

例：

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

        ul li:first-child {
            color: red;
        }
        
        ul li:last-child {
            color: red;
        }
        
        ul li:nth-child(8) {
            color: red;
        }
        
        ul li:nth-child(2n) {
            background-color: pink;
            /*  
                2 * 0 = 0
                2 * 1 = 2
                2 * 2 = 4 
            */
        }
        
        ul li:nth-child(2n + 1) {
            background-color: rgb(162, 162, 212);
            /*  
                2 * 0 + 1 = 1
                2 * 1 + 1 = 3
                2 * 2 + 1 = 5 
            */
        }
        
        ul li:nth-child(5n) {
            color: blueviolet;
        }
        
        ul li:nth-child(n + 5) {
            font-size: 30px;
        }
        
        ul li:nth-child(-n + 5) {
            font-size: 6px;
        }
2. :nth-of-type()

为啥会有这个选择器（用例子来说）
例：

        <p>我是一个屁</p>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>

        div :nth-child(2) {
            /*只管他是第几个子元素但不管是什么类型*/
            background-color: powderblue;
        }
        
        div span:nth-child(1) {
            /*这个选不到，n为2才能选到*/
            color: red;
        }

例：

    <div>
        <p>我是一个屁</p>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
    </div>

        div span:first-of-type {
            color: rosybrown;
        }
        
        div span:last-of-type {
            background-color: rgb(162, 162, 212);
        }
        
        div span:nth-of-type(2) {
            background-color: red;
        }

注：如果子元素都是一个类型那么 :nth-child() 和 :nth-of-type() 是一样的

4. css3 伪元素选择器

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

注意：

  • before 和 after 必须有 content 属性
  • befor 在内容的前面，after在内容的后面
  • before 和 after 创建一个元素，但是属于行内元素
  • 因为在 dom 里面看不见刚才创建的元素，所以我们称它为伪元素
  • 伪元素和标签选择器一样，权重为 1
    例：
    <div>是</div>

        div::before {
            content: "我";
        }
        
        div::after {
            content: "Gragon";
        }

例：

    <div>是</div>

        div::before {
            width: 20px;
            height: 20px;
            background-color: red;
            display: inline-block;
            content: "我";
        }
        
        div::after {
            width: 20px;
            height: 20px;
            background-color: red;
            content: "Gragon";
        }

例：字体图标

5. css3 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果。可以简单理解为变形

1. 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
在这里插入图片描述

2. 移动：translate
  1. 语法
    2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
            transform: translate(x, y);
            /*或者分开写*/
            transform: translateX(n);
            transform: translateY(n);
            /*三者互相独立不能同时用，下面两个也不行*/
  1. 重点
    • 定义2D转换中的移动，沿着 X 和 Y 轴移动元素
    • translate最大的优点：不会影响到其他元素的位置（像是脱离了文档流）
    • translate中的百分比单位是相对自身元素的translate（50%，50%）;
    • 对行内元素没有效果
3. 旋转：rotate

A. 2D旋转指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转。

  1. 语法
		transform：rotate(度数);
  1. 重点
    • rotate里面跟度数，单位是 deg 比如 rotate(deg)
    • 角度为真时，顺时针，负时，为逆时针
    • 默认旋转的中心点是元素的中心点

例一：

    <img src="1.gif" alt="">

        img {
            width: 150px;
            height: 150px;
            margin: 50px;
            border-radius: 50%;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 2s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }

B. 转换中心点 transform-origin

我们可以设置元素转换的中心点

  1. 语法
		transform:origin:x y;/*注意中间是空格*/
  1. 重点
    • 注意后面的 x 和 y 用空格隔开
    • x y 默认转换的中心点（50% 50%）
    • 还可以给 x y 设置像素 或者 方位名词 （top bottom left right center）

例一（一定要看）：

    <div></div>

        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            position: relative;
            margin: 100px;
            transition: all 2s;
            /* 1. 可以跟方位名词 */
            /* 2. 默认是 50% 50% 等价于 center center */
            /* 3. 可以是像素(px), 元素 */
            transform-origin: left bottom;
            transform-origin: 10px 10px;
            /*设置一个，另一个是默认值center*/
        }
        
        div:hover {
            transform: rotate(360deg);
        }

例二（可以不看）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 10px;
            overflow: hidden;
            float: left;
        }
        
        div::before {
            content: "帅";
            display: block;
            width: 100%;
            height: 100%;
            background-color: pink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.5s;
        }
        
        div:hover::before {
            transform: rotate(0);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>
4. 缩放：scale

缩放，顾名思义，可以放大和缩小，只要给元素添上了这个属性就能控制它放大还是缩小

  1. 语法
    里面写的是数字，就是倍数的意思 1就是1倍， 2就是2倍
          transform: scale(x, y);
  1. 注意
  • 注意其中的 x 和 y 使用逗号
  • transform:scale(1, 1)：宽和高都放大一倍，相对于没有放大
  • transform:scale(2, 2)：宽和高都放大了 2 倍
  • transform:scale(2)：只写了一个参数，第二个参数和第一个参数一样，相当于 scale(2, 2)
  • transform:scale(0.5, 0.5)：缩小
  • scale缩放量最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而不影响其他盒子

实例1（盒子，不影响其他元素）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: pink;
            width: 200px;
            height: 200px;
            margin: 100px auto;
        }
        
        div:hover {
            transform: scale(2);
            transform-origin: right top;
        }
    </style>
</head>

<body>
    <div></div>
    123
</body>

</html>

实例2（图片）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
            margin: 10px;
            overflow: hidden;
            border: 1px solid black;
        }
        
        img {
            width: 100%;
            height: auto;
            transition: all 1s;
        }
        
        img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <a href=""><img src="./1/timg (2).gif" alt=""></a>
    </div>
    <div>
        <a href=""><img src="./1/timg (2).gif" alt=""></a>
    </div>
    <div>
        <a href=""><img src="./1/timg (2).gif" alt=""></a>
    </div>
</body>

</html>

实例3（分页按钮）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            height: 50px;
            width: 700px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        li {
            height: 20px;
            width: 20px;
            list-style-type: none;
            margin-right: 50px;
            border: 1px solid black;
            border-radius: 50%;
            text-align: center;
            transition: all 1s;
            cursor: pointer;
        }
        
        li:hover {
            transform: scale(1.3);
        }
        
        a {
            text-decoration: none;
            color: blueviolet;
        }
    </style>
</head>

<body>

    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
    </ul>

</body>

</html>
2D转换的综合写法

注意：

  1. 同时使用多个转换，其格式为：transform: translate() rotate() scale()...等
  2. 其顺序会影响转换的效果。（先旋转会改变坐标轴位置）
  3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前。

6. css3 动画

  1. 需求：我们想要页面一打开，一个盒子就从左边走到右边（所以需要动画）

  2. 动画（animation) 是css3中具有颠覆性属性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，用来实现复杂的动画效果

  3. 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

1. 动画的基本使用

制作动画分为两步：

  1. 先定义动画
  2. 在使用（调用动画）
2. 用keyframe定义动画（类似类选择器）
        @keyframes 动画名称 {
           from / 0% {
                width: 100px;
            }
            
           to / 100% {
                width: 200px;
            }
        }
3. 元素使用动画
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            /* animation: move ease 2s infinite; */

            /*调用动画*/
            animation-name: 动画名称;
            animation-duration: 持续时间;
        }
4. 动画序列
  • %0 是动画的开始，100% 是动画的完成，这样的规则就是动画序列。
  • 在 @keyframe(关键帧) 中规定某项 css 样式。就能创建由当前样式逐渐改为新样式的动画效果。
  • 动画是使元素从一种样式逐渐变化到另一种样式的效果，您可以改变任意多的样式任意多的次数。
  • 请用百分比来规定变化发生的时间，或者用关键词 “from” 和 “to” , 等同于 0% 和 100%。
5. 动画的常用属性
属性描述
@keyframe规定动画
animation所有动画属性的简写属性，除了animate-paly-state属性
animation-name规定@keyframe动画的名称（必须的）
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0.（必须的）
animation-timimg-function规定动画的速度曲线
animation-delay规定动画何时开始，默认是0
animation-iteration-count规定动画被播放的次数，默认是1，还有infinite
animation-direction规定动画是否在下一周期逆向播放，默认是“normal”，altermate逆播放
animation-play-state规定动画是否正在运行或是暂停，默认值是“running”，还有“pause”
animation-fill-mode规定动画结束后的状态，保持forwards回到起始的backwards
6. 动画简写属性

animation：动画名称 持续时间 运动曲线 播放次数 是否反方向 动画起始或者结束的状态
注意

  • 简写属性里面不包括 animation-play-state
  • 暂停动画：animation-play-state：purse经常和鼠标经过等其他配合使用
  • 想要动画走过来，而不是直接跳回来：animation-direction：alternate
  • 盒子动画结束后，停在结束位置：animation-fill-mode：forwards

例（一定要看）:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            /*调用动画*/

            /* 动画名称 */
            /* animation-name: move; */

            /*持续时间*/
            /* animation-duration: 2s; */

            /*运动曲线*/
            /* animation-timing-function: ease; */

            /*何时开始*/
            /* animation-delay: 1s; */

            /*动画      重复    次数*/
            /* animation-iteration-count: infinite; */

            /*是否反方向播放  默认是normal*/
            /* animation-direction: alternate; */

            /*动画结束后的状态 默认是backwards 回到起始状态 我们可以让它停留在结束状态 forwards*/
            /* animation-fill-mode: forwards; */
            
            animation: move 2s linear 0s 1 alternate forwards;
        }
        
        div:hover {
            /*鼠标经过div 让这个div停止动画， 鼠标离开就继续动画*/
            animation-play-state: paused;
        }
        
        @keyframes move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(500px);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

案例：

  1. 热点图
7. 速度曲线细节
值描述
linear动画从开头到结尾的速度是相同的，匀速
ease默认，动画以低速开始，然后加快，再结束的变量
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
steps( )指定了时间函数中的间隔数量（步长）

steps()的案例(要去看)

7. css3 3D转

在我们生活中的环境是3D的，图片就是3D物体在2D平面呈现的例子
有啥特点

  • 近大远小
  • 物体后面遮挡不可见
1. 三维坐标系

在这里插入图片描述
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。（遵循左手法则）

  • x轴：水平向右 注意：向右是正值，向左是负值
  • y轴：垂直向下 注意：向下是正值，向上是负值
  • z轴：垂直屏幕 注意：向外是正值，向内是负值
    当我们在网页上构建3D效果的时候参考这些特点就能产生3D效果

主要知识点

  • 3D位移：translate3d(x, y, z)
  • 3D旋转：rotate3d(x, y, z)
  • 透视：perspective
  • 3D呈现 transform-style
2. 3D位移：translate3d(x, y, z)

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

名称作用
transform: translateX(100px)仅仅是在 X轴 上移动
transform: translateY(100px)仅仅是在 Y轴 上移动
transform: translateZ(100px)仅仅是在 Z轴 上移动 （注意： translateZ一般用px单位）
transform: translate3d(x, y, z)其中x， y， z分别指要移动的轴的方向的距离
3. 透视 perspective

在2D平面产生近大远小的视觉立体，但只是效果二维的

  • 如果在网页中产生3D效果需要透视（理解成3D物体投影在2D平面内）
  • 模拟人类的视觉位置，可认为安排一只眼睛去看
  • 透视我们也称为视距：是距就是人的眼睛到屏幕的距离
  • 距离视觉点越近的在电脑上平面成像越大，越远成像越小
  • 透视的单位是像素

透视写写在被观察元素的父盒子上

  1. d：就是视距，就是一个距离人的眼睛到屏幕的距离
  2. z：就是 z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
4. translateZ

transform: translateZ(100px)：仅仅是在 Z轴上的移动，有了透视，就能看到translateZ引起的变化了。

5. 3D旋转 rotate3d

3D旋转至可以让元素在三维平面内沿着 x轴， y轴， z轴或者自定义轴进行旋转

语法

名称作用
transform: rotateX(45deg)沿着 X轴 正方向旋转45度
transform: rotateY(45deg)沿着 Y轴 正方向旋转45deg
transform: rotateZ(45deg)沿着 Z轴 正方向旋转45deg
transform: rotate3d(x, y, z, deg)沿着自定义轴旋转 deg为角度（了解即可）四个参数

注：

  1. x，y，z是旋转轴的矢量，所以它可以自定义一个轴进行旋转
  2. 旋转方向遵循（左手准则）
    • 左手的拇指指向 某轴 的正方向
    • 其余手指的弯曲方向就是沿某轴旋转的方向（正值）
6. 3D呈现 transform-style
  • 控制子元素是否开启三维立体环境
  • transform-style: flat 子元素不开启3d立体空间 默认的
  • transform-style: preserve-3d; 子元素开启立体空间
  • 代码写给父级，但影响的是子盒子
  • 这个属性很重要

栗子：

  1. 翻转盒子
  2. 3d简易导航栏
  3. 旋转相册

8. 浏览器私有前缀

1. 为啥：
  1. 在pc端的的支持情况是不相同的，针对不同的浏览器书写不同的样式
  2. 浏览器私有前缀：为了兼容老版本的写法，比较新版本的浏览器无需添加
2. 有哪些：
  • -moz- : 代表 firefox 浏览器的私有属性
  • -ms- ：代表 IE 浏览器的私有属性
  • -webkit：代表 Safari，Chrome的私有属性
  • -o-：代表Opera的私有属性
3. 提倡的写法

栗子：

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
~嘘~禁止想象~
关注
专栏目录
一起装扮地球HTML5游戏源码
06-25
总的来说，"一起装扮地球HTML5游戏源码"涉及了HTML5的多个核心技术和开发实践，包括Canvas绘图、服务器交互、本地存储、JavaScript库和框架的应用等，为开发者提供了学习和研究HTML5游戏开发的实例。
HTML5学习资料
10-17
HTML5是下一代超文本标记语言，它在2014年被正式确立为W3C标准，极大地丰富...同时，学习HTML5也意味着了解如何与其他现代Web技术（如JavaScript框架和库，如React、Vue或Angular）结合，以构建功能强大的Web应用程序。
html5学习参考
06-07
通过学习HTML5，开发者可以构建更强大、更互动、更适应移动设备的网页应用。不过，随着技术的不断发展，HTML5的生态系统也在不断更新，持续学习和实践是保持与时俱进的关键。革命尚未成功，同志仍需努力，让我们一起...
html标签学习与例子
09-18
在这个“html标签学习与例子”资料中，我们可以深入理解HTML5中的各种标签及其用法。 首先，HTML5是HTML的最新版本，它引入了许多新的标签，旨在使网页结构更加语义化，提高可读性和无障碍性。例如，`<header>`标签...
html5中的一些标签学习(心得)
09-27
下面小编就为大家带来一篇html5中的一些标签学习(心得)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML和HTML5的简单区别
weixin_45773503的博客
05-08 4957
html5
关于img（前端）
weixin_45773503的博客
03-17 1595
文章目录1. map 图（图中图）2. figure元素（有利于搜索引擎搜索） 1. map 图（图中图） <a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin" target="_blank"> <img usemap="#solorMap...
轮播图（纯CSS3）
weixin_45773503的博客
03-07 1093
轮播图 咋实现： 把 n 张照片放在一个盒子里（这个盒子宽度要能装下所有照片，高度跟第二点的盒子一样高）. 再把这个盒子放在一个你想要实现轮播图的定宽高的盒子里 因为里面的盒子比外面的大，所以要使外面的盒子overflow：hidden 这样让我们只能看到一张照片。 注意： 动画效果分为两部分：切换和停留。 动画的偏移值和图片大小相关。 使用css3实现轮播特效的原理 首先必须...
CSS3实现翻转盒子
weixin_45773503的博客
03-29 887
CSS3实现翻转盒子 练习一下3d旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
Visual Studio Code常用插件（前端）
weixin_45773503的博客
03-13 772
Visual Studio Code常用插件（前端） 插件 作用 Chinese (Simplified) Language Pack for Visual Studio Code 中文包 open in browser 使用右键在默认浏览器打开 JS-CSS-HTML Formatter 保存格式化（对齐） Auto Rename Tag 自动重命名匹配，只用改一个标...
grid布局
weixin_45773503的博客
02-29 513
概述 目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。 基本概念 在学习grid布局之前，我们需要了解一些基本概念 1.容器和项目 采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目” 1 2 3 上面的代码中，wrapper就是容器...
css鼠标样式
weixin_45773503的博客
03-14 423
css鼠标样式 <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p> <ul> <li style="cursor:auto">Auto</li><br />/*跟text相同*/ <li style="cursor:crosshair">Crosshair...
认识Bootstrap.
weixin_45773503的博客
01-31 389
第一个项目 在桌面创建项目的文件夹； 把项目的文件夹拖入vscode； 把bootstrap导入文件夹； 新建html 文件夹； 创建index.html 文件； 给index文件导入 html 的基本样式； 给index文件导入Bootstrap的 css 基本样式 2个； 给index文件导入Bootstrap的 js 基本样式； 下载 jQuery 并导入； ...
热点图（CSS3）
weixin_45773503的博客
03-18 323
热点图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
CSS3 filter(滤镜) 属性的学习
weixin_45773503的博客
03-25 284
filter(滤镜) 属性 <!DOCTYPE html> <html> <head> <style> div { width: 450px; } img { width: 33%; height: au...
用float，grid，flex，练习简单导航栏
weixin_45773503的博客
03-14 280
用float，grid，flex，练习简单导航栏 HTML相同（需要引入reset文件） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
太极图（纯css3）
weixin_45773503的博客
03-14 276
太极图 会动哦！ html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
CSS3 box-reflect 属性
weixin_45773503的博客
03-26 270
1. 语法 box-reflect：none | direction | offset | mask-box-image direction = above | below | left | right offset = length | percentage mask-box-image = none | url | linear-gradient | radial-gradient |...
深入学习HTML5：新特性与实践应用
值得注意的是，尽管HTML5是一种标记语言，而不是编程语言，但它与CSS和JavaScript一起构成了现代Web开发的基础。 本教程“HTML5中文教程 - v1.3”旨在全面介绍HTML5的新特性，包括如何使用新的标签、属性、事件以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值