MDN笔记📒（一）

bucksfizz
157 阅读8分钟

写写笔记

CSS相关

CSS 布局主要基于盒模型，每个占据页面空间的块都有这样的属性：

  • padding：即内边距，围绕着内容（比如段落）的空间。
  • border：即边框，紧接着内边距的线。
  • margin：即外边距，围绕元素外部的空间。
  • width ：元素的宽度
  • background-color ：元素内容和内边距底下的颜色
  • color ：元素内容（通常是文本）的颜色
  • text-shadow ：为元素内的文本设置阴影
  • display ：设置元素的显示模式（暂略）

Javascript相关

语句后加；
大小写敏感
let或者var来声明一个变量
javascript里面一切皆对象
判断相等===，不等！==

alert() 会弹出一个对话框
prompt() 函数弹出需要用户输入数据的对话框
调用 localStorage API ，可以将数据存储在浏览器中供后续获取

function setUserName() {
  let myName = prompt('请输入你的名字。');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'hello，' + myName;
}

这里用 localStorage 的 setItem() 函数来创建一个'name' 数据项，并把 myName 变量复制给它。最后将 textContent 属性设置为一个欢迎字符串加上这个新设置的名字。

通过github发布网站

教程： 搜就行了 1 2
进入你的Mac上指定的目录下，进行查看有何变化，发现多了个.git的文件夹（默认是隐藏的），如果在你的Mac上看不到可以执行下面的命令（显示隐藏文件）：

defaults write com.apple.finder AppleShowAllFiles -bool true

不想让你的Mac显示隐藏文件，可以执行如下命令：

defaults write com.apple.finder AppleShowAllFiles -bool false

Mac上传本地项目文件夹到远程Github个人仓库的方法及常见报错处理
Mac上Git之创建本地库
轻松搞定GitHub Pages

原义字符等价字符引用
<&lt;
&gt;
"&quot;
'&apos;
&&amp;

HTML相关

相关的。浏览器并不会将 HTML 编译成其它形式，而是直接解析并显示结果（称之为解释，而非编译）。

元数据

当你在网站上查看源码时，你也会发现其他类型的元数据。你在网站上看到的许多功能都是专有创作，旨在向某些网站(如社交网站)提供可使用的特定信息。
例如fb的open graph data元数据协议。 Twitter 也拥有自己的类型的专有元数据协议。

建立超链接

  • 连接到同一网站的其他位置，尽可能用相对位置：

因为-，在可能的情况下使用相对URL更有效。当使用绝对URL时，浏览器首先通过DNS（见万维网是如何工作的）查找服务器的真实位置，然后再转到该服务器并查找所请求的文件。另一方面，使用相对URL时，浏览器只在同一服务器上查找被请求的文件。因此，如果你使用绝对URL而不是相对URL，你就会不断地让你的浏览器做额外的工作，这意味着它的效率会降低。

  • 链接到要下载的资源时，可以用一个download属性来设置默认的下载文件名

  • 电子邮件链接 mailto属性

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

还可以提供其他信息 Send mail with cc, bcc, subject and body 代码如下：

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

其中每个字段都要是URL编码的，也就是不能出现空格等非打印字符
注意用？分隔主URL和参数值
mailto：参数值之间用&分隔

描述列表

偶尔遇到的第三种类型的列表。 描述列表使用跟其他类型列表不同的闭合标签〈dl〉
每一项描述术语用<dt>(description terms)
每一项的描述用<dd>(description definition)
一个术语 <dt> 可以同时有多个描述 <dd>

标记引用

块引用和行内引用

块引用

如果想引用块级内容（段落，列表），用<blockquote>包裹，cite的URL指向被引用内容的链接，渲染块引用时浏览器默认会自动缩进。

行内引用

行内引用<q>，浏览器默认将其作为普通文本渲染在引号中

块引用和行内引用都可以为<cite>元素添加链接，添加的链接默认斜体

缩略语

<abbr>包裹缩略语和缩写，对该词的解释放在title属性里
<acronym>首字母缩略词，已基本废弃

展示代码

<code>标记计算机通用代码
<pre>通常用于代码块，可以保留空白
<var>用于标记具体变量名称
<kbd>用于标记键盘或其它类型的输入
<samp>输出

标记时间和日期

这样的格式可供机器识别

<time datetime="2016-01-20">2016年1月20日</time>

还有许多支持的格式。

文档与网站架构

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

  • <header>：页眉。是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉
  • <nav>：导航栏。
  • <main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。每个页面只能用一次<main>，位于<body>里，最好不要嵌套到其他元素中
  • <aside>：侧边栏，经常嵌套在 <main> 中。包含一些间接信息（术语条目、作者简介、相关链接，等等）。
  • <footer>：页脚。

无语义元素
<div>是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。
<span>是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。

换行与水平分割线
均为（空元素）
<br> 可在段落<p>中进行换行
<hr>是一条水平的直线

HTML中的图片

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

备选文本alt属性的值是对图片的描述，用于图片无法正常显示时代替的显示内容。
实际上，装饰性图片就不应该放在HTML文件里， CSS 背景图片才应该用于插入装饰图片，但如果这种情况无法避免， alt=""会是最佳处理方案。
title会给一个鼠标悬停的内容提示。

为图片搭配说明文字

使用 HTML5 的 <figure> 和 <figcaption> 元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

CSS背景图片

CSS插入的文本没有备选文本信息，没有语义上的意义，不能被屏幕阅读器识别。
所以，如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片。 使用方式：

p {
  background-image: url("images/dinosaur.jpg");
}

视频与音频内容

HTML5新特性<video> <video>标签，以及一些 JavaScript 和 APIs 用于对其进行控制。
[OVPs] (在线视频提供商)

<video>元素

例子1:

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
  • 可以使用 controls 来包含浏览器提供的控件界面，同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。 <video>标签内的内容为 后备内容，当浏览器不支持video标签时，就会显示这段内容。

使用多个播放源以提高兼容性 --- 像 MP3、MP4、WebM这些术语叫做容器格式。他们定义了构成媒体文件的 音频轨道和视频轨道的 储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。

要使媒体文件在不同平台、不同设备的浏览器上都可以观看，这需要多种编码器组合使用，但这是一件非常麻烦的事。

可以怎么做呢，例子2如下：
在这个例子里，浏览器会检查<source>标签，并且播放第一个与自身codec相匹配的媒体，WebM和MP4两种格式目前已经足够支持大多数平台和浏览器。

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

将src属性从<video>标签中移除，转而将它放在几个单独的标签<source>中，type属性是可选的，但建议加上这个属性。
因为type包含了视频文件的MIME types，同时浏览器也会通过检查type属性来迅速跳过不支持的格式，如果没有添加type属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式。

video的其他特性 ---请看例子3:

<video controls width="400" height="400"
       autoplay loop muted preload="auto"
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

  • poster这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

  • preload这个属性被用来缓冲较大的文件，有3个值可选：

    • "none" ：不缓冲
    • "auto" ：页面加载后缓存媒体文件
    • "metadata" ：仅缓冲文件的元数据

<audio>元素

<audio>标签的使用方式与<video>几乎完全相同，但因为他没有视觉部件，所以没有width/height属性
除此之外，<audio> 标签支持所有 <video> 标签拥有的特性

avatar
文章
阅读
粉丝