HTML【安装HBuilder、常用标签】--学习JavaEE的day44

news2025/1/12 17:47:26

day44

JavaEE

学习过程：前端—>数据库—>服务器端

前端的VUE在框架阶段学习

JavaEE学习过程图
JavaEE学习过程图

HTML

前端：展示页面、与用户交互 — HTML

后端：数据的交互和传递 — JavaEE/JavaWeb

1. 前端开发的工作模式

开发输出html+css+js

理解：图—>UI（像素）—>程序员编写页面

2. 运行环境–浏览器

现阶段：主要是本地直接通过浏览器打开，后期我们再将网页放置到服务器上，通过http协议来访问我们需要的资源

一般小项目服务器租用，成本更低

谷歌、火狐浏览器等下载几个来运行代码

浏览器解析代码—>右键：检查或查看页面源代码

3. 安装HBuilder

官方下载地址：http://www.dcloud.io/，注意版本【本人使用HTML5】

其实eclipse也可以进行这方面的开发工作，只是提示方面做得不太好

项目结构理解图
项目结构理解图

提供一个懒人压缩包解压后，HBuilder.exe发送到桌面快捷方式即可使用；还有一个离线版的w3school

注意：注册才能改变工作空间

三个模式：开发视图直接敲代码；边看边改是内嵌一个服务器，顾名思义；团队是局域网互看互改

新建一个目录写html规整
创建目录

4. 网页的组成部分(HTML+CSS+JAVASCRIPT)

HTML：页面结构
CSS：页面样式表现

JavaScript：交互行为

理解：页面结构HTML，优化字体边框按钮格式等由CSS[层层叠加]，交互【ps：点击或者什么做出什么反映】

5. HTML简介

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

HTML提供了许多标记，如段落标记p、标题标记 h1-h6、超链接标记 a、图片标记 img等，网页中需要定义什么内容，就用相应的HTML标记描述即可。

6. HTML基本结构

理解：需要什么内容，使用什么标签即可
文档声明不同版本，长得不一样

HTML基本结构图
HTML基本结构图理解图

根标签里面包含内容最多
标签简化【没有内容时】<…/>

练习：HTML的百度一下

设置网页标题+网页主体显示中文信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>百度一下，你就知道</title>
		<link rel="shortcut icon" href="img/favicon.ico" />
	</head>
	<body>
		你知道了吗？
	</body>
</html>

加图标前后

检查百度的网页源代码，可以找到其图标代码

它的图标是网络路径链接获取，我们也可以下载来放在img下，用本地资源路径方式获取

<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">

学习图标

7. 常用的标签

a) 标题

注意：如果使用无效标签（比如：h7）会按照文本内容在页面展示

这里也可以看到注释使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			知识点：标题标签
			标签：
				h1~h6
        -->
        
        <h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<h7>七级标签</h7>
		花开花落花无悔
	</body>
</html>

运行：
标题标签运行图

b) 段落

标签：p

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			知识点：段落标签
			标签：
				p
        -->
		<p>花开花落花无悔</p>
		<p>缘来缘去缘如水</p>
	</body>
</html>

运行：
段落标签运行图

c) 文本

标签：
span – 文本标签
br – 换行标签
hr – 分割线标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>花开花落花无悔</span>
		<br/>
		<span>缘来缘去缘如水</span>
		<hr />
	</body>
</html>

运行：可见标题、段落、文本的行间距不同
文本标签

d) 图片

img - 图片标签
src：图片资源路径
width：宽度
height：高度
alt：图片加载失败后显示的文本内容

注意：
100px – 100像素
30% ---- 占页面宽度的百分比

img只有资源src，没有内容；像素【固定】或者百分比【适配变化，即页面变大图片也相应变大】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<img src="../img/星空一花.jpg" width="100px" height="100px"/>
		<br />
		<img src="../img/星空一花.jpg" width="30%" height="30%" />
		<br />
		<img src="http://img.duoziwang.com/2020/02/06242324110320.jpg" width="100px" height="100px" />
		<br />
		<img src="http://img.duoziwang.com/2020/02/xxx.jpg" width="100px" height="100px" alt="图片加载失败" />
		
	</body>
</html>

运行：
图片标签

e) 列表- 无序列表

ul - 无序列表
type - 展示类型（circle-空心圆 discs-实心圆 square-实心方块）
li - 列表项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

		<ul type="square" >
			<li>xxx</li>
			<li>yyy</li>
			<li>zzz</li>
		</ul>
		
	</body>
</html>

运行：
无序列表标签

f) 列表-有序列表

