首页  思维导图  详情

HTML5知识框架总结分享

2022-10-13 10:37:24   0  举报





AI智能生成

为你推荐

查看更多



HTML5

Html5

HTML5

第十六章 HTML5脚本编程

Html5

第十六章 HTML5脚本编程

HTML学习笔记知识框架总结分享

HTML5

HTML5知识框架总结分享

HTML5

作者其他创作

大纲/内容

Canvas

元素拖拽

音频、视频

页眉

header

页脚

footer

主导航

nav

文档的主要内容，（whatwg没有语义，IE不支持）

main

页面中的一节或文章中的一段，通常带有标题

section

定义文章、博客、帖子、评论等

article

定义侧边栏

aside

包裹连续的标题，如文章主标题和副标题的组合（w3c将其删除）

hgroup

语义化结构标签

表示状态，电池、温度

含义

值，默认最大值是1

value

最高值

max

最低值

min

较高预警阈值

high

较低预警阈值

low

optimum

属性

meter{     width:400px;     height:30px; }

meter::-webkit-meter-bar{     /* 可以设置总体边框，空白区域背景等 */     backgroud:#fff;     border:1px solid #ccc; }

meter::-webkit-meter-optimum-value{     /* 设置最优值范围内的样式 */ }

meter::-webkit-meter-suboptimum-value{     /* 凑合范围内的样式 */ }

meter::-webkit-meter-even-less-good-value{     /* 糟糕范围内的样式 */ }

样式

meter

进度条

最大值

progress{     width:400px;     height:30px;     border:1px solid #ccc; }

progress::-webkit-progress-bar{     background: #fff; }

progress::-webkit-progress-value{     background: green; }

progress

状态

百度搜索框，下面的输入提示

datalist

展开内容

<details open> <summary>大前端</summary> HTML5 CSS3 JavaScript </details>

open

details

列表

文字上带拼音

ruby

注释

文字涂色，搜索结果标记关键字

背景色、字体

mark { background: red; }

mark

标记

文章内的插图，独立的内容

figure

图像

其他新增标签

新增标签

提示显示

placeholder

必填，无需设置值

required

闪烁焦点的输入框，无需设置值

autofoucs

自动完成，提示以前输入过的内容，值可设置为off/on

autocomplete

写正则表达式，表单验证

pattern

form表单控件（input、textarea、select...）

不进行校验，不用填值

novalidate

form元素

必须含@，并@的前后都有内容

必须以http开头

url

最小值，闭区间

最大值，闭区间

步长

step

参数

number

搜索框，无特殊功能

电话号码，pc端无特殊功能，移动端会弹出数字键盘

tel

范围，默认0-100

range

颜色，bgr格式

color

日期

date

年月

month

星期，第几周：2019-W25

week

时间：23:20

time

日期时间

datetime-local

input type新增值

表单新属性

设置meta

js放在前面

创建元素

直接调用html5shiv.js

H5兼容性解决方案

定义

- 开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。 - 兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。 - 操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

优势

所有设备

all

用于电脑屏幕、平板、手机等

screen

用于打印机和打印预览

主要内容

/*媒体查询满足某种条件*/ @media print { h1 { font-size: 100px; color: red; } }

写法

媒体类型

设备使用方向

水平方向

landscape

垂直方向

portrait

orientation

视口宽度

/*指定某个宽度*/ /*视口宽度是 800px像素*/ @media (width:800px) { h1 { color: red; background: #54ABD4; } }

/*设置范围，设置小于600px*/ /* 最大宽度是600px 小于等于600px*/ @media (max-width: 600px) { h1 { font-size: 100px; color: red; } }

/*设置范围大于等于 1000px*/ @media (min-width: 1000px) { h1 { font-size: 200px; color: yellow; } }

width

and

/* 大于等于600 并且小于等于 1000px*/ @media (min-width: 600px) and (max-width:1000px) { h1 { font-size: 100px; color: red; background: #333333; } }

且

或

not

/*not 配合媒体类型来做*/ /*不是屏幕*/ @media not screen { }

非

运算符

媒体特性

<link rel="stylesheet" href="normal.css"> <link rel="stylesheet" href="mobile.css" media="(max-width:640px)">

媒体查询用法

媒体查询

小于768px，超小屏幕，手机

768px

大于768小于992px，小屏幕，平板

992px

大于992px小于1200px，中等屏幕

大于1200px大屏幕

1200px

常用设置一，三个断点

小于572，超小屏幕

576px

577-768，小屏幕

769-992，中等屏幕

993-1200，大屏幕

>1200，超大屏幕

常用设置二，四个断点

<=640px，小屏幕

640px

641-1024，中等屏幕

>1024，大屏幕

1024px

推荐设置三，两个断点

断点设置

* { 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; } /*默人最大视口宽度的演示 > 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%; } }

PC优先

端优先

响应式布局

CSS语法不够强大，无法嵌套书写，导致模块化开发中需要书写很多重复的选择器

没有变量和合理的样式复用机制，逻辑上相关的属性值必须以字面量的形式重复输出，难以维护

CSS预处理器提供CSS缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性

为什么用？

js编译

// 定义变量 @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; }

index.less写入

考拉koala编译

npm install less -g

安装

lessc bootstrap.less bootstrap.css

使用

命令行编译

编译

/*css 的注释变成成css的时候，这个注释还在*/

// less 的注释编译成css的时候，没了

//把 less 变量当 css属性的值 width: @len;

当css属性值

// less变量作为属性名的时候 @{变量名} @{bg}: @basecolor;

当属性名

// less 变量当做选择器的时候 @{变量} #@{activeclass} { width: 100px; height: 100px; }

当选择器

用途

// 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*/ }

变量作用域

变量

类似于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(); }

普通混合

//不带输出的混合编译后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; }

不带输出的混合

带参数的混合

带默认参数值的混合

@arguments获取所有实参

类别

混合mixins

配合mixins使用

条件判断

// 导入混合如果导入的是less文件，可以省略后缀 @import "mixins/mixins"; @import "variables"; @import "base";

// css 语法，直接输出到 css @import "style.css";

导入

嵌套