整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

JavaScript：06 HTML &am

JavaScript：06 HTML & CSS Crash Course

63 Section Intro

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

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

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

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


064 Basic HTML Structure and Elements

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

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

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

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

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

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>

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

html语言是en英语。


065 Attributes, Classes and IDs

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

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

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

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

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

<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样式。

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

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

CSS应用于head标签内。

使用style标签来写CSS样式。

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

<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盒子模型。

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

盒子模型是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;
}

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

0 课前准备

00.01 索引

  • 01 知了学习社课程简介

  • 02 本课程适用人群

  • 03 课程的学习意义

  • 04 课程设计模式

  • 05 HTML工作环境

  • 06 第一个网页“Hello,World”

  • 07 课程作业

00.02 课前提问

  1. 我们日常浏览的网页是怎样实现的？

01 知了学习社教程简介

知了学习社是一个交互式学习平台。课程学习资料均由专业人员及志愿者根据学科权威书目及热门公开课编写，第一版内容涵盖计算机、经济以及心理学等基础课程。全部课程的学习资料都以交互学习的形式，共享在知了学习社APP（Android&IOS）。部分课程会以文章的形式预览给大家！

02 本课程适用人群

  1. 想要拓宽视野，提升技能，脱离舒适区的人

  2. 有兴趣接触互联网Web的相关知识

  3. 没有编写HTML代码的经验或者没有系统的接触过HTML

  4. 每周有3个小时以上的时间用来学习及实践HTML

如果，你符合以上要求，那么这一系列课程将是你通往Web网络世界的关键钥匙。这门课程足够基础，哪怕你之前从来没有学习过任何编程知识。只要你勤于思考，你仍然可以轻松应付课程中的全部内容。

03 本课程的学习意义

在学习完本课程后，你将收获哪些？

  1. 技能——构建网页的能力

我们每天都在浏览着网页，我们的视线被网页中纷繁复杂的图片和文字所吸引。但是，可能你是否想象过，这一个个网页背后的模样?它们是如何实现的？是怎样一个过程让这些网页散发着魅力，让我们深陷其中？

在学习完本课程后，这一系列的问题，你都可以找到答案！

2. 视角——更规则的世界

计算机没有类似于人类的智能，他们只能按照人类制定下的规矩来运行。如果，你给出的规定不足够的明确，你就会发现计算机的行为完全不符合你的预期，它没有办法足够灵活的处理你的指令。同时，只要你的指令足够正确清楚，计算机也绝不会出错。

这样一个完全基于规则的程序世界，与我们日常生活的世界的运行规律完全不同。在学习本课程后，你将从另一个视角来审视自己的学习生活、人际关系甚至爱情。这个视角难以言状，非要概括的话可以说这种视角“更抽象、更细致、更系统化”。

04 教学模式

本课程的教学模式来源于“PQ4R”学习理论，即预览（Preview），设问（Question）、阅读（Read）、反思（Reflect）、背诵（Recite）和回顾（Review）。知了学习社的课程内容都是基于以上的流程进行设计，通过这样的流程来学习，将会大幅提高你的学习效率。

  1. 预览（Preview），课程第一部分，将展示本章学习内容的索引，以便清晰快速的了解学习内容的架构

  2. 设问（Question），课程第二部分，会向你提出2-3个相关问题，即带着问题去阅读

  3. 阅读（Read），即课程正文

  4. 反思（Reflect），在阅读之后，你需要回答课前提出的几个问题，试试自己能否说出令人满意的答案。

  5. 背诵（Recite），这个部分需要同学们根据自身情况来选择背诵内容。

  6. 回顾（Review），课后练习

PQ4R学习理论

话不多说，让我们开始今天的课程把。

05 HTML简介

HTML

HTML的全称是超文本标记语言 (Hyper Text Markup Language)，这套标记语言是通过一套标记标签进行工作的。这种标记的意义在于将文本以及文本相关的其他信息结合起来，从而展现出关于文档结构和数据处理的细节。

你可能不是很理解什么叫做文档结构和数据处理，让我们以古诗《春晓》举个例子你就明白了！

通常，我们看到的《春晓》应该是这个样子的。

春晓

孟浩然

春眠不觉晓，处处闻啼鸟。

夜来风雨声，花落知多少。

对于，人类来讲确实已经足够了，但是对于计算机来讲，这样的文本显然还不够结构化。比如，我想让计算机回答我这首诗的题目是什么？作者是谁？计算机显然没有办法给我正确的答案。如果，我想让计算机把所有古诗的题目加粗显示，作者用斜体显示，那就更为难它了！

但是，聪明的程序员们，为了解决这个问题。就发明了一种叫做HTML的标记语言来为文本附加一些信息，从而完成上述的艰巨任务。这套标记语言大概长成这个样子：

<题目> 春晓 </题目>

<作者> 孟浩然 </作者>

<诗句> 春眠不觉晓，处处闻啼鸟。</诗句>

<诗句> 夜来风雨声，花落知多少。</诗句>

