HTML基础入门第1天课堂笔记

忘是亡心i 2022-06-01 08:37 279阅读 0赞

## 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举例：  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
win8不是在这里设置，自己琢磨下。

● 知道“打开方式”的意义  
一个文件，可以用多种软件打开，这就叫做打开方式。  
![这里写图片描述][SouthEast 2]  
实际上现在你就应该树立一种思维，同一个文件可以用不同的软件打开。比如，.jpg用“照片查看器”打开，就是浏览模式；用画图打开，就是编辑模式。  
![这里写图片描述][SouthEast 3]  
● 会使用桌面，知道“快捷方式”的概念  
注意，桌面是一个特殊的文件夹。这个文件夹路径：C:\\Users\\Danny\\Desktop  
快捷方式是什么？程序快速打开的一个入口，双击就能够打开程序。  
![这里写图片描述][SouthEast 4]

所有快捷方式，都有一个小箭头图标。就是一个快捷入口，所以删除这个图标，程序还在。

![这里写图片描述][SouthEast 5]  
**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键切换，所有同学现在调整搜狗拼音输入法：  
![这里写图片描述][SouthEast 6]

**2.3 打字速度**  
打字速度是必备的素养！  
1） 严禁二指神功，必须养成正确的指法；比如打\{时，要按住shift+\[。  
正确的按键方法，是左手小拇指按住左边的shift键，右手中指按\[键。  
2） 金山打字通。我们最近4天课，基本跟玩儿似的，贼简单，没啥事儿回家就用金山打字通练习打字。  
不要练习中文打字，只练习英文打字就行了。英文文章一定要练习到每分钟100字以上。

## 三、互联网的原理 ##

**3.1 上网就是请求数据**  
网页上的内容，怎么就被我们看见了？什么是上网？  
我们先不直接解决这个问题，我们做一个小实验。我们每个人的电脑里面，都有一个神秘的文件夹：  
C:\\Users\\Danny\\AppData\\Local\\Microsoft\\Windows\\Temporary Internet Files  
这个文件夹叫做临时文件夹（文件夹知道存在就可以了，不用自己试着去找）  
蓝色部分是每个人不一样的  
我们清空这个文件夹中的全部内容  
![这里写图片描述][SouthEast 7]  
我们打开IE浏览器，看几个网页。结果，这个文件夹中又多了很多的内容：  
![这里写图片描述][SouthEast 8]  
通过这个实验，目前为止，我们可以得出结论，上网的时候，是有真实的、物理的文件传输的！  
所以我们经常感觉第二次打开网页，比第一次快，这是因为第一次打开网页的时候，所有的图片都已经存过来了。  
所以现在也能够解释，为什么每次都用360能清理一堆垃圾，释放很多硬盘空间。

我们发现，浏览了一个163首页，就出来那么多的文件，所以现在我们的幼小的心灵中，就要有一个初步的认识，网页不是一个文件，而是一堆文件。

我们可以回答刚才的问题了，“上网”究竟是是什么？答案：上网就是请求数据，就是文件传输。
    服务器上存放着网页的相关文件，包括html文件、css文件、js文件、图片等。当我们打开浏览器，输入网址，我们的计算机就会对这些文件发出HTTP请求。
    服务器收到请求之后，会把这些文件通过HTTP协议，传输到我们的计算机中（保存到了刚才那个临时文件夹中）。这些文件，将在我们计算机本地的浏览器中，进行渲染、呈递。

也就是说，本来人家文件好好的在服务器上睡大觉，你一输入网址，就把这些文件传输到本地计算机来了。这些文件在本地的计算机中，进行渲染。

**3.2 服务器**  
● 服务器就是计算机，只不过比咱们用的笔记本的配置牛逼了很多，并且24小时不断电，不关机。  
● 服务器上存储着网页的相关文件。一旦有访问者浏览网站，服务器就将发送这些文件给访问者。  
● 服务器一旦关机，网站就无法访问了。  
● 服务器的更多知识，我们在Ajax课上将深入学习。基础班我们只需要知道，上述知识即可。

**3.3 浏览器**  
![这里写图片描述][SouthEast 9]  
浏览器是安装在客户的电脑里面的，是一个软件，能够让用户上网。  
浏览器有版本之分，有浏览器兼容问题，我们的课程将详细介绍浏览器兼容问题。

**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文件。  
![这里写图片描述][SouthEast 10]

上面都没听懂没事，就记住：  
网页是真实物理的文件。并且一个网页是很多的物理文件组成的：html文件、图片文件、js文件、css文件。这些文件要通过特殊软件才能上传到服务器上。然后就能让用户看了。用户通过浏览器，访问网址，服务器上面的文件就会通过http请求悄悄地传输到用户的电脑中的临时文件夹中，在用户的电脑中执行、渲染、呈递

## 四、HTML初步认识 ##

**4.1 认识什么是纯文本文件txt**  
windows中自带一个软件，叫做记事本。记事本保存的文档格式就是txt格式，就是英语text的缩写。术语上，称呼这个文件叫做“纯文本文件”。  
我们现在要花15分钟，好好研究凭什么这个txt文件叫做“纯文本文件”。

我们做了一个小实验，发现doc这个文件能够保存内容和样式，字有红的、蓝的。传给大家看，是一样的。  
但是txt格式有点不同：  
老师看到的：  
![这里写图片描述][SouthEast 11]  
我只是改变了软件的设置，而没有改变txt这个文件的设置。txt文件压根就不能设置样式。  
同学看到的：  
![这里写图片描述][SouthEast 12]

txt文件，只能保存文本内容，是无法记录文本样式的。  
所以，doc和txt存储同样的内容，doc比txt大：  
![这里写图片描述][SouthEast 13]  
纯文本文件就是这样的文件：  
1） 只有文本，没有样式；  
2） 用记事本等纯文本编辑器可读，不是乱码  
html、css、js都是纯本文的。  
**4.2 HTML是负责描述文档语义的语言**  
HTML是英语HyperText Markup Language的缩写，超文本标记语言。  
.html就是网页的格式。

现在，来制作我们人生中第一个网页，  
新建一个txt文件：

也就是说，html本质上和txt没有任何区别，他们都是纯文本文件。  
我们强行把这个文件的拓展名，从txt更改为html，我们会发现小图标就变成浏览器的小图标了：

在“打开方式”中，用记事本可以编辑它。  
现在要养成 编辑器里面编辑 → 保存ctrl+s → 浏览器里面刷新F5 的习惯。  
![这里写图片描述][SouthEast 14]

html到底干嘛用的，看下面的例子：  
![这里写图片描述][SouthEast 15]  
纯文本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标签有什么作用？  
正确答案：给文本增加主标题的语义  
错误答案：给文字加粗、加黑、变大  
![这里写图片描述][SouthEast 16]

## 五、Sublime ##

任何的纯文本编辑器都能够编辑html，比如记事本、editplus、notepad++。  
比较有名的专门制作网页的工具有：  
DreamWeaver (Adobe公司的产品，前端学院不讲，这个东西过时了，不是一个好的代码编辑器)  
Sublime （高效率的程序书写工具）  
WebStorm （更高级的项目级别编程工具）

不管用什么编辑器，你都要知道，做网页和工具无关，任何的纯文本编辑器都能够做网页。我们学习的是代码，而不是所谓的工具。不过，不可否认，一个好的工具，确实能够提高工作效率，代码书写的速度，但是本质上讲，记事本也能书写网页。

sublime的中文意思是“华丽的”，是2011年开始流行的代码编辑器，可以编辑java、c、php等很多语言。  
html、css、js在sublime中支持非常好。界面也非常漂亮，安装简单、小巧、插件多。

sublime非常小巧，只有21mb，甚至不用安装，直接解压缩，就能双击使用，把sublime\_text.exe文件发送到桌面快捷方式就行了。

今后我们的文件，如何用sublime编辑呢？很简单，直接拖进来。  
一定要记住，保存的时候，一定要书写.html，表示存为网页的格式。  
![这里写图片描述][SouthEast 17]

sublime中的常用快捷键：  
ctrl+滚轮 放大缩小文字  
ctrl+shift+d 复制当前行  
ctrl+shift+k 删除当前行  
ctrl+shift+↑ 上移当前行  
ctrl+shift+↓ 下移当前行  
先介绍这些。  
以后击打标签的时候，仅仅需要输入标签的名字，然后按tab就可以自动生成标签对儿了。  
比如，输入p然后按tab，软件自动生成：

1<p></p>

## 六、HTML骨架和基本语法 ##

html有基本骨架，这个骨架能够用sublime快速生成：  
![这里写图片描述][SouthEast 18]  
骨架抽象出来：

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标签就是网页的内容，用户能够看见。

[SouthEast]: /images/20220601/975566cfbced4a8595b3e9e5e5a7aadf.png
[SouthEast 1]: /images/20220601/8e0902ae045f4d59a5855146e7b9fcf6.png
[SouthEast 2]: /images/20220601/c23b48913c444b6bb75f4e79e3c745b1.png
[SouthEast 3]: /images/20220601/f472325d505c44d7acd3df57de5d1728.png
[SouthEast 4]: /images/20220601/82eacf63782c4b91a98911c35c576260.png
[SouthEast 5]: /images/20220601/5e7749108ff2427da090051bc1258fd8.png
[SouthEast 6]: /images/20220601/e29602a69a214d7e99941f8719307256.png
[SouthEast 7]: /images/20220601/112a795ebe73463a9908abd37d8274a7.png
[SouthEast 8]: /images/20220601/f88b4fc5061b40568cbce0d0c882b356.png
[SouthEast 9]: /images/20220601/1863cbe06d8f452cbd47423d142d7c09.png
[SouthEast 10]: /images/20220601/93f2bf5a2df74b469b4b077e6434f35d.png
[SouthEast 11]: /images/20220601/d0c5e1cbafe546b6861c4966920c3375.png
[SouthEast 12]: /images/20220601/278d6837a8974e9aaf887f830492a571.png
[SouthEast 13]: /images/20220601/0e6ce3f339fb41988085acd35792eae8.png
[SouthEast 14]: /images/20220601/0d928ed3f7c147728419975462a6ab42.png
[SouthEast 15]: /images/20220601/744aab64edad422ebe58dce3af06f911.png
[SouthEast 16]: /images/20220601/9b5e6f8fe65244a8ad5a943311d8229b.png
[SouthEast 17]: /images/20220601/ce4406f5b72c4640adee887c0e2a97fc.png
[SouthEast 18]: /images/20220601/b3e10f59e672416aa793969b85c913dd.png