当前位置: 首页 > news >正文

【HTML入门】Sublime Text 4与 Phpstorm

文章目录

  • 前言
  • 一、环境基础
    • 1.Sublime Text 4
    • 2.Phpstorm
      • (1)安装
      • (2)启动Phpstorm
      • (3)“启动”码
  • 二、HTML
    • 1.HTML简介
      • (1)什么是HTML
      • (2)HTML版本及历史
      • (3)HTML基本结构
    • 2.HTML简单语法
      • (1)HTML标签语法
      • (2)HTML常用标签
      • (3)表格
      • (4)特殊字符
  • 总结


前言

在当今的软件开发领域,选择合适的开发工具和环境是提高工作效率和代码质量的关键。无论是前端开发还是后端开发,一个良好的开发环境能够极大地提升开发体验。本文将介绍两款常用的开发工具——Sublime Text 4 和 Phpstorm 的安装与配置,并简要介绍 HTML 的基础知识。通过本文,你将掌握如何提升开发效率,并简单掌握 HTML 的基本语法和常用标签,为后续的 Web 开发打下坚实的基础。


一、环境基础

1.Sublime Text 4

  • 官网:https://www.sublimetext.com/download

  • 汉化:
    1.打开 sublime,使用快捷键 Ctrl+Shift+P,弹出查找栏,输入Install Package,回车,需要等待一会儿
    2.输入ChineseLocalzations,选中,回车,重新打开 sublime 即可完成汉化

在这里插入图片描述

 

2.Phpstorm

Phpstorm官网下载:https://www.jetbrains.com/phpstorm/

启动(jī_húo)工具压缩包:https://easylink.cc/8rkttx

(1)安装

建议装在D盘

在这里插入图片描述

在这里插入图片描述
 
对于页面“选择开始菜单文件夹,用于创建程序的快捷方式,你也可以输入自定义名称,创建新文件夹。”
默认 JetBrains 安装即可

安装后需要重启

在这里插入图片描述
 

(2)启动Phpstorm

进入 scripts 目录,先双击执行 uninstall-all-users.vbs
在这里插入图片描述
 
点击确定

在这里插入图片描述
 
等待一会,会出现如下页面,点击确定
在这里插入图片描述
 
再双击执行 install-all-users.vbs
在这里插入图片描述
 
点击确定
在这里插入图片描述
 
等待一会,会出现如下页面,点击确定
在这里插入图片描述
 

(3)“启动”码

选择其中一种方式即可


  • A.jī_húo网站

jī_húo网址:https://3.jetbra.in/

选择一个地址打开

在这里插入图片描述
 
在Phpstorm处Copyji_huo码
在这里插入图片描述


  • B.ji_huo码文本

(点击链接即可下载,不一定还可以用)
jī_húo码1:https://easylink.cc/327q90
jī_húo码2:https://easylink.cc/k94bn8


把复制的jī_húo码粘贴进框后点击Active
 
在这里插入图片描述

在这里插入图片描述

二、HTML

1.HTML简介

(1)什么是HTML

HTML 是用来描述网页的一种语言。

● HTML 指的是超文本标记语言 (Hyper Text Markup Language)
● HTML 不是一种编程语言,而是一种标记语言 (Markup Language)
● 标记语言是一套标记标签 (Markup Tag)
● HTML 使用标记标签来描述网页
● HyperText:超文本(文本 + 图片 + 视频 + 音频 + 链接)
● 在浏览器中执行

文件名称文件类型所能存放的内容
web.txt文本文件文字
web.docWord文档文字、图片、超链接、表格
web.xlsExcel表格文字、图片、超链接、表格
web.html超文本文字、图片、超链接、表格、音频、视频

(2)HTML版本及历史

在这里插入图片描述

 

(3)HTML基本结构

在这里插入图片描述

