Web前端从入门到精通-2 关于html和开发工具

上节课呢,我们说到了html源文件在浏览器中打开就是一个网页了,那么html源文件是怎么来的呢?

很多教程为了让大家很快入门,就直接告诉大家说先创建一个记事本文件,然后把它的扩展名改成html,双击就会发现在浏览器中打开了

之后就对记事本里面怎么写html开始大讲特讲

但是个人认为,这样说忽略了初学者的感受

第一次接触html的朋友如果看到上面这样的讲解的话很容易会提出疑问

你为什么新建了一个txt改成了html就可以了?我新建一个别的文件比如word文件(扩展名为doc)改成html可不可以呢?如果不可以那又是为什么呢?

接下来我谈一谈自己对这个问题的拙见:

我们平时用的windows系统,都是通过扩展名来区分文件类型的

例如txt文件就是用记事本写的,doc文件就是用word或wps写的

大家回忆一下

我们如果要创建一个txt文件,是不是要借助于记事本这款应用程序软件呢?

我们如果要创建一篇doc文档,是不是要借助于word或wps这些应用程序软件呢?

那现在我们如果要创建一个html文件,我们要借助什么呢?

暂时好像还没有什么东西能为我们创建html文件的,这时我们把希望寄托在了记事本上

但是我们的记事本是专门创建txt文件的(保存的时候即使选择保存类型也只有txt这一项),怎么办呢?

这时我们灵机一动,我就不让你这文件的扩展名是txt了,我非得让你是html,为了达到目的,我将你的扩展名强制改成.html,这不就可以了么

听起来似乎很荒唐,所以windows也会警告我们

"如果你更改扩展名,可能导致文件不可用"

————"可能?",到底可能性有多大呢?

怀着忐忑的心情,双击这个html文件,浏览器打开文件之后并没有什么异常现象

我们庆幸进入了小概率事件,成功的变成一个html格式的文件了

好像浏览器在说:我可以理解由txt转换的html文件

不知道大家是否尝试过将txt文件的扩展名改成doc再用word软件打开

或将doc文件的扩展名改成txt用记事本打开是什么情况

大家可以试一试,试完了之后可以看下面的结果是否相符:

第一种情况的话txt文件里面的内容原原本本显示到了word中

好像word在说:我可以理解由txt文件转换的doc文件

但是第二种情况,直接出现了一个弹框

好像记事本在说:我理解不了由doc文档转换成的txt文件

通过以上几个例子,我们可以初步判断,有些文件改变扩展名再打开,是没事的

但是并不是所有的应用程序都这么好说话,比如我们的第三种情况

而浏览器恰巧认识我们在txt记事本文件中写的html代码

所以我们可以将记事本txt文件的扩展名改成html,这样得到html文件

说了半天,就是为了得到一个网页html文件

但是为了得到它,经历的过程也太曲折了

而且,我们发现

txt文件用记事本创建,doc文件用word来创建

但是现在可以说html文件也用记事本创建了,不感觉有点奇怪么?

其实html文件根本不是记事本的原配

html文件需要对应的应用程序来创建,这个应用程序就是我们的开发工具

也就是我们写代码的地方

当然,doc文件可以由word创建,也可以由wps创建

我们的html文件可以由以下几款应用程序创建:

Dreamweaver  Sublime Text  WebStorm  HBuilder  Visual Studio  Eclipse...等等

具体选择哪一个,根据个人喜好来

关于它们的区别,百度一下,你就知道了

时间: 2024-10-20 23:24:57

Web前端从入门到精通-2 关于html和开发工具的相关文章

Web前端从入门到精通-9 css简介

欢迎大家回来,前段时间给大家介绍了浮动以及清除浮动的相关内容 上节课到最后我们留了一个小问题 如果所有的子元素都没有加浮动,父级不设置高度时,父级的高度会不会随子级的高度自动撑开 我们可以通过下面的代码来测试 .ul1{ width:102px; border:2px solid red;} .ul1 li{ width:100px; height:100px; border:1px solid black;} <ul class="ul1"> <li><

Web前端从入门到精通-4 html简介

本节课我继续带着大家学习html 上节课的话我们已经有了一个页面,大概长成这个样子: <!DOCTYPE html> <html lang="en"> </html> 双击这个文件打开预览,什么都没有 好的,从现在开始我们给它加一些内容 根据html语法规定,html标签里的直系子标签有head body等 所以你的脑海中应该想着我们的页面变成了这样 <!DOCTYPE html> <html lang="en"

