-
大纲
- 前言（关于学习、我、移动政务）
- 背景知识介绍
- 介绍html文件的基本框架
- 介绍body的属性
前言
大家上午好，我是XX书院2018级计算机专业的学长XXX，是这次静态网页课程的讲师。今天是我们第一节课，因为有些事情很重要，所以我把它们作为前言放在了正式上课之前。
在这里我想说三点
- 关于如何学习
- 关于我
- 关于移动政务
关于如何学习
编程是一门熟能生巧的技能，静态网页也是如此。相比C语言，静态网页理解上简单许多。很多初学者看了一眼之后，就认为自己学懂了，没有亲自动手实践，这是非常不好的。静态网页就像搭积木，看起来简单，但是要想搭得又好看又结实，就非常不容易了。
在这里，我希望大家能在课后，把我给出的用例修改修改，运行后观察效果，这样有益于你掌握静态网页的知识。
关于我
我是大二开始接触静态网页的，在这之后，我写过几个小项目，参加了一些比赛。现在在给你们培训的同时，我也正在接受学长的培训。从全校总体来看，我是一个普普通通的大学生；但从我个人来看，我比当初的自己成长了许多。
讲这些，其实是想鼓励培训中一些不自信的同学，能力是一步步培养出来的，你要将自信建立在未来，而不是建立于过去。
关于移动政务
大二时期的移动政务实验室，性质有点类似于学习社团。平时的基本活动就是串讲和培训，学长学姐们会给你们讲解一些技术，包括java，android，数据库，小程序等等，这些知识有的是你们未来专业课的内容，有的则是在学校里你们不会学到的知识。
由于培训时间有限，内容可能浅尝辄止，所以有些时候需要自己主动去深入挖掘。也希望大家珍惜暑假培训的这段时间，毕竟培训这么久是非常难得的。
背景知识介绍
好，闲话不多说，下面我们开始网页知识的介绍。我们先来试着回答这两个问题：
- 什么是网页
- 什么是HTML
什么是网页
首先我们来看两个基础名词：
- 网站，网站是一系列页面的集合
- 以哔哩哔哩为例子，你可以在它上面点击，跳转很多页面。哔哩哔哩就是一个网站。
- 网页，网页是网站中的一页，通常是html文件，浏览器可以阅读它。
- 同样以哔哩哔哩为例子，像哔哩哔哩的首页，就是一个网页
- 网页通常由图片，文字，视频等组成，这些东西称之为元素
什么是HTML
- HTML，全称超文本标记语言（Hyper Text Markup Language)，它是用来描述网页的一种语言。这里我着重解释一下“超文本”和“标记语言”
- 超文本有两层含义
- 它不只能操作文字，还能操作图片，视频，音频等等
- 它可以从一个文件跳转到另外一个文件
- 标记语言
- 与C语言这种编程语言不同，标记语言由一系列的标签组成，没有变量类型，数组，指针等概念
- 超文本有两层含义
介绍html文件的基本框架
html文件主要分为两部分，
- 文件头部，由<head></head>包围
- 文件主体，由<body></body>包围
这两部分是如何起作用的呢？
大家可以打开我课前传到群里的code1文件中的demo01.html，代码1.1就是hello world的代码。目前它已经被我注释掉了，大家可以删掉这段代码前面的<!-- 和 后面的 -->
-
<!--代码1.1 演示hello world--> <html> <head> <title>My Fist HTML</title> </head> <body> Hello World！ </body> </html>接下来，我们通过浏览器打开demo01.html，可以看到，在网页上方的位置出现了 My First HTML，而在网站中出现了 Hello World! 这就是<title> </title>标签和<body></body>标签的作用。
现在我们来详细分析这个程序，可以看到，html的注释和C语言不同，它是通过<!-- 和 -->完成注释的。
接着，我们需要区分两个概念：标签和元素。- 单独的<head></head>，<title></title>我们称之为“标签”
- 而<title>文件标题</title>我们称之为“元素。
然后让我们来看demo01中的代码1.2 属性和属性值
-
<!--代码1.2 属性和属性值 --> <html> <head> <title>设置页面文字颜色</title> <meta charset = "utf-8"> </head> <body text="#0000FF"> 设定页面的文字颜色为蓝色 </body> </html>现在我们来详细解析这串代码，我们已经知道，
<body text="#0000FF"> 设定页面的文字颜色为蓝色 </body>这完整的一段称为“元素”，现在标签中的 text 称为 “属性”，而#0000FF称为 “属性值”。
现在我们再来解释一下<meta charset = "utf-8">这是一个单独的标签，标签中的属性charset，意思为字符集，属性值为“utf-8”，意为使用utf-8编码方式。它可以防止乱码。至于utf-8是什么编码，课后我会给大家一些拓展链接，帮助大家了解这些知识。
然后是：
#0000FF，这是颜色的16进制表示，在HTML中，颜色有多种表示方式，这个课后我也会通过链接给大家补充。介绍body的属性
我们已经通过之前的学习，了解了HTML中元素，标签，属性，属性值的概念，接下来我们要学习body的几个常用属性(接下来均为代码演示)
- 背景颜色属性——bgcolor
- 背景图片属性——background
- 没有css的背景图片属性
- 使用css的背景图片属性1
- 使用css的背景图片属性2
- 使用css的背景图片属性3
- 使用css的背景图片属性4
左，右，上，下边距属性
来源：oschina
链接：https://my.oschina.net/u/4325154/blog/4355101