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

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.mfbz.cn/a/612927.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Springboot+Vue项目-基于Java+MySQL的宠物商城网站系统(附源码+演示视频+LW)

Springboot+Vue项目-基于Java+MySQL的宠物商城网站系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…
阅读更多...
【未公开】电信网关配置管理系统rewrite接口存在文件上传漏洞

【未公开】电信网关配置管理系统rewrite接口存在文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…
阅读更多...
【JavaScript】内置对象 - 数组对象 ⑤ ( 数组转字符串 | toString 方法 | join 方法 )

【JavaScript】内置对象 - 数组对象 ⑤ ( 数组转字符串 | toString 方法 | join 方法 )

文章目录 一、数组转字符串1、数组转字符串 ( 逗号分割 ) - toString()2、数组转字符串 ( 自定义分割符 ) - join() Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array 一、数组转字符串 1、数组转字符串 ( 逗…
阅读更多...
#04 构建您的第一个神经网络：PyTorch入门指南

#04 构建您的第一个神经网络：PyTorch入门指南

文章目录 前言理论基础神经网络层的组成前向传播与反向传播 神经网络设计步骤1&#xff1a;准备数据集步骤2&#xff1a;构建模型步骤3&#xff1a;定义损失函数和优化器步骤4&#xff1a;训练模型步骤5&#xff1a;评估模型结论 前言 在过去的几天里&#xff0c;我们深入了解了…
阅读更多...
【Java】获取近六个月的年月

【Java】获取近六个月的年月

数据库里面存储的字段类型就是varchar&#xff0c;数据格式就是类似2024-12这样的年月格式。 目标&#xff1a; 以当前月份为标准&#xff0c;向前获取近6个月的年月&#xff08;year_month&#xff09;形成列表 // 获取近6个月的年月列表List<String> recentMonths ge…
阅读更多...
fswatch工具：跟踪Linux中的文件和目录更改

fswatch工具：跟踪Linux中的文件和目录更改

fswatch是一个跨平台的文件更改监视器&#xff0c;当指定文件或目录的内容被更改或修改时&#xff0c;它会收到通知警报。 fswatch在不同的操作系统上执行多种类型的监视器&#xff0c;例如&#xff1a; 基于 Apple OS X 的文件系统事件 API 构建的监视器。基于kqueue的监视器…
阅读更多...
Nginx部署前后端分离项目

Nginx部署前后端分离项目

部署前后端分离项目&#xff0c;要求前端项目、后端项目、数据库分别部署在3台服务器 服务器准备 服务器名IP软件包前端192.168.99.137nginx后端192.168.99.139jar数据库192.168.99.100mariadb 1、前端服务器 yum install -y epel-release && yum install -y nginx…
阅读更多...
9.spring-图书管理系统

9.spring-图书管理系统

文章目录 1.开发项目流程1.1开发开发1.2数据库的设计 2.MySQL数据库相关代码3.构造图书结构3.1用户登录3.2图书列表3.3图书添加3.4图书删除3.4.1批量删除 3.5图书查询(翻页) 4.页面展示4.1登录页面4.2列表页面4.3增加图书页面4.4修改图书信息页面 5.功能展示5.1增加图书信息5.2…
阅读更多...
分布式与一致性协议之TCC协议

分布式与一致性协议之TCC协议

TCC协议 概述 虽然MySQL XA能实现数据层的分布式事务&#xff0c;解决多个MySQL操作的事务问题&#xff0c;但还面临别的问题:在接收到外部的指令后&#xff0c;需要访问多个内部系统&#xff0c;执行指令约定的操作&#xff0c;还必须保证指令执行的原子性(也就是事务要么全…
阅读更多...
nestjs 全栈进阶--中间件

nestjs 全栈进阶--中间件

视频教程 22_nest中中间件_哔哩哔哩_bilibili 1. 介绍 在Nest.js框架中&#xff0c;中间件&#xff08;Middleware&#xff09;是一个非常重要的概念&#xff0c;它是HTTP请求和响应生命周期中的一个重要组成部分&#xff0c;允许开发者在请求到达最终的目的控制器方法之前或…
阅读更多...
机器学习算法 - 逻辑回归

机器学习算法 - 逻辑回归

逻辑回归是一种广泛应用于统计学和机器学习领域的回归分析方法&#xff0c;主要用于处理二分类问题。它的目的是找到一个最佳拟合模型来预测一个事件的发生概率。以下是逻辑回归的一些核心要点&#xff1a; 基本概念 输出&#xff1a;逻辑回归模型的输出是一个介于0和1之间的…
阅读更多...
【数据结构】队列详解(Queue)

【数据结构】队列详解(Queue)

文章目录 有关队列的概念队列的结点设计及初始化队列的销毁判空和计数入队操作出队操作 有关队列的概念 队列:只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out)入队列:进行插入操作的一端…
阅读更多...
Redis不同数据类型value存储

