键盘敲烂,月薪过万作业不做,等于没学
当前系列: HTML和CSS 修改讲义

如果要说HTML中谁是最最重要的元素,那一定就是

超链接

是超链接把我们一个一个的网页连接起来,从而形成了今天广阔无边的互联网世界!

a标签

使用a标签就可以生成一个链接元素:

<a href="http://17bang.ren" title="飞哥的线上互助社区" target="_blank">一起帮</a>

a标签本身并不难,难的是它使用的属性:

title

当鼠标悬停在a标签上时,浏览器会显示title指定的内容,给用户提示(对SEO也有帮助)

title还可以应用在其他很多标签中,比如接下来要学习的img……

target

指示如何打开a标签指示的网页:

  • _self:默认值,在当前网页打开
  • _blank:在新的tab中打开

href

指定点击a标签应打开的网页地址。网址可以可以通过以下方式表示:

网址

即URL,如:http://17bang.ren/Code/624(复习:网址的秘密

这通常只用于指向(本)站(以)外的网页。

因为它包含了协议(http)和域名(17bang.ren),不够灵活。因为我们还在开发阶段:

  1. 域名可能根本没有确定(用localhost代替),这时候该使用什么域名呢?
  2. 假设某一天我们网站的域名更换了呢?所有a标签里面的域名再全部替换一遍吗?
  3. 我们的html页面可能根本就没有部署到服务器呀!

路径(Path)

即URL中不包含协议和域名部分,比如:/Article/624。路径又可以分成两种:复习

  • 绝对(Absolute)路径:它总是以斜杠(/)开头,用斜杠代表根目录(如果是ASP.NET项目即当前项目的wwwroot文件夹),从根目录开始定位。飞哥强烈建议总是使用这种方式!
  • 相对(Relative)路径:相对于当前页面所在目录进行定位(仅供面试使用,推荐这种方式),
    ./
    当前文件所在文件夹
    可省略
    ../
    当前文件所在文件夹的上一级

    ../../
    当前文件所在文件夹的上一级的再上一级


    假设当前页面路径为:/Article/yezi/A624
    1. href="A236":定位到当前文件夹下的236页面,即:/Article/yezi/A236
    2. Category-1/Index:定位到当前文件夹下的Category-1文件夹下的Index页面,即:/Article/yezi/Category-1/Index
    3. href="../Index":定位到当前文件夹的上一级文件夹下的Index页面,即:/Article/Index
    4. href="../../Problem":定位到当前文件夹的上一级的再上一级文件夹下的Problem页面,即:/Problem

此外,网上还有另外一种基于URL的分类方法(称谓),对照表如下:

本文使用 其他分类
网址 绝对url
路径 相对URL
绝对路径
相对根URL
相对路径 相对当前URL

其他文件和download

href后面还可以指定非html的文件。

  • 如果指定的文件能够在浏览器中打开,默认自动打开,比如.txt;
    <a href="/readme.txt">readme</a>
  • 否则提示下载,比如.dll文件
    <a href="/system.zip">system</a>
还可以强行指示浏览器下载该文件,需要添加一个download属性:
<a href="/readme.txt" download>readme</a>

单独的一个download,下载时直接使用文件原名称;如果想要重命名的话,可以在download中指定:

<a href="hello.txt" download="xxx" title="飞哥的线上互助社区" target="_self">一起帮</a>


注意:基于安全考虑,一些可执行文件(如.exe、.dll) 会被禁止访问/下载。

锚标记

在href指定的URL中可以添加井号“#”,比如:

    <a href="../welcome.html#email">email</a>
    <a href="#email">email</a>

当点击这种链接时,浏览器会自动定位到#后指定的“锚”位置。锚位置也是a标签,用id或name匹配

    <a id="email">email</a>
    <a name="email">email</a>

一起帮的FAQ中大量使用了锚标记。(演示)

HTML5新用法

根据新的HTML5标准,href中还可以放email地址、电话号码等

<a href="mailto:2282636022@qq.com?subject=">给飞哥一封Email:2282636022@qq.com</a>
<a href="tel:+18623051469">给飞哥来个电话:18623051469</a>

因为这种写法需要浏览器支持,所以最好将Email地址和电话号码都表现出来,以免浏览器不支持时,用户无法看到他们。


图像

img标签

可用于显示图片:
    <img src="/images/源栈小九.png" alt="颜值担当" title="大神小班,ASP.NET全栈培训" />

图片的格式选择:(复习:图片格式

属性

  • src:图片路径(来源:source)
    PS:为什么a标签里面用href,img中用src?咳咳,这就是前端……没那么多道理可讲,^_^
  • alt:当图片无法获取时的替代(alter)文字
  • title:同a标签,鼠标悬浮时显示
图片的关键是性能:压缩 (一般是美工/UI去做)

base64

有时候,出于各种各样的考虑,我们不想把图片放文件夹中……

  1. 将二进制的图片信息,按每6个一组,分成若干组
  2. 根据base64索引表将每组数据替换成对应的字符:大小写字母、数字、符号"+"、"/"一共64个

@想一想@:为什么是64个?

演示:图片转base64

如何选择?

理解,如果:

  • 按传统模式,浏览器会发起两次请求,一次获得HTML内容,一次获得图片。演示:F12 - 网络)
  • 按base64模式,图片作为HTML内容的一部分,一次性发送给浏览器

所以,base64看起来能获得性能提升。但是:

  • 传统模式,图片可以被浏览器缓存(F12演示)
    PS:有时候为了避免缓存,可以添加不同的url参数
  • base64模式没法缓存

#体会#:性能优化不能简单化……

base64的常见使用场景:图片是由用户混在HTML中上传的。文章发布演示


浏览器缓存

为了提高性能,浏览器在请求一次服务器资源后,会将一些静态资源(比如.css文件、.js文件、图片文件)缓存在本地(内存/磁盘)

这样下一次再请求这些相同的静态资源文件,就可以直接从本地获取,不需要向服务器请求。


但是,这样就会造成一个问题:

当服务器端的文件内容发生了变化,浏览器无法及时响应(这被称之为“缓存脏数据/过期内容”,是所有缓存都有的问题)

巧用url参数

如果src的url值带有url参数,缓存的就是:banner1.svg?v=GaE_EmkeBf-yBbrJ26lpkGd4jkOSh1eVKJaNOw9I4uk,而不是banner1.svg

不同的v值,无法相互匹配,所以:



作业

完成以下页面(只关注HTML内容,忽略其他如图标/样式等):
  1. 模拟常见问题页面,完成其内容页部分
  2. 参考如何获得帮帮点,完成里面的表格。然后将“注册”和“邀请注册”上下两格合并。
  3. 完成任一内容(求助/文章/意见建议)板块的列表页和单页
注意包含:
  • 完整的html文档结构(html/head/body)
  • 页头/页脚/正文/侧边栏等(header/footer/article/aside)
学习笔记
源栈学历
大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 HTML和CSS 中继续学习:

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码