HTML5
2019-07-25 09:56:15 0 举报AI智能生成
HTML5 新特性
作者其他创作
大纲/内容
Canvas
元素拖拽
音频、视频
新增标签
语义化结构标签
header
页眉
footer
页脚
nav
主导航
main
文档的主要内容，（whatwg没有语义，IE不支持）
section
页面中的一节或文章中的一段，通常带有标题
article
定义文章、博客、帖子、评论等
aside
定义侧边栏
hgroup
包裹连续的标题，如文章主标题和副标题的组合（w3c将其删除）
其他新增标签
状态
meter
含义
表示状态，电池、温度
属性
value
值，默认最大值是1
max
最高值
min
最低值
high
较高预警阈值
low
较低预警阈值
optimum
最优值,默认是中间，最优值绿色，离最优值近黄色，离最优值远红色
样式
meter{
width:400px;
height:30px;
}
width:400px;
height:30px;
}
meter::-webkit-meter-bar{
/* 可以设置总体边框，空白区域背景等 */
backgroud:#fff;
border:1px solid #ccc;
}
/* 可以设置总体边框，空白区域背景等 */
backgroud:#fff;
border:1px solid #ccc;
}
meter::-webkit-meter-optimum-value{
/* 设置最优值范围内的样式 */
}
/* 设置最优值范围内的样式 */
}
meter::-webkit-meter-suboptimum-value{
/* 凑合 范围内的样式 */
}
/* 凑合 范围内的样式 */
}
meter::-webkit-meter-even-less-good-value{
/* 糟糕 范围内的样式 */
}
/* 糟糕 范围内的样式 */
}
progress
含义
进度条
属性
value
值，默认最大值是1
max
最大值
样式
progress{
width:400px;
height:30px;
border:1px solid #ccc;
}
width:400px;
height:30px;
border:1px solid #ccc;
}
progress::-webkit-progress-bar{
background: #fff;
}
background: #fff;
}
progress::-webkit-progress-value{
background: green;
}
background: green;
}
列表
datalist
百度搜索框，下面的输入提示
<input type="text" list="searchOption">
<datalist id="searchOption">
<option value="a"></option>
<option value="ab"></option>
<option value="abc"></option>
<option value="abcd"></option>
<option value="aaa"></option>
<option value="acc"></option>
<option value="bcc"></option>
<option value="cdd"></option>
</datalist>
<datalist id="searchOption">
<option value="a"></option>
<option value="ab"></option>
<option value="abc"></option>
<option value="abcd"></option>
<option value="aaa"></option>
<option value="acc"></option>
<option value="bcc"></option>
<option value="cdd"></option>
</datalist>
details
展开内容
<details open>
<summary>大前端</summary>
<p>HTML5</p>
<p>CSS3</p>
<p>JavaScript</p>
</details>
<summary>大前端</summary>
<p>HTML5</p>
<p>CSS3</p>
<p>JavaScript</p>
</details>
属性
open
注释
ruby
文字上带拼音
<ruby>魑 <rt>chi</rt></ruby>
<ruby>魅 <rt>mei</rt></ruby>
<ruby>魅 <rt>mei</rt></ruby>
标记
mark
文字涂色，搜索结果标记关键字
Lorem ipsum <mark>dolor sit</mark> amet,
样式
背景色、字体
mark {
background: red;
}
background: red;
}
图像
figure
文章内的插图，独立的内容
<figure> <!--插图-->
<img src="images/trump.jpg" alt="">
<figcaption>美国总统</figcaption> <!--配图说明-->
</figure>
<img src="images/trump.jpg" alt="">
<figcaption>美国总统</figcaption> <!--配图说明-->
</figure>
表单新属性
form表单控件（input、textarea、select...）
placeholder
提示显示
required
必填，无需设置值
autofoucs
闪烁焦点的输入框，无需设置值
autocomplete
自动完成，提示以前输入过的内容，值可设置为off/on
pattern
写正则表达式，表单验证
form元素
novalidate
不进行校验，不用填值
input type新增值
email
必须含@，并@的前后都有内容
url
必须以http开头
number
参数
min
最小值，闭区间
max
最大值，闭区间
step
步长
search
搜索框，无特殊功能
tel
电话号码，pc端无特殊功能，移动端会弹出数字键盘
range
范围，默认0-100
参数
min
max
step
color
颜色，bgr格式
date
日期
month
年月
week
星期，第几周：2019-W25
time
时间：23:20
datetime-local
日期时间
H5兼容性解决方案
设置meta
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
创建元素
<script>
(function () {
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
document.createElement('main');
document.createElement('figure');
})();
</script>
(function () {
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
document.createElement('main');
document.createElement('figure');
})();
</script>
js放在前面
header,footer,nav,article,aside,section,main {
display: block;
}
display: block;
}
直接调用html5shiv.js
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
<script src="js/html5shiv.min.js"></script>
<![endif]-->
响应式布局
定义
伊桑·马科特（Ethan Marcotte）在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体查询） 进行了整合，命名为响应式网页设计。
那什么才是真正的响应式设计？马科特说，真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。
那什么才是真正的响应式设计？马科特说，真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。
优势
- 开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、 不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上， 相对多个版本，能节约成本。
- 兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题， 但是响应式Web设计可以提前预防这个问题。
- 操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。
- 兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题， 但是响应式Web设计可以提前预防这个问题。
- 操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。
媒体查询
媒体类型
主要内容
all
所有设备
screen
用于电脑屏幕、平板、手机等
print
用于打印机和打印预览
写法
/*媒体查询 满足某种条件*/
@media print {
h1 {
font-size: 100px;
color: red;
}
}
@media print {
h1 {
font-size: 100px;
color: red;
}
}
媒体特性
主要内容
orientation
设备使用方向
landscape
水平方向
portrait
垂直方向
width
视口宽度
/*指定某个宽度*/
/*视口宽度 是 800px像素*/
@media (width:800px) {
h1 {
color: red;
background: #54ABD4;
}
}
/*视口宽度 是 800px像素*/
@media (width:800px) {
h1 {
color: red;
background: #54ABD4;
}
}
/*设置范围， 设置小于600px*/
/* 最大宽度是600px 小于等于600px*/
@media (max-width: 600px) {
h1 {
font-size: 100px;
color: red;
}
}
/* 最大宽度是600px 小于等于600px*/
@media (max-width: 600px) {
h1 {
font-size: 100px;
color: red;
}
}
/*设置范围 大于等于 1000px*/
@media (min-width: 1000px) {
h1 {
font-size: 200px;
color: yellow;
}
}
@media (min-width: 1000px) {
h1 {
font-size: 200px;
color: yellow;
}
}
运算符
且
and
/* 大于等于600 并且 小于等于 1000px*/
@media (min-width: 600px) and (max-width:1000px) {
h1 {
font-size: 100px;
color: red;
background: #333333;
}
}
@media (min-width: 600px) and (max-width:1000px) {
h1 {
font-size: 100px;
color: red;
background: #333333;
}
}
或
,
/*小于等于 400 或者 大于等于 1100*/
@media (max-width: 400px),(min-width: 1100px) {
body {
background: pink;
}
h1 {
}
ul {
}
}
@media (max-width: 400px),(min-width: 1100px) {
body {
background: pink;
}
h1 {
}
ul {
}
}
非
not
/*not 配合媒体类型来做*/
/*不是屏幕*/
@media not screen {
}
/*不是屏幕*/
@media not screen {
}
媒体查询用法
<!-- 第一种用法 link可以指定media属性， 加载不同的css-->
<link rel="stylesheet" href="normal.css">
<link rel="stylesheet" href="mobile.css" media="(max-width:640px)">
<link rel="stylesheet" href="normal.css">
<link rel="stylesheet" href="mobile.css" media="(max-width:640px)">
<style>
/*第二种 在imort 导入css的后面 跟上 媒体类型 不建议使用*/
/*import url('style.css') print;*/
/*推荐 第三种 @media*/
@media screen and (max-width: 640px) {
}
</style>
/*第二种 在imort 导入css的后面 跟上 媒体类型 不建议使用*/
/*import url('style.css') print;*/
/*推荐 第三种 @media*/
@media screen and (max-width: 640px) {
}
</style>
断点设置
常用设置一，三个断点
768px
小于768px，超小屏幕，手机
992px
大于768小于992px，小屏幕，平板
1200px
大于992px小于1200px，中等屏幕
大于1200px大屏幕
常用设置二，四个断点
576px
小于572，超小屏幕
768px
577-768，小屏幕
992px
769-992，中等屏幕
1200px
993-1200，大屏幕
>1200，超大屏幕
推荐设置三，两个断点
640px
<=640px，小屏幕
1024px
641-1024，中等屏幕
>1024，大屏幕
端优先
移动优先
* {
margin:0;
padding:0;
}
/*默认设置的样式 是移动端的样式*/
.container {
margin: 0 auto;
width: 100%; /*移动设备 宽度是100% < 768px*/
height: 300px;
background: #54ABD4;
}
/*当宽度 >=768px 的时候*/
/*作用f范围 768~991 */
@media screen and (min-width: 768px){
.container {
width: 750px;
}
}
/*当宽度 >=992 的时候*/
/* 992 ~ 1199*/
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/*当屏幕 》= 1200px*/
/*作用范围： >= 1200*/
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
margin:0;
padding:0;
}
/*默认设置的样式 是移动端的样式*/
.container {
margin: 0 auto;
width: 100%; /*移动设备 宽度是100% < 768px*/
height: 300px;
background: #54ABD4;
}
/*当宽度 >=768px 的时候*/
/*作用f范围 768~991 */
@media screen and (min-width: 768px){
.container {
width: 750px;
}
}
/*当宽度 >=992 的时候*/
/* 992 ~ 1199*/
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/*当屏幕 》= 1200px*/
/*作用范围： >= 1200*/
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
PC优先
* {
margin:0;
padding:0;
}
/*默人最大视口宽度的演示 > 1200*/
.container {
margin: 0 auto;
width: 1170px;
height: 300px;
background: #54ABD4;
}
/*当宽度 <= 1200的时候*/
/* 作用于 993 ~ 1200 */
@media screen and (max-width: 1200px) {
.container {
width: 970px;
}
}
/*当宽度 <= 992的时候*/
/* 769 ~ 992 */
@media screen and (max-width: 992px) {
.container {
width: 750px;
}
}
/*当宽度 <= 768的时候*/
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
margin:0;
padding:0;
}
/*默人最大视口宽度的演示 > 1200*/
.container {
margin: 0 auto;
width: 1170px;
height: 300px;
background: #54ABD4;
}
/*当宽度 <= 1200的时候*/
/* 作用于 993 ~ 1200 */
@media screen and (max-width: 1200px) {
.container {
width: 970px;
}
}
/*当宽度 <= 992的时候*/
/* 769 ~ 992 */
@media screen and (max-width: 992px) {
.container {
width: 750px;
}
}
/*当宽度 <= 768的时候*/
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
CSS预处理器
为什么用？
CSS语法不够强大，无法嵌套书写，导致模块化开发中需要书写很多重复的选择器
没有变量和合理的样式复用机制，逻辑上相关的属性值必须以字面量的形式重复输出，难以维护
CSS预处理器提供CSS缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性
主流的CSS预处理器
Less
编译
js编译
<style type="text/less">
// 定义变量
@width: 400px;
@height: 300px;
@color: #888;
#box {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
border: 2px solid @color;
}
</style>
<script src="js/less.js"></script>
// 定义变量
@width: 400px;
@height: 300px;
@color: #888;
#box {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
border: 2px solid @color;
}
</style>
<script src="js/less.js"></script>
考拉koala编译
index.less写入
// 定义变量
@width: 500px;
@height: 300px;
@color: #f90;
#box {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
border: 2px solid @color;
}
@width: 500px;
@height: 300px;
@color: #f90;
#box {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
border: 2px solid @color;
}
命令行编译
安装
npm install less -g
使用
lessc bootstrap.less bootstrap.css
注释
/*css 的注释 变成成css的时候，这个注释还在*/
// less 的注释 编译成css的时候，没了
变量
用途
当css属性值
//把 less 变量当 css属性的值
width: @len;
width: @len;
当属性名
// less变量作为属性名的时候 @{变量名}
@{bg}: @basecolor;
@{bg}: @basecolor;
当选择器
// less 变量当做选择器的时候 @{变量}
#@{activeclass} {
width: 100px;
height: 100px;
}
#@{activeclass} {
width: 100px;
height: 100px;
}
变量作用域
/*
less 变量的作用域
第一步： 使用变量，在本作用域里找, 找到了， 使用最后面的定义
第二步： 本作用域找不到，去上级作用域找
*/
less 变量的作用域
第一步： 使用变量，在本作用域里找, 找到了， 使用最后面的定义
第二步： 本作用域找不到，去上级作用域找
*/
// less 的作用域
@var: 100px;
#box {
@var:20px;
.inner {
@var: 50px;
width: @var; /*60*/
background-color: #ccc;
@var: 60px;
li {
background: red;
}
}
width: @var; /*20*/
}
.list {
height: @var; /*100*/
}
@var: 100px;
#box {
@var:20px;
.inner {
@var: 50px;
width: @var; /*60*/
background-color: #ccc;
@var: 60px;
li {
background: red;
}
}
width: @var; /*20*/
}
.list {
height: @var; /*100*/
}
混合mixins
定义
类似于JavaScript的函数，可反复调用
类别
普通混合
// 普通混合 跟 类选择器一样
.center-box01 {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 300px;
margin-left: -200px;
margin-top: -150px;
background-color: #ccc;
}
.box01 {
border: 1px solid #999;
text-align:center;
// 调用混合
.center-box01();
}
.center-box01 {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 300px;
margin-left: -200px;
margin-top: -150px;
background-color: #ccc;
}
.box01 {
border: 1px solid #999;
text-align:center;
// 调用混合
.center-box01();
}
不带输出的混合
//不带输出的混合 编译后css里不会输出
.center-box02() {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 300px;
margin-left: -200px;
margin-top: -150px;
background-color: #ccc;
}
.box02 {
// 调用混合
.center-box02();
border:1px solid #ccc;
}
.list {
// 调用不带参数的混合， 可以省略 ()
.center-box02;
}
.center-box02() {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 300px;
margin-left: -200px;
margin-top: -150px;
background-color: #ccc;
}
.box02 {
// 调用混合
.center-box02();
border:1px solid #ccc;
}
.list {
// 调用不带参数的混合， 可以省略 ()
.center-box02;
}
带参数的混合
// 带参数的混合
.center-box03(@width, @height, @bgcolor) {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
background-color: @bgcolor;
}
.box03 {
//.center-box03(600px, 200px, red);
.center-box03(1000px, 500px, #369);
}
.center-box03(@width, @height, @bgcolor) {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
background-color: @bgcolor;
}
.box03 {
//.center-box03(600px, 200px, red);
.center-box03(1000px, 500px, #369);
}
带默认参数值的混合
// 混合 参数默认值 有默认值的参数放在后面
.center-box04(@width, @height:100px, @bgcolor: gray) {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
background-color: @bgcolor;
}
.box04 {
.center-box04(200px, 100px);
//.center-box04(200px, 100px, red);
//.center-box04(800px);
}
.center-box04(@width, @height:100px, @bgcolor: gray) {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
background-color: @bgcolor;
}
.box04 {
.center-box04(200px, 100px);
//.center-box04(200px, 100px, red);
//.center-box04(800px);
}
// 参数默认值，
.center-box05(@width:1000px, @height, @bgcolor) {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
background-color: @bgcolor;
}
.box05 {
//.center-box05(400px, 300px, green);
// 调用混合的时候，指定哪个值给哪个参数 无所谓顺序 要指定全指定
//.center-box05(@height:500px, @bgcolor:red);
.center-box05(@bgcolor:blue, @height:500px, @width:400px);
}
.center-box05(@width:1000px, @height, @bgcolor) {
position: absolute;
left: 50%;
top: 50%;
width: @width;
height: @height;
margin-left: -@width/2;
margin-top: -@height/2;
background-color: @bgcolor;
}
.box05 {
//.center-box05(400px, 300px, green);
// 调用混合的时候，指定哪个值给哪个参数 无所谓顺序 要指定全指定
//.center-box05(@height:500px, @bgcolor:red);
.center-box05(@bgcolor:blue, @height:500px, @width:400px);
}
@arguments获取所有实参
/*
transition: 1s width,height linear 1s
*/
// @arguments 获取所有的实参
.transition(@duration, @property:all, @timing-function:linear, @delay:0s) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
transition: @arguments;
}
.box06 {
//.transition(2s);
//.transition(2s, width);
.transition(2s, width, ease, 1s);
}
.box06 {
// 参数之间除了用逗号隔开也可以用分号
// 一般用逗号， 某个参数的值里面包含逗号，用分号去隔开参数
.transition(2s; width,height; ease; 1s);
}
transition: 1s width,height linear 1s
*/
// @arguments 获取所有的实参
.transition(@duration, @property:all, @timing-function:linear, @delay:0s) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
transition: @arguments;
}
.box06 {
//.transition(2s);
//.transition(2s, width);
.transition(2s, width, ease, 1s);
}
.box06 {
// 参数之间除了用逗号隔开也可以用分号
// 一般用逗号， 某个参数的值里面包含逗号，用分号去隔开参数
.transition(2s; width,height; ease; 1s);
}
条件判断
配合mixins使用
// 条件判断
.arrow-set(@width:5px) {
width: 0;
height: 0;
overflow: hidden;
border-style: solid;
border-width: @width;
}
.arrow(@direction, @width:5px, @color:#000) when (@direction=up){
.arrow-set(@width);
border-color: transparent transparent @color transparent;
}
.arrow(@direction, @width:5px, @color:#000) when (@direction=down){
.arrow-set(@width);
border-color:@color transparent transparent transparent;
}
.arrow(@direction, @width:5px, @color:#000) when (@direction=left){
.arrow-set(@width);
border-color:transparent @color transparent transparent;
}
.arrow(@direction, @width:5px, @color:#000) when (@direction=right){
.arrow-set(@width);
border-color:transparent transparent transparent @color ;
}
// 调用 混合
.box {
//.arrow(up, 100px);
//.arrow(down, 100px);
//.arrow(left, 100px);
.arrow(right, 100px, red);
}
.arrow-set(@width:5px) {
width: 0;
height: 0;
overflow: hidden;
border-style: solid;
border-width: @width;
}
.arrow(@direction, @width:5px, @color:#000) when (@direction=up){
.arrow-set(@width);
border-color: transparent transparent @color transparent;
}
.arrow(@direction, @width:5px, @color:#000) when (@direction=down){
.arrow-set(@width);
border-color:@color transparent transparent transparent;
}
.arrow(@direction, @width:5px, @color:#000) when (@direction=left){
.arrow-set(@width);
border-color:transparent @color transparent transparent;
}
.arrow(@direction, @width:5px, @color:#000) when (@direction=right){
.arrow-set(@width);
border-color:transparent transparent transparent @color ;
}
// 调用 混合
.box {
//.arrow(up, 100px);
//.arrow(down, 100px);
//.arrow(left, 100px);
.arrow(right, 100px, red);
}
导入
// 导入混合 如果导入的是less文件，可以省略 后缀
@import "mixins/mixins";
@import "variables";
@import "base";
@import "mixins/mixins";
@import "variables";
@import "base";
// css 语法， 直接输出到 css
@import "style.css";
@import "style.css";
嵌套
操作符
less内置函数
map
Sass
Stylus
0 条评论
下一页
