前端学习——HTML网页入门以及开发工具选择

木亚萱

于 2024-07-27 23:53:09 发布

阅读量220

点赞数 10

文章标签：前端学习 html

本文链接：https://blog.csdn.net/2301_80391855/article/details/140743209

版权

HTML5是用来描述网页的一种语言，被称为超文本标记语言。

用HTML5编写的文件，后缀以.html结尾

方法一：记事本

1.文件后缀名需以.html结尾。

2.在编写代码的过程中，需注意使用英文符号。

3.代码骨架：

<html>
  <head>
     <title>
         my first program.
     </title>
  </head>
  <body>
     hello,world.
  </body>
</html>

4.接下来，鼠标右键，打开方式，选择“以浏览器方式打开”即可看到网页。

方法二：利用前端工具

工具可选择VSCode:

开发者可以在VSCode、WebStorm、HbuilderX中选择使用，这里我推荐使用VSCode,它打开速度快，使用方便，对电脑的配置要求不高。

调试工具可选择谷歌浏览器：

谷歌浏览器简洁大方，打开响应速度快，是绝佳的开发者调试工具。

工具的使用：

在VSCode的使用中，只需使用！+ENTER快捷方式即可自动生成如下代码，便捷省力。

除此之外，常用快捷键还有：

代码格式化:Shift+Alt+F

向上或向下移动一行: Alt+Up或Alt+Down

快速复制一行代码:Shift+Alt+Up 或 Shift+Alt+Down

快速保存:Ctrl + S

快速查找:Ctrl + F

快速替换:Ctrl + H

欢迎大家讨论，共同进步。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木亚萱

关注关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
前端学习——HTML网页入门以及开发工具选择

HTML入门。
复制链接

扫一扫

HTML网页调试技巧与工具

吃不胖.

09-05

743

常用的调试工具包括Chrome开发者工具、Firefox开发者工具、IE开发人员工具、Firebug、Opera开发者工具、Charles、Fiddler和Ghostlab等，可以帮助开发人员检查网页的HTML、CSS和JavaScript代码，查看元素的样式和布局，以及调试JavaScript代码和网络流量。IE开发人员工具是针对IE浏览器的调试工具，可以帮助开发人员检查网页的HTML、CSS和JavaScript代码，查看元素的样式和布局，以及调试JavaScript代码。

05-15

3308

HBuilderX拥有丰富的插件生态系统，开发者可以根据自己的需求安装和使用各种插件，扩展HBuilderX的功能。HBuilderX作为一款轻量级的IDE，仅10余M的绿色发行包（不含插件），启动速度快，大文档打开速度快，编码提示响应速度快。Sublime Text是一款高度可定制的文本编辑器，以其优雅的用户界面、强大的功能和卓越的性能而受到开发者的喜爱。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。🙈吾辈才疏学浅，摹写之作，恐有瑕疵。

2 条评论您还未登录，请先登录后发表或查看评论

html5 开发工具_前端HTML5开发工具有哪些呢?

weixin_42310347的博客

01-30

501

　　　互联网时代的到来，HTML5前端开发作为搭建Web网站便捷有效的编程语言，越来越受到大众的认识和喜爱。而且，HTML5编程语言相对Java、C++等编程语言要简单易学，吸引了很多人想要加入HTML5的学习之中。那么，HTML5开发工具有哪些呢?就让千锋为你好好讲解一下!　　1.hbuilder　　hbuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder...

html前台开发工具,9个Web前端开发工具，收藏了

weixin_34094525的博客

06-10

663

原标题：9个Web前端开发工具，收藏了今天快快小编给大家分享9个Web前端开发工具，话不多说，请往下看吧。一、StackblitzStackblitz可以在Web上使用Visual Studio Code，并且只需点击一下，即可快速支持Angular、React、Vue、Vanilla、RxJS、TypeScript项目。它很适合用浏览器尝试执行一段代码，或是任何操作当前JS框架的某个功能时使用，...

HTML5大前端开发有哪些常用工具？

qf2019的博客

01-17

1240

HTML5大前端是一个新兴的职业，市场需求大，薪资待遇高，吸引了很多人加入学习。无论是新手小白，还是自身前端开发人员，好用的软件工具可以帮助他们更好的工作。下面，小编为大家介绍一些常用的HTML5大前端开发工具。 1、BootstrapBootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS 和HTML 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式，...

HTML系列之开发工具

StayAlive1887的博客

07-12

128

前端的开发工具种类繁多，如：WebStorm，Sublime Text，Atom，HBuilder，vscode等。开发工具是为了方便我们开发，选择越方便的越好，越轻量的越好。这里介绍vscode，可以去官网下载，下载完成后，点击安装vscode，安装也很简单，下一步就可以了。

常用前端开发工具web

xiyangyang8110的博客

04-09

1714

webstorm HBuilder

