前端学习笔记 (HTML5+CSS3)

这是 Jonas Schmedtmann 的 HTML5 + CSS3 课程笔记

视频地址：Build Responsive Real-World Websites with HTML and CSS

前端开发 VS 后端开发

静态网站

浏览器访问静态网站

HTML、CSS、JS 文件以及一些图片资源等统称为静态资源，前端开发通俗来讲就是编写 HTML、CSS、JS 这些浏览器能理解的语言

对于静态网站而言，浏览器发出请求后，服务器将网站的静态资源原封不动地回应给浏览器，本博客就是一个纯静态的网站，没有后端数据库的存在，静态资源也已经提前生成好，存放在服务器上

动态网站

对于更加复杂的应用场景，比如让不同的用户看到不同的界面，允许不同的用户给网站添加新的评论等，就需要借助数据库和后端应用程序完成，这样的网站就是动态网站

浏览器访问动态网站

后端开发就是使用 node.js、php、python 等后端语言编写在服务器上运行的应用程序，这些应用程序负责将数据库里的数据提取出来组合成一个新网站给返回给浏览器，也就是说动态网站的 HTML、CSS、JS、图片等文件是动态生成的，这也是静态网站和动态网站最根本的区别

前端三大语言

HTML、CSS、JS 是前端的三大语言，其中 HTML 负责组织网页的内容，CSS 负责组织网页的呈现形式 (样式), JS 则是真正的编程语言，是负责用户和网页交互的脚本语言

HTML、CSS、JS

Mozilla 开发者文档

HTML

HTML 简介：

HTML(HyperText Markup Language) 名为超文本标记语言，并非真正的编程语言，而是一种标记语言
HTML 用来描述和组织网页的内容 (content)
HTML 文件许多元素组成用来描述不同的内容，如:paragraphs, links, headings, images, video, etc
浏览器可以理解并将 HTML 文件渲染成网页

HTML Element 的构成

HTML 元素由一对闭合的 tag 和中间的 content 构成，content 里可以嵌套别的 HTML 元素，嵌套进去的元素被成为子元素 (child element)

HTML 元素的构成

HTML 文件的结构

<!DOCTYPE html>
<!--lang="zh"表示中文，"en"表示英文-->
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>The Basic Language of the Web: HTML</title>
  </head>
  <body>
    <h1>The Code Magazine</h1>
  </body>
</html>

缩进只是为了方便人读，浏览器并不关心缩进

<!DOCTYPE html> 让浏览器知道这是一个 HTML 文档，应当使用 HTML5 规范来渲染
所有的网页都需要一个 <html></html> 元素，其内部总有一个 <head></head> 元素和一个 <body></body> 元素，<head></head> 元素和 <body></body> 元素的 content 是可选的
<head></head> 元素用于指定不在网页显示的内容，比如网页标签栏的标题，网页的附加信息和链接 CSS 文件
<body></body> 元素用于指定所有在网页上可见的内容
HTML 元素可以通过属性来进行额外描述，比如<html></html>可以通过 lang 属性为页面指定语言，<meta/>的 charset 属性可以用来为界面指定字符集

meta 为元数据意味着关于数据的数据

HTML 常用元素

1. 标题 (heading)：<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>

在网站中最好只有一个一级标题

2. 段落 (paragraphs)：<p></p>

3. 文本样式变化：

让文本变成粗体，表示重要：<strong></strong>
让文本变成斜体，表示强调：<em></em>

<ol>
  <li>The opening tag</li>
  <li>The closing tag</li>
  <li>The actual element</li>
</ol>

<ul>
  <li>To be able to use the fundamental web dev language</li>
  <li>
    To hand-craft beautiful websites instead of relying on tools like
    Worpress or Wix
  </li>
  <li>To build web applications</li>
  <li>To impress friends</li>
  <li>To have fun 😃</li>
</ul>

4. 列表 (list)：

无序列表 (unordered list)：<ul></ul>
有序列表 (ordered list)：<ol></ol>
列表中的元素 (list item): <li></li>

5. 图片 (image)：<img src="图片路径" alt="别名" width="500" height="200" />

img 的 src 属性用来描述图片的路径
img 的 alt 属性用来描述图片的名称，可以让搜索引擎更好地理解图片，并帮助使用屏幕阅读器的用户，所以永远不用跳过 alt 属性
img 元素没有 content, 因此也没有 close tag, 只是 tag 里多了一个 /, 经过我的测试发现加不加 / 都可以

