前端学习篇一(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#/WEB7db0512964ca66b93826f56413e44fc1
https://note.youdao.com/ynoteshare/index.html?id=9eab0b2d4a2efbf3efe1589868850892&type=notebook&_time=1719799850927#/WEB7db0512964ca66b93826f56413e44fc1
二、HTML实现平台
安装与使用
HBuilder X是一款由DCloud(数字天堂)开发的集成开发环境(IDE),主要用于Web和移动应用程序的开发。对于新手极易上手,链接
HBuilderX-高效极客技巧 (dcloud.io)
https://www.dcloud.io/hbuilderx.html

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

特性和功能:
- 主要特性:
- 多平台支持:HBuilder X支持多平台开发,包括Web应用、移动应用(iOS和Android平台)等。
- HTML5+CSS3+JavaScript开发:支持基于HTML5、CSS3和JavaScript的应用程序开发,特别适合移动应用的前端开发。
- 内置调试工具:集成了调试工具,方便进行代码调试,提高开发效率。
- 移动应用打包:支持将Web
- 框架支持:为流行的前端框架和库(如Vue.js、React等)提供了优秀的支持。
- 插件系统:具有灵活的插件系统,可以通过安装插件来扩展功能,满足不同开发需求。
- 实时预览:提供实时预览功能,开发者可以即时查看应用程序在不同设备上的外观。
- 丰富的工具集:包含了代码编辑器、项目管理工具、调试工具等丰富的开发工具,支持多种开发任务。
- 云端服务:提供云端服务,如云打包、云端编译等,方便开发者进行云端操作。
- 语言服务调整:
- HBuilderX的语言服务进行了重大调整,由Java调整为Node App打包,Java按需调用,不再常驻后台。
- 改进了对TypeScript、d.ts文件、Vue标签、Easycom组件、CSS、Less、Scss、TS等的支持。
- JS支持自动导包,Emmet支持代码提示预览,uni-app项目根据版本进行代码提示。
- 插件开发:
- HBuilderX 2.7+版本起,开放了插件扩展机制。
- 开发者可以通过JavaScript语言编写HBuilderX的插件,自定义和增强HBuilderX的功能。
- 插件基于Node.js,可以使用Node.js的所有API以及HBuilderX扩展的大量JS API(与VSCode兼容)。
- 版本与安装:
- HBuilder X提供正式版和Alpha版,其中Alpha版更新频率更高,建议开发者同时安装两个版本。
- 可以在HBuilder X官网下载安装包,并按照详细的安装教程进行安装。
- 生态服务:
- 提供插件市场(https://ext.dcloud.net.cn/),开发者可以发布自用的插件到市场。
- 提供开发者交流群、官方论坛等社区支持,方便开发者交流和学习。
总的来说,HBuilder X是一款功能强大、易于使用的集成开发环境,特别适合Web和移动应用的开发者使用,就还蛮好用的。
鼓励大家试试~
相关文章:
前端学习篇一(HTML)
Introduction ##文章内容:使用HBuilder制作一个简单的HTML5网页以此达到学习HTML5 的目的 ##编写内容:1.HTML实现平台 2.HTML简介 3.HTML语言解析 ##编写人:贾雯爽 ##最后更新时间:2024/07/01 Overview Details 一、HTML简介…...
VUE笔记
框架: 框架结构,把很多基础功能已经实现(封装了)。 框架:在基础语言之上,对各种基础功能进行封装,方便开发者,提高开发效率。 举例:操作页面 现在:点击按…...
Datawhale机器学习day-1
赛题 在当今科技日新月异的时代,人工智能(AI)技术正以前所未有的深度和广度渗透到科研领域,特别是在化学及药物研发中展现出了巨大潜力。精准预测分子性质有助于高效筛选出具有优异性能的候选药物。以PROTACs为例,它是…...
业务模型扩展字段存储
构建业务模型时,通常模型会设置扩展信息,存储上一般使用JSON格式存储到db中。JSON虽然有较好的扩展性,但并没有结构化存储的类型和非空等约束,且强依赖代码中写入/读取时进行序列化/反序列化操作, 当扩展信息结构简单且…...
50+k8s常用命令,助你成为k8s大牛!
Kubernetes是一个强大的容器编排平台,不管是运维、开发还是测试或多或少都会接触到,熟练的掌握k8s可大大提高工作效率和强化自身技能。 集群管理 1. 查看集群节点状态: kubectl get nodes2. 查看集群资源使用情况: kubectl top nodes3. 查看集群信息…...
002-基于Sklearn的机器学习入门:回归分析(上)
本节及后续章节将介绍机器学习中的几种经典回归算法,所选方法都在Sklearn库中聚类模块有具体实现。本节为上篇,将介绍基础的线性回归方法,包括线性回归、逻辑回归、多项式回归和岭回归等。 2.1 回归分析概述 回归(Regression&…...
python实现网页自动化(自动登录需要验证的网页)
引言: python作为实现网页自动化的一个重要工具,其强大的各种封装的库使得程序运行更加简洁,只需要下载相应的库,然后调用库中的函数就可以简便的实现我们想要的网页相关操作。 正文: 我的前几篇文章写了关于初学爬虫中比较容易上手的功能,例如爬取静态网页的数据、动…...
ctfshow-web入门-命令执行(web71-web74)
目录 1、web71 2、web72 3、web73 4、web74 1、web71 像上一题那样扫描但是输出全是问号 查看提示:我们可以结合 exit() 函数执行php代码让后面的匹配缓冲区不执行直接退出。 payload: cvar_export(scandir(/));exit(); 同理读取 flag.txt cinclud…...
一体化导航的优点及应用领域
一体化导航,作为现代导航技术的重要发展方向,正日益展现出其独特的魅力和广泛的应用前景。这种导航方式将多种导航技术、信息系统以及数据处理方法集成于一个统一的平台上,为用户提供高效、准确、便捷的导航服务。 一体化导航的核心在于其高度…...
“吃饭大学”!中国大学食堂排行TOP10(含西电)
同学们们,考研择校考虑的因素除了学术,地理位置等方面,你们还会考虑哪些因素呢?小研作为一个吃货,必定会考虑的一个因素当然是大学的食堂美食啊~ 那中国超级好吃的大学食堂在哪?一起来看看有没有你的目标院…...
使用 Mybatis 时,调用 DAO接口时是怎么调用到 SQL 的?
Mybatis 是一个流行的 Java 持久层框架,它提供了一种半自动的 SQL 映射方式,允许开发者在 Java 代码中以一种更加直观和灵活的方式来操作数据库。当你使用 Mybatis 调用 DAO 接口时,背后的工作流程大致如下: 接口定义:…...
微信小程序毕业设计-微信食堂线上订餐系统项目开发实战(附源码+论文)
大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:微信小程序毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计…...
昂首资本实例使用价格行为策略,交易翻倍一点都不难
交易翻倍难吗?当Anzo Capital昂首资本使用价格行为策略进行交易时,发现一点都不难,以下是使用价格行为策略的实例分享: 1. 在初次交易信号出现时,推荐在1.00429价位入场,将止损设于1.04399,止盈…...
20240701 每日AI必读资讯
🏫AI真炼丹:整整14天,无需人类参与 - 英矽智能推出全球首个AI参与决策的生物学实验室,实现了14天内完成靶点发现和验证的全自动化闭环实验。 - 该实验室由PandaOmics平台驱动,集成多种预测模型和海量数据࿰…...
GPT-5 一年半后发布,对此你有何期待?
IT之家6月22日消息,在美国达特茅斯工程学院周四公布的采访中,OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布,给出了肯定答案并表示将在一年半后发布。此外,穆拉蒂在采访中还把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中添加绘制基础线(m_line、m_plot)、绘制箭头(m_quiver&#x…...
Luminar Neo 1.20.0 (macOS Universal) - 创新 AI 图像编辑器
Luminar Neo 1.20.0 (macOS Universal) - 创新 AI 图像编辑器 利用尖端的人工智能生成技术,轻松增强照片效果 请访问原文链接:https://sysin.org/blog/luminar-neo/,查看最新版。原创作品,转载请保留出处。 作者主页࿱…...
谈谈Flink消费kafka的偏移量
offset配置: flinkKafkaConsumer.setStartFromEarliest():从topic的最早offset位置开始处理数据,如果kafka中保存有消费者组的消费位置将被忽略。 flinkKafkaConsumer.setStartFromLatest():从topic的最新offset位置开始处理数据,如果kafka中保存有消费…...
MySQL 高级SQL高级语句(二)
一.CREATE VIEW 视图 可以被当作是虚拟表或存储查询。 视图跟表格的不同是,表格中有实际储存数据记录,而视图是建立在表格之上的一个架构,它本身并不实际储存数据记录。 临时表在用户退出或同数据库的连接断开后就自动消失了,而…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
