HTML52020-12-30演讲人目录01.02.新增标签表单新属性04.03.响应式布局H5兼容性解决方案06.05.CanvasCSS
预处理器08.07.音频、视频元素拖拽新增标签01新增标签语义化结构标签其他新增标签新增标签语义化结构标签headerfooter
navmainsectionarticle新增标签语义化结构标签asidehgroupheader页眉footer页脚nav主导航
main文档的主要内容，（whatwg没有语义，IE不支持）section页面中的一节或文章中的一段，通常带有标题article定
义文章、博客、帖子、评论等aside定义侧边栏hgroup包裹连续的标题，如文章主标题和副标题的组合（w3c将其删除）新增标签其他
新增标签ABCDE状态列表注释标记图像meter含义属性样式meter含义表示状态，电池、温度meter属性valuemaxmin
highlowoptimummeter样式meter{width:400px;height:30px;}me
ter::-webkit-meter-bar{/可以设置总体边框，空白区域背景等/backgroud:
#fff;border:1pxsolid#ccc;}meter::-webkit-meter-optimum-va
lue{/设置最优值范围内的样式/}meter::-webkit-meter-suboptimum-value
{/凑合范围内的样式/}meter::-webkit-meter-even-less-good-value{
/糟糕范围内的样式/}progress样式含义属性030102进度条valuemaxprogress{
width:400px;height:30px;border:1pxsolid#ccc;}progr
ess::-webkit-progress-bar{background:#fff;}progress::-webk
it-progress-value{background:green;}列表datalist百度搜索框，下面的输入提
示列表datalist<inputtype=\\\\\\\"text\\\\\\\"list=\\\\\\\"searc
hOption\\\\\\\"><datalistid=\\\\\\\"searchOption\\\\\\\"&
gt;<optionvalue=\\\\\\\"a\\\\\\\"></option><optio
nvalue=\\\\\\\"ab\\\\\\\"></option><optionvalue=\\\
\\\\"abc\\\\\\\"></option><optionvalue=\\\\\\\"abcd\
\\\\\\"></option><optionvalue=\\\\\\\"aaa\\\\\\\">
;</option><optionvalue=\\\\\\\"acc\\\\\\\"></op列表
datalisttion><optionvalue=\\\\\\\"bcc\\\\\\\"></opti
on><optionvalue=\\\\\\\"cdd\\\\\\\"></option><
;/datalist>details属性<detailsopen><summary>大前端<
/summary><p>HTML5</p>展开内容open注释ruby<ruby>魑
<rt>chi</rt></ruby><ruby>魅<rt>mei
</rt></ruby>文字上带拼音文字涂色，搜索结果标记关键字样式背景色、字体mark{
background:red;}markLoremipsum<mark>do
lorsit</mark>amet,图像figure2010102文章内的插图，独立的内容<figure&
gt;<!--插图--><imgsrc=\"images/trump.jpg\"alt=\"\">&
lt;figcaption>美国总统</figcaption><!--配图说明--></f
igure>表单新属性02表单新属性form表单控件（input、textarea、select...）form元素inpu
ttype新增值placeholder提示显示required必填，无需设置值autofoucs闪烁焦点的输入框，无需设置值au
tocomplete自动完成，提示以前输入过的内容，值可设置为off/onpattern写正则表达式，表单验证表单新属性form元
素novalidatenovalidate不进行校验，不用填值表单新属性inputtype新增值010203emailurlnu
mber040506searchtelrange表单新属性inputtype新增值colordatemonthABCweekti
medatetime-localDEFemail必须含@，并@的前后都有内容url必须以http开头参数minstep步长最小值，
闭区间max最大值，闭区间search搜索框，无特殊功能tel电话号码，pc端无特殊功能，移动端会弹出数字键盘range范围，默认
0-100参数minmaxstepcolor颜色，bgr格式date日期month年月week星期，第几周：2019-W25ti
me时间：23:20datetime-local日期时间H5兼容性解决方案03H5兼容性解决方案设置meta<!--设置I
E总是使用最新的文档模式进行渲染--><metahttp-equiv=\"X-UA-Compatible\"con
tent=\"IE=Edge\"><!--优先使用webkit(Chromium)内核进行渲染,针对360
等壳浏览器--><metaname=\"renderer\"content=\"webkit\">H5兼容性
解决方案创建元素H5兼容性解决方案直接调用html5shiv.js<!--[ifltIE9]><scri
ptsrc=\"js/html5shiv.min.js\"></script><![endif]--&g
t;响应式布局04响应式布局定义优势媒体查询断点设置端优先响应式布局定义伊桑·马科特（EthanMarcotte）在2010年
首先提出了响应式网页设计（RWD,ResponsiveWebDesign）这个术语。在他的一篇文章《ResponsiveWe
bDesign·AnAListApartArticle》中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体
查询）进行了整合，命名为响应式网页设计。那什么才是真正的响应式设计？马科特说，真正的响应式设计方法不仅仅是根据可视区域大小而
改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。响应式布局优势-开发、维
护、运营成本优势：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版
本，能节约成本。-兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往
往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。-操作灵活：响应式
设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。响应式布局媒体查询010203媒体类型媒体特性媒体查询用法主要内
容allprint所有设备用于打印机和打印预览312screen用于电脑屏幕、平板、手机等媒体类型写法/媒体查询满足某种条件
/@mediaprint{h1{font-si
ze:100px;color:red;}}主要内
容orientation设备使用方向主要内容orientationlandscape主要内容orientationportrait
主要内容width视口宽度主要内容width/指定某个宽度//视口宽度是800px像素/
@media(width:800px){h1{color:
red;background:#54ABD4;}
}主要内容width/设置范围，设置小于600px//最大宽度是600px小于等于600px/
@media(max-width:600px){h1{
font-size:100px;color:red;}
}主要内容width/设置范围大于等于1000px/@media(min-width:
1000px){h1{font-size:200px;
color:yellow;}}运算符且and/大于等于
600并且小于等于1000px/@media(min-width:600px)and(max-w
idth:1000px){h1{font-size:100px;
color:red;background:#333333;
}}运算符非或not/not配合媒体类型来做//不是屏幕
/@medianotscreen{},/小于等于400或者大于等于11
00/@media(max-width:400px),(min-width:1100px){
body{background:pink;}
h1{}ul{}
}媒体查询用法<!--第一种用法link可以指定media属性，加载不同的css--><lin
krel=\"stylesheet\"href=\"normal.css\"><linkrel=\"styles
heet\"href=\"mobile.css\"media=\"(max-width:640px)\">媒体查询用法&
lt;style>/第二种在imort导入css的后面跟上媒体类型不建议使用/
/importurl(''style.css'')print;//推荐第三种@media
/@mediascreenand(max-width:640px){}</
style>响应式布局断点设置推荐设置三，两个断点常用设置一，三个断点常用设置二，四个断点常用设置一，三个断点768px12
00px小于768px，超小屏幕，手机大于992px小于1200px，中等屏幕大于1200px大屏幕312992px大于768小于
992px，小屏幕，平板常用设置二，四个断点576px992px小于572，超小屏幕769-992，中等屏幕3124768px12
00px577-768，小屏幕993-1200，大屏幕>1200，超大屏幕推荐设置三，两个断点640px<=640p
x，小屏幕1024px641-1024，中等屏幕>1024，大屏幕响应式布局端优先移动优先PC优先移动优先{
margin:0;padding:0;}/默认设置
的样式是移动端的样式/.container{margin:0auto;
width:100%;/移动设备宽度是100%<768px/
height:300px;background:#54ABD4;}
/当宽度>=768px的时候//作用f范围768~991/@me
diascreenand(min-width:768px){.移动优先container{
width:750px;}}/当
宽度>=992的时候//992~1199/@mediascreena
nd(min-width:992px){.container{
width:970px;}}/当屏幕》=1200px/
/作用范围：>=1200/@mediascreenand(min-width
:1200px){.移动优先container{width:1
170px;}PC优先{margin:0;pad
ding:0;}/默人最大视口宽度的演示>1200/.cont
ainer{margin:0auto;width:1170px;
height:300px;background:#54ABD4;
}/当宽度<=1200的时候//作用于993~1200/
@mediascreenand(max-width:1200px){.PC优先co
ntainer{width:970px;}}
/当宽度<=992的时候//769~992/@me
diascreenand(max-width:992px){.container{
width:750px;}}/当宽度
<=768的时候/@mediascreenand(max-width:768px){
.PC优先container{width:100%;
}}CSS预处理器05CSS预处理器为什么用？主流的CSS预处理器CSS预处理器为什么用？CSS语法不够强
大，无法嵌套书写，导致模块化开发中需要书写很多重复的选择器9,300Million单击此处添加标题没有变量和合理的样式复用机制，
逻辑上相关的属性值必须以字面量的形式重复输出，难以维护单击此处输入你的正文，文字是您思想的提炼，为了最终演示发布的良好效果，请尽量
言简意赅的阐述观点；根据需要可酌情增减文字，以便观者可以准确理解您所传达的信息。CSS预处理器提供CSS缺失的样式层复用机制，减少
冗余代码，提高样式代码的可维护性CSS预处理器主流的CSS预处理器ABCLessSassStylus编译js编译编译考拉koala
编译命令行编译安装使用index.less写入Less注释02//less的注释编译成css的时候，没了01/css的
注释变成成css的时候，这个注释还在/变量用途当css属性值当属性名当选择器变量作用域/less变量的作用域第一
步：使用变量，在本作用域里找,找到了，使用最后面的定义第二步：本作用域找不到，去上级作用域找///less的作用
域@var:100px;#box{@var:20px;.inner{@var:50px;
width:@var;/60/background-color:#ccc;@var:60px
;li{background:red;}}width:@var;/2
0/}.list{height:@var;/100/}混合mixins定义类似于JavaScript的
函数，可反复调用类别普通混合不带输出的混合带参数的混合带默认参数值的混合@arguments获取所有实参Less条件判断配合mi
xins使用Less条件判断//条件判断.arrow-set(@width:5px){width:0;hei
ght:0;overflow:hidden;border-style:solid;border-width
:@width;}.arrow(@direction,@width:5px,@color:#000)when(@d
irection=up){.arrow-set(@width);border-color:transparentt
ransparent@colortransparent;}.arrow(@direction,@width:5px,
@color:#000)when(@direction=down){.Less条件判断arrow-set(@width)
;border-color:@colortransparenttransparenttransparent;}.
arrow(@direction,@width:5px,@color:#000)when(@direction=left){.arrow-set(@width);border-color:transparent@colortransparenttransparent;}.arrow(@direction,@width:5px,@color:#000)when(@direction=right){.arrow-set(@width);border-color:transparenttransparenttransparent@color;}//调用混合.Less条件判断box{//.arrow(up,100px);//.arrow(down,100Less导入成功//导入混合如果导入的是less文件，可以省略后缀@import\"mixins/mixins\";@import\"variables\";@import\"base\";//css语法，直接输出到css@import\"style.css\";Less嵌套Less操作符Lessless内置函数LessmapCanvas06Canvas元素拖拽07元素拖拽音频、视频08音频、视频感谢聆听 |
|
