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

前端学习篇一(HTML)

Introduction

##文章内容:使用HBuilder制作一个简单的HTML5网页以此达到学习HTML5 的目的

##编写内容:1.HTML实现平台 2.HTML简介 3.HTML语言解析

##编写人:贾雯爽

##最后更新时间:2024/07/01

Overview

Details

一、HTML简介

HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。一个基本的HTML文档由一系列的标签(tags)组成,这些标签定义了网页的内容和结构。

基本文档

下面是一个基本的HTML文档结构:

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  <meta charset="UTF-8">  <title>页面标题</title>  <!-- 这里可以包含其他头部信息,如CSS链接、JavaScript链接等 -->  
</head>  
<body>  <!-- 这里是网页的主体内容 -->  <h1>这是一个标题</h1>  <p>这是一个段落。</p>  <!-- 可以包含其他HTML元素,如图片、链接、列表等 -->  
</body>  
</html>
  • <!DOCTYPE html>:文档类型声明,它告诉浏览器这是一个HTML5文档。
  • <html lang="zh-CN">:html标签是HTML文档的根元素。lang属性用于指定文档的主要语言,这里是简体中文(zh-CN)。
  • <head>:头部标签,包含了文档的元(meta)数据,如文档的标题(<title>)、字符集声明(<meta charset="UTF-8">)以及链接到样式表(CSS)和脚本(JavaScript)等。
  • <title>:定义了浏览器工具栏的标题,当网页添加到收藏夹时的标题。
  • <body>:主体标签,包含了所有可见的页面内容,如标题、段落、图片、链接、列表等。

这个基本结构是创建任何HTML文档的基础,你可以在这个基础上添加更多的HTML标签和属性来丰富你的网页内容。


我的代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>HTML Learing</title></head><body><div class="container"><h1><a href="#first">Let's start our first page! 标题 一号</a></h1><h3><a href="second">Let's start our first page! 标题 三号</a></h3><h1>Let's begin our first page!</h1><h3>Let's begin our first page!</h3><p>欢迎大家来到LinWit的制作的网页,一起开启精彩的世界吧!正文(px 像素)</p><img src="./1.png" title = "China" height="1024"alt="error" /> <div class="btn" id="start">start</div><a href="https://yiyan.baidu.com/">文心一言</a></body>
</html>

实现平台:

显示效果:

这里有一些笔记,分享给大家。

https://note.youdao.com/ynoteshare/index.html?id=9eab0b2d4a2efbf3efe1589868850892&type=notebook&_time=1719799850927#/WEB7db0512964ca66b93826f56413e44fc1icon-default.png?t=N7T8https://note.youdao.com/ynoteshare/index.html?id=9eab0b2d4a2efbf3efe1589868850892&type=notebook&_time=1719799850927#/WEB7db0512964ca66b93826f56413e44fc1

二、HTML实现平台

安装与使用

HBuilder X是一款由DCloud(数字天堂)开发的集成开发环境(IDE),主要用于Web和移动应用程序的开发。对于新手极易上手,链接

HBuilderX-高效极客技巧 (dcloud.io)icon-default.png?t=N7T8https://www.dcloud.io/hbuilderx.html

在这里下载后解压,直接点开程序运行就OK,Like this。

