Alex
0%

HTML5&CSS3新特性

置顶 | 发表于 更新于 分类于
本文字数： 9.8k 阅读时长 ≈ 9 分钟

风景-葡萄园

导读

HTML5 是定义 HTML 标准的最新的版本。 该术语通过两个不同的概念来表现：

它是一个新版本的 HTML 语言，具有新的元素，属性和行为，
它有更大的技术集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为 HTML5 和它的朋友们，不过大多数时候仅缩写为一个词 HTML5。
设计为所有 Open Web 开发人员都可以使用，此引用页面链接到许多关于 HTML5 技术的资源，根据其功能分为几个组。

  • 语义：能够让你更恰当地描述你的内容是什么。
  • 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
  • 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
  • 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
  • 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
  • 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
  • 设备访问 Device Access：能够处理各种输入和输出设备。
  • 样式设计: 让作者们来创作更加复杂的主题吧！

以上内容摘自 MDN[1]

HTML5

article 元素

  • 表示页面中一块与上下文不相关的独立内容，比如博客中的一篇文章

aside 元素

  • 表示 article 内容之外的内容，辅助信息

header 元素

  • 页眉
  • 页脚

hgroup 元素

  • 页面中一个区块或整个页面的标题进行组合

figure 元素

  • 媒介内容的分组，以及标题

section 元素

  • 页面中的一个区块，比如章节
  • 导航

svg 元素

  • html
1
2
3
<svg height="100" width="100">
  <circle cx="50" cy="50" r="50" />
</svg>
  • 效果



原生拖放

draggable 属性

  • html
1
<div class="content" draggable="true"></div>
  • css
1
2
3
4
5
6
7
8
9
.content {
  height: 50px;
  width: 200px;
  background-color: #505050;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
  • 效果

James(鼠标选中可拖动)

其他元素

video 元素

  • 暂无内容

audio 元素

  • 暂无内容

canvas 元素

  • 暂无内容

embed 元素

  • 暂无内容

mark 元素

  • 暂无内容

progress 元素

  • 暂无内容

time 元素

  • 暂无内容

meter 元素

  • 暂无内容

command 元素

  • 暂无内容

details 元素

  • 暂无内容

summary 元素

  • 暂无内容

datagrid 元素

  • 暂无内容

keygen 元素

  • 暂无内容

output 元素

  • 暂无内容
  • 暂无内容

ruby 元素

  • 暂无内容

wbr 元素

  • 暂无内容

bdi 元素

  • 暂无内容

dialog 元素

  • 暂无内容

input 元素新属性

input type 属性值

  • hidden
  • text
  • search
  • tel
  • url
  • email
  • password
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color
  • checkbox
  • radio
  • file
  • submit
  • image
  • reset
  • button
number
  • html
1
<input type="number" min="0" max="100" step="5" style="width: 200px" />

参数说明

最小值参数: min
最大值参数: max
步长: step

  • 效果
date
  • html
1
<input type="date" />
  • 效果
color
  • html
1
<input type="color" />
  • 效果

input 其他属性

  • multiple: 输入域可以选择多个值，适用于 email 和 file 类型
  • max: 规定输入域允许的最大值
  • min: 规定输入域允许的最小值
  • pattern: 规定用于验证 input 域的正则表达式
  • required: 规定表单提交前输入域是否必填
  • placeholder: 提供对输入域的提示值

HTML5 API

WebSocket

  • WebSocket 原理: 主动向客户端发送信息,这么做的原因是传统的 ajax 轮训或长连接都会占用非必要的资源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 使用ws或wss协议
let socket = new WebSocket("ws://www.example.com")

// 简单信息
socket.send("Some Message")

let messsage = {
    name: "liu",
    address: "guangzhou",
    year: "2020"
}

// 复杂数据结构需要使用JSON.parse(JSON.stringify(data))进行序列化
socket.send(JSON.parse(JSON.stringify(message)))

// 关闭连接
socket.close()

canvas

  • 暂无内容

Geolocation

getCurrentPosition
  • 获取用户地理位置

语法

navigator.geolocation.getCurrentPosition(success, error, options)

1
2
3
navigation.geolocation.getCurrentPosition(position => {
    console.log(position)
})
watchPosition
  • Geolocation.watchPosition() 用于注册监听器，在设备的地理位置发生改变的时候自动被调用

语法

id = navigator.geolocation.watchPosition(success, error, options);

clearWatch
  • 移除监听

语法

navigator.geolocation.clearWatch(id);

Communication

  • 暂无内容

Storage

sessionStorage
  • 浏览器关闭后 sessionStorage 中的数据会被清空
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 保存数据
sessionStorage.setItem(key, value)

// 读取数据
sessionStorage.getItem(key)

// 删除单个数据
sessionStorage.removeItem(key)

// 删除所有数据
sessionStorage.clear()

// 获取索引
sessionStorage.key(index)
localStorage
  • localStorage 中的数据一直保存在客户端本地，除非手动删除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 保存数据
localStorage.setItem(key, value)

// 读取数据
localStorage.getItem(key)

// 删除单个数据
localStorage.removeItem(key)

// 删除所有数据
localStorage.clear()

// 获取索引
localStorage.key(index)

DOM 扩展

  • HTML5 添加了 getElementByClassName()方法
1
2
3
4
5
//取得类中包含"username"和"current"的元素
let allCurrentUsernames = document.getElementByClassName("username current")

//取得id为"myDiv"的元素中带有类名"selected"的所有元素
let selected = document.getElementById("myDiv").getElementByClassName("selected")
  • dataset 属性(非标准属性)
1
<div id="content" data-age="2019" data-name="James"></div>
1
2
3
let content = document.getElementById("content")
let age = content.dataset.age
let name = content.dataset.name

CSS3 新特性

新增选择器

  • p:nth-child(n)
1
2
3
p:nth-child(1) {
  color: rgba(255, 0, 0, 0.75);
}

  • first-child
    选择第一个

  • last-child
    选择最后一个

  • nth-last-child(n)
    从最后一个开始往前选择 n=1 是最后一个,n=2 倒数第二个

  • first-of-type
    指定类型的第一个

html

1
2
3
4
5
6
<div id="content" class="content">
  <span>666</span>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
1
2
3
4
/* 上方html的第3行文本颜色设置为红色 */
.content > p:first-of-type {
  color: red;
}
  • last-of-type

html

1
2
3
4
5
6
<div id="content" class="content">
  <span>666</span>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

css

1
2
3
4
/* 上方html的第5行文本颜色设置为黄绿色(yellowgreen) */
.content > p:last-of-type {
  color: yellowgreen;
}

  • nth-last-of-type

  • nth-of-type

倒影

  • html
1
<div class="reflect">倒影</div>
  • css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.reflect {
  width: 550px;
  margin: 0 auto;

  /*
   * 倒影css
   * 渐变: -webkit-linear-gradient
   * 透明: rgba
   */
  -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent
        30%, rgba(255, 255, 255, 0.3));
  font: bold 100px georgia, sans-serif;
  text-transform: uppercase;
}
  • 效果
