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基本结构图理解图

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

练习：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>