前端基础(三)_路径(绝对路径、相对路径)、语义化、特殊字符

简介: 本文介绍了前端开发中的路径概念(包括绝对路径和相对路径)、HTML的语义化以及特殊字符的使用。文章解释了绝对路径和相对路径的区别和应用场景,阐述了HTML语义化的意义和好处,并通过示例代码展示了如何在HTML中使用特殊字符。

路径

分为两种绝对路径和相对路径
1.绝对路径:带有域名的文件的完整路径或某一个盘符下的某个路径,(或者项目的根目录)
2.相对路径:相当于当前文件的相对位置

/ 根目录
./ 当前目录
../ 上一级目录
../../ 上上级目录

相对路径:

相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。

在这里插入图片描述

绝对路径:

绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
完整的描述文件位置的路径就是绝对路径,以web站点根目录为参考基础的目录路径。绝对路径名的指定是从树型目录结构顶部的根目录开始到某个目录或文件的路径,由一系列连续的目录组成,中间用斜线分隔,直到要指定的目录或文件,路径中的最后一个名称即为要指向的目录或文件。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

在这里插入图片描述
在这里插入图片描述
根目录为C盘

网络应用中绝对路径的优点
1、防止网站被恶意抄袭,使用绝对路径,如果有人抄袭采集你的内容,里面的链接还会指向你的网站。有些抄袭的比较懒,连里面的链接一起抄了过去。
2、如果站长不能做301转向,因而有网址规范化的问题,使用绝对路径有助于链接指向选定的URL版本。
3、就算网页被移动位置,里面的链接还是指向正确的URL。
绝对路径的缺点:
1、除非链接是动态插入的,不然没办法在测试服务器上进行测试。因为里面的链接将直接指向真正的域名URL,而不是测试服务器中的URL。
2、除非链接是动态插入的,不然移动内容页面将很困难。因为内容页面位置发生变化,在其他页面上的链接却可能无法跟着变化,还指向原来的已经硬编码的绝对路径。

什么是HTML语义化

1.根据页面内容的结构,选择合适的标签。
2.便于开发者阅读和写出更优雅的代码,便于浏览器、搜索引擎解析,有利于SEO,便于团队开发和维护。
如:标题H1~H6,段落p标签。

首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。strong,em用来区别于其他文字,起到了强调的作用。

特殊字符

<body>
  <div>后面的带分号 ;</div>
  <div>空格 &nbsp;</div>
  <div>小于号 < &lt; <div>大于号 > &gt;</div>
  <div></div>& &amp;
  <div></div>已注册 &reg;
  <div></div>版权符号 &copy;
  <div></div>商标 &trade;
</body>

页面展示:
在这里插入图片描述

目录
相关文章
|
4月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
327 3
|
1月前
|
设计模式 JavaScript 前端开发
前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
这篇文章是关于Vue框架的学习指南,涵盖了前端知识体系、MVVM模式、创建第一个Vue程序以及Vue实例的生命周期等基础知识。
前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
|
2月前
|
前端开发 JavaScript 安全
|
2月前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
4月前
|
前端开发 搜索推荐 开发者
【Web 前端】什么是语义化标签?
【4月更文挑战第22天】【Web 前端】什么是语义化标签?
|
4月前
|
前端开发 JavaScript 安全
【网络安全/前端XSS防护】一文带你了解HTML的特殊字符转义及编码
【网络安全/前端XSS防护】一文带你了解HTML的特殊字符转义及编码
351 0
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
前端 JS 经典:零宽字符
前端 JS 经典:零宽字符
68 0
|
4月前
|
算法 前端开发
前端算法-路径总和
前端算法-路径总和
|
4月前
|
设计模式 前端开发 JavaScript
从新手到资深前端工程师:学习路径和必备技能
从新手到资深前端工程师:学习路径和必备技能
203 0
|
4月前
|
数据采集 移动开发 前端开发
【零基础入门前端系列】—语义化标签、实体字符、视频、音频(八)
【零基础入门前端系列】—语义化标签、实体字符、视频、音频(八)