JavaScript：06 HTML & CSS Crash Course[通俗易懂]

云烟 • 2023年 6月 1日下午3:00 • 未分类 • 阅读 295

欢迎大家来到IT世界,在知识的湖畔探索吧!

063 Section Intro

为了跟上下一节的项目，以及本课程中的其他项目，熟悉HTML和CSS的基础知识，它将会是非常有帮助的。

这就是这一节的全部内容，这是一个非常简单的HTML和CSS的速成课程。只是为了让你开始使用这些技术。

现在，如果你已经知道HTML和CSS，那么请跳过这一部分，但如果没有，那我们现在就继续吧。

视频加载中…

064 Basic HTML Structure and Elements

本讲主要学习HMTL结构和元素。

视频加载中…

HTML是超文本标记语言的缩写，我们基本上用它来描述网页的内容。HTML文档是由元素组成的。元素用一个开始和结束标签。所有HTML文档中的主要元素始终是HTML元素。

每个HTML文档都必须以标签开始，然后用HTML关闭标签。

在HTML元素里面，总是有标题和正文。

JavaScript：06 HTML & CSS Crash Course[通俗易懂]

head里面是有关页面的设置，还有CSS样式和href图标。href图标就是在浏览器标签上出现的小图标。

body体内可以使用h1标签，表示一级标题。

还有h2，h3，……，h6等，代表不同的样式。

p元素描述一个段落。

在VS Code的index.html上输入！和tab，可以自动生成html。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

DOCTYPE文档类型，说明这个文件是html5。

html语言是en英语。

065 Attributes, Classes and IDs

本讲主要学习属性、类和ID。

视频加载中…

在HTML中，有些元素可以有属性，这些属性基本上是描述元素的。

元素可以嵌套。p元素、h1和h2元素在body体内，作为body的子元素。

href是Hypertext Reference的缩写。意思是指定超链接目标的URL。href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。

欢迎大家来到IT世界,在知识的湖畔探索吧!<a href="网址">网址描述</a>

链接和前面的文字是一样的，所以锚点元素a称为内联元素。

h2元素是块元素。标题与前一个元素的文本不一致，它创建了一个新行，其中只包含此标题的内容。

图像元素，使用img标签，然后指定src源属性，也就是指定图像的路径。路径可以是当前文件夹，也可以是网络地址。img没有结束标签，在img标签末尾使用斜杠来闭环标签。

我们使用类和id来命名元素，也使用类和id选择元素，类和id是识别元素的关键。

id和类的区别，id必须是唯一的。id很少使用，用来设置元素样式或从javascript中选择它们。

接下来学习div元素。div指通用框。可以给div指定id属性名称。id的命名使用短横线来分隔两个不同的词。

<input type="text" placeholder="Your name" /><button>OK!</button>

文本框和OK按钮就显示出来了。

表单需要使用form元素。将div替换为form即可。

066 Basic Styling with CSS

本讲主要学习CSS样式。

视频加载中…

通过CSS来让网页更加好看。

CSS应用于head标签内。

使用style标签来写CSS样式。

在style标签内，可以针对body元素来设置样式。这叫body元素选择器。在body后面的大括号内，可以写CSS的声明，每个CSS声明都有一个属性名称。例如，设置背景颜色为绿色，这是一个简单的声明。查看index.html页面颜色为绿色。

欢迎大家来到IT世界,在知识的湖畔探索吧!<style>
body{
    background-color:green;
}
</style>

这就是CSS样式。

创建单独的style.css文件，和index.html相结合来实现CSS样式。

在style.css文件中将CSS的声明放过来。

在index.html文件中将style标签及内容改为link到style.css文件。

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

查看index.html页面颜色为绿色。

在style.css文件中，我们继续探索更多的CSS属性。

body {
    background-color:rgb(255, 247, 201);
    font-family: Arial;
    font-size: 20px;
}

字体设置会在整个body体内的部分子元素上生效。因为有些元素没有继承能力。

字体大小设置也会在body体内部分子元素上生效。h1和h2这种元素的字体大小有预定义，所以不会受影响。

除了body元素选择器，还可以定义其他元素选择器。对于h1元素，可以单独设置字体大小。

对于类和id，如何在style.css中设置？

对于first类，设置字体颜色。

.first {
    color: red;
}

对于表格id的设置背景颜色和边框样式。

在style.css文件中如下：

#your-name {
    background-color: rgb(255, 220, 105);
    border: 5px solid #444;
}

边界属性不会继承属性。

查看index.html页面变化如下。

067 Introduction to the CSS Box Model

本讲主要学习CSS盒子模型。

视频加载中…

盒子模型是CSS最基本的部分。

这是因为它是定义元素如何在网页上显示以及如何调整大小的主要因素。

图中，所有描述都可以使用CSS属性来表示。

这些描述是可选的。可以没有这个，或者没有那个。

内容：文字、图像等；

填充物：盒子周围透明区域，盒子内部；

边框：环绕填充物和内容；

页边：盒子之间的空隙；

填充区：被填充的区域。

接下来，我们做全局重置，涉及到以上属性的设置，需要用到所有元素。

在style.css文件中，需要引入“\*”符号，像通配符一样，表示选择页面上的所有元素。

* {    margin: 0;    padding: 0;    box-sizing: border-box;}

将margin和padding设置为0后，查看index.html页面少了很多空行。

盒子大小属性设置为边框。

在body内增加一些空间。

padding: 50px;

在h1内增加边框。

padding-bottom: 25px;

在h2内增加文本对齐方式。

text-align: center;

在图像之间增加空白空间。

padding: 25px;
margin-top: 30px;

在style.css文件中，注释使用/* */来完成。

将box-sizing: border-box;注释后，查看your-name的宽度在400的基础上增加了25和5，实际达到了460.

取消box-sizing: border-box;注释后，查看your-name的宽度严格限制在400，同时内容宽度自动调整为340。

P选择器，可以对所有段落进行样式设置。

P {
    margin-bottom: 20px;
}

输入框和按钮也可以进行样式设置。

input, button {
    padding: 10px;
    font-size: 16px;
}

对于链接也可以设置样式，改变默认的蓝色。

a {
    background-color: yellowgreen;
}

在CSS中的常用选择器，首先是点，然后是id。

还有一种情况，index.html中有2个h2元素，只对第2个h2元素设置样式。

#your-name h2 {
    color: olivedrab;
}

还有最常用的设置是关于图像的尺寸设置。

#course-image {
    width: 200px;
}

图像的长按照宽度的变化，成比例变化。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/18505.html