6. 锚点 (Anchor)：<a href="https://ylyz.cc" target="_blank">This is a hyperlink</a>

href 属性用来指定超链接的目标地址，不加 href 属性就只是一个普通的锚点元素，加了才变成链接，如果 href="#"的话则是一个不指向任何地方的超链接，单击它则会回到页面顶部
target 属性设置成"_blank"会变成在新标签页打开 (默认是在当前页打开)

7.按钮 (button):<botton>Botton Name</botton>

HTML 容器元素

容器元素实际上不展示任何内容，而是将元素以某种形式组织在一起，表示某种意义，像是创建了一个隐形的盒子将其分组，这将在 HTML 语义化和 CSS 中起到重要的作用

<body>
  <header>
    <nav></nav>
  </header>
  <article>
    <header></header>
  </article>
  <aside></aside>
  <footer></footer>
</body>

1. 导航 (navigation)：<nav></nav>

2. 头部 (header):<header></header>

3. 事物 (article):<article></article>不只是用来表示文章，可以用来表示任何一个事物，比如一支笔、一本书，要在 HTML 表示一台计算机也可以用它

4. 页脚 (footer):<footer></footer>

5. 次要信息 (aside):<aside></aside>在页面的主要部分展示的次要信息，补充信息，文章的相关部分等，在视觉上 (CSS 中)aside 通常被用作侧边栏

在页脚写 Copyright 时经常需要用到 HTML 实体, 比如 & copy; 它将被渲染成©, 更多 HTML 实体

语义化 HTML

语义化 HTML(Semantic HTML): 当我们在写 HTML 时，不应该考虑 HTML 元素在页面上的外观、形状，而应该考虑 HTML 元素实际上意味着什么以及它代表什么，这是 HTML5 所提倡的

现在，并非所有 HTML 中的元素都是有语义的，比如<b></b>和<i></i>他们都是没有语义的元素，现在已经被语义化的<strong></strong>和<em></em>替代掉了，<div></div>这个组织元素的盒子也是没有语义的，在 HTML5 中，应当只在不想赋予元素任何意义的情况下使用<div></div>

语义化的意义：

有助于搜索引擎更好地理解网页的内容
帮助使用屏幕阅读器的用户

CSS

CSS 简介：

CSS(Cascading Style Sheets): 层叠样式表
CSS 用来描述 HTML 所写内容的视觉和表示效果
CSS 包含无数的属性用来格式化内容，比如关于字体、文本、间距、布局等的属性

CSS Rule 的构成

CSS Rule 由选择器和声明块构成，声明块内容有多条样式声明，每一条样式声明由属性和其值构成

CSS 规则的构成

内联、内部、外部 CSS

内联 CSS:

内联 CSS 通过 HTML 元素的 style 属性 (attribute) 直接指定该元素的 CSS 样式的属性 (property) 和值

<h1 style="color: blue">Heading 1</h1>

永远不应该使用内联 CSS

内部 CSS:

内部 CSS 写在 <head></head>元素下的<style></style>元素里，在这里写的 CSS 规则需要先写选择器 (selector) 来选择 CSS 样式所作用的 HTML 元素

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

显然，当 CSS 代码的长度太长时，这样也不太方便

外部 CSS:

外部 CSS 的写法和内部 CSS 写法一致，只是外部 CSS 写在外部文件里，通过 <head></head> 元素下的<link />元素来进行链接，<link />元素类似于<img />, 也没有 content

<link href="style.css" rel="stylesheet" />

<link />元素的唯一作用就是链接外部 CSS 文件，与锚点类似，它通过 href 属性指定 CSS 文件的链接，通过 rel 属性告知 HTML 这是一个样式表，这里的 rel 属性是不可缺省的

CSS 基本用法

文本相关的 CSS 属性

h1 {
  color: blue;
  font-size: 26px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-style: bold;
}

h2 {
  font-size: 40px;
  font-family: sans-serif;
  font-weight: 900;
  text-decoration: underline orangered;
}

h3 {
  font-size: 30px;
  font-family: sans-serif;
}

h4 {
  font-size: 20px;
  font-family: sans-serif;
  text-transform: center;
}

p {
  font-size: 22px;
  font-family: sans-serif;
  line-height: 1.5;
}

HTML 元素的 CSS 样式会被子元素继承

1. color: 指定字体的颜色

