本文主要是介绍HTML【安装HBuilder、常用标签】--学习JavaEE的day44，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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的百度一下
设置网页标题+网页主体显示中文信息
<!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>
小结
1.了解前端和后端的区别
2.HMTL、CSS、JavaScript
3.安装HBuilder
4.常用的标签
这篇关于HTML【安装HBuilder、常用标签】--学习JavaEE的day44的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