这样一来，当我们想要计算机告诉我们古诗的题目时，它只要返还包含在<题目>和</题目>之间的内容就可以了，修改样式也是同样的道理。当然，这只是HTML标记语言强大功能的冰山一角。

好了，关于HTML的简介就先到这里，还有更有意思的等待着我们！

06 HTML工作环境

“工欲善其事，必先利其器”

其实，HTML的代码只要在文本编辑器中就可以了，我们不需要下载安装任何软件。只要你的电脑能创建txt文本文档就可以了。

但是为了有更好的编码体验，你也可以使用类似于sublime3这样的软件（无限期免费）来帮助我们。不过，如果你使用知了APP甚至可以在手机上交互式体验HTML编码。

07 第一个网页“Hello,World”

07.01 网页的构成

一个简单的HTML网页的构成，就像我们之前的那篇“春晓”一样，有标记和内容就可以了。

HTML的标记方式就是使用HTML标签(HTML tag)来进行标记的，因为HTML的规则制定者为了使其更广泛的被接受，所以这些标签都是以英文命名的。

这些标签具有普遍的规律，总结起来就是：

  • HTML标签是由尖括号包围的关键词，比如 <html>、<p>

  • HTML标签通常是成对出现的，比如 <html> 和 </html>

  • 标签对中的第一个标签是开始标签，第二个标签是结束标签

开始标签&闭合标签

记住这样的规律后，我们就可以开始编写我们的第一个网页了。

07.02 <html>标签

让我们先认识第一个标签<html>，这个标签用来标记整个HTML文档，所以我们的每一个网页的开始和结束时都要分别写上<html>标签和</html>的结束标签。你可以将其理解为是一种声明，“我要开始写HTML代码了”和“我代码写完了”。

07.03 <body>标签

<body>标签是用来标记正文内容的，这个正文指的是显示在页面上面的信息。你可能会问，难道还有信息是不展示在页面上面的吗？答案是：是的。举个简单的例子，我们在浏览网页时，会发现每个网页的题目都不同，这个内容就没有显示在网页的页面上，而是显示在网页标签中！

正文内容区

所以，记得在你想要展现在页面上的内容前加上<body>标签，结束时加上</body>标签。

07.04 Hello,world!

现在，我们在这一章需要用到的标签都已经学习完了，那么我们就开始运用它们吧！

让我们一起做一个网页，和世界打个招呼吧！（和世界打招呼，是每一个编程入门的传统）

由于，同学们可能是第一次接触HTML，所以在第一次实践的时候，教程会尽可能的详细。在之后的课程，就需要同学们勤于思考了！

  1. 打开文本编辑器，txt即可。

  2. 键入<html>，用来标记我们的文本是HTML编码。

  3. 键入<body>，用来标记我们展现在页面上的内容。

  4. 键入 Hello，World！，和世界打一个招呼。

  5. 键入</body>，标记内容结束。

  6. 键入</html>，标记HTML编码结束。

  7. 将txt文件保存格式为.html,并用浏览器打开。

TXT下的代码

sublime下的代码

Chrome渲染后的代码

08 课程作业

写一个HTML网页，用来做一个自我介绍！

昨天了解计算机基础知识后，小编今天带大家学习前端三大脚手架之一的HTML，从常用程度上，HTML可以简单的分为：基础HTML、核心HTML。今天将学习基础HTML（一），因为只有把地基打扎实了，才能建高楼。

首先，什么是HTML？书本上称为HTML(Hyper Text Markup Language),超级文本标记语言，说白了就是编写一个网页的语言；可以想象因为要讲话，所以我们学会了文字，同理，因为要编辑网页，所以我们要学习HTML；HTML是有一系列标记组成，同时也具有自己独特的语法。通过标记和语法组成后，最终会由浏览器负责解释，浏览器中有两大解析器，html渲染解析器，js解析器（这块后续会提到）。

HTML的发展进程，从最开始的HTML2.0>HTML3.2>HTML4.0>HTML4.01>XHTML1.0>HTML5；目前HTML已经更新到了HTML5了，HTML5给我们带来了很多新玩意儿，后面会陆续把好东西分享给大家。

HTML5 质的发展

在今日学习之前，先分析一些开发工具，作为新手，不建议使用具有代码提示补全的工具，建议使用EditPlus，记事本之类的工具，只有把代码写扎实了，再进阶到高级工具。

下面进入HTML标签的学习，也有叫标记的。

一、标签语法

1、所有的标签都必须使用尖括号扩起来，例如 <a>,<div> ... <A>,<a>

2、有封闭类型的标签，也有非封闭类型的标签

2.1、封闭类型，也称作双标记，则必须成对出现；语法规则： <标记>文本内容</标记>； 不同的标记，决定 了"文本内容"的不同表现形式；常见的封闭类型标记有:<a></a>,<p></p>,<div></div>

2.2、非封闭类型，也称作单标记、空标记；语法规则： <标记>或者<标记/> 常见的非封闭类型标记有: <hr>,<br>,<img>