2. font-size: 指定字体的大小，26px 表示在屏幕上占 26 个物理像素

3. font-family: 可以指定一个真正的字体，但一般不会这样做，因为并不是所有计算机上都安装了目标字体，所以应当使用关键字，指定选用哪一类字体

sans-serif 表示无衬线字体，无衬线字体指的是字母末尾没有小尾巴的字体，相较于 serif 字体要看起来干净一些

4. font-style: 指定斜体、粗体等

5. font-weight: 指定字重，即粗细，其值可以是 bold 或数字 (100,200...900,etc), bold 就相当于 700

6. text-transform: 指定文本转换方式，比如全部大写等

7. text-align: 指定文本对齐方式

8. text-decoration: 指定文本装饰，如下划线

9. line-height: 指定行高，1.5 代表行高是字体大小的 1.5 倍

列表选择器和后代选择器

列表选择器用来批量选择元素，可以用来为一些 HTML 元素添加同样的 CSS 样式

h1,
h2,
h3,
h4{
  font-family: sans-serif;
}

后代选择器用来为特定元素添加样式

p {
  font-size: 22px;
}

footer p {
  font-size: 5px;
}

<footer></footer>元素下的<p></p>的字体大小为 5px，其他地方的<p></p>的字体大小为 22px

后代选择器选择的是 <footer></footer> 下所有的 <p></p>, <footer></footer>和<p></p> 不一定非要是父子关系，也可以是爷孙关系等，当然后代选择器也可以选择一级级地嵌套指定

class 与 id 选择器

后代选择器和 HTML 元素的组织结构相关，如果变动 HTML 元素的位置，导致父子关系发生变化，那么 CSS 后代选择器也要进行相应的修改，这样会比较麻烦，所以可以通过另一种解耦的方式来为特定的元素添加样式，这种方式就是 class 与 id

<h1 class="heading" id="unique">Heading1</h1>

class 和 id 都是 HTML 元素的属性 (attribute), CSS 可以通过 HTML 元素 tag 中的 class、id 属性来选择相应的 HTML 元素

/* .用来选择 class */
.heading {
  font-size: 22px;
}
/* # 用来选择 id */
#unique {
  font-size: 20px;
}

class 和 id 的区别就在于 class 的值可以重复，但是 id 的值不可以重复

应当尽可能地使用 class 而避免使用 id, 因为 class 在只有一个的时候可以替代 id，并且方便以后进行扩展

CSS 中的颜色

RGB 模型

在 CSS 中可以通过 RGB Notation 来表示颜色，但更常用的是用十六进值来表示颜色，只有当需要表示透明度时才使用 RGB Notation

CSS 中的颜色表示

十六进制值在特殊情况下可以简写

当 RGB 三个通道的值都是一样的时候，就会呈现出灰色 特殊的灰色

Pseudo-classes 伪类

伪类 (Pseudo-classes) 也是一种选择特定 HTML 元素的方式，可以理解为 CSS 提前计算好的一些的选择器，可以通过:来进行使用

li:first-child{
  font-weight: bold;
}

这个选择器表示选择那些是其父元素的第一个子元素的<li></li>元素，select the li which is the first child of its parent element

与之相应的，也有last-child,nth-child(even), 分别代表它是其父元素的最后一个子元素、第偶数个子元素：

li:last-child {
  font-style: italic;
}

/* 第偶数个子元素 */
li:nth-child(even) {
  color: red;
}

/* 第奇数个子元素 */
li:nth-child(odd) {
  color: red;
}

/* 第 4 个子元素 */
li:nth-child(4) {
  color: red;
}

值得注意的是，下面这段代码只有当<p></p>是<article></article>的第一个子元素时才起作用，因为伪类修饰的是<p></p>

article p:first-child {
  color: red;
}

对于<article></article>下所有的<p></p>,若<p></p>满足其是其父元素的第一个子元素，则被选择

伪类在父元素下面有多个不同子元素时，并不怎么方便，但是对于<li></li>这种，其父元素下都是相同的子元素的情况就非常方便，当然伪类并不只有 xxx-child 这一种，在超链接中也经常用到伪类

超链接中的伪类：

在超链接中使用伪类可以为不同状态的链接设置不同的样式，但是要遵循 LVHA(链接、访问过、悬停、点击) 的定义顺序，

a:link {
  color: #1098ad;
  text-decoration: none;
}

a:visited {
  color: #1098ad;
}