<!DOCTYPE html>              // 定义文档类型为html
<html leng="en">              // 指定页面语言,这里en表示文字的显示形式为英文,zh为中文,也可以不写
<head>                         // 页面头部部分的 起始标签<meta charset="utf-8">  // 字符集(编码格式)为utf-8<title>HTML</title>     // 定义页面的标题,将显示在浏览器的标题栏或选项卡上
</head>                        // 页面头部部分的 结束标签
<body>                        // 页面主体部分的 起始标签<H1>HTML 基础</H1>        // 级别为1的标题元素,用于显示页面的主要标题<P>HTML 超文本标记语言</P>  // 段落元素,用于显示一段文本内容
</body>                        // 页面主体部分的 结束标签
</html>                        // 用于结束html标签,表示HTML文档的结束

 

2.HTML简单语法

(1)HTML标签语法

在这里插入图片描述
 
● HTML元素由开始标签和结束标签组成。
● 位于开始标签和结束标签中间的文本是元素的内容。
● HTML标签有开始必须有结束。如果是没有内容的标签(空标签),用/>来结束。
● 标签具有属性,属性用来表示标签的性质和特征。属性要在开始标签中指定。

(2)HTML常用标签

说明表示单双标签
标题标签h1-h6双标签
段落标签p双标签
超链接标签a双标签
表单标签form双标签
表单元素标签input单标签
图片标签img单标签

 
A.标题标签

<h1>标题1</h1>    // 双标签
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

 
B.段落标签

<p>这是一个段落</p>    // 双标签
<p align="center">段落水平居中</p>
属性描述
alignleft、center、right设置水平对齐方式

 
C.超链接

<a href=""></a>  // 双标签
<a href="https://www.baidu.com">title</a>
属性描述
hrefurl设置链接地址
target_blank设定在何处打开链接
titletext设定链接提示信息

 
D.图片标签

<img src=""/>    // 单标签
<img src="1.jpg" alt="加载失败时的提示信息"/>
属性描述
srcurl设置图片地址
alttext当图片无法显示时,显示此提示信息
widthpx、%设置图片宽度
heightpx、%设置图片高度

如何指定图片地址?

情形写法
图片在同一级目录<img src="1.jpg" alt="">
<img src="./1.jpg" alt="">
图片在上一级目录<img src="../1.jpg" alt="">

(3)表格

表格结构
IDE快速生成表格

table>tr*4>td*4
<table width="300" border="1"><tr><td>学号</td><td>姓名</td><td>性别</td><td>班级</td></tr><tr><td>100101</td><td>张三</td><td></td><td>阳光01班</td></tr><tr><td>100102</td><td>李四</td><td></td><td>阳光01班</td></tr><tr><td>100103</td><td>王五</td><td></td><td>阳光02班</td></tr><tr><td>100104</td><td>赵六</td><td></td><td>阳光02班</td></tr></table>

 

(4)特殊字符

特殊字符实体字符
空格&nbsp;
小于号&lt;
大于号&gt;
引号&quot;
版权&copy;

总结

通过本文的介绍,我们详细讲解了 Sublime Text 4 和 Phpstorm 的安装及激活过程。同时,我们还介绍了 HTML 的基础知识,包括 HTML 的基本结构、常用标签以及表格和特殊字符的使用。掌握这些基础知识对于后续的 Web 开发至关重要。希望本文能够帮助你在开发的道路上更加得心应手,逐步提升自己的开发技能。接下来,你可以继续深入学习 CSS、JavaScript 等前端技术,构建更加复杂和功能丰富的网页应用。


如果你觉得这篇文章对你有帮助,欢迎点赞,你的支持是我分享更多免费优质内容的动力!

相关文章:

【HTML入门】Sublime Text 4与 Phpstorm

文章目录 前言一、环境基础1.Sublime Text 42.Phpstorm(1)安装(2)启动Phpstorm(3)“启动”码 二、HTML1.HTML简介(1)什么是HTML(2)HTML版本及历史(3)HTML基本结构 2.HTML简单语法(1)HTML标签语法(2)HTML常用标签(3)表格(4)特殊字符 总结 前言 在当今的软件开发领域&#xff0c…...

