• src(Source)是指向物体的来源地址，是引入，在img、script、iframe等元素上使用；href(Hypertext Reference)是超文本引用，指向需要连接的地方，是与该页面有关联，是引用，在link和a等元素上使用。src通常用作"拿取"(引入)，href用作"连结前往"(引用)
• 替换的元素上使用src，src属性仅仅嵌入当前资源到当前文档元素定义的位置。href用于在涉及的文档和外部资源之间建立一个关系。 href指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。
• 在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕后，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也算为什么将js脚本放在底部而不是头部。但是当浏览器解析到href资源时，会识别该文档为css文件，会下载并且不会停止对当前文档的处理

center

让你实现水平居中，用这个标签就对了，标签名也是非常的语义化

<center>零一</center>

前段时间笔者看到有个老外在查品的时候喜欢问一个问题：请解释Twitter的前十行源码

其实这十来行源码如果真的要我来解释作用的话，那真是要麻了。其中确实有好几个不清楚的地方，所以笔者去具体查了这些代码的作用，今日分享一下

• <!DOCTYPE html>

  这个应该是笔者刚学前端的时候学的知识，这里就直接引用MDN的内容了

  提示

  在HTML中，文档类型doctype的声明是必要的。在所有文档的头部，你都将会看到""身影。这个声明的目的是防止浏览器在渲染文档时，奇幻岛我们成为的"怪异模式(兼容模式)"的渲染模式， ""确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式

• <html dir="ltr" lang="zh" >

  首先html标签是根元素，所以别的元素都在里面。

  标签上有两个属性

  1. dir： 文档的文本方向，默认是ltr,表示从左到右。对于大部分语言来说都是这个文本方向，但比如阿拉伯问的haul就是从右到左了，使用rtl
  2. lang: 文档于洋，zh表示中文

• <meta charset="utf-8">

  mate标签是文档级元数据元素，charset的作用是指定文档的字符集

• <meta name="viewport" .../>

  这行代码应该大部分读者都了解它的意思。作用是告诉浏览器当前页面的窗口大小以及窗口缩放比例

  • width: 窗口的宽度，默认是device-width,表示设备的宽度
  • initial-scale: 缩放比例，默认是1，表示不缩放
  • maximum-scale: 最大缩放比例，默认是1，表示不缩放
  • user-scalable: 是否允许用户缩放，默认是yes，表示允许。代码中的0表示禁止用户缩放
  • viewport-fit: 多用于适配iPhone刘海屏

• <meta property="og:site_name" content="Twitter" />

  这是Open Graph(OG)元标签，这个标签作用可能挺多读者不清楚作用

  首先这其实算是一个协议，由Facebook搞的，之前我也发过一篇关于OG的详细文章讲解 ，大家可以看下：前端必看，连OG都不知道还好意思说自己开发过H5另外有兴趣的可以阅读下官方网站，里面介绍了不少别的字段。

• <meta name="apple-mobile-web-app-title" content="Twitter">

  这行与下一行都是作用在IOS上的，我们在IOS上能把某个网页添加到主屏幕上

  这个代码的作用是显示在屏幕上的书签标题，下一行代码作用是状态栏颜色

• <meta name="theme-color" content="#ffffff" />

  浏览器将根据content中的内容设定颜色。

  比如说我们设置为蓝色时，此时浏览器颜色表现如下：

• <meta http-equiv="origin-trial" content="..." />

  这应该又是一个鲜为人知的功能，主要是帮助开发者使用实验中的功能。

  这些实验中的功能都是做好但没开放出来的，如果我们想使用这个功能的话就需要用到这个标签了。

  有兴趣的读者可以在这个网站[2]上查看当前可用的实验功能，然后选择自己喜欢的功能并按照提示生成 token，然后再将这个标签填入 HTML 文件中即可启用选中的功能了。

  html {
      -ms-text-size-adjust: 1
      ...
  }

  这行就是纯 CSS 相关的内容了。

  • text-size-adjust: 根据设备尺寸自动调整文字大小，这是为1就是不调整，否则对于小屏幕来说字号可能会变得很少导致可读性降低
  • tap-highlight-color: 点击时的高亮颜色，这个应该挺容易才出意思了

格式|优点|缺点|使用场景 ---|---|---|---|--- gif| 文件小,支持动画，透明，无兼容性问题 | 只支持256种颜色 | 色彩简单的logo、icon、动图 jpg| 色彩丰富,文件小 | 有损压缩，反复保存图片质量下降明显 | 色彩丰富的图片/渐变图像 png| 无损压缩，支持透明，简单图片尺寸大小 | 不支持动画,色彩丰富的图片尺寸 | logo/icon/透明图 webp| 文件小，支持有损和无损压缩，支持动画、透明| 浏览器兼容性不好 | 支持webp格式的app和webview

资料

聊一聊几种常用web图片格式：gif、jpg、png、webp

alt是html标签的属性，而title即是html标签，又是html属性

在图像标签img中，除了常用的宽度width和高度height属性之外，还有两个比较重要的并且也会用到的属性，就是alt和title，这都是用来显示图片的具体信息的，但是这两个属性也有不同的地方。

title

• title作为标签时,网页的标题就是写在这对标签之内的
• title作为属性时，可以为元素提供额外的说明信息.例如：给超链接标签添加了title属性，title用来给链接文字或普通文字提示的。把鼠标移动到该链接上时，就会显示title的内容，以达到提示的效果

Accept

描述允许输入的文件类型

<input type="file" accept=".jpg, .png">

标签定义及使用说明

<!DOCTYPE>声明位于文档中的最前面位置，处于<html>标签之前。

<!DOCTYPE>声明不是一个HTML标签，它是用来告知Web浏览器页面使用了那种HTML版本。

在HTML4.01中，<!DOCTYPE>声明需引用DTD(文档类型声明)，因为HTML4.01是基于SGML.DTD指定了标记语言规则，确保了浏览器能够正确的渲染内容。

HTML5不是基于SGML的，因此不要求引用DTD。

提示: 总是给您的HTML文档添加<!DOCTYPE>声明，确保浏览器能够预先知道文档类型