a:hover {
  color: orangered;
  font-weight: bold;
  text-decoration: underline orangered;
}

a:active {
  background-color: black;
  font-style: italic;
}

a:link表示选择是超链接的锚点
a:visited表示选择被访问过的锚点，就像谷歌和百度中被点击过的链接会用紫色显示一样
a:hover表示选择有鼠标悬停的锚点，也就是说在鼠标悬停的时候会变色
a:active表示选择被激活的锚点，也是说被鼠标点击时会变色

至于为什么要按 LVHA 的顺序定义，我的理解是这几个选择器是同级别的，所有后定义的有限级高，然后想一想鼠标移动到链接上并点击的过程，就知道为什么要按这个顺序定义了

其他常用 CSS 属性

ul {
  list-style: none;
}

header {
  background-color: #f7f7f7f;
  border: 5px solid #1098ad;
}

1. list-style: 设置 list item 的样式

2. background-color: 设置背景颜色

3. border: 设置盒子的边框，接收多个值，分别为边框大小、样式、颜色

border 的样式可以是 solid 实线，dashed 虚线，dotted 点等等，也可以通过 border-top、border-bottom、border-right、border-left 等属性只对 border 的某一个边界进行设置

浏览器开发人员工具

打开浏览器开发人员工具的方式：

F12
Ctrl+Shift+i
右键 - 检查 (这种方式可以直接定位到 HTML 元素)

推荐把开发者工具的位置设置在屏幕底部，目前只需要关注 Elements 面板和其右边的 Styles 面板即可

浏览器开发者工具

Elements 面板展示了所有的 HTML 元素，Styles 面板展示了所选 HTML 元素的所有样式，其中也包括了用户代理样式 (user agent stylesheet), 也就是浏览器默认样式

Styles 面板的样式表是可以直接编辑的，也可以选择启用和关闭某些样式，浏览器会实时显示效果，而不会改变真正的代码，可以很方便地进行测试，点击 Styles 面板的:hov按钮可以强制为元素启用状态，可以用来测试上面所提到的 LVHA 效果

CSS 选择器冲突

当我们有多条相同的 CSS 属性应用在一个 HTML 元素上时，究竟会呈现哪个的效果呢？这时根据选择器等的不同，会有不同的优先级，当选择器优先级相同时，则是呈现写在后面的 CSS 属性的效果

CSS 选择器优先级

实际上所有的 CSS 规则都是有效的，这里描述的是当 CSS 属性的值发生冲突的情况

如果想要 CSS 某条属性拥有最高的优先级，可以在属性的后面加上!important关键字

.author {
  font-style: italic !important;
}

CSS 中的继承

CSS 中的继承是指 HTML 元素的一部分 CSS 属性的值会被其子 HTML 元素继承，具体的继承关系可以在控制台中查看

strong 元素的样式和其从父元素继承的样式

我们通常会为 body 元素编写一个整体的默认属性值，从而继承给所有的子元素，同时因为继承很容易被覆盖，所以也不妨碍为每个子元素设置单独的属性值

当然并非所有的属性都会被子元素继承，大多数能被继承的元素都是和文本相关的，类似于 border 这种继承了会变得很怪的属性通常是不会被继承的

继承示例

另外，继承和选择器冲突是不同的，注意区分清楚，继承很容易被覆盖，而选择器冲突规则是在多个选择器选择了相同元素的时候才适用的

比如通用选择器*是因为选择器冲突规则而容易被覆盖而非因为继承而容易被覆盖

* {
  border-top: 5px;
}

CSS 盒子模型

CSS 盒子模型 (Box Model) 由 content、padding、border 和 margin 四个部分组成，其中 content、padding 和 border 共同组成了 fill area, fill area 是填充背景颜色和背景图片的区域

前端开发 VS 后端开发 #

静态网站 #

动态网站 #

前端三大语言 #

HTML #

HTML Element 的构成 #

HTML 文件的结构 #

HTML 常用元素 #

HTML 容器元素 #

语义化 HTML #

CSS #

CSS Rule 的构成 #

内联、内部、外部 CSS #

CSS 基本用法 #

文本相关的 CSS 属性 #

列表选择器和后代选择器 #

class 与 id 选择器 #

CSS 中的颜色 #

Pseudo-classes 伪类 #

其他常用 CSS 属性 #

浏览器开发人员工具 #

CSS 选择器冲突 #

CSS 中的继承 #

CSS 盒子模型 #

CSS 中的元素种类 #