Skip to main content

作业布置

说说你对元素语义化的理解​

  • 元素语义化就是用正确的元素做正确的事情。虽然在理论上，所以的 html 元素都可以通过 css 样式实现相同的事情，但是这么做会使事情复杂化，所以我们需要元素语义化来降低复杂度。

  • 例如，<h1>标签用来表示文档或者网页的主要标题，而<div>标签则可以用于定义文档的区块。

  • 另外，<p>标签用来表示一个段落，<strong>标签用来标识重点内容，这些内容在搜索引擎中会有更高的排序。

  • 元素语义化在我们实际的开发中有很多好处，比如：

    • 提高代码的阅读性和可维护性;
    • 减少 coder 之间的沟通成本;
    • 能让语音合成工具正确识别网页元素的用途，以便做出正确的反应;
    • 有利于 SEO(Search Engine Optimization);

说说你对 SEO 的理解​

  • SEO（搜索引擎优化）是一种网络市场营销技术，它可以帮助搜索引擎更好地检索和排名网站。SEO 将帮助网站排名更高，从而使网站更容易被潜在用户发现。

  • SEO 包括对网站的关键字优化，确保网站拥有特定的关键字，并且使用这些关键字来排名网站。它还涉及到网站架构，确保网页路径友好，以及网页标题和描述的有效性，使搜索引擎能够更好地检索网站。

  • Google 搜索引擎的工作流程主要分为三个阶段：

    • 抓取：Google 会使用名为"抓取工具"的自动程序搜索网络，以查找新网页或更新后的网页。Google 会将这些网页的地址（即网址）存储在一个大型列表中，以便日后查看。我们会通过许多不同的方法查找网页，但主要方法是跟踪我们已知的网页中的链接。

    • 编入索引：Google 会访问它通过抓取得知的网页，并会尝试分析每个网页的主题。Google 会分析网页中的内容、图片和视频文件，尝试了解网页的主题。这些信息存储在 Google 索引中，而 Google 索引是一个存储在海量计算机中的巨大数据库。

    • 呈现搜索结果：当用户在 Google 上进行搜索时，Google 会尝试确定最优质的搜索结果。"最佳"结果取决于许多因素，包括用户的位置、语言、设备（桌面设备或手机）以及先前用过的搜索查询。例如，在用户搜索"自行车维修店"后，Google 向巴黎用户显示的答案与向香港用户显示的答案有所不同。支付费用不能提高网页在 Google 搜索结果中的排名，网页排名是完全依靠算法完成的。

什么是字符编码​

计算机只认识 0 和 1，但我们各个国家的人都需要在计算机上使用各自的文字，为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制。

于是就出现了字符编码，字符编码将我们的自然语言编码成二进制给计算机看，然后再把这些二进制解码为自然语言给我们看。

CSS 编写样式的方式以及应用场景​

css 有三种常用的编写方式，分别是内联样式、内部样式表和外部样式表

  • 内联样式的应用场景：在 Vue 的 template 中某些动态的样式会使用内联样式。
  • 内部样式表的应用场景：Vue 开发中，每个组件都有一个 style 元素，使用的是内部样式表的方式，不过原理并不相同。
  • 外部样式表的应用场景：外部样式表是开发中最常用的方式，将所有 css 文件放在一个独立的文件夹中，然后通过 link 元素引入到需要的文件中。
    • 也可以在 index.css 文件中通过 @import url(路径) 引入其他 css 样式。

最常见的 CSS 样式以及作用​

  • font-size：设置文字大小
  • color：设置前景色 (颜色)
  • background-color：设置背景色
  • width：设置宽度
  • height：设置高度

自行查找 2 个案例练习​

根据之前学习的 HTML 元素和 CSS 样式找 2 个案例练习

案例一：文字居中案例​

案例二：网页布局案例​

颜色的表示方式​

  • 颜色关键字（color keywords）：

  • 三原色光模式（RGB color model），又称 RGB 颜色模型或红绿蓝颜色模型，是一种加色模型，将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加，以合成产生各种色彩光。

    • RGB 是一种色彩空间，通过 R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；
    • 十六进制 #RRGGBB
      • R（红）、G（绿）、B（蓝）是十六进制字符（0–9、A–F）。例如 #FF0000 是纯红色。
    • 十六进制 #RRGGBBAA
      • R（红）、G（绿）、B（蓝）是十六进制字符（0–9、A–F）。
      • 其中 AA 是 alpha 通道值 (透明度)，介于 00 和 FF 之间。
    • 十六进制 #RGB
      • R（红）、G（绿）、B（蓝）和 A（alpha）是十六进制字符（0–9、A–F）；
      • 是六位数形式（#RRGGBB）的减缩版
      • #RGB 的 R、G、B 分别等于 RR、GG、BB 的值，例如 #FF0000 等于 #F00。
    • 十六进制 #RGBA
      • R（红）、G（绿）、B（蓝）和 A（alpha）是十六进制字符（0–9、A–F）；
      • 是八位数形式（#RRGGBBAA）的减缩版
      • #RGBA 的 R、G、B、A 分别等于 RR、GG、BB、AA 的值，例如 #0f38 等于 #00ff3388。
      • #RGBA 的 A 是 alpha 通道值 (透明度)，介于 00 和 FF 之间。
    • 函数符 RGB
      • 这是一个由 3 个值 (0 到 255) 组成的 3 组数，例如 RGB（255，0，0）
      • R（红）、G（绿）、B（蓝）可以是 <number>（数字），或者 <percentage>（百分比），255 相当于 100%。
    • 函数符 RGBA
      • 这是 RGB 值的一个变体，其中含有一个 alpha 通道值（介于 0 和 1 之间），例如 RGBA(255, 0, 0, 0.5)
      • A（alpha）可以是 0 到 1 之间的数字，或者百分比，数字 1 相当于 100%（完全不透明）。

  • 三元素色彩模型（HSL color model），又称 HSL 颜色模型或色相、饱和度、亮度颜色模型，是一种以色相（Hue）、饱和度（Saturation）、亮度（Lightness）为基础的颜色模型。

    • HSL 是一种色彩空间，通过 H（hue，色相）、S（saturation，饱和度）、L（lightness，亮度）三个属性来组成了不同的颜色；
    • 十六进制 #HSL
      • H（色相）、S（饱和度）、L（亮度）是十六进制字符（0–9、A–F）；
      • 是六位数形式（#HSL）的减缩版
      • #HSL 的 H、S、L 分别等于 HH、SS、LL 的值，例如 #FF0000 等于 #F00。
    • 十六进制 #HSLA
      • H（色相）、S（饱和度）、L（亮度）和 A（alpha）是十六进制字符（0–9、A–F）；
      • 是八位数形式（#HSLA）的减缩版
      • #HSLA 的 H、S、L、A 分别等于 HH、SS、LL、AA 的值，例如 #0f38 等于 #00ff3388。
      • #HSLA 的 A 是 alpha 通道值 (透明度)，介于 00 和 FF 之间。
    • 函数符 HSL
      • 这是一个三元素的值，包括色调，饱和度和亮度值，例如 HSL(0, 100%, 50%)
    • 函数符 HSLA
      • 这是 HSL 值的一个变体，其中含有一个 alpha 通道值，例如 HSLA(0, 100%, 50%, 0.5)