HTML基础入门 第1天课堂笔记（本课程共2天）
目录
一、基础班的介绍
1.1 脚踏实地行，海阔天空飞
1.2 对大家的要求
二、计算机基础知识
2.1 文件和文件夹管理
2.2 特殊按键和快捷键
2.3 打字速度
三、互联网的原理
3.1 上网就是请求数据
3.2 服务器
3.3 浏览器
3.4 HTTP
四、HTML初步认识
4.1 认识什么是纯文本文件txt
4.2 HTML是负责描述文档语义的语言
五、Sublime
六、HTML骨架和基本语法
一、基础班的介绍
1.1 脚踏实地行，海阔天空飞
课时安排：
HTML 2天
CSS 6天
JavaScript 3天
目的：
1. 让所有同学的HTML、CSS、JS基础，达到就业班水平
2. 让同学慢慢进入学习状态，逐渐养成良好的习惯，适应学习强度
特点：
1. 慢、细、易。所有的同学，都不许抱怨课程慢，我们要照顾零基础学生。
2. 注重基础，以最简单的案例说明问题，企业项目实践在就业班讲授
3. 千万不要掉以轻心，知识点都非常重要
1.2 对大家的要求
1. 有基础的同学虚怀若谷，谦虚低调，别咋呼；
2. 零基础的同学，一定不要有任何的负面心理暗示，全力以赴，冲冲冲！
3. 要养成学习的习惯，为以后高强度的学习做好准备。
二、计算机基础知识
2.1 文件和文件夹管理
● 熟练掌握文件和文件夹的管理，包括创建、删除、重命名、复制、粘贴、剪切、移动。
不多说，大家都会了，(^__^)
● 熟练掌握“文件拓展名”的意义
在windows下，所有的文件的名字，是两部分组成的。语法：
文件名.拓展名
拓展名一般就是2~4个字母，表示文件的格式。比如.jpg是图片格式，.mp3音乐格式，.doc文档。
一般来说，操作系统，是不能显示拓展名的，需要我们自己设置。我们以win7举例： 
win8不是在这里设置，自己琢磨下。
● 知道“打开方式”的意义
一个文件，可以用多种软件打开，这就叫做打开方式。 
实际上现在你就应该树立一种思维，同一个文件可以用不同的软件打开。比如，.jpg用“照片查看器”打开，就是浏览模式；用画图打开，就是编辑模式。 
● 会使用桌面，知道“快捷方式”的概念
注意，桌面是一个特殊的文件夹。这个文件夹路径：C:\Users\Danny\Desktop
快捷方式是什么？程序快速打开的一个入口，双击就能够打开程序。 
所有快捷方式，都有一个小箭头图标。就是一个快捷入口，所以删除这个图标，程序还在。
2.2 特殊按键和快捷键
键盘上除了有字母、数字之外，还有一些特殊的按键：ctrl、shift、alt、tab
● ctrl键是英语control“控制”的意思，这个按键，单独按没有任何作用，都要和其他的按键一起按才有用。比如ctrl+c，表示同时按住ctrl键和c键，一会儿将知道这个功能是复制。
● shift键是英语shift“换挡”的意思，按下这个按键同时击打字母，打出的就是大写字母。熟悉shift键来打大写字母，尽量少用大小写锁定键。
● alt键是英语alternate“调整”的意思，和ctrl一样，自己按没啥用，都要和其他的按键一起按才有用。比如alt+f4，表示关闭当前的窗口，比如你正在玩儿游戏，老板来了，可以按alt+f4快速关闭窗口。
● tab键是用于table“制表符”的意思，经常实现“切换的功能”。比如我们在word软件中同时打开了两个文档，可以用ctrl+tab键，来在两个文档之间切换。 当然，可以用alt+tab键来切换程序。
必须熟练掌握下面的快捷键：
ctrl+c 复制
ctrl+v 粘贴
ctrl+x 剪切（就是移动文件，在原来的文件夹ctrl+x一个文件，然后在新文件夹中ctrl+v粘贴）
ctrl+tab 切换（具体切换什么，要看是什么软件）
alt+F4 关闭程序
F2 重命名
F5 刷新，比如看网页的时候，想刷新网页，按f5
ctrl+z 撤销，就是这一步干错了，就ctrl+z撤销
windows+E 打开资源管理器
windows+D 显示桌面
ctrl+空格 切换中英文，严禁用shift键切换，所有同学现在调整搜狗拼音输入法： 
2.3 打字速度
打字速度是必备的素养！
1） 严禁二指神功，必须养成正确的指法；比如打{时，要按住shift+[。
正确的按键方法，是左手小拇指按住左边的shift键，右手中指按[键。
2） 金山打字通。我们最近4天课，基本跟玩儿似的，贼简单，没啥事儿回家就用金山打字通练习打字。
不要练习中文打字，只练习英文打字就行了。英文文章一定要练习到每分钟100字以上。
三、互联网的原理
3.1 上网就是请求数据
网页上的内容，怎么就被我们看见了？什么是上网？
我们先不直接解决这个问题，我们做一个小实验。我们每个人的电脑里面，都有一个神秘的文件夹：
C:\Users\Danny\AppData\Local\Microsoft\Windows\Temporary Internet Files
这个文件夹叫做临时文件夹（文件夹知道存在就可以了，不用自己试着去找）
蓝色部分是每个人不一样的
我们清空这个文件夹中的全部内容 
我们打开IE浏览器，看几个网页。结果，这个文件夹中又多了很多的内容： 
通过这个实验，目前为止，我们可以得出结论，上网的时候，是有真实的、物理的文件传输的！
所以我们经常感觉第二次打开网页，比第一次快，这是因为第一次打开网页的时候，所有的图片都已经存过来了。
所以现在也能够解释，为什么每次都用360能清理一堆垃圾，释放很多硬盘空间。
我们发现，浏览了一个163首页，就出来那么多的文件，所以现在我们的幼小的心灵中，就要有一个初步的认识，网页不是一个文件，而是一堆文件。
我们可以回答刚才的问题了，“上网”究竟是是什么？答案：上网就是请求数据，就是文件传输。
服务器上存放着网页的相关文件，包括html文件、css文件、js文件、图片等。当我们打开浏览器，输入网址，我们的计算机就会对这些文件发出HTTP请求。
服务器收到请求之后，会把这些文件通过HTTP协议，传输到我们的计算机中（保存到了刚才那个临时文件夹中）。这些文件，将在我们计算机本地的浏览器中，进行渲染、呈递。
也就是说，本来人家文件好好的在服务器上睡大觉，你一输入网址，就把这些文件传输到本地计算机来了。这些文件在本地的计算机中，进行渲染。
3.2 服务器
● 服务器就是计算机，只不过比咱们用的笔记本的配置牛逼了很多，并且24小时不断电，不关机。
● 服务器上存储着网页的相关文件。一旦有访问者浏览网站，服务器就将发送这些文件给访问者。
● 服务器一旦关机，网站就无法访问了。
● 服务器的更多知识，我们在Ajax课上将深入学习。基础班我们只需要知道，上述知识即可。
3.3 浏览器 
浏览器是安装在客户的电脑里面的，是一个软件，能够让用户上网。
浏览器有版本之分，有浏览器兼容问题，我们的课程将详细介绍浏览器兼容问题。
3.4 HTTP
超文本传输协议，Hypertext Transfer Protocol。
这是一个文件的传输协议，我们上网的时候，所有的文件都是通过HTTP这个协议，从服务器上传输到客户的电脑里面的。
现在，我们只需要知道这些即可，我们的Ajax课程上，将详细讲解HTTP这个东西哦~
承诺一下，我们将在基础班的一个晚自习，给大家讲如何购买www域名和空间，全年120元以内。
现在我们必须要树立一个思想，就是每一个网址，都对应着确定的服务器上的文件。
比如网址：
1http://www.icdjs.com/1.html就是服务器上面的1.html文件
1http://www.icdjs.com/看似没有精确到一个文件，但是有一个规定，就是index.html是默认的首页文件。
index就是英语“目录”的意思。
1http://www.icdjs.com/aaa/b.html服务器上面有一个aaa文件夹，这个文件夹里面有一个b.html文件。 
上面都没听懂没事，就记住：
网页是真实物理的文件。并且一个网页是很多的物理文件组成的：html文件、图片文件、js文件、css文件。这些文件要通过特殊软件才能上传到服务器上。然后就能让用户看了。用户通过浏览器，访问网址，服务器上面的文件就会通过http请求悄悄地传输到用户的电脑中的临时文件夹中，在用户的电脑中执行、渲染、呈递
四、HTML初步认识
4.1 认识什么是纯文本文件txt
windows中自带一个软件，叫做记事本。记事本保存的文档格式就是txt格式，就是英语text的缩写。术语上，称呼这个文件叫做“纯文本文件”。
我们现在要花15分钟，好好研究凭什么这个txt文件叫做“纯文本文件”。
我们做了一个小实验，发现doc这个文件能够保存内容和样式，字有红的、蓝的。传给大家看，是一样的。
但是txt格式有点不同：
老师看到的： 
我只是改变了软件的设置，而没有改变txt这个文件的设置。txt文件压根就不能设置样式。
同学看到的： 
txt文件，只能保存文本内容，是无法记录文本样式的。
所以，doc和txt存储同样的内容，doc比txt大： 
纯文本文件就是这样的文件：
1） 只有文本，没有样式；
2） 用记事本等纯文本编辑器可读，不是乱码
html、css、js都是纯本文的。
4.2 HTML是负责描述文档语义的语言
HTML是英语HyperText Markup Language的缩写，超文本标记语言。
.html就是网页的格式。
现在，来制作我们人生中第一个网页，
新建一个txt文件：
也就是说，html本质上和txt没有任何区别，他们都是纯文本文件。
我们强行把这个文件的拓展名，从txt更改为html，我们会发现小图标就变成浏览器的小图标了：
在“打开方式”中，用记事本可以编辑它。
现在要养成 编辑器里面编辑 → 保存ctrl+s → 浏览器里面刷新F5 的习惯。 
html到底干嘛用的，看下面的例子： 
纯文本txt文件是不能描述文档的语义的，文档中不知道谁是主标题，谁是副标题，谁是段落。所以html应运而生。
下面就是一个html文件的演示，就是通过html标签对儿，来给文本增加语义：
1<h1>Angelababy简介</h1>
2
3<h2>基本信息</h2>
4
5<p>杨颖（Angelababy），1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。</p>
6
7<p>2009年主演电影《全城热恋》。2012年，凭借爱情片《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选为新一代“四小花旦”；同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获得第21届北京大学生电影节最受欢迎女演员奖；4月，Angelababy主演电视剧《大汉情缘之云中歌》。2014年加盟综艺节目《奔跑吧兄弟》并主演电影版；同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿。2015年5月参演好莱坞电影《独立日2》；7月，主演电影《摆渡人》。
8</p>
9
10<h2>早年经历</h2>
11
12<p>1989年2月28日，Angelababy出生在上海，中文名杨颖。杨颖自小随家人到上海定居，在上海的演艺学校学演戏及跳舞。13岁时，杨颖回香港加入了Talent Bang，还担任Viva Club Disney主持。</p>
13
14<h2>个人生活</h2>
15
16<p>2015年5月27日，黄晓明和Angelababy（杨颖）在青岛民政局领证完婚。</p>
17
18<p>2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼。上午8点，Angelababy工作室曝光了一两人的婚纱照，照片中，两人以巴黎地标建筑为背景，浪漫亲吻。</p>html提供了很多标签对儿，可以给文本增加不同的语义。比如：
<h1> </h1>标签对儿，主标题。
<h2> </h2>标签对儿，二级标题。
<p> </p> 标签对儿，普通段落现在的业界的标准，网页技术严格的三层分离：html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的。
所以，html不能让文字居中，不能更改文字字号、字体、颜色。因为这些都是属于样式范畴，都是css干的事儿；html不能让盒子运动起来，因为这些属性行为范畴，都是js干的事儿。
html只能干一件事儿，就是通过标签对儿，给文本增加语义。这是html唯一能做的。
html中，除了语义，其他什么都没有。
html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。
标签对儿是由起始标签和结束标签组成
<h1>Angelababy简介</h1> <h1> 起始标签 </h1> 结束标签
面试的时候问你，h1标签有什么作用？
正确答案：给文本增加主标题的语义
错误答案：给文字加粗、加黑、变大 
五、Sublime
任何的纯文本编辑器都能够编辑html，比如记事本、editplus、notepad++。
比较有名的专门制作网页的工具有：
DreamWeaver (Adobe公司的产品，前端学院不讲，这个东西过时了，不是一个好的代码编辑器)
Sublime （高效率的程序书写工具）
WebStorm （更高级的项目级别编程工具）
不管用什么编辑器，你都要知道，做网页和工具无关，任何的纯文本编辑器都能够做网页。我们学习的是代码，而不是所谓的工具。不过，不可否认，一个好的工具，确实能够提高工作效率，代码书写的速度，但是本质上讲，记事本也能书写网页。
sublime的中文意思是“华丽的”，是2011年开始流行的代码编辑器，可以编辑java、c、php等很多语言。
html、css、js在sublime中支持非常好。界面也非常漂亮，安装简单、小巧、插件多。
sublime非常小巧，只有21mb，甚至不用安装，直接解压缩，就能双击使用，把sublime_text.exe文件发送到桌面快捷方式就行了。
今后我们的文件，如何用sublime编辑呢？很简单，直接拖进来。
一定要记住，保存的时候，一定要书写.html，表示存为网页的格式。 
sublime中的常用快捷键：
ctrl+滚轮 放大缩小文字
ctrl+shift+d 复制当前行
ctrl+shift+k 删除当前行
ctrl+shift+↑ 上移当前行
ctrl+shift+↓ 下移当前行
先介绍这些。
以后击打标签的时候，仅仅需要输入标签的名字，然后按tab就可以自动生成标签对儿了。
比如，输入p然后按tab，软件自动生成：
1<p></p>六、HTML骨架和基本语法
html有基本骨架，这个骨架能够用sublime快速生成： 
骨架抽象出来：
1<html>
2 <head>
3
4 </head>
5 <body>
6
7 </body>
8</html>网页的最外层的标签对儿是<html></html>标签对儿，里面有两部分，分别是head和body。
head标签中，描述网页的配置；body中的内容，才是用户可以看见的内容。
完整的骨架：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>哈哈哈</title>
6 </head>
7 <body>
8 <h1>我是一个主标题</h1>
9 <p>我是一个小段落</p>
10 </body>
11</html>第1行，就是网页的声明头，这行语句，千万不要背诵，谁背谁傻。术语叫做DocType Defintion，文档类型定义，简称DTD。这行语句非常的复杂，里面暗含了一个网址。W3C就是出web规范的组织机构。html、css、js的规范都是W3C定义发布的。world wide web coalition , 国际万维网联盟。网页声明头可以告诉浏览器，这是一个什么标准的页面。
第2行，是最大的html标签，所有的网页内容，都要包裹在这个标签对儿里面。
我们发现，html标签中，有两个属性：
xmlns=”http://www.w3.org/1999/xhtml” 命名空间，就是一个规范；
xml:lang=”en” 语言是英语
第3行，就是head标签，就是配置。
第4行，<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 字符集的配置
第5行，<title>哈哈哈</title> 网页的标题，可以显示在浏览器的标签栏中。
第7行，body标签就是网页的内容，用户能够看见。