Python----Python高级(并发编程:进程Process,多进程,进程间通信,进程同步,进程池)

一、进程Process 拥有自己独立的堆和栈&#xff0c;既不共享堆&#xff0c;也不共享栈&#xff0c;进程由操作系统调度&#xff1b;进程切换需要的资源很最大&#xff0c;效率低。 对于操作系统来说&#xff0c;一个任务就是一个进程&#xff08;Process&#xff09;&#xff…...

汽车自动驾驶AI

汽车自动驾驶AI是当前汽车技术领域的前沿方向&#xff0c;以下是关于汽车自动驾驶AI的详细介绍&#xff1a; 技术原理 感知系统&#xff1a;自动驾驶汽车通过多种传感器&#xff08;如激光雷达、摄像头、雷达、超声波传感器等&#xff09;收集周围环境的信息。AI算法对这些传感…...

Linux之安装MySQL

1、查看系统当前版本是多少位的 getconf LONG_BIT2.去官网下载对应的MYSQL安装包 这里下载的是8版本的&#xff0c;位数对应之前的64位 官网地址&#xff1a;https://downloads.mysql.com/archives/community/ 3.上传压缩包 4.到对应目录下解压 tar -xvf mysql-8.0.26-lin…...

说说Redis的内存淘汰策略?

大家好&#xff0c;我是锋哥。今天分享关于【说说Redis的内存淘汰策略?】面试题。希望对大家有帮助&#xff1b; 说说Redis的内存淘汰策略? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 提供了多种内存淘汰策略&#xff0c;用于在内存达到限制时决定如何…...

SQL范式与反范式_优化数据库性能

1. 引言 什么是SQL范式 SQL范式是指数据库设计中的一系列规则和标准,旨在减少数据冗余、提高数据完整性和一致性。常见的范式包括第一范式(1NF)、第二范式(2NF)、第三范式(3NF)和BCNF(Boyce-Codd范式)。 什么是SQL反范式 SQL反范式是指在满足范式要求的基础上,有…...

从BIO到NIO:Java IO的进化之路

引言 在 Java 编程的世界里&#xff0c;输入输出&#xff08;I/O&#xff09;操作是基石般的存在&#xff0c;从文件的读取写入&#xff0c;到网络通信的数据传输&#xff0c;I/O 操作贯穿于各种应用程序的核心。BIO&#xff08;Blocking I/O&#xff0c;阻塞式 I/O&#xff0…...

Mysql:数据库

Mysql 一、数据库概念&#xff1f;二、MySQL架构三、SQL语句分类四、数据库操作4.1 数据库创建4.2 数据库字符集和校验规则4.3 数据库修改4.4 数据库删除4.4 数据库备份和恢复其他 五、表操作5.1 创建表5.2 修改表5.3 删除表 六、表的增删改查6.1 Create(创建):数据新增1&#…...

深度学习系列--01.入门

一.深度学习概念 深度学习&#xff08;Deep Learning&#xff09;是机器学习的分支&#xff0c;是指使用多层的神经网络进行机器学习的一种手法抖音百科。它学习样本数据的内在规律和表示层次&#xff0c;最终目标是让机器能够像人一样具有分析学习能力&#xff0c;能够识别文字…...

【Elasticsearch】`auto_date_histogram`聚合功能详解

1.功能概述 auto_date_histogram是 Elasticsearch 提供的一种时间分桶聚合功能&#xff0c;它可以根据数据分布自动调整分桶的间隔&#xff0c;以生成指定数量的分桶。与传统的date_histogram不同&#xff0c;auto_date_histogram不需要用户手动指定时间间隔&#xff0c;而是根…...

php7.3安装php7.3-gmp扩展踩坑总结

