HTML进阶--如何使用Sublime Text来创建网页 -------16岁的小前端

最新推荐文章于 2024-09-02 14:50:57 发布
最新推荐文章于 2024-09-02 14:50:57 发布
阅读量6.4k 收藏 25
点赞数 5
分类专栏： HTML 文章标签： sublime text 创建网页 HTML 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44647939/article/details/87094678
版权
这篇博客通过Sublime Text来创建HTML网页，详细介绍了从打开编辑器、新建文件、保存并设置拓展名为html，到编写基本HTML结构，以及使用快捷键保存和在浏览器中预览网页的步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前期的文章中讲到了使用Windows自带的【记事本】来创建网页；

【记事本】在写代码的时候有很多的不便捷，可读性可较差；

所以我们在前端开发的时候都会使用一款【文本编辑器】（例如editplus，Sublime Text，Visual Studio Code等）；来帮助我们的开发；

这篇文章就使用【Sublime Text】来创建一个网页；

1.  双击打开【sublime Text】

                                  

2.  点击左上角【文件】

         

          

3.点击【新建文件】

            此时默认在sublime text的暂存盘

最低0.47元/天 解锁文章
CSS—盒子模型
冯瑞姣
12-28 1255
【内容】 1.盒子模型 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 相关概念： 盒子模型有元素的内容、边框（border）、内边距（padding）和外边距（margin）组成。 盒子里面的文字和图片等元素是内容区域。 盒子的厚度我们称为边框。 盒子内容与边框的距离是内边距（类似单元格的cellpadding）。 盒子与盒子之间的距离是外边...
Sublime 网页制作
11-02
1.sublime网页制作开发器，用HTML使用很友好，适合入门级新手； 2.适用于64位操作系统，内含一phthony3.3压缩包；
Sublime Text创建页面
weixin_47295886的博客
07-11 2171
首先先安装好软件第一步：新建站点（用来管理网站的所有资源（包含图片声音文字脚本））将此文件夹拖到sublime 里面 新建文档 将文档保存到站点中去：保存的扩展名为：html或者htm都可以（这两个结尾的都是我们网页的文件） 实现效果： 这需要下载插件 方便我们编写按ctrl +shife +p(下载此插件) 之后输入 ！+ tab ===会生成一个HTM5的代码框架 htm的标签语法特点：所有的标签元素都由 < >构成，一般标签都是 开始标签+结束标签 （区别在有无/）开始标签和结束标签 决定了标签的作
SublimeText开发html网站教程（一）
Nicolelovesmath的博客
04-06 6451
Sublime Text是一款跨平台的代码编译器。 本节内容包含如下几个部分： sublime text的安装快捷键使用方法插件的安装以及替换 一.Sublime Text的安装 Sublime Text的官网下载地址：点击打开链接 如下图 Sublime Text可用于开发的使用环境，如下图： 点右下角plain text可查看具体可使用的语言，同时sub
sublime如何快速创建html页面
果子狸的博客
06-01 2860
1.打开软件,使用快捷键ctrl+n,创建一个新文件 2.点击文件右下角纯文本,点击选择html 3.改用英文输入法 4.输入! 5.使用tab快捷键,生成文件模板 6.使用ctrl+s保存，选择路径 7.保存成功后，可右键选择浏览器查看效果。 ...
Sublime Text超好用的网页代码开发软件
01-24
已经是中文版的了Sublime Text超好用的网页代码开发软件，支持php html css自带代码补全，界面很好的。喜欢
awesome-stylelint：很棒的stylelint插件，配置等的列表
02-01
1. **IDE/编辑器集成**：通过安装相应的VSCode、Atom或Sublime Text插件，可以在实时编辑时获得反馈，提高编码效率。 2. **构建工具集成**：可以与Webpack、Gulp、Grunt等构建工具无缝集成，将stylelint的检查作为...
前端基础---html
09-21
可以通过在本地计算机上使用文本编辑器（如Notepad、Sublime Text、VSCode等）创建`.html`文件，或者使用在线代码编辑器（如CodePen、JSFiddle等）来实时查看代码的运行结果。 六、进阶学习 掌握HTML的基础后，下...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H435.zip
05-09
总的来说，这个项目提供了从基础到进阶的Web前端开发实践，涵盖了网页内容结构、视觉呈现、动态交互以及响应式设计等多个方面，对于学习和提升Web开发技能是非常有价值的。通过研究和实践这个项目，学生不仅可以掌握...
HTML进阶教程：Origami-2第二部分
为了更好地掌握HTML，开发者会经常使用一些工具和框架，比如文本编辑器（如Visual Studio Code, Sublime Text）、浏览器开发者工具、前端框架（如Bootstrap）等。 考虑到原文件可能是一个教程或课程的一部分，我们...
盒子模型/设置边框/内边距、外边距
热门推荐
IT_CREATE的博客
11-09 1万+
盒子模型 在HTML中，浏览器在解析每一个标签元素时，都会将标签解析成一个装东西的盒子，超文本标记语言中，内容本身就定义在标签内部的。它将标签解析一个一个盒子，盒子之间存在间距，盒子内部装的东西与盒子之间也存在间距，并且盒子本身也是存在边框的。   盒子本身的边框也就是(边框border )，盒子和盒子之间的距离也就是(外边距 margin ) ，盒子到内容之间的距离也就是(内边距paddi...
SublimeText 3汉化版安装教程和创建第一个HTML网页
小宇y的博客
08-19 2261
目录一、安装教程二、创建第一个HTML文档 一、安装教程 安装包有需要的小伙伴可以私信我找我要。 下载好SublimeText 3后，打开安装包，根据不同系统选择不同的版本，下面第二个是汉化版的。 双击后，找到运行文件subl.exe打开： 关闭日志，然后就可以开始编写html了。 二、创建第一个HTML文档 如何创建一个简单的HTML文档，以下是步骤 1、首先创建一个站点文件夹，网页的内容保存在这个文件夹里面。 2、点击左上角文件——新建文件，然后保存一下至本地路径，就刚刚创建的Web文件夹里。
Sublime Text
最新发布
Flask Web
09-02 723
Sublime Text的界面非常简洁，主要由菜单栏、工具栏、侧边栏、编辑区和状态栏等部分组成。菜单栏包含了文件、编辑、选择、查找、视图、插件、首选项等菜单；工具栏则包含了文件保存、撤销、重做、剪切、复制、粘贴、查找、替换等常用按钮；侧边栏用于显示当前项目的文件和文件夹结构；编辑区则用于显示当前打开的文件内容；状态栏则用于显示当前文件的编码方式、行数、列数等信息。Sublime Text凭借其强大的功能、灵活的配置和丰富的插件生态，成为了众多开发者的首选编辑器之一。
css，盒模型简单练习
shiyu18的博客
11-02 2387
盒模型练习 css盒模型练习 继续熟练练习css，并且更清楚认识到css的好处 完成以下布局： 要求：熟练使用border(边框)，padding(内边距)，margin(外边距) 分析：上图中第一张图需要单独写样式，后面四张图仅需要一个样式即可，并且个块都有上边框(border),外间距间距一样 代码实现： html部分： <!doctype html> <html> <head> <meta charset="utf-8"> <title
在sublime text中搭建完美可交互的网页前端编写环境
河西~石头
10-24 2495
自从frontpage和dream waver等网络三剑客离我们远去了，似乎要建立一个轻量级的网页前端编辑和实时预览的环境变的不那么方便，这里，我们尝试用sublime text来实现它。
css盒子模型及其实战案例（上）
阿牛的博客
01-27 4458
盒子模型是我们网页布局中很重要的一块内容，今天阿牛就来总结一部分内容，各位小伙伴认真看哦，干货满满！！！
sublime text 构建网页页面，实现html网页学习篇--1.1html基础知识篇 javascript:void(‘codeSnippet‘)
qq_67335884的博客
07-07 1957
元信息（Meta Information）是指描述数据的数据，它提供了关于数据的附加信息，比如数据的属性、特征、来源等。这些元信息对搜索引擎和用户来说非常有用，可以帮助更好地索引和理解这个网页。主体body是一个 Web页面的主要部分，其设置内容是读者实际看到的部分。3.1 html网页中的元信息例子。2.html的头部于是，可以显示出下面图片中的。3.html的meta元信息。4.html的主体body。4.1 主体body的例子。5.4 html文档类型。5.html基本语法。
HTML图片不能上下铺满屏幕_边学边做网页篇------初识HTML
weixin_39882948的博客
11-20 452
为什么学习HTML？理解HTML代码是制作网页的基本技能。在互联网高度发达的今天，网页制作技术开始变的和修图、处理视频一样重要。第一，学会制作网页就可以把自己想要展示的信息让其他人使用浏览器观看，无论是文字、照片还是视频都可以通过浏览器观看，甚至是分享自己制作的小游戏。第二，理解网页运行的基本原理后可以更好的浏览他人的网页，寻找有用信息，更合理的使用第三方工具，简单高效的制作自己的网页。HTML学...
web前端大作业：诗人文化网页主题网站【唐代诗人】纯HTML+CSS制作
VX_WJ88950106的博客
01-08 599
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值