HTML 元素详解

HTML 元素

“CSS 规则集”详解

图解CSS声明

块级元素与行内元素的差别

块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间，例如超链接元素 <a> 或者强调元素：<em> 和 <strong>。

display:inline/block/inline-block区别

布尔属性

有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如disabled 属性，他们可以标记表单输入使之变为不可用 (变灰色)，此时用户不能向他们输入任何数据。

元数据

在你的站点增加自定义图标

在下载链接时使用 download 属性

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

电子邮件链接

使用 <a> 元素和 mailto:URL 的方案

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

这会创建一个链接，看起来像这样：向 nowhere 发邮件。

实际上，电子邮件地址是可选的。如果你忘记了（也就是说，你的 href 仅仅只是简单的“mailto”），一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以给他们选择的地址发送邮件。

指定详细信息

包含 cc、bcc、主题和主体的示例：

1
2
3

<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: URL 中的各个参数。

这是标准的 URL 查询标记方法。阅读 GET 方法以了解哪种 URL 查询标记方法是更常用的

抄送和密送的区别

收件人知道其他收件人是谁且知道抄送接受者有谁，但不知道密送接受者有谁；
抄送接受者知道收件人有谁且知道其他抄送接受者是谁，但不知道密送接受者有谁；
密送接受者知道收件人、抄送接受者有谁，但不知道其他密送接受者是谁。

在 HTML 中应用 CSS 和 JavaScript

1 2	<link rel="stylesheet" href="my-css-file.css"> <script src="my-js-file.js" defer></script>

rel="stylesheet" 表明这是文档的样式表，而 href 包含了样式表文件的路径
加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。

为文档设定主语言

1	<html lang="zh-CN">

如果你的 HTML 文档的语言设置好了，那么你的 HTML 文档就会被搜索引擎更有效地索引（例如，允许它在特定于语言的结果中正确显示），对于那些使用屏幕阅读器的视障人士也很有用（例如，法语和英语中都有“six”这个单词，但是发音却完全不同）。

这些代码是根据 ISO 639-1 标准定义的。你可以在 Language tags in HTML and XML 找到更多相关内容。

匿名函数与箭头函数

匿名函数，就是没有命名的函数；

箭头函数使用 () => 代替 function ()：

可替换元素

伪类

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的 ::first-line 伪元素可改变段落首行文字的样式。

::before

创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

描述列表

在 HTML 基础部分，我们讨论了如何在 HTML 中标记基本的列表，但是我们没有提到你偶尔会遇到的第三种类型的列表—描述列表 (description list) 。这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。让我们看一组术语和定义的示例：

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

输出

内心独白

戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。

语言独白

戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。

旁白

戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

浏览器的默认样式会在描述列表的描述部分（description definition）和描述术语（description terms）之间产生缩进。

HTML要点梳理（复习用）