环境&#xff1a; 容器里面为php7.3.3版本 服务器也为php7.3.3-14版本&#xff0c;但是因为业务量太大需要在服务器里面跑脚本 容器里面为 alpine 系统&#xff0c;安装各种扩展 服务器里面开发服为 ubuntu 16.04.7 LTS (Xenial Xerus) 系统 服务器线上为 ubuntu 20.04.6 LTS (…...

7. k8s二进制集群之Kube ApiServer部署

创建kube工作目录(仅在主节点上创建即可)同样在我们的部署主机上创建apiserver证书请求文件根据证书文件生成apiserver证书仅接着创建TLS所需要的TOKEN创建apiserver服务的配置文件(仅在主节点上创建即可)创建apiserver服务管理配置文件对所有master节点分发证书 & TOK…...

QT笔记——多语言翻译

文章目录 1、概要2、多语言切换2.1、结果展示2.2、创建项目2.2、绘制UI2.2、生成“.st”文件2.4、生成“.qm”文件2.5、工程demo 1、概要 借助QT自带的翻译功能&#xff0c;实现实际应用用进行 “多语言切换” 2、多语言切换 2.1、结果展示 多语言切换 2.2、创建项目 1、文件…...

【2025】camunda API接口介绍以及REST接口使用(3)

前言 在前面的两篇文章我们介绍了Camunda的web端和camunda-modeler的使用。这篇文章主要介绍camunda结合springboot进行使用&#xff0c;以及相关api介绍。 该专栏主要为介绍camunda的学习和使用 &#x1f345;【2024】Camunda常用功能基本详细介绍和使用-下&#xff08;1&…...

js面试some和every的区别

1.基础使用 some和every 都是数组的一个方法let num [1,2,3,4,5,6] let flag1 num.some((item,index,array)> item > 2)let flag2 num.every((item,index, array)> item > 2)1.some 遍历判断中是符合条件的值 一旦找到则不会继续迭代下去 直接返回 2.every 遍历…...

Vue 中如何嵌入可浮动的第三方网页窗口(附Demo)

目录 前言1. 思路Demo2. 实战Demo 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 1. 思路Demo 以下Demo提供思路参考&#xff0c;需要结合实际自身应用代码 下述URL的链接使用百度替代&#xff01; 方式 1…...

【大数据技术】词频统计样例(hadoop+mapreduce+yarn)

词频统计(hadoop+mapreduce+yarn) 搭建完全分布式高可用大数据集群(VMware+CentOS+FinalShell) 搭建完全分布式高可用大数据集群(Hadoop+MapReduce+Yarn) 在阅读本文前,请确保已经阅读过以上两篇文章,成功搭建了Hadoop+MapReduce+Yarn的大数据集群环境。 写在前面 Wo…...

java进阶知识点

java回收机制 浅谈java中的反射 依赖注入的简单理解 通过接口的引用和构造方法的表达&#xff0c;将一些事情整好了反过来传给需要用到的地方~ 这样做得好处&#xff1a;做到了单一职责&#xff0c;并且提高了复用性&#xff0c;解耦了之后&#xff0c;任你如何实现&#xf…...

深度学习系列--02.损失函数

一.定义 损失函数&#xff08;Loss Function&#xff09;是机器学习和深度学习中用于衡量模型预测结果与真实标签之间差异的函数&#xff0c;它在模型训练和评估过程中起着至关重要的作用 二.作用 1.指导模型训练 提供优化方向&#xff1a;在训练模型时&#xff0c;我们的目…...

构建一个数据分析Agent:提升分析效率的实践

在上一篇文章中,我们讨论了如何构建一个智能客服Agent。今天,我想分享另一个实际项目:如何构建一个数据分析Agent。这个项目源于我们一个金融客户的真实需求 - 提升数据分析效率,加快决策速度。 从分析师的痛点说起 记得和分析师团队交流时的场景&#xff1a; 小张&#xff…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...