html
声明
是标准通用标记语言的文档类型声明,因为网络上文件的类型不一,所以须要正确声明 HTML 版本,以使得浏览器可以正确识别并显示网页内容。
doctype声明不区分大小写,如下形式皆可javascript
有表明性的声明php
HTML5时期
HTML 4.01 时期
/p>
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 时期
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html5新特性
语义化标签css
语义化标签是为了让代码看起来更见名知义,语义清晰,本质上只是一个普通的div。html
标签
语义
header
头部
footer
尾部
section
区段
article
文章
nav
导航
aside
侧边栏
main
文章主体内容
figure
独立的流内容(图像、图表、照片、代码等等)
hgroup
对网页或区段(section)的标题进行组合
details/summary
标签用于描述文档或文档某个部分的细节
mark
突出显示部分文本
在一个文档中,不能出现一个以上的 main元素,且main不能是如下元素的后代:article/aside/footer/header/nav前端
最后4个用的可能少一些,这里补充说明一下html5
avatar
hgroup能够拆开理解,h是标题的语义,group是组合,hgroup天然就是对标题进行组合
前端
HTML
默认关闭子项,点击展开,再点击收起
详情
hello world
hello girl
这是突出显示的部分
表单的丰富
部分属性须要在form标签包裹下才会生效java
常规node
邮箱:
输入框:
电话:
网址:
数量:
请输入商品名称:
范围:
颜色:
时间:
日期:
日期时间:
日期时间:
月份:
星期:
默认为true的属性python
新增datalist标签jquery
不一样浏览器表现会有些许差别,感兴趣的能够试试
编程语言:
新增meter标签
不一样浏览器显示有差别
新增fieldset和legend标签
冷月心我的信息
新增progress标签
form表单提交按钮属性
formaction 指定提交按钮的地址
formtarget 相似a标签的target
formmethod 指定表单提交方式
formenctype 表单提交时的编码格式
application/x-www-form-urlencoded
在发送前对全部字符进行编码(默认)。
multipart/form-data
不对字符编码。当使用有文件上传控件的表单时,该值是必需的。
text/plain
将空格转换为 “+” 符号,但不编码特殊字符。
其余
control 属性,在lable标签内部放置一个表单元素,并经过该属性来访问该表单的属性
autocomplete,控制表单提交后是否生成历史记录 on|off
自定义属性规范
小写,非纯数字,不含特殊字符
data开头,data-后必须至少有一个字符,多个单词使用-链接
示例: data-name, data-project-name
自定义属性//必须驼峰法取值
console.log(p.dataset["userName"]);//冷月心
拖放
draggable设置元素是否可拖放,img标签默认为true
ondragstart 开始拖放事件监听,存储数据
ondrop 放下事件,获取ondragstart 时存储的数据并添加到目标元素
ondragover 拖动结束事件,用于清除默认行为,不然没法实现拖放
网页资源拖放
html5拖放float: left;
width: 300px;
height: 300px;
border: 1px solid #aaa;
margin: 10px;
}
拖拽图片至div
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("img", ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(data));
}
本地资源拖放
html5拖放拖拽本地图片至当前页面
ev.preventDefault();
}
document.ondrop = function (ev) {
ev.preventDefault();//默认会以连接打开
var file = ev.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.onload = function () {
var img = new Image();
img.src = fileReader.result;
document.body.appendChild(img);
}
fileReader.readAsDataURL(file)
}
应用缓存
应用缓存是一种能够在离线状态下正常访问页面的技术,核心是manifest文件的配置。
manifest配置项
manifest有4个经常使用配置项,做用以下
1. CACHE MANIFEST //指定声明头
3. CACHE: 缓存文件列表
4. NETWORK: 不缓存文件列表,每次都从服务器加载
5. FALLBACK: 指定当页面不可访问时的回退页面(如404)
使用流程
- 建立index.html
- 建立index.appcache文件
- 关联缓存文件
index.appcache
CACHE MANIFEST
CACHE:
index.css
jquery.min.js
404.html
NETWORK:
app.css
FALLBACK:
*.html /404.html
* 指定资源备选页,原资源无妨访问则加载备用页资源
* 每行配置为2个请求路径,前者为原始资源,后者为备用资源
* 两个路径都必须为相对路径而且与缓存配置文件同源,可以使用通配符
* 上述配置表示,无网络时,用404.html代替全部html文件
更新缓存
更新缓存数据有三种方式
1. 直接修改index.manifest文件
2. window.applicationCache.update()
3. 手动清除浏览器缓存
补充
不一样浏览器对缓存数据的容量限制存在差别
manifest文件配置的某个文件不能正常下载,整个更新失败,全用旧的缓存
index.manifest文件和index.html文件必须同源
web worker
web worker 是独立运行在后台的js脚本,不影响页面性能,经常使用于处理耗时的逻辑。值得注意的是,出于安全性考虑,浏览器对本地运行web worker有限制,需运行在服务器上。
使用案例
新建count.js,内部执行一个耗时的逻辑
count.js 内部使用postMessage发送运行后的结果
var arr = Array.from(new Array(10000).keys());
var sum = 0;
arr.forEach(item => {
sum += item;
})
postMessage(sum)
新建index.html
建立web worker,加载count.js
接收count.js发送的数据
渲染到界面上
销毁web worker
web workervar worker = new Worker('count.js');
worker.onmessage = function (e) {
document.body.innerText = e.data;
worker.terminate();
}
}
css
filter
filter是滤镜属性,经常使用于对图像色彩处理,经常使用属性以下
属性
描述
none
默认值,没有效果。
blur(px)
给图像设置高斯模糊
brightness(%)
给图片应用一种线性乘法,使其看起来更亮或更暗
contrast(%)
调整图像的对比度
drop-shadow
给图像设置一个阴影效果
grayscale(%)
将图像转换为灰度图像
hue-rotate(deg)
给图像应用色相旋转
opacity(%)
转化图像的透明程度
saturate(%)
转换图像饱和度
sepia(%)
将图像转换为深褐色
invert(%)
反转输入图像
css设置
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
效果图
columns
使用columns能够轻松的实现一个分栏布局,column-gap指定列间隙,column-rule指定列之间的规则:宽度,样式和颜色。
核心css代码以下
div {
width: 600px;
margin: 0 auto;
background-color: aqua;
columns: 100px 3;
column-gap:10px;
column-rule:4px dashed #ddd;
padding: 10px;
}
核心html伪代码以下:
...文字描述
flex
flex提供一种更优雅更灵活的布局方式,使用:display:flex;或display:inline-flex;。值得注意的是,设为 Flex 布局之后,子元素的float、clear和vertical-align属性将失效。
flex容器属性设置
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1. flex-direction
设置主轴方向,肯定弹性子元素排列方式,取值为: row(默认) | row-reverse | column | column-reverse;
row(默认),水平方向,从左到右排列
row-reverse,水平方向,从右到左排列
column,垂直方向,从上到下排列
column-reverse,垂直方向,从下到上排列
2. flex-wrap
当弹性子元素超出弹性容器范围时是否换行,取值为:nowrap|wrap|wrap-reverse;
nowrap(默认):不换行。
wrap换行,第一行在上方
wrap-reverse换行,第一行在下方
3. flex-flow
flex-direction和flex-wrap属性的快捷方式,复合属性,默认值为row nowrap
4. justify-content
主轴上的对齐方式,取值为flex-start | flex-end | center | space-between | space-around;
具体对齐方式与轴的方向有关,下面假设主轴为从左到右:
flex-start(默认):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,item之间的间隔都相等。
space-around:每一个item两侧的间隔相等。因此,item之间的间隔比item与边框的间隔大一倍。
5. align-items
侧轴上的对齐方式,取值为:flex-start | flex-end | center | baseline | stretch;
具体的对齐方式与侧轴的方向有关,下面假设侧轴从上到下:
stretch(默认):若是item未设置高度或设为auto,将占满整个容器的高度。
flex-start:侧轴的起点对齐。
flex-end:侧轴的终点对齐。
center:侧轴的中点对齐。
baseline: item的第一行文字的基线对齐。
6. align-content
侧轴上有空白时的对齐方式,取值为:align-content: flex-start | flex-end | center | space-between | space-around | stretch;
主轴为水平方向生效
stretch(默认):轴线占满整个侧轴。
flex-start:与侧轴的起点对齐。
flex-end:与侧轴的终点对齐。
center:与侧轴的中点对齐。
space-between:与侧轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。因此,轴线之间的间隔比轴线与边框的间隔大一倍。
item属性设置
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. order
控制弹性容器里子元素的顺序,数值越小,排列越靠前,默认为0
2. flex-grow
定义item的放大比例,默认为0,即若是存在剩余空间,也不放大。
若是全部item的flex-grow属性都为1,则它们将等分剩余空间(若是有的话)。
若是一个item的flex-grow属性为2,其余item都为1,则前者占据的剩余空间将比其余项多一倍。
3. flex-shrink
flex-shrink属性定义了item的缩小比例,默认为1,即若是空间不足,该item将缩小。
若是全部item的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
若是一个item的flex-shrink属性为0,其余item都为1,则空间不足时,前者不缩小。
负值对该属性无效。
4. flex-basis
指定弹性子元素伸缩前的默认大小值,至关于width和height属性。
5. flex
flex-grow, flex-shrink和flex-basis属性的复合属性.
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
建议优先使用这个属性,而不是单独写三个分离的属性,由于浏览器会推算相关值。
6. align-self
容许独立的弹性子元素覆盖弹性容器的默认对齐设置(align-items),取值为:auto | flex-start | flex-end | center | baseline | stretch
auto表示继承父元素的align-items属性,若是没有父元素,则等同于stretch(占满)。
除auto外,其他表现与align-items表现一致
照片墙
制做思路
父盒子相对定位
图片绝对定位,z-index层级控制
不一样图片定位距离,角度需有差别,造成错综感
hover时角度置为零,层级提高,过渡动画,缩放
代码实现
picture-wallmargin: 0;
padding: 0;
background-color: azure;
}
div {
width: 1200px;
margin: 100px auto;
height: 450px;
position: relative;
}
img {
position: absolute;
width: 160px;
box-shadow: 2px 2px 3px rgba(50, 50, 50, .4);
padding: 15px;
background-color: #fff;
z-index: 1;
}
div img:hover {
transform: rotate(0);
z-index: 2;
transition: all .5s ease-in;
transform: scale(1.2);
}
img:nth-child(1) {
left: 100px;
top: 0px;
transform: rotate(-30deg);
}
img:nth-child(2) {
left: 300px;
top: 60px;
transform: rotate(-45deg);
}
img:nth-child(3) {
left: 450px;
top: 10px;
transform: rotate(10deg);
}
img:nth-child(4) {
left: 600px;
top: 30px;
transform: rotate(20deg);
}
img:nth-child(5) {
left: 750px;
top: 100px;
transform: rotate(60deg);
}
瀑布流
图片同宽不一样高,使用columns便可,也可以使用单属性column-count. 核心css代码以下:
div {
width: 600px;
margin: 100px auto;
column-count: 3;
}
img {
width: 150px;
}
html结构伪代码以下:
参考连接