ol - 有序列表
type - 展示类型（1-阿拉伯数字 a-小写英文字母 A-大写英文字母 i-小写罗马数字 I-大写罗马数字）
li - 列表项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

        <h3>注册流程：</h3>
		<ol type="1">
			<li>填写基本信息</li>
			<li>绑定银行账号</li>
			<li>绑定手机号</li>
			<li>注册成功</li>
		</ol>
		
	</body>
</html>

运行：
有序列表标签

g) 列表-定义列表

知识点：定义列表
dl - 定义列表
dt - 列表头
dd - 列表体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<dl>
			<dt>
				<h2>奇男子</h2>
				<img src="../img/星空一花.jpg" width="60px" />
			</dt>
			<dd>
				<p>2222年2月出生于四川，当时雷霆击碎黑暗，四川峨眉山金顶惊现佛光</p>
				<p>奇男子从小就爱钻研互联网相关技术</p>
				<p>5岁精通HTML</p>
				<p>9岁精通Java</p>
				<p>15岁精通数据库</p>
				<p>17岁能够独立完成大型分布式微服务项目</p>
				<p>20岁时因不满老板压榨员工，一怒之下删库跑路，至今下落不明...</p>
			</dd>
		</dl>
		
		
	</body>
</html>

运行：
定义列表标签

h) 嵌套列表案例

注意：HTML标签可以无限层嵌套！！！

有序列表、无序列表、两者嵌套都可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

		<ul>
			<li>
				<h3>荤菜</h3>
				<ol>
					<li>回锅肉</li>
					<li>仔姜鸭丝</li>
					<li>爆炒腰花</li>
					<li>宫保鸡丁</li>
					<li>小鸡炖蘑菇</li>
				</ol>
			</li>
			<li>
				<h3>素菜</h3>
				<ol>
					<li>清炒空心菜</li>
					<li>鱼香茄子</li>
					<li>土豆炒洋芋</li>
					<li>西红柿炒番茄</li>
				</ol>
			</li>
			<li>
				<h3>汤类</h3>
				<ol>
					<li>翡翠蛋花汤</li>
					<li>皮蛋黄瓜汤</li>
					<li>胡豆瓣酸菜粉丝汤</li>
					<li>开水白菜</li>
				</ol>
			</li>
		</ul>
	</body>
</html>

运行：
嵌套列表

i) 超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 标签在 HTML 中创建链接。

有两种使用 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接

  2. 通过使用 name 属性 - 创建文档内的书签

掌握href属性，跳转到另一个文档；Target属性：_top：_parent：不常用

链接到不同目录的文件时，如何处理？

【…/退回上一级，同级才能获取】

制作图像链接

a - 超链接
href - 链接地址
target - 跳转目标（_self在当前卡页跳转，_blank在新增卡页跳转）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

		<a href="http://www.baidu.com" target="_self">百度一下</a>
		<br />
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<br />
		
		<a href="08_列表案例.html" target="_blank">跳转本地页面</a>
		<br />
		
		<a href="08_列表案例.html" target="_blank">
			<img src="../img/星空一花.jpg" width="50px"/>
		</a>
	</body>
</html>

运行：

未点击把鼠标放在上面是显示一个小手
点击跳转：前卡页跳转，新增卡页跳转【文字、图像链接】
超链接标签

j) 锚链接

掌握name属性，创建锚链接

下锚点a，然后链接定位跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<a href="#new01">法治</a><!--定位到锚点处-->
		<a href="#new02">国际</a><!--定位到锚点处-->
		<a href="#new03">娱乐</a><!--定位到锚点处-->
		
		<a name="new01"></a><!--下锚点-->
		<h1>法治新闻 - 为何半夜母猪频频惨叫</h1>
		<h1>法治新闻 - 为何八旬老太以外怀孕</h1>
		<h1>法治新闻 - 是人性的溟灭</h1>
		<h1>法治新闻 - 是道德的沦丧</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<a name="new02"></a><!--下锚点-->
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<a name="new03"></a><!--下锚点-->
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		
		
	</body>
</html>

锚链接图

小结

1.了解前端和后端的区别

2.HMTL、CSS、JavaScript

3.安装HBuilder

4.常用的标签

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1661102.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

keil5软件安装教程（MDKv5.39）

keil5软件安装教程（MDKv5.39）

keil5软件安装分为三部分&#xff1a; 目录 1.安装mdk 2.激活mdk 3.安装STM32芯片包 1.安装mdk 安装包链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1PZoGhzI5Y19ROv7xe9QJKA?pwdgt3s 提取码&#xff1a;gt3s 1、下载keil5的压缩包并解压&#xff0c;鼠…
阅读更多...
浅谈如何利用 AI 提高内容生产效率?｜TodayAI

浅谈如何利用 AI 提高内容生产效率?｜TodayAI

