是标准通用标记语言的文档类型声明,由于网络上文件的类型不一,因此需要正确声明 HTML 版本,以使得浏览器能够正确识别并显示网页内容。 doctype声明不区分大小写,以下形式皆可 有代表性的<!DOCTYPE>声明 语义化标签 语义化标签是为了让代码看起来更见名知义,语义清晰,本质上只是一个普通的div。 在一个文档中,不能出现一个以上的 main元素,且main不能是以下元素的后代:article/aside/footer/header/nav 最后4个用的可能少一些,这里补充说明一下 部分属性需要在form标签包裹下才会生效 常规 默认为true的属性 新增datalist标签 不同浏览器表现会有些许差异,感兴趣的可以试试 新增meter标签 不同浏览器显示有差异 新增fieldset和legend标签 新增progress标签 form表单提交按钮属性 formaction 指定提交按钮的地址 formtarget 类似a标签的target formmethod 指定表单提交方式 formenctype 表单提交时的编码格式 其他 control 属性,在lable标签内部放置一个表单元素,并通过该属性来访问该表单的属性 autocomplete,控制表单提交后是否生成历史记录 on|off 网页资源拖放 本地资源拖放 应用缓存是一种可以在离线状态下正常访问页面的技术,核心是manifest文件的配置。 manifest配置项 使用流程 index.appcache 更新缓存 补充 web worker 是独立运行在后台的js脚本,不影响页面性能,常用于处理耗时的逻辑。值得注意的是,出于安全性考虑,浏览器对本地运行web worker有限制,需运行在服务器上。 使用案例 filter是滤镜属性,常用于对图像色彩处理,常用属性如下 css设置 效果图 使用columns可以轻松的实现一个分栏布局,column-gap指定列间隙,column-rule指定列之间的规则:宽度,样式和颜色。 核心css代码如下 核心html伪代码如下: flex提供一种更优雅更灵活的布局方式,使用: flex容器属性设置 1. flex-direction 设置主轴方向,确定弹性子元素排列方式,取值为: row(默认) | row-reverse | column | column-reverse; 2. flex-wrap 当弹性子元素超出弹性容器范围时是否换行,取值为:nowarp|warp|wrap-reverse; 3. flex-flow flex-direction和flex-wrap属性的快捷方式,复合属性,默认值为row nowrap 4. justify-content 主轴上的对齐方式,取值为flex-start | flex-end | center | space-between | space-around; 5. align-items 侧轴上的对齐方式,取值为:flex-start | flex-end | center | baseline | stretch; 6. align-content 侧轴上有空白时的对齐方式,取值为:align-content: flex-start | flex-end | center | space-between | space-around | stretch; item属性设置 1. order 控制弹性容器里子元素的顺序,数值越小,排列越靠前,默认为0 2. flex-grow 定义item的放大比例,默认为0,即如果存在剩余空间,也不放大。 3. flex-shrink flex-shrink属性定义了item的缩小比例,默认为1,即如果空间不足,该item将缩小。 4. flex-basis 指定弹性子元素伸缩前的默认大小值,相当于width和height属性。 5. flex flex-grow, flex-shrink和flex-basis属性的复合属性. 6. align-self 允许独立的弹性子元素覆盖弹性容器的默认对齐设置(align-items),取值为:auto | flex-start | flex-end | center | baseline | stretch 制作思路 代码实现 图片同宽不同高,使用columns即可,也可使用单属性column-count. 核心css代码如下: html结构伪代码如下:你应该知道的html和css
html
<!DOCTYPE> 声明
<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>
HTML5时期 <!DOCTYPE html> HTML 4.01 时期 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 时期 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html5新特性
标签
语义
header
头部
footer
尾部
section
区段
article
文章
nav
导航
aside
侧边栏
main
文章主体内容
figure
独立的流内容(图像、图表、照片、代码等等)
hgroup
对网页或区段(section)的标题进行组合
details/summary
标签用于描述文档或文档某个部分的细节
mark
突出显示部分文本
<figure> <p>avatar</p> <img src="url"/> </figure> hgroup可以拆开理解,h是标题的语义,group是组合,hgroup自然就是对标题进行组合 <hgroup> <h1>前端</h1> <h2>HTML</h2> </hgroup> 默认关闭子项,点击展开,再点击收起 <details> <summary>详情</summary> <p>hello world</p> <p>hello girl</p> </details> <p>这是<mark>突出显示</mark>的部分</p>
表单的丰富
<form > <!--默认包含正则验证,验证失败表单无法提交--> 邮箱: <input type="email"> <!-- 自动聚焦and占位符 --> 输入框:<input type="text" placeholder="请输入" autofocus="true"> <!--tel本身不包含验证,它的出现是为了能够在移动端打开数字键盘--> <!--required,必须输入 pattern,正则验证--> 电话:<input type="tel" required pattern="^(+86)?1d{10}$"> <!--验证只能输入合法的网址:如https://www.baidu.com--> 网址:<input type="url"> <!--number:只能输入数字(包含小数点),不能输入其它的字符 max:最大值 min:最小值 value:默认值--> 数量:<input type="number" value="70" max="100" min="0"> <!--search:可以提供更人性化的输入体验,有个x号,不想要了可以删除--> 请输入商品名称:<input type="search"> <!--range:范围,与number类似--> 范围:<input type="range" max="100" min="0" value="50"> <!--可以当个拾色器--> 颜色:<input type="color"> <!--time:时间:时分秒--> 时间:<input type="time"> <!--date:日期:年月日--> 日期:<input type="date"> <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器--> 日期时间:<input type="datetime"> <!--datetime-local:日期和时间--> 日期时间:<input type="datetime-local"> 月份:<input type="month"> 星期:<input type="week"> </form>
<input type="text" autofocus> <input type="text" disabled> <input type="checkbox" checked>
<!--建立输入框与datalist的关联 list="datalist的id号"--> 编程语言:<input type="text" list="language"> <br> <!--通过datalist创建下拉列表--> <datalist id="language"> <!--label:提示信息--> <option value="java" label="老牌编程语言"/> <option value="php" label="世界上最好的语言"></option> <option value="node.js" label="强大的IO处理能力"></option> <!--option可以是单标签也可以是双标签--> <option value="python" label="火爆的编程语言,处理数据能力强"/> </datalist>
<!--high:规定的较高的值,low:规定的较低的值,max:最大值,min:最小值,value:当前度量值--> <meter max="100" min="0" high="80" low="40" value="30"></meter> <meter max="100" min="0" high="80" low="40" value="60"></meter> <meter max="100" min="0" high="80" low="40" value="100"></meter>
<fieldset> <legend>冷月心个人信息</legend> </fieldset>
<progress value="22" max="100"></progress>
application/x-www-form-urlencoded
在发送前对所有字符进行编码(默认)。
multipart/form-data
不对字符编码。当使用有文件上传控件的表单时,该值是必需的。
text/plain
将空格转换为 “+” 符号,但不编码特殊字符。
自定义属性规范
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义属性</title> </head> <body> <p data-user-name="冷月心"></p> <script> const p=document.querySelector("p"); //必须驼峰法取值 console.log(p.dataset["userName"]);//冷月心 </script> </body> </html>
拖放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html5拖放</title> <style> div { float: left; width: 300px; height: 300px; border: 1px solid #aaa; margin: 10px; } </style> </head> <body> <p>拖拽图片至div</p> <div ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <div ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <br /> <img id="img" src="https://img-blog.csdnimg.cn/20200323112521943.jpg" draggable="true" ondragstart="drag(event)" /> </body> <script type="text/javascript"> function allowDrop(ev) { 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)); } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html5拖放</title> </head> <body> <p>拖拽本地图片至当前页面</p> </body> <script type="text/javascript"> document.ondragover = function (ev) { 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) } </script> </html>
应用缓存
manifest有4个常用配置项,作用如下 1. CACHE MANIFEST //指定声明头 3. CACHE: 缓存文件列表 4. NETWORK: 不缓存文件列表,每次都从服务器加载 5. FALLBACK: 指定当页面不可访问时的回退页面(如404)
- 创建index.html - 创建index.appcache文件 - 关联缓存文件 <html lang="en" manifest="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. 手动清除浏览器缓存
web worker
var arr = Array.from(new Array(10000).keys()); var sum = 0; arr.forEach(item => { sum += item; }) postMessage(sum)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>web worker</title> </head> <body> </body> <script> window.onload = function () { var worker = new Worker('count.js'); worker.onmessage = function (e) { document.body.innerText = e.data; worker.terminate(); } } </script> </html>
css
filter
属性
描述
none
默认值,没有效果。
blur(px)
给图像设置高斯模糊
brightness(%)
给图片应用一种线性乘法,使其看起来更亮或更暗
contrast(%)
调整图像的对比度
drop-shadow
给图像设置一个阴影效果
grayscale(%)
将图像转换为灰度图像
hue-rotate(deg)
给图像应用色相旋转
opacity(%)
转化图像的透明程度
saturate(%)
转换图像饱和度
sepia(%)
将图像转换为深褐色
invert(%)
反转输入图像
.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
div { width: 600px; margin: 0 auto; background-color: aqua; columns: 100px 3; column-gap:10px; column-rule:4px dashed #ddd; padding: 10px; }
<div> ...文字描述 </div>
flex
display:flex;
或display:inline-flex;
。值得注意的是,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
照片墙
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>picture-wall</title> <style> body { margin: 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); } </style> </head> <body> <div> <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tLzIwOTU5MGE0MGQ2MDU2YzJkZjE3MjExNjlkNTZiM2M5OGMyYmU5YmExZTU1Ni01SnJBVVVfZncyMzY?x-oss-process=image/format,png"> <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tL2ZmODZmMDNmNmFkOGI0NGExYzY5NGQ1M2JjZTU4ZTllYTk1NzM0NDYxOTA2Zi1XTTlxb3lfZncyMzY?x-oss-process=image/format,png"> <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tLzJhMTRkZDdlNzk4OGEyYTBiY2Q3ZjMwMzhiZjcyZTI4NTE2NjRiNzhmMzUwLUFIbHgxOF9mdzIzNg?x-oss-process=image/format,png"> <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tL2Y0ZDgzMzJjOTA2NjhlYTk0ZGRiZmQzNjM1MDRhZmE2ZmUzNWU2ZTgxZDk0Ni15UkI1YkFfZncyMzY?x-oss-process=image/format,png"> <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tL2ZmNDRjZDRkNGIyMmIwYjYzMGJlZTk5YzEwM2U2ZjYyM2M5YjdmZTYxN2QxNi1FS2tKT2RfZncyMzY?x-oss-process=image/format,png"> </div> </body> </html> <!-- 效果图:如下 -->
瀑布流
div { width: 600px; margin: 100px auto; column-count: 3; } img { width: 150px; }
<div> <ul> <li><img src="src1"></li> <li><img src="src2"></li> <li><img src="src3"></li> <li><img src="src4"></li> <li><img src="src5"></li> </ul> </div> <!-- 效果图:如下 -->
参考链接
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算