Web前端从入门到精通-7 css简介

欢迎回来,上节课没有给大家留什么问题,但是介绍了一个很重要的问题,那就是css的层叠优先级顺序: 行间样式>id选择器>类选择器>元素选择器 好的,复习到此结束,接下来我们继续学我们的css 这节课要讲一个很重要也是理解起来略有困难的东西——浮动 之前的课程中我们举了好几个列表的例子,但无一例外的是所有的列表都是竖着成一排的 那么怎么让它们横起来呢?——就是用我们的浮动(float) 在正式介绍浮动这个东西之前,我们先来说个知识点——块元素和内嵌元素 什么意思呢?不知道大家是否发现了一个

Web前端从入门到精通-13 css简介

欢迎回来,上节课的话我们做了一个导航 总体来说还能看,但是也有一些小问题 首先,当我们把鼠标移上去的时候不变成小手 这个看起来最不舒服了 所以先从这里开刀 说到这里了,想和大家沟通一个问题 我们平时上网的时候鼠标放到什么地方才变成小手呢? 是不是可以点的地方呢? 可以点的话意味着什么? 意味着是一个链接对不对 链接的话在我们的html里面毫无疑问就是a标签了 好的,说到这里脾气着急的马上就会说,那就用a标签包裹文字不就完事儿了? 话一说完,代码就会被改成这样 <!DOCTYPE html> &

Web前端从入门到精通-10 css简介

上节课呢,我们介绍了一个很重要的概念——盒模型 主要介绍了盒模型的一些基础知识:margin padding的概念 以及margin:0 auto;和margin的塌陷 如果对上述知识点还有不清楚的地方大家一定要弄懂 要不然再往下看的话比较费劲 这节课的话我们接着上节课的话题继续扯 实际上关于margin的话题还远远不止我们上节课说的那些问题 我们再看下面一个布局: <!DOCTYPE html> <html lang="en"> <head> &l

Web前端从入门到精通-6 css简介

上节课我们主要介绍了三种css的选择器 结束的时候留了一个小问题,不知道大家还有没有记得 当多种选择器同时对一个元素操作时,会有什么情况呢? 不知道大家试了没有 先说句题外话,可能有的朋友说 你闲的蛋疼用多种选择器操作一个元素 我让一种选择器操纵一个元素不就可以了吗 我们学一个东西往往是为了用的,而不是为了装13的 所以我提出的这个问题自然有它的价值所在 接下来我会给大家分析 还拿我们的列表做例子,这次给大家举一个百度首页的例子 百度的推荐导航列表这里是不是我们的鼠标移上去的那一个块儿 外面会出

Web前端从入门到精通-11 css简介

欢迎大家回来,上节课我们又说了margin的一个bug 那就是子元素的margin-top会传递给父元素 解决方案也已经给出来了,在此不再废话 此外还说了默认样式的清零,这个的话我个人感觉无所谓了 平时自己写代码测试的时候就直接上*{margin:0; padding:0;} 之前我们讲解盒模型的时候一直都是拿div举例子 那么我们知道,div天生就是个块元素 所以我们之前见到的那一堆margin.padding的规则都是针对块元素的 那不知道大家有没有自己测试过内嵌元素的盒模型 我们接下来就和

Web前端从入门到精通-12 css简介

好的,在之前的11节课中 我们从对编程语言一无所知的状态循序渐进的了解了很多知识 包括html页面结构,css引入的几种方式,浮动,清除浮动,盒模型等等 现在是发挥这些知识用武之地的时候了 我们在上网浏览网页的时候不知道大家有没有注意过 在网页的最上面会有一个导航,比如 鼠标移入之后还会高亮显示 那么我们今天就利用我们之前学的东西做这样一个导航 首先,大家可以想象一下这个导航的大概结构是什么样子的呢? 可以不可以在外面有个大div作为父级 然后里面放上4个小div,一个div里面就是一项 当然没

Web前端从入门到精通-5 css简介

上节课我们说到了标签以及标签的属性 比如一个div标签,它的属性有width height background对吧? 也就是 <div width="100px" height="100px" background="red"></div> 如果你的回答是对 那么恭喜你,你已经学晕了 上面这段代码是错误的 div下辈子也不会有width height background这些属性的 上节课,关于div,我们只说了它的一个