WebStorm 初步使用 & HTML5 学习报告

WebStorm 初步使用

WebStorm介绍

WebStorm是Jetbrains公司旗下的一款JavaScript开发工具,因其界面简洁,操作方便,被广大国内JS开发者誉为“Web前端开发神器”。

WebStorm具有智能代码补全、代码格式化、html提示、联想查询、代码调试等多种优势功能,其对业界最新技术提供支持,支持流行的版本控制系统,为前端开发人员提供了极大的方便。

WebStorm安装

到官网下载安装包:点击打开链接

参考此链接进行激活破解:点击打开链接

按照提示,选择符合需求的安装项,完成WebStorm的安装。

WebStorm新建项目

1. 使用webstorm新建工程


File菜单栏下,选择New->Project


Location为新建项目位置,左侧可以选择新建项目类型,即空项目或指定框架下的项目,这里我们选择建立空项目(Empty Project).

2. 在项目下创建文件或文件夹

创建CSS文件夹



在该文件夹下存放.css



创建其他类型文件(如:.html等)与以上类似

进行完以上新建工作即可开始简单的前端工作。

初识 HTML5 

HTML5 概念

HTML5是指万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大改革。其设计目的是为了在移动设备上支持多媒体,引入新的解析规则增强了灵活性、提供新的元素和属性,是一个完整的编程环境,适用于跨平台应用程序、视频和动画、图形、风格、排版和其他数字内容发布工具、广泛的网络功能。

其优点包括技术公开、多设备跨平台、自适应网页设计、即时更新、可移植性强等。但也存在一些浏览器兼容问题。

HTML5 + CSS + Javascript组合的应用开发技术是前端开发的基础。

HTML5 开发环境

1. 支持HTML5的浏览器:Chrome、FireFox等。

2. 开发工具:应用上文介绍的WebStorm

基本结构

效果


HTML 标签

  • HTML标签是由尖括号包围的关键词,如<body>
  • 标签通常成对出现,如<body> 和 </body>
  • 一对标签中,第一个为开始标签,另一个为结束标签

常用标签如下:

  • 标题:h1,h2,h3 等
  • 段落:p
  • 换行:br
  • 容器:div,span
  • 列表:ul,ol,li
  • 图片:img
  • 链接:a
HTML 元素语法

  • HTML元素以开始标签起始,以结束标签终止
  • 两标签之间的内容为元素内容
  • 某些HTML元素具有空内容,在开始标签中关闭
  • 多数HTML元素拥有属性,属性总是以名称/值对的形式出现,在开始标签中规定
HTML CSS

格式化可以移出HTML文档,形成一个独立的样式表,浏览器读到样式表时,按此对文档格式化。插入样式表的方式分为三种:外部样式表,内部样式表,内联样式。对于比较系统的前端开发来说,外部样式表较为常用,可以通过更改链接样式表文件改变页面外观,具体实现如下:


链接到外部样式表后,即可通过CSS定义如何显示HTML元素,解决了内容与表现奋力的问题,提高工作效率。




  • 33
    点赞
  • 119
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
WebStorm是一款被广大程序员使用的开发工具。在Mac上,它提供了许多常用的功能。其中之一是全局搜索。使用全局搜索可以方便地查找项目中的特定内容。 使用WebStorm的姿势如下: 1. 首先,在hosts文件中添加以下内容:0.0.0.0 account.jetbrains.com。这将阻止WebStorm与该域名的连接,以避免一些问题。 2. 然后,你可以粘贴一段文字,如:K6IXATEF43-eyJsaWNlbnNlSWQiOiJLNklYQVRFRjQzIiwibGljZW5zZWVOYW1lIjoi5o6I5p2D5Luj55CG5ZWGOiBodHRwOi8vaWRlYS5oay5...。具体来说,这可能是一段用于激活WebStorm的授权密钥。 3. 接下来,你可以开始使用WebStorm进行开发工作,包括编写代码、调试程序、版本控制等等。WebStorm的功能非常丰富,可以根据你的需求进行定制和扩展。 总结来说,WebStorm是一款功能强大的开发工具,在Mac上提供了许多常用的功能,包括全局搜索。你可以通过一些简单的步骤来开始使用WebStorm,并享受它带来的便利和效率。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [WebStorm使用教程](https://blog.csdn.net/qq_25502269/article/details/105550973)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [webstorm 使用技巧](https://download.csdn.net/download/weixin_38499950/13759489)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值