web前端开发入门学习，前端网页开发工具

m0_60305027的博客

07-24

前言虽然现在处理日期方面已经有了很成熟的也很好用的库，例如（momentjs和date-fns），但是在实际开发中，我们有时候可能并不需要整个库。所以我就在下面整理了在前端开发时对日期时间的各种操作，也算是比较全的了。其中一部分来自自己，还有一部分来源于我们万能的网友~ ##获取当前时间戳 var timestamp = Date.parse(new Date()); //精确到秒 var timestamp = (new Date()).valueOf(); //精确到毫秒 var timestam

web前端html入门

Yiwanyou的博客

05-01

286

前言网页：链接、图片、文字、声音、视频等元素组成，称为html文件 html：超文本标记语言，描述网页，一套标记标签，不是编程语言浏览器内核：负责读取网页内容，整理结构html+表现css+行为javascript 一、html文件基本结构： <html> <head>...</head> <body>...</body> </html> html的基本结构可使用“！”加Tab键，自动填充 <!DOCTYPE h

html+css基础学习入门教程标记语言——网页应用CSS样式

01-08

HTML和CSS是构建网页的基本工具，本教程将引导初学者入门这两种标记语言，重点在于如何在HTML中应用CSS样式。CSS（层叠样式表）的使用有四种主要方法，每种都有其适用场景和优缺点。首先，我们来看第一种方法——...

HTML/CSS实时调试工具

11-28

特性1：保存即刷新　无论是HTML、CSS、图片、JS，当页面的任何元素发生修改时，页面将自动即时刷新特性2：彻底兼容特性3：本地web服务器　　[F5]也是一个类似HFS的Web服务器，可解决本地HTML不方便使用"/"根路径的问题　　无需安装浏览器插件，无需更换编辑器，支持所有的主流浏览器、编辑器、操作系统

Html调试工具

11-15

Html调试工具 强大而简洁很适合初学者

入门前端？前端学习路线图汇总.md

10-15

接下来，我们将介绍前端开发的核心技术——HTML、CSS 和 JavaScript： 1. **HTML (5)** - **概述**：HTML (HyperText Markup Language) 是用于创建网页的基础标记语言。 - **用途**：定义网页的内容结构，如段落...

HTML网页设计制作——响应式网页影视动漫资讯bootstrap网页(9页)

08-10

- **项目背景**: 该项目旨在为初学者提供一套完整的HTML静态网页设计作业案例，适用于学习HTML、CSS以及基础JavaScript的学生群体，尤其适合于大学生作为期末大作业或网页设计作业的需求。 - **网页特色**: - 使用...

0基础学习前端开发的一些建议

10-15

首先，学习前端开发的三大核心技术——HTML、CSS和JavaScript，这是每个前端开发者的基石。HTML负责网页的结构和内容，CSS负责网页的样式和布局，而JavaScript则是用来实现网页的交互功能。在这三者之中，JavaScript...

【django学习】——Django介绍和实战（开发简易版博客网页）

m0_67266585的博客

06-18

2733

目录0、视频链接?1、环境配置?2、django基本命令1）常见命令?2）数据库相关的Django命令?3、Django项目1）Django创建项目?2）项目目录介绍3）运行初始化的Django项目?4、Django应用1）Django项目和Django应用?2）Django应用目录（1）创建Django应用（2）应用目录各文件介绍?问题1：视图、路由、模型是什么意思？5、Django视图&Django路由（what、why、how）1）Django视图（view.py）——创建逻辑函数（数据处理）?2）D

Web开发者不容错过的10个HTML5工具

delishcomcn的博客

07-29

648

随着网络的不断扩张，Web开发人员非常有必要拥有最新的HTML5工具，用于创建动态和交互式的Web应用程序和网页。所有你需要做的就是发挥你的想象力。Zebra是一个基于HTML5的工具，可用于创建基于Web的用户界面应用程序。CoverVid是一个超棒的工具，可用于将HTML视频作为网站的背景，让页面有一种动态的感觉。Brunch是强大的汇编程序，它能让你用一种简单而强大的方式构建精致外观的HTML5应用程序。以上这10个HTML5工具希望能给你带来帮助，你有哪些优秀的HTML5工具框架，欢迎和我们分享。

HTML网站调试技巧与工具推荐

吃不胖.

09-26

281

使用浏览器的开发者工具：大部分现代浏览器都内置了开发者工具，通过这些工具可以方便地查看网站的 HTML、CSS 和 JavaScript 代码，以及调试页面时用到的各种工具和资源。检查 JavaScript 语法错误：使用 JSHint 或者 ESLint 等 JavaScript 语法检查工具，可以快速定位代码中的语法错误，提高代码的质量和可读性。JSHint 是一个 JavaScript 代码检查和分析工具，可以通过它检查代码中的语法错误、不规范的代码风格和潜在的代码漏洞等。