三件套笔记
# 三件套笔记
# HTML
来看一下 HTML
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image" />
</body>
</html>
2
3
4
5
6
7
8
9
10
11
<!doctype html>——文档类型 (opens new window)。这是必不可少的开头。<html></html>—— 该元素包含整个页面的所有内容，有时候也称作根元素。它还包含lang属性，设置页面的主要语种。<head></head>——<head>元素。该元素作为想在 HTML 页面中包含但不想向用户显示的内容的容器。<meta charset="utf-8">——该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。<meta name="viewport" content="width=device-width">——视口元素 (opens new window)可以确保页面以视口宽度进行渲染，避免移动端浏览器以比视口更宽的宽度渲染内容，导致内容缩小。<title></title>—— 该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。<body></body>—— 该元素包含期望让用户在访问页面时看到的全部内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
# HTML 元标签
# HTML 标签
# h 标签
<!-- 4 个级别的标题 -->
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
2
3
4
5
# p 标签
<p>这是一个段落</p>
# 列表
无须列表
<p>At Mozilla, we're a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together…</p>
2
3
4
5
6
7
8
9
有序列表
<ol>
<li>沿这条路走到头</li>
<li>右转</li>
<li>直行穿过第一个十字路口</li>
<li>在第三个十字路口处左转</li>
<li>继续走 300 米，学校就在你的右手边</li>
</ol>
2
3
4
5
6
7
描述列表
描述列表的目的是标记一组项目及其相关描述
描述列表使用与其他列表类型不同的包裹标签 <dl>，每一项用 <dt> 包裹，每个描述都用 <dl> 包裹
<dl>
<dt>内心独白</dt>
<dd>
戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
</dd>
<dt>语言独白</dt>
<dd>
戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
</dd>
<dt>旁白</dt>
<dd>
戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
</dd>
</dl>
2
3
4
5
6
7
8
9
10
11
12
13
14
# 链接
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">
Mozilla Manifesto
</a>
2
3
我们可以使用 title 属性来补充链接的信息，例如，页面包含什么样的信息或者需要注意的事情
<p>
我创建了一个指向
<a
href="https://www.mozilla.org/zh-CN/"
title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">
Mozilla 主页</a
>的超链接。
</p>
2
3
4
5
6
7
8
当鼠标悬停在链接上面的时候，标题会作为提示信息出现
文档片段
我们还可以指定连接到某一个文档的特定部分，首先，我们需要给链接到的元素分配一个 id 属性，例如
<h2 id="Mailing_address">邮寄地址</h2>
为了连接到那个特定的 id 要把它放在 URL 的末尾，并在前面包含一个 #
<p>
要提供意见和建议，请将信件邮寄至
<a href="contacts.html#Mailing_address">我们的地址</a>。
</p>
2
3
4
你甚至可以在同一份文档下，通过链接文档片段，来链接到当前文档的另一部分
<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>
# 加粗
<strong> </strong>
# 斜体
<em> </em>
# 换行
<br>
水平分割线
<hr>
这个会产生一个水平分割线，用于语义上主题中断元素
# 引用
块引用
如果我们要引用一个段落，多个段落，一个列表等，应该用 <blockquote> 元素包裹起来，且在 cite 属性里面用 URL 指向应用的资源
<p>这是块引用：</p>
<blockquote
cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
<p>
<strong>HTML <code><blockquote></code> 元素</strong>（或<em
>HTML 块级引用元素</em
>）表示所附文本为扩展引用。
</p>
</blockquote>
2
3
4
5
6
7
8
9
10
浏览器默认会渲染为缩进，以表示这是一个引用
行内引用
使用 <q> 元素以表示行内引用
<p>
引用元素 <code><q></code> 是<q
cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q"
>用于不需要段落分隔的短引用。</q
>
</p>
2
3
4
5
6
7
# 文档与网站架构
一个标准的网页往往包含：
页眉
通常横跨于整个页面顶部有一个大标题 和/或 一个标志
导航栏
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致
主内容
中心的大部分区域是当前网页大多数的独有内容
侧边栏
一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
页脚
横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO (opens new window)。
一个“典型的网站”可能会这样布局：
为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：
<header>页眉<nav>导航栏<main>主内容，主内容中还可以有各种子内容区段，包括<article>，<section>，<div>等元素<aside>侧边栏，经常嵌套在<main>中<footer>页脚
# 无语义元素
<span> 是一个内联的无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。例如：
<p>
国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span
class="editor-note"
>[编辑批注：此刻舞台灯光应变暗]</span
>.
</p>
2
3
4
5
6
就可以通过编辑 editor-note 来修改批注的格式
<div> 是一个块级的无语义元素
# CSS
# 选择器
# 字体
有一些字体保护起来的，我们需要使用调用 Google Fonts API 把需要的字体引入，例如我们需要引入 Open Sans 字体，需要在 <head> 中插入
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
然后在 css 代码中插入
html {
font-size: 10px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */
font-family:
"Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */
}
2
3
4
5
# 盒模型
CSS 布局主要是基于盒子模型。每个在页面上占用空间的盒子都有类似的属性：
padding（内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。border（边框）：是紧接着内边距的实线。margin（外边距）：是围绕元素边框外侧的空间。
当然还有其他属性，包括了：
width：元素的宽度。background-color：元素内容和内边距底下的颜色。color：元素内容（通常是文本）的颜色。text-shadow：为元素内的文本设置阴影。display：设置元素的显示模式（继续阅读文章以了解更多细节）。
# JavaScript
# 基本语法
# 变量
let myVariable = "鲍勃";
# 条件语句
let iceCream = "chocolate";
if (iceCream === "chocolate") {
alert("我最喜欢巧克力冰淇淋了！");
} else {
alert("但是巧克力才是我的最爱呀……");
}
2
3
4
5
6
# 函数
function multiply(num1, num2) {
let result = num1 * num2;
return result;
}
2
3
4
# 事件
document.querySelector("html").addEventListener("click", function () {
alert("别戳我，我怕疼！");
});
2
3
这里的 addEventListener() 函数监听了 'click' 事件，然后在监听到事件 click 后运行后面的函数
后面的函数也叫匿名函数，因为没有具体的名字，还有另外一种写法
document.querySelector("html").addEventListener("click", () => {
alert("别戳我，我怕疼！");
});
2
3