html是什么语言,HTML是什么文件,怎么打开?

题主你好
Html(Hyper Text Markup Language)文件是超文本标记语言文件html是什么语言 。html文件结构包括了头部(Head)、主体部分(Body) 。头部head标签内是网页信息,主体body标签内是网页要显示的具体内容 。HTML标记/标签可以有不同的属性项,用来控制标签内的内容显示不同的效果 。html文件是文本文件,它需要其他程序(如浏览器)的解析 。
HTML格式的文件用不同的程序打开可能有不同的显示效果 。一般的编辑软件(如记事本、EditPlus、Adobe Dreamweaver等)都能打开,但打开的显示效果是纯代码 。如果要看到html文件的渲染效果,则需要具有html解析功能的软件程序(如浏览器)来打开 。
没有CSS的网页会怎样?01前言没有CSS的网页会怎样?看到这个话题,就想扯皮子一下,大开杀戒吹吹牛 。没有CSS的网页是不是以裸体呈现给大家昵?下面我们先看看没有CSS的“裸体”:

html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图

html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图

html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图
这几张图片都是热门网址的“裸体”,是不是感觉好不习惯,下面我们展开聊一聊CSS 。
【html是什么语言,HTML是什么文件,怎么打开?】02什么是CSSCascading Style Sheets简称“CSS”,它是一种编码语言,为网站提供外观和布局 。与HTML一起,CSS是网页设计的基础 。没有它,网站仍然是白色背景上的纯文本 。
在万维网联盟(W3C)于1996年开发CSS之前,网页的形式和功能都非常有限 。早期的浏览器将页面显示为超文本或纯文本,图像和指向其他超文本页面的链接 。根本没有布局可言,只有在单个列中跨页面运行的段落 。
CSS允许对网页布局进行多项创新,例如能够:
指定浏览器的默认字体以外的字体
指定文本和链接的颜色和大小
将颜色应用于背景
在框中包含网页元素并将这些框浮动到页面上的特定位置
他们将“风格”放在样式表中,并且第一次可以设计网页
03CSS真没了过了一下概念,凭空想象一下,没有了CSS是不是让人很心烦,所有的网页看起来都是黑白相间 。
假设其它的web技术依然健在,加上人对UI的追求是不变的 。
那么我们的网页很有可能会经历下面的阶段:
一夜之间所有的css都无法调用了,那么大多数的网页都会变成本答案下贴的各种网页的截图 。除了flash做的网页和cavans做的网页游戏 。然后,想必这时候客服的电话已经打爆了,用户一脸懵逼,老板怒发冲冠 。一大堆前端正在排队等候猝死 。但是一部分前端开始使用其他的技术来构建网页的样式 。
可能会出现利用js调用dom构建样式,多半会出现一个什么工具把原来的css转换为js控制dom的代码 。
然后有的人开始觉得,反正都要用js来构建样式了,我干嘛不用cavans,还能想画什么画什么,或者又有一小部分人开始使用webGL,又或者three.js大为火爆,前端开始要求设计师设计出3D UI 。
最后,我们看到的网页的样式,依然会稳定在我们现在看到的样子,持续一步一步进化中 。不同的是,因为工作量的上升,又会出现一堆帮助你构建网页样式的前端框架 。css并不是唯一构建网页样式的工具 。只是目前最好,最快的样式框架变成了其它,比如命名为“鸿天” 。技术的发展始终追寻着需求的脚步,突然之间少了某个技术,也会很快有其他的技术取而代之 。某个技术的真正死亡,从来都是因为需求变化了~
前端html和js可以做什么?最基本的就是开发网页啦,html写网页,js实现网页交互效果,除此之外,也可以开发桌面GUI程序,下面我简单介绍一下如何使用html+js开发出一个简单的桌面程序:
html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图
1.这里为了更好的说明问题,我新建了一个html文件,就是一个简单的登录页面,源码如下,非常简单,就是两个输入框和一个登录按钮:
html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图

html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图
浏览器运行的效果如下:
html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图

html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图
2.接着就可以将这个html网页打包为桌面应该程序,这里需要用到nodejs的Electron功能,下面我具体介绍一下主要步骤及截图:
html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图
首先,需要安装本地node环境,这个直接到官网上下载就行,如下,选择适合自己平台的版本即可:
html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图
安装完成后,需要下载一下electron和electron-packager这2个包,后面的打包需要借助这2个包,命令“npm install electron electron-packager”,如下:
html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图

html是什么语言,HTML是什么文件,怎么打开?

文章插图
文章插图
接着新建一个文件夹,将刚才的html文件拖拽进去,同时新建一个package.json文件和一个main.js文件,如下:
package.json文件配置如下,主要指明应用名称、版本号及打包配置文件:
main.js文件配置如下,这里需要指明打包程序的入口文件,网上也有详细配置过程:
最后就是在打包程序了,命令“electron-packager . APP –win –out AppDir –arch=x64 –electron-version=3.0.10 –overwrite”,打包的过程非常快,这里主要需要指明打包的应用名称、输出目录、版本号、位数等:
接着就可以在输出目录AppDir中找到打包好的应用程序APP.exe,直接双击就能打开,截图如下,和浏览器效果差不多:
至此,我们就完成了利用html+js来开发一个简单的桌面GUI程序 。总的来说,整个过程不难,就是步骤有些繁琐,只要你熟悉一下上面的配置过程,多操作几遍,很快就能掌握的,当然,你也可以使用html+js开发移动应用,像HBuilder等,网上也有相关教程和资料,介绍的非常详细,感兴趣的话,可以搜一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言 。

    推荐阅读