感觉CSS难学，怎么办？

SS层叠样式表

其实CSS并不难学。最主要的是要掌握方法。

就个人经验而言，学习任何一门专业知识都是有一定步骤的：

首先，你需要了解该专业知识的一般概念、用途、用法，甚至也要了解一下其历史沿革。比如CSS的概念是层叠样式表，英文是“Cascading Style Sheets”，用于给网页添加样式，类似于给房屋粉刷墙壁、铺地砖、打吊顶。等等……

其次，你需要对该专业知识的各详细参数属性有大概的了解，知道各属性是用来做什么的。比如CSS中的选择器有哪几种，在何种情况下使用，CSS对文本的样式有哪些控制属性，对盒子模型又有哪些控制属性等等……我在刚开始了解这些属性的时候，是边理解边在脑中想象其在网页中呈现的样子的，这样记忆这些属性和参数就会更形象而且牢固。

然后，你就可以找一台配置不用很好的电脑，来动手实践一下，写一些样式，来感知一下CSS的效果，以及印证之前学习中对CSS中各属性呈现样子的想象了。

在平时可以多看看网上别人写得样式，在浏览网页时，可以按F12查看页面中各控件的CSS代码，不断加深对代码的熟悉感。

最后就是不断实践，多练习。不出一年，甚至更短时间，你就会成为CSS中等水平的Front-End-Engineer了

我最近在编写《精通CSS》系列文章，赶紧去看看：

CSS属性值函数（1）概述及语法
CSS属性值函数（2）calc()数值计算
CSS属性值函数（3）clamp()限值函数
CSS属性值函数（4）极值函数min()、max()
未完待续……

加油吧……

1）背景样式属性，用于定义 HTML 元素的背景色、背景图片，同时还可以进行背景定位、背景图片重复、背景图片固定。

background-color
background-image
background-size
background-position
background-repeat

background-color 属性可以给指定标签元素设置背景色。

举个例子！我们给 body 元素设置一个背景颜色：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body></body>
</html>

background-image 属性可以把图像插入背景。background-size 属性可以给背景图设置大小。

举个例子！我们给 body 元素设置一个背景图像。

wget https://labfile.oss.aliyuncs.com/courses/3773/moon.jpg

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
      }
    </style>
  </head>
  <body></body>
</html>

通过 background-position 属性，可以改变图像在背景中的位置。

background-position 属性，设置属性值为居中:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
        background-position: center;
      }
    </style>
  </head>
  <body></body>
</html>

background-repeat 属性是用来设置背景图像是否平铺。

下表列出了 background-repeat 属性的一些可取值以及每个可取值的含义。

可取值	描述
repeat	背景图像将在垂直方向和水平方向重复（默认值）
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次

我们规定应该从父元素继承 background-repeat 属性的设置。

background-repeat 属性并设置值为不平铺:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
        background-position: center;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body></body>
</html>

（2）文本相关的属性：

line-height 属性
text-indent 属性
text-align 属性
letter-spacing 属性
text-decoration 属性
white-space 属性
line-break 属性

文本属性用于定义文本的样式，通过文本属性，可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示：

属性	可取值	描述
line-height	normal、number、length、%	设置行高
text-indent	length、%	设置文本缩进
text-align	left、right、center、justify、start、end	设置对齐方式
letter-spacing	normal、length	设置字符间距
text-decoration	line、color、style、thickness	设置文本修饰
white-space	normal、pre、nowrap、pre-wrap、pre-line、break-spaces	规定如何处理空白
line-break	auto、loose、normal、strict、anywhere、unset	处理如何断开带有标点符号的文本的行

line-height 用于设置多行元素的空间量，可取值具体说明如下：

