有一个好的编辑器我们可以方便地的开发项目,编写代码,配置和管理我们的项目。所以我们开始编写html代码之前需要搭建开发环境。
基于html项目的开发和代码编写现在网上有很多编辑器,也有免费的,也有收费的编辑器。基于在Windows系统环境下开发和编写html代码最简单的编辑器就是Windows自带的记事本,我们可以使用记事本编辑html代码。
使用记事本编写html的步骤是首先新建一个文本文档,按照html的语法规则编写相关的代码和保存文件,然后把文件的后缀名改为.html,使用电脑上的浏览器打开就可以查看我们代码的运行结果。
虽然记事本也能编写html代码,但是效率不高也不方便,所以我们使用专业的编辑器来开发项目,编写代码和管理项目。
常用html代码编写的免费软件有HBuilderX,vs code,Sublime Text 等等。
HBuilderX官网下载地址:
https://www.dcloud.io/hbuilderx.html
vs code的官网下载地址:
https://code.visualstudio.com/
Sublime Text官网下载地址:
http://www.sublimetext.com/
我们以后的教程都使用HBuilderX,所以下面为了同学们的学习方便,对HBuilderX的下载和安装做详细的教程。
一,下载
首先访问HBuilderX的官网网址:
https://www.dcloud.io/hbuilderx.html
打开上面的HBuilderX下载网址后点击页面上download,在弹出的对话框里选择适合自己电脑的HBuilderX版本下载。
在Windows10环境下下载后的文件是一个压缩的.zip文件。
二,安装
鼠标右击下载下来的压缩文件进行解压。
解压完成后是一个名为HBuilderX的文件夹。
解压完成后鼠标双击HBuilderX文件夹:
双击运行名为HBuilderX.exe的应用程序文件即可启动HBuilderX编辑器:
因为HBuilderX是一个绿色软件所以没有桌面快捷方式和开始菜单快速启动程序,我们可以右击HBuilderX.exe文件创建桌面快捷方式。
小百科:
绿色软件指一类小型软件,多数为免费软件,最大特点是软件无需安装便可使用,可存放于闪存中,移除后也不会将任何记录留在本机计算机上。通俗点讲绿色软件就是指不用安装,下载直接可以使用的软件。绿色软件不会在注册表中留下注册表键值,所以相对一般的软件来说,绿色软件对系统的影响几乎没有,所以是很好的一种软件类型。
三,新建项目
HBuilderX编辑器初次启动时的默认界面是下图所示:
按照下图所示可以创建一个新的名为demo1空白项目:
名为demo1的空白项目创建成功后的界面如下图所示:
接下来在刚我们新建的demo1项目下创建名为helloworld的html文件
鼠标右击创建的demo1项目选择新建在选择.html文件:
在弹出的对话框里填入html文件的名称:
编写一段代码:
运行:
在浏览器上观察效果:
好了,到这里html的开发环境搭建和HBuilderX的安装教程结束了。
下面再给大家教一下怎样修改HBuilderX的主题风格,HBuilderX自身提供了修改软件主题的功能,使用者可以自身需求和喜好修改HBuilderX的风格。在喜欢自己喜欢的环境下做开发也是令人羡慕的一件事。
按照以下步骤可以修改HBuilderX的主题,默认主题是绿柔,我们可以改成雅黑,雅蓝或者自定义主题:
雅黑主题:
雅蓝主题:
好了本节全部内容全部结束了,希望我准备的内容对你有所帮助
你的支持是我的最大动力,若觉得我的教程还可以或对你有帮助为我点赞加关注!谢谢!
在前面:java作为一门世界级编程语言金字塔顶尖的语言。需要大量的练习、练习、练习来巩固自己所获得的知识。冰冻三尺非一日之寒,希望大家在学习java的日子里一定一定要坚持不懈,严格要求。多练,多问,多百度。祝大家早日成为一名优秀的软件工程师!
文章摘要:此篇文章会带领大家创建一个html最简单的页面,以及在页面中增加一些简单的内容。
我先给大家放2张我以前教学的时候,开课前给学生画的图:
这2张图应该已经比较清晰明了的告诉你,学习java前端需要具备的一些主观和客观方面的东西,我就不多做解释了,以后我的文章中,会以代码图片及展现效果居多,尽量减少文字的占比。让大家对所学的知识有一个更直观的感受。
言归正传,想要编写html代码,首先需要一个后缀为.html的文件,这个文件怎么创建呢?最简单的方式,建一个txt,然后把后缀改为.html,用编辑器打开,就可以编写代码了。
当然,txt界面太丑,笔者这里选用sublime,该编辑器也可以直接加载一个html模板,选择菜单→新建文件(模板)→html,当然,前提要先设置好这个模板,具体设置方法这里就不做详细介绍了,百度上一大堆。新建完成后,产生一个代码如下的页面:
然后在<body></body>标签体之间打入一行代码
用浏览器打开该文件,显示如下图,说明这个html文件已经创建成功了,能够正常的编写代码。
零基础的同学一定对刚才的代码比较疑惑,虽然照着写能实现功能,但是这些代码各自又都是什么意义呢? 我用注释的方式上图来告诉大家:
首先,html 的标签分为自闭和标签和闭合标签
自闭和标签:就是没有结束标签,比如上图的<meta>标签,该标签是没有结束标签相呼应的。
闭合标签:有开始和结束标签,比如上图的<html><body><h1>标签,他们都有一个</html></body></h1>相呼应
在上图中,我用过了比较多的 < !-- -- >标签,这是html里的注释标签,在编写代码的过程中,勤加注释是一个非常非常好的习惯,不仅方便了他人也方便了以后自己代码的维护。所以说,不加注释的代码都是在耍流氓。
我们80%的页面标签代码都会写在<body></body>标签里面,什么是标签,至少包含< > 和标签元素,比如<div><a><p><input>等,标签还有标签属性和属性值,标签属性和属性值在第一个标签内容中,如果是多个标签则以空格符号分割 ,如图:
Div 是整个html中最常用的一个标签元素,<div></div>类似于一个盒子,里面可以承载各种各样的元素标签,大家看到的所有的网站都是靠着div一个个的盒子规划开来,最后拼接在一起的,形成了一个完整的页面。
那么如何去建立一个div呢?首先,我们在html的<body></body>标签中加入一个<div></div>标签 ,但是单纯的加入标签并不会在页面中产生肉眼可见的东西,因为我们还要定义这个div的宽,高,背景色,边框等等,详见如下代码:
这样的一行代码,最后展现出来的效果是:
我们来一点点的剖析这一行代码:
Style:style 是元素标签里的一个标签属性,他的作用是可以定义该标签的样式。里面的样式格式是xxx:xxx; 每一组样式都是这样的定义,冒号用来隔开样式属性和样式属性值,最后以分号结尾.
width:定义该元素的宽
height:定义该元素的高
background:定义该元素的背景颜色(也可使用red,yellow等颜色定义)
border:定义该元素的边框
4px 代表边框粗细,
solid 代表边框样式, 边框样式又分为solid(实框)、dotted(虚框)
red代表边框颜色,边框颜色也可用#ccc,#112233这种形式表现
Div里可以放入文字、图片、标签元素等各式各样的东西。下面我演示一下如何放入照片:
首先,放入照片要使用到<img>标签,这是一个自闭和标签,所有没有结束标签。
Src代表图片的路径,width,height 代表图片的宽度和高度 ,alt是图片的描述
这个路径可以是相对路径,也可以是绝对路径。
相对路径:就是相对于这个网页的路径,比如图片和网页在同一个文件夹下,那么src处就直接填图片的文件名字就可以,若建了一个文件夹images,图片放在该文件夹中,同时这个文件夹和网页在同一个位置,那么src所填的就是images/图片名字.jpg
绝对路径:即从头开始写路径,如src = “C:/xxx/xxx/xxx/xxx.jpg”
假设我现在的图片位置和网页位置同处一处
最后的效果:
我这里改大了DIV的宽度和高度,若图片所设的宽高大于DIV的宽度高度,那么将会发生溢出的情况,同学们可以自己去试一下,这种溢出的情况也有对应的标签可以做调整,这个我们后面再讲。
这边特别提醒一点,如果div没有设定宽度width,则默认为等同浏览器宽度的宽度,若div没有设定高度,则该div根据div中内容进行高度的伸缩,div中的内容有多高,div就有多高,如图,我把width和height全部去掉:
上图width和height全部去掉,所以,width默认跟浏览器宽度等宽,高度为图片的高度。
文字的话就比较简单了,代码贴上:
最后结果:
第二句文字才是div创建出来的文字,我解释一下style里面的样式:
Font-size:文字大小,px为单位(像素)
Font-family:文字样式,分为很多,这个可以去word文档里找找
Font-weight:文字加粗,bold是一种默认加粗的大小。
End.
来源:公众号“java编程”
运行人员:中国统计网小编(微信号:itongjilove)
微博ID:中国统计网
中国统计网,是国内最早的大数据学习网站,公众号:中国统计网
http://www.itongji.cn
论在WebStorm 中做什么,都是在项目的上下文中执行的。WebStorm 中的项目是一个文件夹,其中包含您编辑的源代码、您使用的库和工具(例如,在node_modules子文件夹中)以及各种应用程序配置文件(例如,package.json或.eslintrc)。
WebStorm已更新至V2022.1,欢迎下载WebStorm最新版本试用:
点击获WebStorm官方正式版
在 WebStorm 中打开一个文件夹后,.idea子文件夹将添加到其中 WebStorm 存储其内部配置设置,例如项目代码样式或版本控制系统。
.idea目录中的所有设置文件都应置于版本控制之下,除了workspace.xml,它存储您的本地首选项。workspace.xml文件应被VCS标记为忽略。
WebStorm 不支持直接编辑远程主机上的文件。因此,要在 WebStorm 中使用远程源,需要下载它们,打开存储它们的文件夹,并将它们安排在 WebStorm 项目中,如从现有本地源创建项目中所述。要使本地和远程源保持同步,请使用“部署选项”对话框中的“将更改的文件自动上载到默认服务器”列表配置自动上载。
如果您同时打开了多个项目,您可以使用以下选项在它们之间切换:
在 WebStorm 中,您可以为项目指定默认父文件夹。当您打开项目时,WebStorm 将从该文件夹开始。每次创建新项目时也会建议使用此默认位置。
根据您的选择处理配置文件。修改项目设置并创建新的配置文件后,IDE 会在屏幕底部显示一条通知,提示您选择如何处理此项目中的配置文件:
如果您在未选择任何选项的情况下关闭通知,则在创建新配置文件后它将再次出现。即使您重新启动 IDE,新文件也将进入该列表,直到您选择其中一个选项。
不可共享的配置文件列表
前端开发工具WebStorm 识别配置文件并将它们自动添加到忽略文件列表中。但是,如果您手动共享项目,我们建议您避免将这些文件和文件夹置于版本控制之下:
将全局设置复制到项目级别
全局 (IDE) 设置与项目分开存储。这就是为什么这些设置不会通过版本控制与项目一起共享。
但是,可以将某些设置复制到项目级别。例如,您可以创建检查配置文件的副本,从代码完成和自动导入中排除的类和包的列表。如果这样做,IDE 会在.idea目录中创建相应的配置文件,您可以通过 VCS 与项目一起共享这些配置文件。
以上就是有关WebStorm项目的介绍,更多关于WebStorm价格信息可进入慧都官网查看。
WebStorm是一个针对JavaScript和相关技术的集成开发环境。像其他JetBrains IDE一样,它使你的开发体验更加愉快,使日常工作自动化,并帮助你轻松处理复杂的任务。
*请认真填写需求信息,我们会在24小时内与您取得联系。