零基础学编程第10课：一堂课教会你创建网页
大家好，我是理想国。
本课程针对零基础学生，学完之后，可以独立编写H5程序。本课程免费，想要报名的学生可以戳《期待已久的编程教学开课了》。
今天是周六，照理说应该给同学们放个假，该玩的玩，该休息的休息。但是，正因为是周六，同学们会有更多可以自由支配的时间。因此，理想国想请同学们拨些时间，学一学今天的课堂，顺便把之前学过的课程翻出来温习下。P.S. 下不例外，下周周六一定不给同学们上课。
学完本课需要
10分钟完成作业仅需5分钟
一、回顾上堂课
上堂课讲解了class与style之间的共存法则，可以总结为以下几点。
class与style之间可以共存，都可以表现出元素的样式。
当一个元素中的class与style同时表现某个样式属性时，元素会读取style的样式属性。
在class样式属性的数值后，加入“ !imporant ”，元素会使用class的这个样式属性，而不是使用style中的样式属性。
作业的答案分别是：
作业一：能共存；
作业二：元素会使用style的样式，如果class中的样式属性数值后面有 !important，元素则会使用class中的这个样式属性。
作业三：是让大家熟悉代码结构的，也是本堂课要讲的内容。
二、Html的结构
今天这堂课，我们要讲讲Html的结构，并且教大家如何快速创建一个网页。
*先，我们来看一段代码：
<!DOCTYPE html>
<html>
<head>
<title>我是个网页</title>
</head>
<body>
<script></script>
</body>
</html>
此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
上面代码是构成网页的最基本的结构，我们来一一学习下。
<!DOCTYPE html>
声明了这是个Html页面。
<html></html>
此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。
<head></head>
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
应该把 标签放在文档的开始处，紧跟在 后面，并处于 标签或 标签之前。
<title></title>
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
<style></style>
<style> 标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
<script></script>
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
<body></body>
body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
上面的信息太多，看不懂，不要紧的。只要记住写Html页面时，按照这个结构去写就可以了。前几天学的样式属性css，要写在<head>子元素下的<style>就是了。
三、作业
学编程是这样的，很多概念的东西，刚开始看是很难理解的，所以需要练习。多练习几次，就会慢慢理解之前不能理解的东西，这是一个过程，急不来，也不要灰心。
今天的作业需要同学们用上电脑，并且从网上下载一个轻量级的编辑器：notepad++。
先看一下你的Windows电脑是32位还是64位的。
控制面板 - 所有控制面板项目 - 系统
下图画红圈的地方显示我的Windows是64位的。
notepad++下载链接如下，复制粘贴到电脑浏览器就可以下载了。
32位系统下载安装这个：
https://notepad-plus-plus.org/repository/7.x/7.5.1/npp.7.5.1.Installer.exe
64位系统下载安装这个：
https://notepad-plus-plus.org/repository/7.x/7.5.1/npp.7.5.1.Installer.x64.exe
用上notepad++后，把下面这段代码粘贴到notepad++里，并在桌面上保存为文件名index.html。
<!DOCTYPE html>
<html>
<head>
<title>爱情是什么？</title>
<style>
.one {
background-color: grey;
padding: 10px;
color: white;
}
</style>
<script>
</script>
</head>
<body>
<p class="one">我遇见那么多人，可为什么偏偏是你，看起来最应该是过客的你，却在我心里占据这么重要的位子。</p>
<p class="one">不要以灵魂知己的名义，去等不该等的人，去蹉跎不该蹉跎的青春。这个**上，有些人，有些事，比爱情这种东西，更值得感动。</p>
<script></script>
</body>
</html>
打开index.html，看看是不是打开了个网页。把打开网页的截图发到群里。
做完作业后，一定要再去研究下上面的代码，以及index.html。然后举一反三，自己试着创建一个属于自己的index.html页面。
对了，没有电脑的同学，如果你很仔细的看到这里，可以点击“阅读原文”，用我新做的在线Html编辑器v2去做哦。
觉得本文还可以的话，
可以给理想国打赏0.99元。
让理想国跟家人好交待，
理想国的时间花去哪儿了。
以下是往期课堂索引：
免责声明：本站所有内容及图片均采集来源于网络，并无商业使用，如若侵权请联系删除。