normal：取决于用户端。
number：数字乘以元素的字体大小。
length：指定长度用于计算高度。
%：计算值是给定的百分比值乘以元素计算出的字体大小。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>line-height 的使用</title>
    <style>
      div {
        width: 300px;
        height: 400px;
        border: 1px solid;
        font-size: 15px;
        display: inline-block;
        vertical-align: top;
      }
      .div1 {
        line-height: 2; /*15 * 2*/
      }
      .div2 {
        line-height: 30%; /*15 * 30% */
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <p>“海水呀，你说的是什么？”</p>
      <p>“是永恒的疑问。”</p>
      <p>“天空呀，你回答的话是什么？”</p>
      <p>“是永恒的沉默。”</p>
    </div>
    <div class="div2">
      <p>“海水呀，你说的是什么？”</p>
      <p>“是永恒的疑问。”</p>
      <p>“天空呀，你回答的话是什么？”</p>
      <p>“是永恒的沉默。”</p>
    </div>
  </body>
</html>

显示为，

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

我们总是先扬起尘土

然后抱怨自己看不见

- 2024.04.17 -

JavaScript是一种轻量级的编程语言，通常用于网页开发，以增强用户界面的交互性和动态性。然而在HTML中，有多种方法可以嵌入和使用JavaScript代码。

本文就带大家深入了解如何在HTML中使用JavaScript。

一、使用 script 标签

要在HTML中使用JavaScript，我们需要使用<script>标签。这个标签可以放在<head>或<body>部分，但通常我们会将其放在<body>部分的底部，以确保在执行JavaScript代码时，HTML文档已经完全加载。

使用 <script> 标签有两种方式：直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript 文件。

包含在 <script> 标签内的 JavaScript 代码在浏览器总按照从上至下的顺序依次解释。

所有 <script> 标签都会按照他们在 HTML 中出现的先后顺序依次被解析。

HTML 为 <script> 定义了几个属性：

1）async：可选。表示应该立即下载脚本，但不妨碍页面中其他操作。该功能只对外部 JavaScript 文件有效。

如果给一个外部引入的js文件设置了这个属性，那页面在解析代码的时候遇到这个<script>的时候，一边下载该脚本文件，一边异步加载页面其他内容。

2）defer：可选。表示脚本可以延迟到整个页面完全被解析和显示之后再执行。该属性只对外部 JavaScript 文件有效。

3）src：可选。表示包含要执行代码的外部文件。

4）type：可选。表示编写代码使用的脚本语言的内容类型，目前在客户端，type 属性值一般使用 text/javascript。不过这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

1.1 直接在页面中嵌入JavaScript代码

内部JavaScript是将JavaScript代码放在HTML文档的<script>标签中。这样可以将JavaScript代码与HTML代码分离，使结构更清晰，易于维护。

在使用<script>元素嵌入JavaScript代码时，只须为<script>指定type属性。然后，像下面这样把JavaScript代码直接放在元素内部即可：

<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>

如果没有指定script属性，则其默认值为text/javascript。

包含在<script>元素内部的JavaScript代码将被从上至下依次解释。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。

在使用<script>嵌入JavaScript代码的过程中，当代码中出现"</script>"字符串时，由于解析嵌入式代码的规则，浏览器会认为这是结束的</script>标签。可以通过转义字符“\”写成<\/script>来解决这个问题。

1.2 包含外部 JavaScript 文件

外部JavaScript是将JavaScript代码放在单独的.js文件中，然后在HTML文档中通过<script>标签的src属性引用这个文件。这种方法可以使代码更加模块化，便于重用和共享。

如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接。

<script type="text/javascript" src="example.js"></script>

外部文件example.js将被加载到当前页面中。
外部文件只须包含通常要放在开始的<script>和结束的</script>之间的那些JavaScript代码即可。

与解析嵌入式JavaScript代码一样，在解析外部JavaScript文件（包括下载该文件）时，页面的处理也会暂时停止。

注意：带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整URL。

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

于是，位于外部域中的代码也会被加载和解析。

1.3 标签的位置

在HTML中，所有的<script>标签会按照它们出现的先后顺序被解析。在不使用defer和async属性的情况下，只有当前面的<script>标签中的代码解析完成后，才会开始解析后面的<script>标签中的代码。

通常，所有的<script>标签应该放在页面的<head>标签中，这样可以将外部文件（包括CSS和JavaScript文件）的引用集中放置。

然而，如果将所有的JavaScript文件都放在<head>标签中，会导致浏览器在呈现页面内容之前必须下载、解析并执行所有JavaScript代码，这可能会造成明显的延迟，导致浏览器窗口在加载过程中出现空白。

为了避免这种延迟问题，现代Web应用程序通常会将所有的JavaScript引用放置在<body>标签中的页面内容的后面。这样做可以确保在解析JavaScript代码之前，页面的内容已经完全呈现在浏览器中，从而加快了打开网页的速度。

二、执行JavaScript 程序

JavaScript 解析过程包括两个阶段：预处理（也称预编译）和执行。

在编译期，JavaScript 解析器将完成对 JavaScript 代码的预处理操作，把 JavaScript 代码转换成字节码；
在执行期，JavaScript 解析器把字节码生成二进制机械码，并按顺序执行，完成程序设计的任务。

1、执行过程

HTML 文档在浏览器中的解析过程是：按照文档流从上到下逐步解析页面结构和信息。

JavaScript 代码作为嵌入的脚本应该也算做 HTML 文档的组成部分，所以 JavaScript 代码在装载时的执行顺序也是根据 <script> 标签出现的顺序来确定。

你是不是厌倦了一成不变的编程模式？想要突破自我，挑战新技术想要突破自我，挑战新技术？却迟迟找不到可以练手的项目实战？是不是梦想打造一个属于自己的支付系统？那么，恭喜你，云端源想免费实战直播——《微实战-使用支付宝/微信支付服务，网站在线支付功能大揭秘》正在进行，点击前往获取源码！云端源想

2、预编译

当 JavaScript 引擎解析脚本时候，他会在与编译期对所有声明的变量和函数预先进行处理。当 JavaScript 解析器执行下面脚本时不会报错。

alert(a); //返回值 undefined
var a=1;
alert(a); //返回值 1

由于变量声明是在预编译期被处理的，在执行期间对于所有的代码来说，都是可见的，但是执行上面代码，提示的值是 undefined 而不是 1。

因为变量初始化过程发生在执行期，而不是预编译期。在执行期，JavaScript 解析器是按照代码先后顺序进行解析的，如果在前面代码行中没有为变量赋值，则 JavaScript 解析器会使用默认值 undefined 。

由于第二行中为变量 a 赋值了，所以在第三行代码中会提示变量 a 的值为 1，而不是 undefined。

fun(); //调用函数，返回值1
function fun(){
alert(1);
}

函数声明前调用函数也是合法的，并能够正确解析，所以返回值是 1。但如果是下面这种方式则 JavaScript 解释器会报错。

fun(); //调用函数，返回语法错误
var fun=function(){
alert(1);
}

上面的这个例子中定义的函数仅作为值赋值给变量 fun 。在预编译期，JavaScript 解释器只能够为声明变量 fun 进行处理，而对于变量 fun 的值，只能等到执行期时按照顺序进行赋值，自然就会出现语法错误，提示找不到对象 fun。

总结：声明变量和函数可以在文档的任意位置，但是良好的习惯应该是在所有 JavaScript 代码之前声明全局变量和函数，并对变量进行初始化赋值。在函数内部也是先声明变量，后引用。

通过今天的分享，相信大家已经对JavaScript在HTML中的应用有了一定的了解。这只是冰山一角，JavaScript的潜力远不止于此。希望这篇文章能激发大家对编程的热情，让我们一起在编程的世界里探索更多的可能性！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

在线咨询

上一篇：盒子模型-第六章
下一篇：安全防范提示惊心！赌博网站：不怕你赢，就怕你不玩儿！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

感觉CSS难学，怎么办？

一、使用 script 标签

二、执行JavaScript 程序

您的项目需求