区别封闭类型和非封闭类型标签，就看这标签是一对出现的，还是单个出现的。

3、标签嵌套

标签之间可以相互嵌套，形成复杂的语法结构，简单的例子如下：

<body>

<p>

<a></a>

</p>

</body>

4、标签属性，标签属性是指出现在开始标记中的内容，作用是修饰元素，如 <div 属性名="属性值"></div>

标准属性：就是每个元素与生俱来就具备的通用属性，常见的标准属性有：

id ：定义每个标签的唯一标识

title：提示文本

class：样式相关，类样式

style：样式相关，行内样式

现在可以和小编一个编写一个简单的标签，同时设置这个标签的id属性为myDIv。（属性命名方式：驼峰命名，后续会分享给大家）

实战：第一步：先定义一个标签div，即<div></div>

第二步：添加id属性，即<div id="myDIv"></div>

疑问：如果存在多个属性值怎么办？怎么添加属性值是编码规范的？

答：如果是多属性的，那么直接在前一个属性值后继续编写，不需要用“，”或者“；”分开，直接写就对了！而且，多个属性排名不分先后的，举个栗子： <div id="myDiv" title="myTitle"></p>

二、文档结构

1、文档类型声明：即声明使用的HTML版本和风格，HTML5中使用声明为： <!doctype html>

2、html页面

2.1、文档根元素，每个文档有且仅有一对根元素 , html

2.2、在根元素的内部，包含两对子元素；

2.2.1、head : 页面的头部内容，定义页面全局信息 包含的内容有：

<title></title> ;网页标题，就是网页地址上面显示的名称；

<meta />:声明元数据(编码,关键字,描述)，最重要的搜索引擎SEO主要是写这部分；同时也可以定义一些网页属性，比如说，中文显示 <meta charset="utf-8" />；

<style></style>:声明内部样式表，声明当前网页所用到的样式，这种方式的样式定义只能运用在当前页面，其他页面不能使用这里定义的样式；

<link />:引入外部样式表，引入外部定义好的样式，只要是这个页面想要用到某一个外部样式表，就直接引入就可以用了，这种样式表定义运用弥补上面<style></style>不能共享的缺陷，是的代码达到了重用的优势；

<script></script>:定义或引入脚本文件，主要是引入一些js脚本语言，完成这个页面所需要的交互；

2.2.2、body : 页面的主体内容，任何一个标签，都可能会出现在body中；<body>也是标签，它也可以定义自己的属性，比如网页背景有绿色，那么就是<body bgcolor="green"></body>；

3、文本标记

3.1、特殊的文本，除了正常文字外，在一些特定的情况下会需要有特别的标点符号等，小编举例几个常见的特殊符号的标记，如 空格对应的是“&nbsp;”、 <对应的是 “&lt;” 可以理解为less than 、> 对应的是 “&gt; ”理解为greater than、 版权标识对应的是 “&copy”，这里需要特别特别注意的一点是 每个特殊字符有需要“；”

3.2、文本标记

3.2.1、文本样式

<b>...</b>： 加粗文本；

<i>...</i>：斜体文本；

<u>...</u>：下划线；

<s>...</s>：删除线；

<sup>...</sup>：上标；

<sub>...</sub>：下标；

3.2.2、标题元素， 1-6级6个标题 <hn></hn> n：1-6 其中一级是最大的， 六级是最小的；

3.2.3、段落元素，提供了结构化文本的表现方式， 语法：<p></p>， 注意：每对p标签单独成一个段落，常用属性:

align：水平对齐方式 取值：left center right；

4、换行元素，在代码的任何位置处，实现回车的效果 <br />，是非封闭类型标记；

5、水平线， 又叫分割线， <hr /> 也是非封闭类型标记，常用属性；

5.1、size ：水平线的粗细，通常以像素(px)为单位；

5.2、width：宽度；

5.3、align：水平线的水平对齐方式；

5.4、color：颜色；

6、分区元素目的：为元素进行分组，多数用在布局中；

块分区元素：<div></div> ；

行内分区元素：<span></span>；

注意：

div ：主要用在布局上；

span：修改其内部内容的样式；

7、预格式化，保留源文档中的空格和回车 <pre>文本内容 </pre>；

8、注释

可以写在html源码中，但不被浏览器解释的文本；

语法： <!-- 注释内容 -->

！！！特别注意：行内元素与块级元素

块级元素：默认情况下，块级元素独占一行，元素的前后都会自动换行 div、hn、hr、p等 主要用于布局。

行内元素:默认情况，多个元素位于同一行，不会换行，span、文本标记... .主要行内元素作用:修改内部内容的样式。

最后，小编建议多多打代码！

预告：下一篇 前端教程之HTML（二）


在线咨询
上一篇：PS办公技巧：如何设置图层中的文字在画布中居中对齐？
下一篇：CSS样式大全

您的项目需求

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

推荐阅读
友情链接 偏关县 蚌埠 德庆县 阿鲁科尔沁旗 麻山区 台儿庄区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服