44安装HBuilder、HTML【常用标签】

程序奇男子

已于 2024-07-11 19:57:21 修改

阅读量1.1k

点赞数 28

分类专栏： JavaEE 文章标签： html 学习 java-ee

于 2024-05-10 21:27:17 首次发布

本文链接：https://blog.csdn.net/gangain/article/details/138681403

版权

JavaEE 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

day44

JavaEE

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

前端的VUE在框架阶段学习

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 中创建链接。

有两种使用标签的方式：

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

通过使用 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>