在数字化时代&#xff0c;内容的创建和分发速度变得尤为关键。人工智能&#xff08;AI&#xff09;技术提供了加速这一过程的可能性&#xff0c;不仅提升了生产效率&#xff0c;还改善了内容的质量和受众的接受度。本文深入探讨AI如何在内容生成、分发与推广&#xff0c;以及内…
阅读更多...
Linux下GraspNet复现流程

Linux下GraspNet复现流程

Linux&#xff0c;Ubuntu中GraspNet复现流程 文章目录 Linux&#xff0c;Ubuntu中GraspNet复现流程1.安装cuda和cudnn2.安装pytorch3.编译graspnetAPIReference &#x1f680;非常重要的环境配置&#x1f680; ubuntu 20.04cuda 11.0.1cudnn v8.9.7python 3.8.19pytorch 1.7.0…
阅读更多...
如何使用openEuler 22.03 配置mail.rc给邮箱发送邮件

如何使用openEuler 22.03 配置mail.rc给邮箱发送邮件

目录 需求环境总体步骤梳理详细步骤1. 安装mailx软件包&#xff08;centos默认安装&#xff0c;openEuler不默认安装&#xff09;2. 检查是否能ping得到smtp服务器3. 在qq邮箱开启smtp设置4. 修改/etc/mail.rc文件5. 测试 可能遇到的问题 需求 希望检查每日的备份和系统运行记…
阅读更多...
在windows下安装wsl子系统

在windows下安装wsl子系统

一、安装环境 windows规格 版本Windows 10企业版版本号22H2操作系统内部版本19045.4291 二、安装过程 2.1 以管理员身份打开PowerShell&#xff08;win X快捷键&#xff09;&#xff1b; 2.2 输入命令&#xff1a;wsl --list --online&#xff08;简写&#xff1a;wsl -l …
阅读更多...
中北大学软件学院javaweb实验二JSP应用开发实验报告

中北大学软件学院javaweb实验二JSP应用开发实验报告

实验时间 2024年4月 25 日17时至 22 时 学时数 4 1.实验名称 实验2&#xff1a;JSP应用开发(2学时) 2.实验目的 &#xff08;1&#xff09;学会编写和运行简单的JSP页面&#xff0c;理解其运行原理&#xff1b; &#xff08;2&#xff09;学会使用JSP的声明、表达式、脚…
阅读更多...
【全开源】Java外卖霸王餐免费吃外卖小程序+APP+公众号+H5多端霸王餐源码

【全开源】Java外卖霸王餐免费吃外卖小程序+APP+公众号+H5多端霸王餐源码

一、特色功能 霸王餐活动管理&#xff1a;允许商家发布和管理霸王餐活动&#xff0c;包括设置活动时间、具体优惠、活动规则等。用户参与与浏览&#xff1a;用户可以在小程序中浏览霸王餐活动列表&#xff0c;查看活动的详情信息&#xff0c;如商品或服务的免费赠送、活动规则…
阅读更多...
MemoryModule - exp - test

MemoryModule - exp - test

文章目录 MemoryModule - exp - test概述笔记测试环境GetModuleFileName不能正常执行GetModuleFileNameWntdll_LdrGetDllFullName猜测原因用LoadLibrary载入的DLL中功能是正常的 gLog可以正常使用内存载入DLL无法支持的功能的折中方法COM操作正常调用方代码接口代码 接口入参测…
阅读更多...
【竞技宝】欧冠：欧洲三大赛事决赛对阵出炉

【竞技宝】欧冠：欧洲三大赛事决赛对阵出炉

本赛季欧洲三级赛事的决赛对阵均已出炉:皇马与多特蒙德相聚欧冠决赛;勒沃库森将会和亚特兰大争夺欧联杯冠军;奥林匹亚科斯则要与佛罗伦萨争夺欧协联的冠军。在6支决赛球队中,德甲和意甲都有两支球队,而西甲的皇马则是夺冠最大热门,近几个赛季战斗力极强的英超在欧战方面彻底失败…
阅读更多...
Day 43 1049. 最后一块石头的重量 II 494. 目标和 474.一和零

Day 43 1049. 最后一块石头的重量 II 494. 目标和 474.一和零

最后一块石头重量Ⅱ 有一堆石头&#xff0c;每块石头的重量都是正整数。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结果如下&#xff1a; 如果 x y&#xff0c;那么两…
阅读更多...
鸿蒙OpenHarmony技术：【Docker编译环境】

鸿蒙OpenHarmony技术：【Docker编译环境】