特性和功能:

  1. 主要特性:
    • 多平台支持:HBuilder X支持多平台开发,包括Web应用、移动应用(iOS和Android平台)等。
    • HTML5+CSS3+JavaScript开发:支持基于HTML5、CSS3和JavaScript的应用程序开发,特别适合移动应用的前端开发。
    • 内置调试工具:集成了调试工具,方便进行代码调试,提高开发效率。
    • 移动应用打包:支持将Web
    • 框架支持:为流行的前端框架和库(如Vue.js、React等)提供了优秀的支持。
    • 插件系统:具有灵活的插件系统,可以通过安装插件来扩展功能,满足不同开发需求。
    • 实时预览:提供实时预览功能,开发者可以即时查看应用程序在不同设备上的外观。
    • 丰富的工具集:包含了代码编辑器、项目管理工具、调试工具等丰富的开发工具,支持多种开发任务。
    • 云端服务:提供云端服务,如云打包、云端编译等,方便开发者进行云端操作。
  2. 语言服务调整
    • HBuilderX的语言服务进行了重大调整,由Java调整为Node App打包,Java按需调用,不再常驻后台。
    • 改进了对TypeScript、d.ts文件、Vue标签、Easycom组件、CSS、Less、Scss、TS等的支持。
    • JS支持自动导包,Emmet支持代码提示预览,uni-app项目根据版本进行代码提示。
  3. 插件开发
    • HBuilderX 2.7+版本起,开放了插件扩展机制。
    • 开发者可以通过JavaScript语言编写HBuilderX的插件,自定义和增强HBuilderX的功能。
    • 插件基于Node.js,可以使用Node.js的所有API以及HBuilderX扩展的大量JS API(与VSCode兼容)。
  4. 版本与安装
    • HBuilder X提供正式版和Alpha版,其中Alpha版更新频率更高,建议开发者同时安装两个版本。
    • 可以在HBuilder X官网下载安装包,并按照详细的安装教程进行安装。
  5. 生态服务
    • 提供插件市场(https://ext.dcloud.net.cn/),开发者可以发布自用的插件到市场。
    • 提供开发者交流群、官方论坛等社区支持,方便开发者交流和学习。

总的来说,HBuilder X是一款功能强大、易于使用的集成开发环境,特别适合Web和移动应用的开发者使用,就还蛮好用的。


鼓励大家试试~

相关文章:

前端学习篇一(HTML)

Introduction ##文章内容&#xff1a;使用HBuilder制作一个简单的HTML5网页以此达到学习HTML5 的目的 ##编写内容&#xff1a;1.HTML实现平台 2.HTML简介 3.HTML语言解析 ##编写人&#xff1a;贾雯爽 ##最后更新时间&#xff1a;2024/07/01 Overview Details 一、HTML简介…...

VUE笔记

框架&#xff1a; 框架结构&#xff0c;把很多基础功能已经实现&#xff08;封装了&#xff09;。 框架&#xff1a;在基础语言之上&#xff0c;对各种基础功能进行封装&#xff0c;方便开发者&#xff0c;提高开发效率。 举例&#xff1a;操作页面 现在&#xff1a;点击按…...

Datawhale机器学习day-1

赛题 在当今科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的深度和广度渗透到科研领域&#xff0c;特别是在化学及药物研发中展现出了巨大潜力。精准预测分子性质有助于高效筛选出具有优异性能的候选药物。以PROTACs为例&#xff0c;它是…...

业务模型扩展字段存储

构建业务模型时&#xff0c;通常模型会设置扩展信息&#xff0c;存储上一般使用JSON格式存储到db中。JSON虽然有较好的扩展性&#xff0c;但并没有结构化存储的类型和非空等约束&#xff0c;且强依赖代码中写入/读取时进行序列化/反序列化操作&#xff0c; 当扩展信息结构简单且…...

50+k8s常用命令,助你成为k8s大牛!

Kubernetes是一个强大的容器编排平台&#xff0c;不管是运维、开发还是测试或多或少都会接触到&#xff0c;熟练的掌握k8s可大大提高工作效率和强化自身技能。 集群管理 1. 查看集群节点状态: kubectl get nodes2. 查看集群资源使用情况: kubectl top nodes3. 查看集群信息…...

002-基于Sklearn的机器学习入门:回归分析(上)

本节及后续章节将介绍机器学习中的几种经典回归算法&#xff0c;所选方法都在Sklearn库中聚类模块有具体实现。本节为上篇&#xff0c;将介绍基础的线性回归方法&#xff0c;包括线性回归、逻辑回归、多项式回归和岭回归等。 2.1 回归分析概述 回归&#xff08;Regression&…...

python实现网页自动化(自动登录需要验证的网页)

引言: python作为实现网页自动化的一个重要工具,其强大的各种封装的库使得程序运行更加简洁,只需要下载相应的库,然后调用库中的函数就可以简便的实现我们想要的网页相关操作。 正文: 我的前几篇文章写了关于初学爬虫中比较容易上手的功能,例如爬取静态网页的数据、动…...

ctfshow-web入门-命令执行(web71-web74)

目录 1、web71 2、web72 3、web73 4、web74 1、web71 像上一题那样扫描但是输出全是问号 查看提示&#xff1a;我们可以结合 exit() 函数执行php代码让后面的匹配缓冲区不执行直接退出。 payload&#xff1a; cvar_export(scandir(/));exit(); 同理读取 flag.txt cinclud…...

一体化导航的优点及应用领域

一体化导航&#xff0c;作为现代导航技术的重要发展方向&#xff0c;正日益展现出其独特的魅力和广泛的应用前景。这种导航方式将多种导航技术、信息系统以及数据处理方法集成于一个统一的平台上&#xff0c;为用户提供高效、准确、便捷的导航服务。 一体化导航的核心在于其高度…...

“吃饭大学”!中国大学食堂排行TOP10(含西电)

同学们们&#xff0c;考研择校考虑的因素除了学术&#xff0c;地理位置等方面&#xff0c;你们还会考虑哪些因素呢&#xff1f;小研作为一个吃货&#xff0c;必定会考虑的一个因素当然是大学的食堂美食啊~ 那中国超级好吃的大学食堂在哪&#xff1f;一起来看看有没有你的目标院…...

使用 Mybatis 时,调用 DAO接口时是怎么调用到 SQL 的?

Mybatis 是一个流行的 Java 持久层框架&#xff0c;它提供了一种半自动的 SQL 映射方式&#xff0c;允许开发者在 Java 代码中以一种更加直观和灵活的方式来操作数据库。当你使用 Mybatis 调用 DAO 接口时&#xff0c;背后的工作流程大致如下&#xff1a; 接口定义&#xff1a;…...

微信小程序毕业设计-微信食堂线上订餐系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…...

昂首资本实例使用价格行为策略,交易翻倍一点都不难

交易翻倍难吗&#xff1f;当Anzo Capital昂首资本使用价格行为策略进行交易时&#xff0c;发现一点都不难&#xff0c;以下是使用价格行为策略的实例分享&#xff1a; 1. 在初次交易信号出现时&#xff0c;推荐在1.00429价位入场&#xff0c;将止损设于1.04399&#xff0c;止盈…...

20240701 每日AI必读资讯

&#x1f3eb;AI真炼丹&#xff1a;整整14天&#xff0c;无需人类参与 - 英矽智能推出全球首个AI参与决策的生物学实验室&#xff0c;实现了14天内完成靶点发现和验证的全自动化闭环实验。 - 该实验室由PandaOmics平台驱动&#xff0c;集成多种预测模型和海量数据&#xff0…...

GPT-5 一年半后发布,对此你有何期待?

IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院周四公布的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布&#xff0c;给出了肯定答案并表示将在一年半后发布。此外&#xff0c;穆拉蒂在采访中还把GPT-4到GPT-5的飞跃描述为高中生到博士生的…...

Redis学习——Redisson 分布式锁集成及其简单使用

文章目录 引言1. Redisson概述1.1 Redisson的基本概念1.2 Redisson的主要功能1.3 Redisson的优点 2. 开发环境3. Redisson的安装与配置3.1 添加依赖3.2 配置Redisson 4. 使用Redisson4.1 可重入锁4.1.1 可重入锁的概念4.1.2 可重入锁的实现原理4.1.3 简单使用锁的获取和释放 4.…...

08 - matlab m_map地学绘图工具基础函数 - 绘制线、图例、添加文字注释等函数

08 - matlab m_map地学绘图工具基础函数 - 绘制线、图例、添加文字注释等函数 0. 引言1. 关于m_line2. 关于m_quiver3. 关于m_text4. 关于m_plot5. 结语 0. 引言 本篇介绍下m_map中添加绘制基础线&#xff08;m_line、m_plot&#xff09;、绘制箭头&#xff08;m_quiver&#x…...

Luminar Neo 1.20.0 (macOS Universal) - 创新 AI 图像编辑器

Luminar Neo 1.20.0 (macOS Universal) - 创新 AI 图像编辑器 利用尖端的人工智能生成技术&#xff0c;轻松增强照片效果 请访问原文链接&#xff1a;https://sysin.org/blog/luminar-neo/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1…...

谈谈Flink消费kafka的偏移量

offset配置: flinkKafkaConsumer.setStartFromEarliest():从topic的最早offset位置开始处理数据&#xff0c;如果kafka中保存有消费者组的消费位置将被忽略。 flinkKafkaConsumer.setStartFromLatest():从topic的最新offset位置开始处理数据&#xff0c;如果kafka中保存有消费…...

MySQL 高级SQL高级语句(二)

一.CREATE VIEW 视图 可以被当作是虚拟表或存储查询。 视图跟表格的不同是&#xff0c;表格中有实际储存数据记录&#xff0c;而视图是建立在表格之上的一个架构&#xff0c;它本身并不实际储存数据记录。 临时表在用户退出或同数据库的连接断开后就自动消失了&#xff0c;而…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...