Kun

Kun

IT学徒、技术民工、斜杠青年,机器人爱好者、摄影爱好 PS、PR、LR、达芬奇潜在学习者

共 212 篇文章

链接

Kun's Blog

​ html和css是做网页和前端的基础，也是基本构成

​ 从开始学习前端之后，其实一直没有特别地学习过html和css。最开始写过一周之后，因为想要搭建好看的样式，开始使用bootstrap，再后来学习spa应用，react和vue，使用框架和库能快速地搭建想要的界面。

​ 直到后面找前端工作参加面试的时候和参加工作之后开始写，才发现html和css还是前端基本功，包括vue和react其实也只是封装了很多东西，一定要了解基础原理和改进方法才能用好。

​ 所以继续开始记录。

HTML

Doctype

声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，处于html标签之前，这并不是一个 HTML 标签。DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。

严格模式（又称标准模式，Standards模式）和混杂模式（Quirk模式）都是指浏览器的呈现模式，要与Doctype的两种风格区别开来（严格（ strict ）和过渡（ transitional ），过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本）。

严格模式又称标准模式，是指浏览器按照 W3C 标准解析代码，呈现页面

混杂模式又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码，即使用一种比较宽松的向后兼容的方式来显示页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml111.dtd"

HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

DOCTYPE不存在或格式不正确会让文档以混杂模式呈现

<!DOCTYPE html>

头部标签

meta标签

HTML <meta> 元素表示那些不能由其它 HTML 元相关（meta-related）元素之一表示的任何元数据信息。

属性

charset：声明文档的字符编码。其值必须是与ASCII大小写无关的"utf-8"。

name和content：name 和 content 属性可以一起使用，以名-值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。

Name的属性值：

<meta name="Generator" content="">

Generator用以说明生成工具

<meta name="KEYWords" content="">

Keywords用以向搜索引擎说明网页的关键字

<meta name="description" content="">

description用来向搜索引擎说明站点的主要内容

<meta name="author" content="">

author用来向搜索引擎说明站点的制作作者

<meta name="Robots" content="all|none|index|noindex|follow|nofollow"/>

robots属性用来告诉搜索引擎是否可以被检索

all：文件将被检索，且页面上的连接可以被查询

none:文件将不被检索，且页面上的连接不可以被查询

index：文件将被检索，

follow：页面上的连接可以被查询

noindex：文件将不被检索，但页面上的连接可以被查询

nofollow：文件将不被检索，但页面上的连接可以被查询

http-equiv的属性值

<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00">

Expires可以用于设置网页的过期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式

<meta http-equiv="Pragma" content="no-cache">

Pragma用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中调出

<meta http-equiv="Refresh" content="n;url=http://yourlink">

refresh用于让网页在指定的时间内跳转到指定页面

<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00">

Set-cookie用于cookie设定，如果网页过期，则存盘的cookie将被删除。需要注意的是也是使用GMT时间格式

<meta http-equiv="windows-Target" content="_top">

强调页面在当前窗口中医独立页面展示，可以防止自己的页面被别人当作一个iframe调用

<meta http-equiv="Page-Enter" content="revealTrans(duration=10,transition=50)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=20,transition=6)">

用于设定进入和离开页面的特殊效果，这个功能即FrontPage中的网页过渡，不过所加的网页不能是一个iframe页面

属性定义了一个编译指示指令。这个属性叫做 **http-equiv**(alent) 是因为所有允许的值都是特定HTTP头部的名称content-type 如果使用这个属性，其值必须是"text/html; charset=utf-8"。注意：该属性只能用于 MIME type 为 text/html 的文档，不能用于MIME类型为XML的文档。

itemprop 属性，meta 元素提供用户定义的元数据。

Property的属性值：

og是一种新的http头部标记，即Open Graph Protocol，为了提高站外内容的传播效率，2010年F8会议上，Facebook开放了一套开放内容协议，即open graph protocol，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。目前之中协议被SNS网站如fb等采用

<meta property="og:type" content="video"/>
<meta property="og:title" content="video"/>
<meta property="og:image" content="video"/>
<meta property="og:url" content="video"/>
<meta property="og:locale" content="video"/>
<meta property="og:description" content="video"/>
<meta property="fb:app_id" content="video"/>

Og:url:页面的权威链接，此标签是未加修饰的网址，没有会话变量、用户识别参数或者计数器

Og:image:分享网址时所显示的图片

og:type：内容的媒体类型，此标签会影响网页内容在动态消息的显示方式，如果不指定类型则默认为website

og:locale：资源的区域设置，默认为en_US

Og:title:文章的标题，不包含任何品牌，例如网址名称

Og:description:内容的简单描述，通常为2-4个句子

fb:app_id:要使用fb成效分析，则将应用编号添加到主页中

facebook调试器：https://developers.facebook.com/tools/debug

外链图标

link标签

苹果书签图标：

<link rel="apple-touch-icon" href="apple-icon" size="152*152">

注意：书签bookmark的png分辨率不能太小，否则显示不了效果

网页小图标

<link rel="shortcut icon" href="favicon">
<link rel="bookmark" href="/favicon.ico" type="image/x-icon" />

