优先使用IE最新版本和Chrome<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>页面描述<metaname="description"content="不超过150个字符"/>页面关键词<metaname="keywords"content=""/>网页作者<metaname="author"content="name,email@gmail.com"/>搜索引擎抓取<metaname="robots"content="index,follow"/>为移动设备添加viewport<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">iOS设备添加到主屏后的标题（iOS6新增）<metaname="apple-mobile-web-app-title"content="标题">是否启用WebApp全屏模式，删除苹果默认的工具栏和菜单栏<metaname="apple-mobile-web-app-capable"content="yes"/>添加智能App广告条SmartAppBanner（iOS6+Safari）<metaname="apple-itunes-app"content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL">设置苹果工具栏颜色<metaname="apple-mobile-web-app-status-bar-style"content="black"/>忽略页面中的数字识别为电话，忽略email识别<metaname="format-detection"content="telphone=no,email=no"/>启用360浏览器的极速模式(webkit)<metaname="renderer"content="webkit">避免IE使用兼容模式<metahttp-equiv="X-UA-Compatible"content="IE=edge">针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓<metaname="HandheldFriendly"content="true">微软的老式浏览器<metaname="MobileOptimized"content="320">uc强制竖屏<metaname="screen-orientation"content="portrait">QQ强制竖屏<metaname="x5-orientation"content="portrait">UC强制全屏<metaname="full-screen"content="yes">QQ强制全屏<metaname="x5-fullscreen"content="true">UC应用模式<metaname="browsermode"content="application">QQ应用模式windowsphone点击无高光<metaname="msapplication-tap-highlight"content="no">iOS图标iPhone和iTouch，默认57x57像素，必须有<linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/>RetinaiPhone和RetinaiTouch，114x114像素，可以没有，但推荐有<linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>RetinaiPad，144x144像素，可以没有，但推荐有<linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>iOS启动画面iPad竖屏768x1004（标准分辨率）<linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/>iPad竖屏1536x2008（Retina）<linkrel="apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/>iPad横屏1024x748（标准分辨率）<linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/>iPad横屏2048x1496（Retina）<linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/>iPhone/iPodTouch竖屏320x480(标准分辨率)<linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/>iPhone/iPodTouch竖屏640x960(Retina)<linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/>iPhone5/iPodTouch5竖屏640x1136(Retina)<linkrel="apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/>iOS设备endWindows8磁贴颜色<metaname="msapplication-TileColor"content="#000"/>Windows8磁贴图标<metaname="msapplication-TileImage"content="icon.png"/>添加RSS订阅<linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/>添加faviconicon<linkrel="shortcuticon"type="image/ico"href="/favicon.ico"/>
概要meta是html语言head区的一个辅助性标签，标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务；必要属性属性值描述contentsometext定义与http-equiv或name属性相关的元信息一:name属性\color{#FF3030}{一:name属性}一:name属性name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。meta标签的name属性语法格式是：<metaname="参数"content="具体的参数值">name属性主要有以下几种参数：参数说明用法Keywords关键字<metaname="keywords"content="百度一下你就知道">description网站内容描述<metaname="description"content="全球最大的中文搜索引擎、致力于让网民更便捷地获取信息">robots搜索引擎索引方式<metaname="robots"content="none">author标注网页的作者<metaname="author"content="不时髦的耳朵>二：http−equiv属性\color{#FF3030}{二：http-equiv属性}二：http−equiv属性http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值http-equiv属性语法格式是：<metahttp-equiv="参数"content="参数变量值">；http-equiv属性主要有以下几种参数：参数说明用法content-type规定文档的字符编码<metahttp-equiv="content-type"content="text/html;charset=UTF-8">default-style规定要使用的预定义的样式表<metahttp-equiv="default-style"content="thedocument'spreferredstylesheet">Refresh(刷新)自动刷新并指向新页面<metahttp-equiv="Refresh"content="2;URL=http://www.baidu.com">下面展示一些常用的meta标签//百度官方给的禁止转码声明。在网页中添加了这一条，百度就不会移动搜索中将网站转码，并呈现给移动端用户<metahttp-equiv="Cache-Control"content="no-transform"/>//页面缓存时间的最大值是0秒，目的是不让页面缓存，每次访问必须到服务器读取<metahttp-equiv="Cache-Control"content="max-age=0"/>//强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器<metaname="renderer"content="webkit"/>//强制Chromium内核，作用于其他双核浏览器<metaname="force-rendering"content="webkit"/>//提前进行DNS解析以此来提升网站性能，可以让a标签在HTTPS环境下进行DNS预解析<metahttp-equiv="x-dns-prefetch-control"content="on"/>//当手机用户浏览PC网站会自动跳转到对应的手机端网站<metaname="mobile-agent"content="format=html5;url=/m"/>//转码申明，用百度打开网页可能会对其进行转码（比如贴广告）<metaname="renderer"content="webkit|ie-comp|ie-stand"/>//启用WebApp全屏模式<metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/>
HTML中的aria-hidden属性我们常常看到这样的html，<divid="modal"class="modal"aria-hidden="true"><divclass="modal-header">...</div><divclass="modal-body">...</div><divclass="modal-footer">...</div></div>尤其是在作为页面弹窗的元素(modal)上，通常会有一个属性aria-hidden="true"，那么它有什么作用呢？网上的专业资料通常会这样写： 现代的辅助技术能够识别并朗读由CSS生成的内容和特定的Unicode字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了aria-hidden=“true”属性。我的博客里会这样写： 让这个元素对浏览器隐藏。 （这里的“隐藏”更多指的是语义化的隐藏，实现弹窗效果需配合display:none等样式使用）后记：aria-xxx还有很多有趣的用法，我也正在探索中，欢迎大家交流谈论。
项目中有条eslint规则react/jsx-no-target-blank，当代码中有超链接且是新页打开的情况下，如果你没有加上rel="noopenernoreferrer"时，就会出现下面的报错：Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener复制代码之前一直没去思考过为啥要这样，最近刚好看到一篇文章，对这个的理解清晰了些。一、noopener这个属性是为了防止钓鱼，如果你有一个新开页打开的外部链接并且没有加上rel="noopener"的话，那么新开的那个页面就有了上一个页面的权限，它可以通过window.opener.location.href="看起来跟原网站相同的假的网站地址"，由此一来，就可以将原先的页面弄成假的登录页面让你登录，从而拿到你的信息。那么加上rel="noopener"之后会发生什么呢，新开页的window.opener就会被设置成null，他们也没有了控制上一个页面的权限二、noreferrer它和noopener差不多的功能，不同的点在于一些老的浏览器可能不支持noopener，所以经常是看到noopener和noreferrer同时出现。一个没加noreferrer的新开页链接，在新页面可通过document.referrer拿到上一个页面的信息三、nofollow这个属性比较少用，是因为看了上面提到的那个文章才知道这个跟seo有关。有些网站底部会有友情链接，一般来说都是你信任的网站，所以才会愿意将这些网站添加到你的网站底部，然而当你不是很信任某些网站或者你在你的大网站里面添加了小网站链接时，那么就可以加上这个属性。
1、Tooltip向HTML元素添加简单的工具提示不需要CSS或JavaScript。使用title属性，您可以轻松添加工具提示以向用户提供额外信息。<body><p><abbrtitle="WorldHealthOrganization">WHO</abbr>wasfoundedin1948.</p><ptitle="FreeWebtutorials">W3Schools</p></body>2、Download当您希望用户下载链接而不是导航到文件时，下载属性非常有用。此外，您还可以设置用户将下载的文件的文件名<ahref="/images/myw3schoolsimage.jpg"download><ahref="link/to/your/file"download="filename">Downloadlink</a>3、WordBreakOpportunity没有人喜欢HTML在不该打断的地方打断文字。使用<wbr>，您可以轻松地找到可以打断单词的点(机会)。当单词太长，浏览器很有可能会在不正确的地方打断它时，这很有用。<p>Thisisaveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>4、Textdirection使用DIR=“AUTO”，浏览器将根据内容的语言更改文本对齐。当您处理不遵循左边的语言时，这非常有用。使用此属性的潜在地点是社交媒体聊天应用程序。<pdir="auto">Thistextisfollowingdir=auto</p>5、 BasicAccordion通过使用细节和摘要语义元素，您可以创建一个非常基本但很容易的手风琴。将accordion元素与details元素打包，而标题则使用summary元素。最后，使用p段落元素来编写手风琴的主要内容。<details><summary>EpcotCenter</summary><p>EpcotisathemeparkatWaltDisneyWorldResortfeaturingexcitingattractions,internationalpavilions,award-winningfireworksandseasonalspecialevents.</p></details>6、ContentEditable通过将contentteditable属性设置为true，可以使任何内容都可编辑。不管它是div还是p，它都是可编辑的。此外，还可以使用isContentEditable属性来查找某个元素是否可编辑。<pcontenteditable='true'>Thisisaparagraph.Clickthebuttontomakemeeditable.</p>7、AddCaptions只需使用HTML，您就可以使用<track>元素为视频文件添加字幕。使用src属性指向字幕文件，使用srclang属性设置语言。<videowidth="320"height="240"controls><sourcesrc="forrest_gump.mp4"type="video/mp4"><sourcesrc="forrest_gump.ogg"type="video/ogg"><tracksrc="fgsubtitles_en.vtt"kind="subtitles"srclang="en"label="English"><tracksrc="fgsubtitles_no.vtt"kind="subtitles"srclang="no"label="Norwegian"></video>8、Lazyloading你可以通过设置加载属性为“lazy”来按需加载图片(也叫惰性加载)。这是一种简单但非常有效的优化技术，只加载对用户可见的部分，其他图像稍后根据用户的需要加载。<imgsrc="/w3images/wedding.jpg"alt="Wedding"style="width:100%"><imgsrc="/w3images/rocks.jpg"alt="Rocks"style="width:100%"><!--off-screenimages--><imgsrc="/w3images/paris.jpg"alt="Paris"style="width:100%"loading="lazy"><imgsrc="/w3images/nature.jpg"alt="Nature"style="width:100%"loading="lazy"><imgsrc="/w3images/underwater.jpg"alt="Underwater"style="width:100%"loading="lazy"><imgsrc="/w3images/ocean.jpg"alt="Ocean"style="width:100%"loading="lazy"><imgsrc="/w3images/mountainskies.jpg"alt="Mountains"style="width:100%"loading="lazy">9、BaseURL如果您在您的网站上多次调用一个公共域，您可以使用**<base>**元素来设置一个基本URL，如下面提供的代码片段所示。 <head><basehref="https://www.w3schools.com/"target="_blank"></head><body><imgsrc="images/stickman.gif"width="24"height="39"alt="Stickman"><ahref="tags/tag_base.asp">HTMLbaseTag</a></body>10、ControllingContextMenuandPaste 您可以在使用右键单击时收听事件，也可以尝试使用OnContextMenu和OnPaste属性粘贴内容并处理这些事件。如果您不希望用户能够粘贴到密码等某些字段上，则可以在该输入字段上写入Onpaste=“返回false”，用户将无法粘贴到那里。同样，oncontextmenu在用户右键单击该元素时会触发<inputtype="text"onpaste="returnfalse"value="Pastesomethinginhere"><divoncontextmenu="myFunction()"contextmenu="mymenu">11、Spellcheck当设置为true时，拼写检查属性会告诉浏览器必须检查用户在此元素中输入的语法和拼写错误。这是一个方便的属性，可帮助用户编写正确无误的内容。<pcontenteditable="true"spellcheck="true">Thisisapraggagraph.Itiseditable.Trytochangethetext.</p>
<!DOCTYPEHTML><html><head><metacharset="UTF-8"/><title>公益404-站三界导航</title></head><body><!--<scripttype="text/javascript"src="http://www.qq.com/404/search_children.js"></script>--><scripttype="text/javascript"src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"charset="utf-8"></script></body></html>同时我们提供“返回腾讯网”这个超链接的可定制化能力，修改“homePageUrl”、“homePageName”两个参数即可。<scripttype="text/javascript"src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"charset="utf-8"homePageUrl="http://www.zhansanjie.com"homePageName="站三界导航首页"></script>
Readme然后把下面的代码随便复制到一个文本编辑器中(比如记事本)关键地方都有中文注释,替换题目:搜索title替换头像,搜索头像,按照方法替换即可替换动态变化字母,搜索动态变化替换最终定格的字母,搜索定格替换想说的话,搜索想说的话替换在一起的时间,搜索在一起保存的时候,后缀名改成.html最后建议使用电脑端的浏览器打开,手机端的兼容性没做好代码<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>520快乐</title><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><!--<metaname="viewport"content="width=device-width,initial-scale=1.0">--><!--<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">--><!--<metaitemprop="image"content="./images/fenxiang.png"/>--><style>html{height:100%;}body{font-family:"HelveticaNeue","LuxiSans","DejaVuSans",Tahoma,"HiraginoSansGB","MicrosoftYahei",sans-serif;background:#79a8ae;color:#CFEBE4;font-size:18px;line-height:2;letter-spacing:1.2px;margin:0;}a{color:#ebf7f4;}.body--ready{background:-webkit-linear-gradient(top,rgb(203,235,219)0%,rgb(55,148,192)120%);background:-moz-linear-gradient(top,rgb(203,235,219)0%,rgb(55,148,192)120%);background:-o-linear-gradient(top,rgb(203,235,219)0%,rgb(55,148,192)120%);background:-ms-linear-gradient(top,rgb(203,235,219)0%,rgb(55,148,192)120%);background:linear-gradient(top,rgb(203,235,219)0%,rgb(55,148,192)120%);}.text{position:fixed;bottom:100px;text-align:center;font-size:1.875rem;width:100%;}.canvas{margin:0auto;display:block;}img#logo{width:128px;background-size:cover;border-radius:200px;box-shadow:0px0px40pxrgba(63,81,181,0.72);border:3pxsolid#00a0ff;opacity:1;margin:0auto;margin-top:20px;margin-bottom:20px;transition:all1.0s;}#logo:hover{box-shadow:0010px#fff;-webkit-box-shadow:0019px#fff;transform:rotate(360deg);-ms-transform:rotate(360deg);/*IE9*/-moz-transform:rotate(360deg);/*Firefox*/-webkit-transform:rotate(360deg);/*Safari和Chrome*/-o-transform:rotate(360deg);/*Opera*/filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}.cs{width:100%;height:100%;margin:0auto;position:absolute;text-align:center;}.text{position:fixed;bottom:80px;text-align:center;width:100%;font-weight:bold;}.text-right{position:fixed;bottom:50px;text-align:right;width:100%;font-weight:bold;}</style></head><body><!--头像--><divclass="cs"><!--src表示头像的地址,建议上传到网页,然后放链接可以上传到这个网站http://chuantu.biz/--><imgsrc="http://chuantu.xyz/t6/734/1589961011x3703728804.png"id="logo"></div><canvasclass="canvas"width="1820"height="905"></canvas><pclass="text"style="color:#8ef5ff;">你想说的话<br/><spanid="span_dt_dt"></span></p><scriptlanguage="javascript">functionshow_date_time(){window.setTimeout("show_date_time()",1000);//你俩在一起的那天BirthDay=newDate("4/27/201600:00:00");today=newDate();timeold=(today.getTime()-BirthDay.getTime());sectimeold=timeold/1000secondsold=Math.floor(sectimeold);msPerDay=24*60*60*1000e_daysold=timeold/msPerDaydaysold=Math.floor(e_daysold);e_hrsold=(e_daysold-daysold)*24;hrsold=Math.floor(e_hrsold);e_minsold=(e_hrsold-hrsold)*60;minsold=Math.floor((e_hrsold-hrsold)*60);seconds=Math.floor((e_minsold-minsold)*60);span_dt_dt.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";}show_date_time();</script><script>varS={init:function(){S.Drawing.init('.canvas');document.body.classList.add('body--ready');//动态变化的话,用|分割S.UI.simulate("How|I|Meet|My|Dear|Pig|I|Love|You|#countdown3|#time");S.Drawing.loop(function(){S.Shape.render();});}};S.Drawing=(function(){varcanvas,context,renderFn,requestFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};return{init:function(el){canvas=document.querySelector(el);context=canvas.getContext('2d');this.adjustCanvas();window.addEventListener('resize',function(e){S.Drawing.adjustCanvas();});},loop:function(fn){renderFn=!renderFn?fn:renderFn;this.clearFrame();renderFn();requestFrame.call(window,this.loop.bind(this));},adjustCanvas:function(){canvas.width=window.innerWidth-100;canvas.height=window.innerHeight-30;},clearFrame:function(){context.clearRect(0,0,canvas.width,canvas.height);},getArea:function(){return{w:canvas.width,h:canvas.height};},drawCircle:function(p,c){context.fillStyle=c.render();context.beginPath();context.arc(p.x,p.y,p.z,0,2*Math.PI,true);context.closePath();context.fill();}};}());S.UI=(function(){varinterval,currentAction,time,maxShapeSize=30,sequence=[],cmd='#';functionformatTime(date){varh=date.getHours(),m=date.getMinutes(),m=m<10?'0'+m:m;returnh+':'+m;}functiongetValue(value){returnvalue&&value.split('')[1];}functiongetAction(value){value=value&&value.split('')[0];returnvalue&&value[0]===cmd&&value.substring(1);}functiontimedAction(fn,delay,max,reverse){clearInterval(interval);currentAction=reverse?max:1;fn(currentAction);if(!max||(!reverse&¤tAction<max)||(reverse&¤tAction>0)){interval=setInterval(function(){currentAction=reverse?currentAction-1:currentAction+1;fn(currentAction);if((!reverse&&max&¤tAction===max)||(reverse&¤tAction===0)){clearInterval(interval);}},delay);}}functionperformAction(value){varaction,value,current;sequence=typeof(value)==='object'?value:sequence.concat(value.split('|'));timedAction(function(index){current=sequence.shift();action=getAction(current);value=getValue(current);switch(action){case'countdown':value=parseInt(value)||10;value=value>0?value:10;timedAction(function(index){if(index===0){if(sequence.length===0){S.Shape.switchShape(S.ShapeBuilder.letter(''));}else{performAction(sequence);}}else{S.Shape.switchShape(S.ShapeBuilder.letter(index),true);}},1000,value,true);break;case'rectangle':value=value&&value.split('x');value=(value&&value.length===2)?value:[maxShapeSize,maxShapeSize/2];S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize,parseInt(value[0])),Math.min(maxShapeSize,parseInt(value[1]))));break;case'circle':value=parseInt(value)||maxShapeSize;value=Math.min(value,maxShapeSize);S.Shape.switchShape(S.ShapeBuilder.circle(value));break;case'time':vart=formatTime(newDate());if(sequence.length>0){//定格S.Shape.switchShape(S.ShapeBuilder.letter("NothingbutYou"))}else{timedAction(function(){t=formatTime(newDate());if(t!==time){time=t;//定格S.Shape.switchShape(S.ShapeBuilder.letter("NothingbutYou"))}},1000);}break;default:S.Shape.switchShape(S.ShapeBuilder.letter(current[0]===cmd?'HacPai':current));}},2000,sequence.length);}return{simulate:function(action){performAction(action);}};}());S.Point=function(args){this.x=args.x;this.y=args.y;this.z=args.z;this.a=args.a;this.h=args.h;};S.Color=function(r,g,b,a){this.r=r;this.g=g;this.b=b;this.a=a;};S.Color.prototype={render:function(){return'rgba('+this.r+','++this.g+','+this.b+','+this.a+')';}};S.Dot=function(x,y){this.p=newS.Point({x:x,y:y,z:5,a:1,h:0});this.e=0.07;this.s=true;this.c=newS.Color(255,255,255,this.p.a);this.t=this.clone();this.q=[];};S.Dot.prototype={clone:function(){returnnewS.Point({x:this.x,y:this.y,z:this.z,a:this.a,h:this.h});},_draw:function(){this.c.a=this.p.a;S.Drawing.drawCircle(this.p,this.c);},_moveTowards:function(n){vardetails=this.distanceTo(n,true),dx=details[0],dy=details[1],d=details[2],e=this.e*d;if(this.p.h===-1){this.p.x=n.x;this.p.y=n.y;returntrue;}if(d>1){this.p.x-=((dx/d)*e);this.p.y-=((dy/d)*e);}else{if(this.p.h>0){this.p.h--;}else{returntrue;}}returnfalse;},_update:function(){if(this._moveTowards(this.t)){varp=this.q.shift();if(p){this.t.x=p.x||this.p.x;this.t.y=p.y||this.p.y;this.t.z=p.z||this.p.z;this.t.a=p.a||this.p.a;this.p.h=p.h||0;}else{if(this.s){this.p.x-=Math.sin(Math.random()*3.142);this.p.y-=Math.sin(Math.random()*3.142);}else{this.move(newS.Point({x:this.p.x+(Math.random()*50)-25,y:this.p.y+(Math.random()*50)-25}));}}}d=this.p.a-this.t.a;this.p.a=Math.max(0.1,this.p.a-(d*0.05));d=this.p.z-this.t.z;this.p.z=Math.max(1,this.p.z-(d*0.05));},distanceTo:function(n,details){vardx=this.p.x-n.x,dy=this.p.y-n.y,d=Math.sqrt(dx*dx+dy*dy);returndetails?[dx,dy,d]:d;},move:function(p,avoidStatic){if(!avoidStatic||(avoidStatic&&this.distanceTo(p)>1)){this.q.push(p);}},render:function(){this._update();this._draw();}};S.ShapeBuilder=(function(){vargap=13,shapeCanvas=document.createElement('canvas'),shapeContext=shapeCanvas.getContext('2d'),fontSize=500,fontFamily='Avenir,HelveticaNeue,Helvetica,Arial,sans-serif';functionfit(){shapeCanvas.width=Math.floor(window.innerWidth/gap)*gap;shapeCanvas.height=Math.floor(window.innerHeight/gap)*gap;shapeContext.fillStyle='red';shapeContext.textBaseline='middle';shapeContext.textAlign='center';}functionprocessCanvas(){varpixels=shapeContext.getImageData(0,0,shapeCanvas.width,shapeCanvas.height).data;dots=[],pixels,x=0,y=0,fx=shapeCanvas.width,fy=shapeCanvas.height,w=0,h=0;for(varp=0;p<pixels.length;p+=(4*gap)){if(pixels[p+3]>0){dots.push(newS.Point({x:x,y:y}));w=x>w?x:w;h=y>h?y:h;fx=x<fx?x:fx;fy=y<fy?y:fy;}x+=gap;if(x>=shapeCanvas.width){x=0;y+=gap;p+=gap*4*shapeCanvas.width;}}return{dots:dots,w:w+fx,h:h+fy};}functionsetFontSize(s){shapeContext.font='bold'+s+'px'+fontFamily;}functionisNumber(n){return!isNaN(parseFloat(n))&&isFinite(n);}functioninit(){fit();window.addEventListener('resize',fit);}//Initinit();return{imageFile:function(url,callback){varimage=newImage(),a=S.Drawing.getArea();image.onload=function(){shapeContext.clearRect(0,0,shapeCanvas.width,shapeCanvas.height);shapeContext.drawImage(this,0,0,a.h*0.6,a.h*0.6);callback(processCanvas());};image.onerror=function(){callback(S.ShapeBuilder.letter('What?'));};image.src=url;},circle:function(d){varr=Math.max(0,d)/2;shapeContext.clearRect(0,0,shapeCanvas.width,shapeCanvas.height);shapeContext.beginPath();shapeContext.arc(r*gap,r*gap,r*gap,0,2*Math.PI,false);shapeContext.fill();shapeContext.closePath();returnprocessCanvas();},letter:function(l){vars=0;setFontSize(fontSize);s=Math.min(fontSize,(shapeCanvas.width/shapeContext.measureText(l).width)*0.8*fontSize,(shapeCanvas.height/fontSize)*(isNumber(l)?1:0.45)*fontSize);setFontSize(s);shapeContext.clearRect(0,0,shapeCanvas.width,shapeCanvas.height);shapeContext.fillText(l,shapeCanvas.width/2,shapeCanvas.height/2);returnprocessCanvas();},rectangle:function(w,h){vardots=[],width=gap*w,height=gap*h;for(vary=0;y<height;y+=gap){for(varx=0;x<width;x+=gap){dots.push(newS.Point({x:x,y:y}));}}return{dots:dots,w:width,h:height};}};}());S.Shape=(function(){vardots=[],width=0,height=0,cx=0,cy=0;functioncompensate(){vara=S.Drawing.getArea();cx=a.w/2-width/2;cy=a.h/2-height/2;}return{shuffleIdle:function(){vara=S.Drawing.getArea();for(vard=0;d<dots.length;d++){if(!dots[d].s){dots[d].move({x:Math.random()*a.w,y:Math.random()*a.h});}}},switchShape:function(n,fast){varsize,a=S.Drawing.getArea();width=n.w;height=n.h;compensate();if(n.dots.length>dots.length){size=n.dots.length-dots.length;for(vard=1;d<=size;d++){dots.push(newS.Dot(a.w/2,a.h/2));}}vard=0,i=0;while(n.dots.length>0){i=Math.floor(Math.random()*n.dots.length);dots[d].e=fast?0.25:(dots[d].s?0.14:0.11);if(dots[d].s){dots[d].move(newS.Point({z:Math.random()*20+10,a:Math.random(),h:18}));}else{dots[d].move(newS.Point({z:Math.random()*5+5,h:fast?18:30}));}dots[d].s=true;dots[d].move(newS.Point({x:n.dots[i].x+cx,y:n.dots[i].y+cy,a:1,z:5,h:0}));n.dots=n.dots.slice(0,i).concat(n.dots.slice(i+1));d++;}for(vari=d;i<dots.length;i++){if(dots[i].s){dots[i].move(newS.Point({z:Math.random()*20+10,a:Math.random(),h:20}));dots[i].s=false;dots[i].e=0.04;dots[i].move(newS.Point({x:Math.random()*a.w,y:Math.random()*a.h,a:0.3,//.4z:Math.random()*4,h:0}));}}},render:function(){for(vard=0;d<dots.length;d++){dots[d].render();}}};}());S.init();</script><!--背景音乐,去这个网站搜http://y.webzcz.cn/,然后把下载链接放在src里--><audioautoplay="autoplay"loop="loop"><sourcesrc="http://m10.music.126.net/20200520002450/755357ef304687327ef0592119465166/ymusic/015d/0e59/055f/6779b4389493fc1454ea258faca5ed6e.mp3"type="audio/mpeg"></audio></body></html>
<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"lang="en"><head><title>star</title><scripttype="text/javascript">window.onload=function(){C=Math.cos;//cacheMathobjectsS=Math.sin;U=0;w=window;j=document;d=j.getElementById("c");c=d.getContext("2d");W=d.width=w.innerWidth;H=d.height=w.innerHeight;c.fillRect(0,0,W,H);//resize<canvas>anddrawblackrect(default)c.globalCompositeOperation="lighter";//switchtoadditivecolorapplicationc.lineWidth=0.2;c.lineCap="round";varbool=0,t=0;//thetad.onmousemove=function(e){if(window.T){if(D==9){D=Math.random()*15;f(1);}clearTimeout(T);}X=e.pageX;//grabmousepixelcoordsY=e.pageY;a=0;//previouscoord.xb=0;//previouscoord.yA=X,//originalcoord.xB=Y;//originalcoord.yR=(e.pageX/W*999>>0)/999;r=(e.pageY/H*999>>0)/999;U=e.pageX/H*360>>0;D=9;g=360*Math.PI/180;T=setInterval(f=function(e){//startloopingspectrumc.save();c.globalCompositeOperation="source-over";//switchtoadditivecolorapplicationif(e!=1){c.fillStyle="rgba(0,0,0,0.02)";c.fillRect(0,0,W,H);//resize<canvas>anddrawblackrect(default)}c.restore();i=25;while(i--){c.beginPath();if(D>450||bool){//decreasediameterif(!bool){//hashitmaximumbool=1;}if(D<0.1){//hashitminimumbool=0;}t-=g;//decreasethetaD-=0.1;//decreasesize}if(!bool){t+=g;//increasethetaD+=0.1;//increasesize}q=(R/r-1)*t;//createhypotrochoidfromcurrentmouseposition,andsetupvariables(see:http://en.wikipedia.org/wiki/Hypotrochoid)x=(R-r)*C(t)+D*C(q)+(A+(X-A)*(i/25))+(r-R);//centeronxycoordsy=(R-r)*S(t)-D*S(q)+(B+(Y-B)*(i/25));if(a){//drawoncetwopointsaresetc.moveTo(a,b);c.lineTo(x,y)}c.strokeStyle="hsla("+(U%360)+",100%,50%,0.75)";//drawrainbowhypotrochoidc.stroke();a=x;//setpreviouscoord.xb=y;//setpreviouscoord.y}U-=0.5;//incrementhueA=X;//setoriginalcoord.xB=Y;//setoriginalcoord.y},16);}j.onkeydown=function(e){a=b=0;R+=0.05}d.onmousemove({pageX:300,pageY:290})}</script></head><bodystyle="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;"><canvasid="c"></canvas></body></html>效果图：
人生不可能总是顺心如意，但持续朝着阳光走，影子就会躲在后面，刺眼，却是对的方向<!doctypehtml><html><head><metacharset="utf-8"/><title>流星雨</title><metaname="keywords"content="关键词，关键字"><metaname="description"content="描述信息"><style>body{margin:0;overflow:hidden;}</style></head><body><!--<canvas>画布画板画画的本子--><canvaswidth=400height=400style="background:#000000;"id="canvas"></canvas><!--javascript画笔--><script>//获取画板//doccument当前文档//getElement获取一个标签//ById通过Id名称的方式//var声明一片空间//varcanvas声明一片空间的名字叫做canvasvarcanvas=document.getElementById("canvas");//获取画板权限上下文varctx=canvas.getContext("2d");//让画板的大小等于屏幕的大小/*思路：1.获取屏幕对象2.获取屏幕的尺寸3.屏幕的尺寸赋值给画板*///获取屏幕对象vars=window.screen;//获取屏幕的宽度和高度varw=s.width;varh=s.height;//设置画板的大小canvas.width=w;canvas.height=h;//设置文字大小varfontSize=14;//计算一行有多少个文字取整数向下取整varclos=Math.floor(w/fontSize);//思考每一个字的坐标//创建数组把clos个0（y坐标存储起来）vardrops=[];varstr="qwertyuiopasdfghjklzxcvbnm";//往数组里面添加clos个0for(vari=0;i<clos;i++){drops.push(0);}//绘制文字functiondrawString(){//给矩形设置填充色ctx.fillStyle="rgba(0,0,0,0.05)"//绘制一个矩形ctx.fillRect(0,0,w,h);//添加文字样式ctx.font="600"+fontSize+"px微软雅黑";//设置文字颜色ctx.fillStyle="#00ff00";for(vari=0;i<clos;i++){//x坐标varx=i*fontSize;//y坐标vary=drops[i]*fontSize;//设置绘制文字ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);if(y>h&&Math.random()>0.99){drops[i]=0;}drops[i]++;}}//定义一个定时器，每隔30毫秒执行一次setInterval(drawString,30);</script></body></html>运行效果截图：
允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。URL是链接指向的地址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。1、链接通过标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。<ahref="https://www.zhansanjie.com/">站三界导航</a>上面代码就定义了一个超级链接。浏览器显示“站三界导航”，文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到href属性指定的网址。标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。<ahref="https://www.zhansanjie.com/"><imgsrc="https://www.zhansanjie.com/uploads/20220611/343ed4cd2a6cbf7eef13c1af3a4f7d39.png"></a>上面代码中，标签内部就是一个图像。用户点击图像，就会跳转到指定网址。标签有如下属性。(1)hrefhref属性给出链接指向的网址。它的值应该是一个URL或者锚点。上文已经给出了完整URL的例子，下面是锚点的例子。<ahref="#demo">示例</a>上面代码中，href属性的值是#加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面demo锚点所在的位置。(2)hreflanghreflang属性给出链接指向的网址所使用的语言，纯粹是提示性的，没有实际功能。<ahref="https://www.zhansanjie.com/"hreflang="en">站三界导航</a>上面代码表明，href属性指向的网址的语言是英语。该属性的值跟通用属性lang一样，语言代码可以参考《属性》一章的lang属性的介绍。(3)titletitle属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。<ahref="https://www.zhansanjie.com/"title="hello">站三界导航</a>。上面代码中，用户鼠标停留在链接上面，会出现文字提示hello。(4)targettarget属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在里面打开。<p><ahref="http://www.zhansanjie.com"target="test">zhansanjie</a></p><p><ahref="http://www.wc235.com"target="test">wc235</a></p>上面代码中，两个链接都在名叫test的窗口打开。首先点击链接zhansanjie，浏览器发现没有叫做test的窗口，就新建一个窗口，起名为test，在该窗口打开www.wc235.com。然后，用户又点击链接www.wc235.com，由于已经存在test窗口，浏览器就在该窗口打开www.wc235.com，取代里面已经打开的www.zhansanjie.com。target属性的值也可以是以下四个关键字之一。_self：当前窗口打开，这是默认值。_blank：新窗口打开。_parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。_top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。<ahref="https://www.zhansanjie.com"target="_blank">站三界导航</a>上面代码点击后，浏览器会新建一个窗口，在该窗口打开链接，并且新窗口没有名字。注意，使用target属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险。(5)relrel属性说明链接与当前页面的关系。<ahref="help.html"rel="help">帮助</a>上面代码的rel属性，说明链接是当前页面的帮助文档。下面是一些常见的rel属性的值。alternate：当前文档的另一种形式，比如翻译。author：作者链接。bookmark：用作书签的永久地址。external：当前文档的外部参考文档。help：帮助链接。license：许可证链接。next：系列文档的下一篇。nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。noreferrer：告诉浏览器打开链接时，不要将当前网址作为HTTP头信息的Referer字段发送出去，这样可以隐藏点击的来源。noopener：告诉浏览器打开链接时，不让链接窗口通过JavaScript的window.opener属性引用原始窗口，这样就提高了安全性。prev：系列文档的上一篇。search：文档的搜索链接。tag：文档的标签链接。(6)referrerpolicyreferrerpolicy属性用于精确设定点击链接时，浏览器发送HTTP头信息的Referer字段的行为。该属性可以取下面八个值：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。其中，no-referrer表示不发送Referer字段，same-origin表示同源时才发送Referer字段，origin表示只发送源信息(协议+域名+端口)。其他几项的解释，请查阅HTTP文档。(7)pingping属性指定一个网址，用户点击的时候，会向该网址发出一个POST请求，通常用于跟踪用户的行为。(8)typetype属性给出链接URL的MIME类型，比如到底是网页，还是图像或文件。它也是纯粹提示性的属性，没有实际功能。<ahref="smile.jpg"type="image/jpeg">示例图片</a>上面代码中，type属性提示这是一张图片。(9)downloaddownload属性表明当前链接用于下载，而不是跳转到另一个URL。<ahref="demo.txt"download>下载</a>上面代码点击后，会出现下载对话框。注意，download属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。如果download属性设置了值，那么这个值就是下载的文件名。<ahref="zhansanjie.exe"download="wc235.exe">点击下载</a>上面代码中，下载文件的原始文件名是zhansanjie.exe。点击后，下载对话框提示的文件名是wc235.exe。注意，如果链接点击后，服务器的HTTP回应的头信息设置了Content-Disposition字段，并且该字段的值与download属性不一致，那么该字段优先，下载时将显示其设置的文件名。download属性还有一个用途，就是有些地址不是真实网址，而是数据网址，比如data:开头的网址。这时，download属性可以为虚拟网址指定下载的文件名。<ahref="data:,Hello%2C%20World!">点击</a>上面链接点击后，会打开一个虚拟网页，上面显示HelloWorld!。<ahref="data:,Hello%2C%20World!"download="hello.txt">点击</a>上面链接点击后，下载的hello.txt文件内容就是“Hello,World!”。2、邮件链接链接也可以指向一个邮件地址，使用mailto协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件。<ahref="mailto:492298663@qq.com">联系我们</a>上面代码中，链接就指向邮件地址。点击后，浏览器会打开一个邮件地址，让你可以向492298663@qq.com发送邮件。除了邮箱，邮件协议还允许指定其他几个邮件要素。subject：主题cc：抄送bcc：密送body：邮件内容<ahref="mailto:492298663@qq.com?cc=test@test.com&subject=The%20subject&body=The%20body">发送邮件</a>上面代码中，邮件链接里面不仅包含了邮箱地址，还包含了cc、subject、body等邮件要素。这些要素的值需要经过URL转义，比如空格转成%20。不指定邮箱也是允许的，就像下面这样。这时用户自己在邮件程序里面，填写想要发送的邮箱，通常用于邮件分享网页。<ahref="mailto:">告诉朋友</a>3、电话链接如果是手机浏览的页面，还可以使用tel协议，创建电话链接。用户点击该链接，会唤起电话，可以进行拨号。<ahref="tel:13312345678">13312345678</a>上面代码在手机中，点击链接会唤起拨号界面，可以直接拨打指定号码。4、4.1、基本用法标签主要用于将当前网页与相关的外部资源联系起来，通常放在元素里面。最常见的用途就是加载CSS样式表。<linkrel="stylesheet"type="text/css"href="theme.css">上面代码为网页加载样式表theme.css。除了默认样式表，网页还可以加载替代样式表，即默认不生效、需要用户手动切换的样式表。<linkhref="default.css"rel="stylesheet"title="DefaultStyle"><linkhref="fancy.css"rel="alternatestylesheet"title="Fancy"><linkhref="basic.css"rel="alternatestylesheet"title="Basic">上面代码中，default.css是默认样式表，默认就会生效。fancy.css和basic.css是替换样式表(rel="alternatestylesheet")，默认不生效。title属性在这里是必需的，用来在浏览器菜单里面列出这些样式表的名字，供用户选择，以替代默认样式表。还可以加载网站的favicon图标文件。<linkrel="icon"href="/favicon.ico"type="image/x-icon">手机访问时，网站通常需要提供不同分辨率的图标文件。<linkrel="apple-touch-icon-precomposed"sizes="114x114"href="favicon114.png"><linkrel="apple-touch-icon-precomposed"sizes="72x72"href="favicon72.png">上面代码指定iPhone设备需要的114像素和72像素的图标。也用于提供文档的相关链接，比如下面是给出文档的RSSFeed地址。<linkrel="alternate"type="application/atom+xml"href="/blog/news/atom">4.2、rel属性rel属性表示外部资源与当前文档之间的关系，是标签的必需属性。它可以但不限于取以下值。alternate：文档的另一种表现形式的链接，比如打印版。author：文档作者的链接。dns-prefetch：要求浏览器提前执行指定网址的DNS查询。help：帮助文档的链接。icon：加载文档的图标文件。license：许可证链接。next：系列文档下一篇的链接。pingback：接收当前文档pingback请求的网址。preconnect：要求浏览器提前与给定服务器，建立HTTP连接。prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。prerender：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。search：提供当前网页的搜索链接。stylesheet：加载一张样式表。下面是一些示例。<linkrel="author"href="humans.txt"><linkrel="license"href="copyright.html"><linkrel="alternate"href="https://es.zhansanjie.com/"hreflang="es"><linkrel="me"href="https://zhansanjie.com/profiles/someone"type="text/html"><linkrel="me"href="mailto:name@example.com"><linkrel="me"href="sms:+18888888888"><linkrel="archives"href="http://zhansanjie.com/archives/"><linkrel="index"href="http://zhansanjie.com/article/"><linkrel="first"href="http://zhansanjie.com/article/"><linkrel="last"href="http://zhansanjie.com/article/?page=42"><linkrel="prev"href="http://zhansanjie.com/article/?page=1"><linkrel="next"href="http://zhansanjie.com/article/?page=3">4.3、资源的预加载某些情况下，你需要浏览器预加载某些资源，也就是先把资源缓存下来，等到使用的时候，就不用再从网上下载了，立即就能使用。预处理指令可以做到这一点。预加载主要有下面五种类型。(1)告诉浏览器尽快下载并缓存资源(如脚本或样式表)，该指令优先级较高，浏览器肯定会执行。当加载页面几秒钟后需要该资源时，它会很有用。下载后，浏览器不会对资源执行任何操作，脚本未执行，样式表未应用。它只是缓存，当其他东西需要它时，它立即可用。<linkrel="preload"href="image.png"as="image">rel="preload"除了优先级较高，还有两个优点：一是允许指定预加载资源的类型，二是允许onload事件的回调函数。下面是rel="preload"配合as属性，告诉浏览器预处理资源的类型，以便正确处理。<linkrel="preload"href="style.css"as="style"><linkrel="preload"href="main.js"as="script">上面代码要求浏览器提前下载并缓存style.css和main.js。as属性指定加载资源的类型，它的值一般有下面几种。"script""style""image""media""document"如果不指定as属性，或者它的值是浏览器不认识的，那么浏览器会以较低的优先级下载这个资源。有时还需要type属性，进一步明确MIME类型。<linkrel="preload"href="sintel-short.mp4"as="video"type="video/mp4">上面代码要求浏览器提前下载视频文件，并且说明这是MP4编码。下面是预下载字体文件的例子。<linkrel="preload"href="font.woff2"as="font"type="font/woff2"crossorigin>注意，所有预下载的资源，只是下载到浏览器的缓存，并没有执行。如果希望资源预下载后立刻执行，可以参考下面的写法。<linkrel="preload"as="style"href="async_style.css"onload="this.rel='stylesheet'">上面代码中，onload指定的回调函数会在脚本下载完成后执行，立即插入页面。(2)的使用场合是，如果后续的页面需要某个资源，并且希望预加载该资源，以便加速页面渲染。该指令不是强制性的，优先级较低，浏览器不一定会执行。这意味着，浏览器可以不下载该资源，比如连接速度很慢时。<linkrel="prefetch"href="https://www.zhansanjie.com/">(3)要求浏览器提前与某个域名建立TCP连接。当你知道，很快就会请求该域名时，这会很有帮助。<linkrel="preconnect"href="https://www.zhansanjie.com/">(4)要求浏览器提前执行某个域名的DNS解析。<linkrel="dns-prefetch"href="//zhansanjie.com/">(5)要求浏览器加载某个网页，并且提前渲染它。用户点击指向该网页的链接时，就会立即呈现该页面。如果确定用户下一步会访问该页面，这会很有帮助。<linkrel="prerender"href="http://zhansanjie.com/">4.4、media属性media属性给出外部资源生效的媒介条件。<linkhref="print.css"rel="stylesheet"media="print"><linkhref="mobile.css"rel="stylesheet"media="screenand(max-width:600px)">上面代码中，打印时加载print.css，移动设备访问时(设备宽度小于600像素)加载mobile.css。下面是使用media属性实现条件加载的例子。<linkrel="preload"as="image"href="map.png"media="(max-width:600px)"><linkrel="preload"as="script"href="map.js"media="(min-width:601px)">上面代码中，如果屏幕宽度在600像素以下，则只加载第一个资源，否则就加载第二个资源。4.5、其他属性标签的其他属性如下。crossorigin：加载外部资源的跨域设置。href：外部资源的网址。referrerpolicy：加载时Referer头信息字段的处理方法。as：rel="preload"或rel="prefetch"时，设置外部资源的类型。type：外部资源的MIME类型，目前仅用于rel="preload"或rel="prefetch"的情况。title：加载样式表时，用来标识样式表的名称。sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。5、用于加载脚本代码，目前主要是加载JavaScript代码。<script>console.log('helloworld');</script>上面代码嵌入网页，会立即执行。也可以加载外部脚本，src属性给出外部脚本的地址。<scriptsrc="javascript.js"></script>上面代码会加载javascript.js脚本文件，并执行。type属性给出脚本的类型，默认是JavaScript代码，所以可省略。完整的写法其实是下面这样。<scripttype="text/javascript"src="javascript.js"><script>type属性也可以设成module，表示这是一个ES6模块，不是传统脚本。<scripttype="module"src="main.js"><script>对于那些不支持ES6模块的浏览器，可以设置nomodule属性。支持ES6模块的浏览器，会不加载指定的脚本。这个属性通常与type="module"配合使用，作为老式浏览器的回退方案。<scripttype="module"src="main.js">script><scriptnomodulesrc="fallback.js">script>还有下面一些其他属性，大部分跟JavaScript语言有关，可以参考相关的JavaScript教程。async：该属性指定JavaScript代码为异步执行，不是造成阻塞效果，JavaScript代码默认是同步执行。defer：该属性指定JavaScript代码不是立即执行，而是页面解析完成后执行。crossorigin：如果采用这个属性，就会采用跨域的方式加载外部脚本，即HTTP请求的头信息会加上origin字段。integrity：给出外部脚本的哈希值，防止脚本被篡改。只有哈希值相符的外部脚本，才会执行。nonce：一个密码随机数，由服务器在HTTP头信息里面给出，每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单，只有在白名单内的脚本才能执行。referrerpolicy：HTTP请求的Referer字段的处理方法。6、标签用于浏览器不支持或关闭JavaScript时，所要显示的内容。<noscript>您的浏览器不能执行JavaScript语言，页面无法正常显示。noscript>上面这段代码，只有浏览器不能执行JavaScript代码时才会显示，否则就不会显示。
中国互联网举报中心