倒影





文本溢出

  • html
1
<div class="content">这是一段超长的文本段落，它将会被隐藏</div>
  • css
1
2
3
4
5
6
7
8
9
10
11
12
.content {
  white-space: nowrap;
  width: 12em;
  overflow: hidden;
  border: 1px solid #000000;

  /* 隐藏溢出 */
  text-overflow: ellipsis;

  /* 裁剪溢出 */
  /* text-overflow: clip; */
}
  • 效果
这是一段超长的文本段落，它将会被隐藏

文本阴影

  • html
1
<h1 class="content"></h1>
  • css
1
2
3
4
5
.content {
  color: #a4a7a7;
  font-size: 40px;
  text-shadow: 5px 5px 5px #ff0000;
}
  • 效果

文本阴影效果

渐变色

  • html
1
<div class="my-style"></div>
  • css
1
2
3
4
5
6
7
8
.my-style {
  width: 100px;
  height: 100px;

  /* 渐变 */
  /* 兼容webkit内核浏览器写法 -webkit-linear-gradient(red, green, blue); */
  background: linear-gradient(red, green, blue) -webkit-linear-gradient(red, green, blue);
}
  • 效果



旋转

  • html
1
<div class="my-style"></div>
  • css
1
2
3
4
5
6
7
8
9
10
11
.my-style {
  width: 100px;
  height: 100px;
  background: linear-gradient(red, green, blue);

  /*
   * rotate 旋转
   * translate 平移
   */
  transform: rotate(20deg) translate(100px, -30px);
}
  • 效果

倾斜

  • html
1
<div class="my-style"></div>
  • css
1
2
3
4
5
6
7
8
9
10
11
12
13
.my-style {
  width: 100px;
  height: 100px;

  /* 渐变 */
  background: linear-gradient(red, green, blue);

  /*
   * skew 倾斜
   * tanslate 平移
   */
  transform: skew(150deg, -10deg) translate(100px, 0px);
}
  • 效果

位移

  • html
1
<div class="my-style"></div>
  • css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.my-style {
  width: 100px;
  height: 100px;

  /* 渐变 */
  background: linear-gradient(red, green, blue);

  /*
   * 位移
   * translate参数说明:
   *    参数可以是正/负数
   *    一个参数是x坐标(横向),第二个参数是y坐标(纵向)
   */
  transform: translate(50px, 20px);
}
  • 效果



圆角 + 阴影 + 渐变

  • html
1
<div class="my-shadow"></div>
  • css
