html5上
1.underscore函数库:
jQuery函数库经常用来操作DOM,熟称’DOM之王‘;underscore为’算法之王‘,封装了很多常用算法
(官方手册)https://underscorejs.net/
最好使用生产版,占用更少的空间
注意:js属于脚本语言,不能独立执行,务必需要嵌套在静态网页中才可执行
underscore对外暴露的是一个下划线函数_
常用函数:
random():该函数使用时需要传入参数
<script>
console.log(_);
console.log(_.random(10,30));
</script>
max():求最大值,传入一个数组
2.jQueryUI函数库
jQueryUI也是一个JS函数库,它依赖JQ。可以轻松实现一些网页效果(拖拽,折叠等)。
(官方文档)https://www.jqueryui.org.cn/
(jquery源码2版本比较稳定)https://www.jq22.com/jquery-info122
3.html5
概述:超文本标记语言,数字5表示是超文本标记语言的第五次重大修改
- 新的骨架,新的骨架下属性的属性值可不加双引号
- 新增许多语义化标签:header,footer,main等
- 新增多媒体功能【音频,视频】
- 新增画布【canvas】,可实现一些小游戏
- 新增背景系列样式,选择器
- 新增存储功能
- 新增移动端开发
4.html5兼容问题
超文本标记语言的第五次重大修改中,新增的知识点一共555个,不同的浏览器厂商对新增的知识点兼容情况各不相同
查询不同浏览器厂商兼容个数:https://html5test.com/results/desktop/html
查询某一个知识点的兼容情况:https://caniuse.com/
————————————————————————————————————————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————————————————————————————————————
6.新增标签详解
-
新增布局标签
在超文本标记语言的第五次重大修改中,又新增了7个布局标签,均为容器级双标签。使用方法与div同
header:头部, footer:底部,main:主要的,nav:导航,aside:侧边栏,section:段落,article:文章
这些方法都可以使用div代替;不过浏览器底层解析这些标签时速度更加快速 -
小语义化标签
address:在网站中可以利用这个标签显示地址;address标签的文本无非是倾斜了。同样可用div代替
地图生成器网址:http://api.map.baidu.com/mapCard/
<address>
<iframe width="504" height="821" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/s/IbgHFb"></iframe>
</address>
bdo:可以设置文本方向,常用属性’dir‘,常用属性值为’ltr‘和’rtl‘
cite:引用,在网站中引用名人名言时可用
<p>
床前明月光,疑是地上霜
<cite>李白</cite>
</p>
效果如下:
code:网站中要显示代码,可用code标签显示
details:该标签需结合summary一起使用,主要作用时解释,阐述一些名词
<details>
<summary>长城</summary>
<p>长城修筑的历史可上溯到西周时期,发生在首都镐京(今陕西西安)的著名典故“烽火戏诸侯”就源于此 [1-6] 。春秋战国时期列国争霸,互相防守,长城修筑进入第一个高潮,但此时修筑的长度都比较短。秦灭六国统一天下后,秦始皇连接和修缮战国长城,始有万里长城之称 [6] 。明朝是最后一个大修长城的朝代,今天人们所看到的长城多是此时修筑。</p>
</details>
效果如下:
pre:文本怎么写,标签就怎么显示,包括空格和换行
<pre>送你一 朵小
红花</pre>
ruby:经常结合rt标签一起使用,可给汉语加上拼音
<ruby>
你<rt>ni</rt>
好<rt>hao</rt>
啊<rt>a</rt>
</ruby>
template:在Vue框架中经常出现,该标签内嵌的子元素都不会在网页中显示
新增表单元素:
即input标签的type属性新增了属性值
- range:范围选择,属性min和max分别用来设置范围条的极限值
color:颜色选择
data:日历选择(年月日)
week:(年月周)
time:(小时)
email:邮箱,输入内容不符合邮箱格式时会有提示
url:输入,输入内容不符时提示
search:相比文本框,多了’x‘
number:计数器,step属性用来设置每一次累加个数,默认是一
<form >
<p>
你的身高:<input type="range">
</p>
<p>
喜欢的颜色:<input type="color">
</p>
<p>
日历选择:<input type="data">
</p>
<p>
周选择:<input type="week">
</p>
<p>
小时:<input type="time">
</p>
<p>
邮箱:<input type="email">
</p>
<p>
网址:<input type="url">
</p>
<p>
搜索:<input type="search">
</p>
<p>
计数器:<input type="number">
</p>
</form>
表单元素新增属性
placeholder:占位符,一般结合文本框使用,在用户输入文字后就消失
<p>
<input type="text" placeholder='输入姓名'>
</p>
disabled:使表单元素不可使用
<form >
<p>
<input type="text" disabled>
</p>
<p>
<input type="range" disabled>
</p>
<p>
<input type="checkbox" disabled>
</p>
</form>
autofocus:自动聚焦,常和文本框结合使用
<form >
<p>
<input type="text" autofocus>
</p>
<p>
<input type="range" disabled>
</p>
</form>
readonly:只读,经常结合表单元素文本框使用,实现文本框只读
<form >
<p>
<input type="text" readonly value="我只可读">
</p>
</form>
label:该标签经常结合表单元素一起使用,一边是单选或复选框,实现选中文字的时候可以选中或取消选中
<form >
<label>
<input type="checkbox">吃饭
</label>
</form>
datalist:实现下拉效果,注意input标签的list属性值和datalist的id值必须一致
<form >
<input type="text" list='box'>
<datalist id='box'>
<option>JS</option>
<option>Vue</option>
</datalist>
</form>