首页手记【学习打卡】第4天前端零基础入门第四章

【学习打卡】第4天前端零基础入门第四章

标签：

Html5

课程名称：前端零基础入门（体系课）

课程章节：第四章图像和超链接

主讲老师：(课程中没有显示)

课程内容：

今天学习的内容包括：

在网页插入图片
相对路径和绝对路径
给文字插入超链接
设置锚的位置进同/不同页面内跳转
链接扩展功能(电子邮件链接/文件下载)
在网页中的使用场景

课程收获：

图像和超链接标签

插入图片img为单标签，用/闭合，无结束标签

src（必写）：URL，显示图像的URL

alt：文字，图像替代文本

height：数值和百分比，图像的高

width：数值和百分比，图像的宽

(使用百分比会根据页面的宽高而随之变化，网页缩小，图片也相应缩小）

绝对路径和相对路径

绝对路径：

绝对路径是从盘符开始的路径直到找到为止。 E：/......./...../（创建的文件夹和文件建议使用英文）

绝对路径不如相对路径，例如大文件夹整体移动

绝对路径：从盘符开始起始的路径，

相对路径：

相对路径即图片相对于网页html文件的路径, 同级文件直接引用图片名即可

(../代表上一级，../../代表上一级的上一级 )

图片与网页的相对位置不同情况下的路径

1.图片与网页同一目录下：<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg"/>

2.图片在网页的上一级目录中：<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../1.jpg"/>

3.图片在网页的下一级目录中：<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="文件夹名/1.jpg'/>

alt属性对于搜索引擎有好处

分辨率即宽高像素乘积，像素点多少

width height均为像素或百分比如50px 20%

bgcolor属性，是用来设置背景颜色的，所以<body bgcolor=>是正确的。

百分比为父容器（包含标签的元素）

缩放浏览器大小（此时浏览器即父容器）可以改变百分比图片，无法改变像素图片

超链接

超链接标签（鼠标放在文字或图片上会出现 ”小手图标“）

<a href="">链接</a> 可以实现刷新的效果

<a href="浏览器看到"> 用户看到的 </a> （href：链接地址，可以是内部链接或外部链接）

a == anchor 锚

href == hyperText reference超文本引用 ==> 站内链接，站外链接（绝对路径）

属性介绍:

href:连接地址；

target：链接的目标窗口出现的形式；

target的属性值：

_self:在当前窗口打开；

_blank：创建新窗口打开；

_top和_parent和页面的框架相关。

title：链接提示文字（当鼠标停留在链接时提示文字）；

name：锚链接的命名。

锚标签(命名锚点使用<a>标签中name的属性值)

同页面定义锚点

<a name="锚名"></a>只是用于定位设置锚名；

<a href="#锚名"></a>用于设置寻找相对应的锚的位置链接。

属性name可以在任意<a></a>标签里面使用，同样作为定位,并且a标签内的内容同样有超链接的效果。如：<a href="https://www.bilibili.com/" target="_blank" name="锚名"></a>

name也可单独在<a></a>标签里，作为定位。如：<a name="锚名"></a>

先定义锚的位置和锚的名字，再设置寻找定义下的锚的链接

不同页面定义锚点

网页1：<a href="网页名称#锚点">......</a>

网页2：<a name="锚点">......</a>

找到锚位置不一定显示在最上方，需要下面还有内容，取决于跳转对象下方是否还有内容

链接扩展功能(电子邮件链接/文件下载)

1、使用a标签的href属性来变成邮箱

2、使用a标签的href属性来变成下载文件

总结(HHTML基础)

基本结构

<!DOCTYPE html>

</head>

</body>

</html>

文字与段落

标题标签：<h1></h1>~<h6></6>

段落标签：

align对齐属性值：

left 左对齐---right 右对齐---center 居中对齐---justify每行长度相等对齐

换行标签：

文字倾斜：,

文字加粗:,

上标:

下标：

特殊符号：

< < 小于号

> > 大于号

® ® 已注册

&copy； © 版权

™ ™ 商标

  空格

无序列表

</ul>

type属性

disc 圆点(默认，实心圆点)

square 正方形(实心正方形)

circle 空心圆

有序列表

<li>一样是列表项</li>

</ol>

type属性

1 1,2,3,......(默认)

a a,b,c......

A A,B,C......

i i,ii,iii,......

I I,II,III,......

定义列表

<dt>定义列表项</dt>

<dd>列表项描述</dd>

</di>

图像与超链接

语法：<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="文件路径" alt="图片描述".../>

img属性

SRC 文件路径（路径有相对路径与绝对路径）

alt 图片描述

height 图片高度（10px,10%描述）

width 图片宽度（10px,10%描述）

超链接

语法：<a href="链接地址">内容</a>

属性：

href 链接地址

target 打开窗口方式；_self（本窗口打开），_blank(新窗口打开)，_top(后面学),_parent(后面学)

title 提示文字

name 链接命名