html第一天
文件和文件夹管理
● 熟练掌握文件和文件夹的管理,包括创建、删除、重命名、复制、粘贴、剪切、移动。
● 熟练掌握“文件拓展名”的意义
在windows下,所有的文件的名字,是两部分组成的。语法:
文件名.拓展名
拓展名一般就是2~4个字母,表示文件的格式。比如.jpg是图片格式,.mp3音乐格式,.doc文档。
一般来说,操作系统,是不能显示拓展名的,需要我们自己设置。我们以win7举例:
|
|
win8不是在这里设置,自己琢磨下。
● 知道“打开方式”的意义
一个文件,可以用多种软件打开,这就叫做打开方式。
|
|
实际上现在你就应该树立一种思维,同一个文件可以用不同的软件打开。比如,.jpg用“照片查看器”打开,
就是浏览模式;用画图打开,就是编辑模式。
● 会使用桌面,知道“快捷方式”的概念
注意,桌面是一个特殊的文件夹。这个文件夹路径:C:\Users\Danny\Desktop
快捷方式是什么?程序快速打开的一个入口,双击就能够打开程序。
所有快捷方式,都有一个小箭头图标。就是一个快捷入口,所以删除这个图标,程序还在。
特殊按键和快捷键
键盘上除了有字母、数字之外,还有一些特殊的按键: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键切换,所有同学现在调整搜狗拼音输入法:
打字速度
打字速度是必备的素养!
1) 严禁二指神功,必须养成正确的指法;比如打{时,要按住shift+[。
正确的按键方法,是左手小拇指按住左边的shift键,右手中指按[键。
2) 金山打字通。我们最近4天课,基本跟玩儿似的,贼简单,没啥事儿回家就用金山打字通练习打字。
不要练习中文打字,只练习英文打字就行了。英文文章一定要练习到每分钟100字以上。
互联网的原理
上网就是请求数据
网页上的内容,怎么就被我们看见了?什么是上网?
我们先不直接解决这个问题,我们做一个小实验。我们每个人的电脑里面,都有一个神秘的文件夹:
C:\Users\Danny\AppData\Local\Microsoft\Windows\Temporary Internet Files
这个文件夹叫做临时文件夹(文件夹知道存在就可以了,不用自己试着去找)
蓝色部分是每个人不一样的
我们清空这个文件夹中的全部内容
我们打开IE浏览器,看几个网页。结果,这个文件夹中又多了很多的内容:
通过这个实验,目前为止,我们可以得出结论,上网的时候,是有真实的、物理的文件传输的!
所以我们经常感觉第二次打开网页,比第一次快,这是因为第一次打开网页的时候,所有的图片都已经存过来了。
所以现在也能够解释,为什么每次都用360能清理一堆垃圾,释放很多硬盘空间。
我们发现,浏览了一个163首页,就出来那么多的文件,所以现在我们的幼小的心灵中,就要有一个初步的认识,网页不是一个文件,而是一堆文件。
我们可以回答刚才的问题了,“上网”究竟是是什么?答案:上网就是请求数据,就是文件传输。
服务器上存放着网页的相关文件,包括html文件、css文件、js文件、图片等。当我们打开浏览器,输入网址,我们的计算机就会对这些文件发出HTTP请求。
服务器收到请求之后,会把这些文件通过HTTP协议,传输到我们的计算机中(保存到了刚才那个临时文件夹中)。这些文件,将在我们计算机本地的浏览器中,进行渲染、呈递。
也就是说,本来人家文件好好的在服务器上睡大觉,你一输入网址,就把这些文件传输到本地计算机来了。这些文件在本地的计算机中,进行渲染。
服务器
● 服务器就是计算机,只不过比咱们用的笔记本的配置牛逼了很多,并且24小时不断电,不关机。
● 服务器上存储着网页的相关文件。一旦有访问者浏览网站,服务器就将发送这些文件给访问者。
● 服务器一旦关机,网站就无法访问了。
● 服务器的更多知识,我们在Ajax课上将深入学习。基础班我们只需要知道,上述知识即可。
浏览器
浏览器是安装在客户的电脑里面的,是一个软件,能够让用户上网。
浏览器有版本之分,有浏览器兼容问题,我们的课程将详细介绍浏览器兼容问题。
HTTP
超文本传输协议,Hypertext Transfer Protocol。
这是一个文件的传输协议,我们上网的时候,所有的文件都是通过HTTP这个协议,从服务器上传输到客户的电脑里面的。
现在,我们只需要知道这些即可,我们的Ajax课程上,将详细讲解HTTP这个东西哦~
承诺一下,我们将在基础班的一个晚自习,给大家讲如何购买www域名和空间,全年120元以内。
现在我们必须要树立一个思想,就是每一个网址,都对应着确定的服务器上的文件。
比如网址:
1 http://www.icdjs.com/1.html |
就是服务器上面的1.html文件
1 http://www.icdjs.com/ |
看似没有精确到一个文件,但是有一个规定,就是index.html是默认的首页文件。
index就是英语“目录”的意思。
1 http://www.icdjs.com/aaa/b.html |
服务器上面有一个aaa文件夹,这个文件夹里面有一个b.html文件。
上面都没听懂没事,就记住:
网页是真实物理的文件。并且一个网页是很多的物理文件组成的:html文件、图片文件、js文件、css文件。这些文件要通过特殊软件才能上传到服务器上。然后就能让用户看了。用户通过浏览器,访问网址,服务器上面的文件就会通过http请求悄悄地传输到用户的电脑中的临时文件夹中,在用户的电脑中执行、渲染、呈递
HTML初步认识
认识什么是纯文本文件txt
windows中自带一个软件,叫做记事本。记事本保存的文档格式就是txt格式,就是英语text的缩写。术语上,称呼这个文件叫做“纯文本文件”。
我们现在要花15分钟,好好研究凭什么这个txt文件叫做“纯文本文件”。
我们做了一个小实验,发现doc这个文件能够保存内容和样式,字有红的、蓝的。传给大家看,是一样的。
但是txt格式有点不同:
老师看到的:
我只是改变了软件的设置,而没有改变txt这个文件的设置。txt文件压根就不能设置样式。 | 同学看到的:
|
txt文件,只能保存文本内容,是无法记录文本样式的。
所以,doc和txt存储同样的内容,doc比txt大:
纯文本文件就是这样的文件:
1) 只有文本,没有样式;
2) 用记事本等纯文本编辑器可读,不是乱码
html、css、js都是纯本文的。
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中的标签对儿,这些标签对儿能够给文本不同的语义。
标签对儿是由起始标签和结束标签组成的:
1 <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标签就是网页的内容,用户能够看见。