Redis不同数据类型value存储

一、Strings redis中String的底层没有用c的char来实现&#xff0c;而是使用SDS数据结构( char buf[])。 缺点:浪费空间 优势: 1.c字符串不记录自身的长度&#xff0c;所以获取一个字符串长度的复杂度是O(N),但是SDS记录分配的长度alloc,已使用长度len&#xff0c;获取长度的…
阅读更多...
CSS文字描边，文字间隔，div自定义形状切割

CSS文字描边，文字间隔，div自定义形状切割

clip-path: polygon( 0 0, 68% 0, 100% 32%, 100% 100%, 0 100% );//这里切割出来是少一角的正方形 letter-spacing: 1vw; //文字间隔 -webkit-text-stroke: 1px #fff; //文字描边1px uniapp微信小程序顶部导航栏设置透明&#xff0c;下拉改变透明度 onP…
阅读更多...
[js] 递归，数组对象根据某个值进行升序或者降序

[js] 递归，数组对象根据某个值进行升序或者降序

一、效果图 1.1 父级 1.2 父级与子级 二、代码 升序降序&#xff0c;只要把 a.num - b.num 改成 b.num - a.num <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, i…
阅读更多...
pycharm 将项目连同库一起打包及虚拟环境的使用

pycharm 将项目连同库一起打包及虚拟环境的使用

目录 一、创建虚拟环境 1、用 anaconda 创建 2、Pycharm 直接创建 二、虚拟环境安装第三方库 1、创建项目后&#xff0c;启动终端(Alt F12)&#xff0c;或者点击下方标记处。 2、使用 pip 或者 conda 来进行三方库的安装或卸载 3、将项目中的库放入文档&#xff0c;便于…
阅读更多...
Dual Aggregation Transformer for Image Super-Resolution论文总结

Dual Aggregation Transformer for Image Super-Resolution论文总结

题目&#xff1a;Dual Aggregation Transformer&#xff08;双聚合Transformer&#xff09; for Image Super-Resolution&#xff08;图像超分辨&#xff09; 论文&#xff08;ICCV&#xff09;&#xff1a;Chen_Dual_Aggregation_Transformer_for_Image_Super-Resolution_ICCV…
阅读更多...
Android之给Button上添加按压效果

Android之给Button上添加按压效果

一、配置stateListAnimator参数实现按压效果 1、按钮控件 <Buttonandroid:id"id/mBtnLogin"android:layout_width"match_parent"android:layout_height"48dp"android:background"drawable/shape_jfrb_login_button"android:state…
阅读更多...
腾讯共享WiFi项目的加盟方式有哪些？

腾讯共享WiFi项目的加盟方式有哪些？

在这个互联互通的时代&#xff0c;共享经济的浪潮正以前所未有的力量席卷全球&#xff0c;而腾讯作为中国互联网巨头之一自然不会错过这场盛宴。其推出的腾讯共享WiFi项目自问世以来就备受瞩目&#xff0c;它不仅为用户提供便捷的上网服务&#xff0c;更为创业者打开了一个全新…
阅读更多...
Language2Pose: Natural Language Grounded Pose Forecasting # 论文阅读

Language2Pose: Natural Language Grounded Pose Forecasting # 论文阅读

URL https://arxiv.org/pdf/1907.01108 TD;DR 19 年 7 月 cmu 的文章&#xff0c;提出一种基于 natural language 生成 3D 动作序列的方法。通过一个简单的 CNN 模型应该就可以实现 Model & Method 首先定义一下任务&#xff1a; 输入&#xff1a;用户的自然语言&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站