初学者HTML、CSS和JS

一、HTML

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。

一个HTML元素包括：

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。
内容（Content）：元素的内容，本例中就是段落的文本。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。

块级元素和内联元素：

块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em> 和 <strong> 等元素创建强调。

1、html头部

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试页面</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

HTML 头部包含 HTML <head> 元素的内容，与 <body> 元素内容不同，页面在浏览器加载后它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据。

2、html文本处理基础

标题和段落：

在 HTML 中，每个段落是通过 <p> 元素标签进行定义的，比如下面这样：

<p>我是一个段落，千真万确。</p>

每个标题（Heading）都必须被包裹在一个标题元素中：

<h1>我是文章的标题</h1>

一共有六种标题元素标签——h1、h2、h3、h4、h5 和 h6。每个元素代表文档中不同级别的内容：<h1> 表示主标题，<h2> 表示二级子标题，<h3> 表示三级子标题，依此类推。

列表：

无序列表用于标记列表项目顺序无关紧要的列表，每份无序的清单从 <ul> 元素开始，然后就是用 <li> 元素把每个列出的项目单独包裹起来：

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

有序列表需要按照项目的顺序列出来，这个标记的结构和无序列表一样，除了需要用 <ol> 元素将所有项目包裹，而不是 <ul>：

<ol>
  <li>沿这条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

3、超链接

通过将文本或其他内容包裹在 <a> 元素内，并给它一个包含网址的 href 属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。

<p>
  我创建了一个指向
  <a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的链接。
</p>

电子邮件链接：

当点击一个链接或按钮时，可能会开启新的邮件的发送而不是连接到一个资源或页面。这种场景可以使用 <a> 元素和 mailto: URL 协议实现。其最基本和最常用的使用形式为一个指明收件人电子邮件地址的 mailto: 链接。例如：

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

4、引用

块引用：

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用 <blockquote> 元素包裹起来表示，并且在 cite 属性里用 URL 来指向引用的资源。例如，下面的示例代码就是引用的 MDN 的 <blockquote> 元素页面：

<p>
  The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
  <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an
  extended quotation.
</p>

要把这些转换为块引用，我们要这样做：

<p>Here is a blockquote:</p>
<blockquote
  cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

行内引用：

除了使用 <q> 元素以外，行内元素用同样的方式工作。例如，下面的标记包含了从 MDN <q> 页面的引用：

<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q"
    >intended for short quotations that don't require paragraph breaks.</q
  >
</p>

5、文档的基本组成

页眉

通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。

导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。

主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

页脚

<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。

HTML布局元素细节：

<main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其他元素。
<article> 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。
<section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
<aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼标题）。
<nav> 包含页面主导航功能。其中不应包含二级链接等内容。
<footer> 包含了页面的页脚部分。

二、CSS

CSS 是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

选择器（Selector）

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 <p> 元素）。要给不同元素添加样式，只需要更改选择器。

声明（Declaration）

一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）

改变 HTML 元素样式的途径（本例中 color 就是 <p> 元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

CSS 布局主要是基于盒子模型。在你的页面上占用空间的每个盒子都有类似的属性：

padding（内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。
border（边框）：是紧接着内边距的线。
margin（外边距）：是围绕元素边界外侧的空间。

目前为止，我们通过 HTML 元素名规定样式。你可以给 HTML 元素加个类名（class），再选中那个类名，这样就改变选中的样式。举个例子吧，咱们把 class 属性加到表里面第二个对象。你的列表看起来应该是这样的：

<ul>
  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>

在 CSS 中，要选中这个 special 类，只需在选择器的开头加个西文句点（.）。在你的 CSS 文档里加上如下代码：

.special {
  color: orange;
  font-weight: bold;
}

有时你会发现选择器中，HTML 元素选择器跟类一起出现：

li.special {
  color: orange;
  font-weight: bold;
}

这个意思是说，“选中每个 special 类的 li 元素”。你真要这样，好了，它对 <span> 还有其他元素不起作用了。你可以把这个元素再添上去就是了：

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

仅选择嵌套在<li> 元素内的<em>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。该选择器将选择<li>内部的任何<em>元素（<li>的后代）。

li em {
  color: rebeccapurple;
}