link标签还可以使用prefetch和preload属性，

preload 是声明式的 fetch，可以强制浏览器请求资源，同时不阻塞文档 onload 事件

Prefetch 提示浏览器这个资源将来可能需要，但是把决定是否和什么时间加载这个资源的决定权交给浏览器

对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch

preload 是对浏览器指示预先请求当前页需要的资源（关键的脚本，字体，主要图片）。

prefetch 应用场景稍微又些不同 —— 用户将来可能在其他部分（比如视图或页面）使用到的资源。如果 A 页面发起一个 B 页面的 prefetch 请求，这个资源获取过程和导航请求可能是同步进行的，而如果我们用 preload 的话，页面 A 离开时它会立即停止

使用 preload 和 prefetch，我们有了对当前页面和将来页面加载关键资源的解决办法。

prefetch与preload的缓存策略

Chrome 有四种缓存: HTTP 缓存，内存缓存，Service Worker 缓存和 Push 缓存。preload 和 prefetch 都被存储在 HTTP 缓存中。

当一个资源被 preload 或者 prefetch 获取后，它可以从 HTTP 缓存移动至渲染器的内存缓存中。如果资源可以被缓存（比如说存在有效的cache-control 和 max-age），它被存储在 HTTP 缓存中可以被现在或将来的任务使用，如果资源不能被缓存在 HTTP 缓存中，作为代替，它被放在内存缓存中直到被使用

管理外链的内容

form标签

input标签

script标签

现代网站中，脚本往往比html更重，更大，处理时间也更长。

当浏览器加载html时，遇到<script>...</script>标签时浏览器就不能继续构建DOM，它必须立即执行此脚本，对于外部脚本<script src="..."></script>也是一样，浏览器必须等待脚本下载完并执行结束之后才能继续处理剩余的页面。

这会导致两个问题：

​ 1.脚本不能访问到位于它之后的DOM元素，无法访问到意味着也无法给它们添加处理程序

​ 2.如果页面顶部有一个笨重的脚本会阻塞页面，在该脚本下载并执行完之前用户都不能看到页面。

可以把script放在html页面的底部，这样浏览器会下载完整的HTML文档之后在监测到脚本

但是对于长的HTML文档，这样会造成明显的延迟

script标签只有在head部分才有效，如果将脚本放在body中就没有用了

defer特性

defer特性告诉浏览器不要等待脚本，浏览器继续构建DOM，脚本会在后台下载，等DOM构建完之后，在DOMContentLoaded事件执行之前执行

同时defer能保证相对顺序，就像保证常规脚本一样

defer特性只适用于外部js文件，即src内加载的脚本

<!--这两个脚本会并行下载，但是不管谁先下载完，都会先执行pre.js,执行完之后再执行after.js-->
<script defer src="pre.js"></script>
<script defer src="after.js"></script>

async特性

async特性的script，不会与DOM和其他脚本产生冲突，独立运行，任何一个asnyc js加载完就运行，也不会等待任何东西

defer、async与正常代码区别

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

同时有async和defer特性

如果同时指定两者，async优先于现代浏览器，而支持defer但不支持async的旧版浏览器将回退到defer

动态脚本

可以通过js代码来动态加载脚本

function loadScript(src){
  let script = document.createElement('script');
  script.src = src;
  script.async = false;//默认通过js加载脚本是async方式，可以设置为false，则按照defer的规则来执行
  document.body.append(script);
}

loadScript("pre.js")
loadScript("after.js")

常见HTML标签属性

html连接：标签：target属性规定在何处打开链接文档。浏览器会根据target的属性值去打开与其命名或名称 相符的

​ download属性：同源情况下，添加download属性，点击a标签后会下载文件， download=""可以指定下载文件名

​ href：链接，如果是下载文本文件，在href的链接尾部加入"?response-content-type=application/octet-stream",如"http://oss-cdn.nebula-graph.com.cn/package/2.0.1/nebula-graph-2.0.1.el8.x86_64.rpm?response-content-type=application/octet-stream"

​ 如果href是mailto链接，chrome会提示不安全，添加target="_top"可以消除

框架或者窗口.

​ _blank:在新窗口中打开被链接文档。

​ _self:在相同的框架中打开被链接文档。

​ _top:在整个窗口中打开被链接文档。

​ _parent:在父框架集中打开被链接文档。

html图片：标签：alt是在图片未加载完成的时候做完图片的替代文字线性，title是图片的解释文字

​ onError事件：img的src不是有效地址时，会出发onerror事件

​ onabort 图片加载时用户点击停止加载时触发，通常这里触发一个提示：图片正在加载。

​ onload 图片加载完成之后触发

​ 在vue的项目中，我们同样可以使用vue提供的once方法，template内的代码如下

<div class="item-img">
  <img id="errorImg" v-bind:src="'http://bbg-seller.oss-cn-qingdao.aliyuncs.com/test/gp/p1/' + item.picture" v-on:error.once="dosomething($event)" v-bind:alt="item.name">
</div>
<scirpt>
method: { 
 dosomething: function (e) {
  	e.currentTarget.src = "http://www.ianbiangou.cn/index/ICON2.png"
  }
}
</scirpt>

Html