Docker环境介绍 OpenHarmony为开发者提供了两种Docker环境&#xff0c;以帮助开发者快速完成复杂的开发环境准备工作。两种Docker环境及适用场景如下&#xff1a; 独立Docker环境&#xff1a;适用于直接基于Ubuntu、Windows操作系统平台进行版本编译的场景。基于HPM的Docker环…
阅读更多...
企业合规视角下的菜鸟网络与拼多多不正当竞争案

企业合规视角下的菜鸟网络与拼多多不正当竞争案

近日&#xff0c;浙江省高院对备受瞩目的“菜鸟网络诉拼多多不正当竞争案”做出终审判决。该案件从2022年初发酵至今&#xff0c;终于以法院驳回拼多多上诉、维持一审判决而告一段落。此案不仅在法律层面引起广泛关注&#xff0c;更在企业合规方面提供了重要的案例参考。 根据判…
阅读更多...
ESP32引脚入门指南(五）：从理论到实践(SPI)

ESP32引脚入门指南(五）：从理论到实践(SPI)

ESP32 微控制器因其丰富的外设接口而备受赞誉&#xff0c;其中SPI&#xff08;Serial Peripheral Interface&#xff09;是一种常见的通信协议。本文将深入探讨ESP32的SPI、HSPI&#xff08;High-Speed SPI&#xff09;和VSPI&#xff08;Very High-Speed SPI&#xff09;接口&…
阅读更多...
Qt三方库：QuaZIP介绍、编译和使用

Qt三方库：QuaZIP介绍、编译和使用

前言 Qt使用一些压缩解压功能&#xff0c;探讨过libzip库&#xff0c;zlib库&#xff0c;libzip库比较原始&#xff0c;还有其他库&#xff0c;都比较基础&#xff0c;而在基础库之上&#xff0c;又有高级封装库&#xff0c;Qt中的QuaZIP是一个很好的选择。Quazip是一个用于压缩…
阅读更多...
如何防止WordPress网站内容被抓取

如何防止WordPress网站内容被抓取

最近在检查网站服务器的访问日志的时候&#xff0c;发现了大量来自同一个IP地址的的请求&#xff0c;用站长工具分析确认了我的网站内容确实是被他人的网站抓取了&#xff0c;我第一时间联系了对方网站的服务器提供商投诉了该网站&#xff0c;要求对方停止侵权行为&#xff0c;…
阅读更多...
5月白银现货最新行情走势

5月白银现货最新行情走势

美联储5月的议息会议举行在即&#xff0c;但从联邦公开市场委员会&#xff08;FOMC&#xff09;近期透露的信息来看&#xff0c;降息似乎并没有迫切性。——美联储理事鲍曼认为通胀存在"上行风险"&#xff0c;明尼阿波利斯联邦储备银行行长卡什卡利提出了今年不降息的…
阅读更多...
Python修改exe之类的游戏文件中的数值

Python修改exe之类的游戏文件中的数值

文章目录 场景查找修改 补充字节to_bytes 场景 某些游戏数值&#xff08;攻击力、射程、速度…&#xff09;被写在exe之类的文件里 要先查找游戏数值&#xff0c;然后修改 查找 首先&#xff0c;要查找数值&#xff0c;大数重复较少&#xff0c;建议从大数找起 F 游戏原件…
阅读更多...
AXI4写时序在AXI Block RAM (BRAM) IP核中的应用

AXI4写时序在AXI Block RAM (BRAM) IP核中的应用

在本文中将展示描述了AXI从设备&#xff08;slave&#xff09;AXI BRAM Controller IP核与Xilinx AXI Interconnect之间的写时序关系。 1 Single Write 图1是一个关于32位宽度的BRAM&#xff08;Block RAM&#xff09;的单次写入操作的例子。这个例子展示了如何向地址0x1000h…
阅读更多...
45.乐理基础-音符的组合方式-复附点

45.乐理基础-音符的组合方式-复附点

复附点&#xff1a; 复附点顾名思义就是两个附点 复附点表示的音符&#xff0c;有多少拍&#xff1f;下面拿 复附点四分音符举例&#xff0c;可以把整个音符看成三部分&#xff0c;第一部分是原本的四分音符&#xff0c;第二部分是第一个附点&#xff0c;第三部分是第二个附点&…
阅读更多...
C++动态内存管理：与C语言动态内存管理的差异之争

C++动态内存管理：与C语言动态内存管理的差异之争

当你改错一行代码的时候&#xff1a; 当你想要重构别人的代码时&#xff1a; 目录 前言 一、C/C的内存分布 二、C/C语言中的动态内存管理 三、new与delete的实现原理 总结&#xff1a; 前言 在C中&#xff0c;内存管理是一个至关重要的主题。正确地管理内存可以避免内存泄…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023