1
2
3
4
5
6
7
8
9
10
11
12
13
.my-shadow {
  /* 圆角 */
  border-radius: 50px;

  /* 阴影 */
  box-shadow: 5px 5px 5px rgba(247, 5, 1, 0.5);

  width: 100px;
  height: 100px;

  /* 渐变 */
  background: linear-gradient(#c2c2c2, #e8e8e8, #c2c2c2);
}
  • 效果



动画

  • [原理] 动画的本质是从一套 css 转变到另外一套 css

  1. @keyframes 定义动画
    animation 执行动画
    animation-delay 延迟

    例子一:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    /* from 等同于 0%;  to 等同于 100% */
    /* 定义动画, 可以在任何地方使用 animation 引用这段动画 */
    @keyframes myAnimation {
      from {
        top: 0px;
      }
      to {
        top: 200px;
      }
    }

    /* css 中引用动画 */
    .tipsDiv {
      width: 100px;
      height: 100px;
      background-color: red;

      /*
        使用1秒钟执行 myAnimation 动画, 
        可以在 1s 后面加 infinite 参数使动画无限重复播放, 
        1s 和 infinite 参数中间需要用空格隔开
      */
      animation: myAnimation 1s;
    }

    例子二:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    /*
      百分比表示 animation 执行动画时所给定时间的百分之几。
      如下方所的28行指定了执行 myAnimation 动画所用时间为1秒, 
      并指定了无限播放 infinite 参数，
      所以这个动画会无限的播放下去。
    */

    /* 定义动画, 可以在任何地方使用 animation 引用这段动画 */
    @keyframes myAnimation {
      0% {
        top: 0px;
      }
      /*
        这里的具体时间是由 animation 执行时给定的,
        本例中28行 animation 执行动画时指定了1秒钟,
        所以这里的50%是0.5秒，其他百分比时间以此类推。
      */
      50% {
        top: 200px;
      }
      /* 1秒 */
      100% {
        top: 400px;
        border-radius: 50px;
      }
    }

    /* css 中引用动画 */
    .tipsDiv {
      width: 100px;
      height: 100px;
      background-color: red;

      /*
        使用1秒钟执行 myAnimation 动画,
        可以在 1s 后面加 infinite 参数使动画无限重复播放,
        1s 和 infinite 参数中间需要用空格隔开
      */
      animation: myAnimation 1s infinite;
    }

  2. transform 使元素变化

  • 常用属性值参考
    值 描述
    none 不进行转换
    translate(x, y) 定义 2D 转换
    translate3d(x,y,z) 定义 3D 转换
    translateX(x) 定义 X 轴转换
    translateY(y) 定义 Y 轴转换
    translateZ(z) 定义 3D 转换，只是用 Z 轴的值
    scale(x,y) 定义 2D 缩放转换
    scale3d(x,y,z) 定义 3D 缩放转换
    scaleX(x) 通过设置 X 轴的值来定义缩放转换
    scaleY(y) 通过设置 Y 轴的值来定义缩放转换
    scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换
    rotate(angle) 定义 2D 旋转，在参数中规定角度，单位: deg(度)
    rotate3d(x,y,z,angle) 定义 3D 旋转
    rotateX(angle) 定义沿着 X 轴的 3D 旋转
    rotateY(angle) 定义沿着 Y 轴的 3D 旋转
    rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
    skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
    skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
    skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换
    perspective(n) 为 3D 转换元素定义透视视图
  • 其他: rotate 属性值单位: deg(度)
  1. 实例
  • html
1
<div class="myAnimation"><span>动画</span></div>
  • css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.myAnimation {
  width: 100px;
  height: 100px;
  /* 需要加上相对定位 */
  position: relative;
  background-color: red;
  color: white;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: end;

  /* 渐变 */
  background: linear-gradient(red, green);

  /* infinite参数: 重复播放 */
  animation: myAnimation-1 1.5s infinite;
}

@keyframes myAnimation-1 {
  /*
    相同不同时间，相同动画可以这么写,
    使用逗号将百分比时间分隔开
   */
  0%,
  100% {
    transform: rotate(360deg);
  }
  /* 25% {
  	transform: rotate(90deg);
  } */
  50% {
    transform: rotate(0deg);
  }
  /* 75% {
  	transform: rotate(270deg);
  } */
  /* 100% {
    transform: rotate(360deg);
  } */
}
  • 效果

动画



  1. 实例 4(呼吸效果)
  • html
1
<div class="circular-luminous"></div>
  • css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.circular-luminous {
  width: 100px;
  height: 100px;
  border-radius: 50%;

  background: linear-gradient(#e8e8e8, #f9f9f9, #e8e8e8);

  animation: light 1s infinite;
}

@keyframes light {
  0%,
  100% {
    box-shadow: 0 0 2px #fff;
  }
  50% {
    box-shadow: 0 0 30px #fff;
  }
}
  • 效果

  1. https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 ↩︎