前端学习篇一(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 视图 可以被当作是虚拟表或存储查询。 视图跟表格的不同是,表格中有实际储存数据记录,而视图是建立在表格之上的一个架构,它本身并不实际储存数据记录。 临时表在用户退出或同数据库的连接断开后就自动消失了,而…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...
解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象: android studio报错: [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决: 不要动CMakeLists.…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
