HTML之额外知识补充 (四):字符实体、URL地址、元素语义化、SEO优化、字符编码

跳转目录🚀

篇章知识点
HTML之邂逅(一)软件开发和应用程序开发、网站和网页的关系、网页的显示过程、网页的组成部分、浏览器和浏览器内核
HTML之网页开发(二)第一个网页、认识HTML、开发工具、HTML元素、注释编写
HTML常见的元素(三)HTML结构分析、常见的标签、div元素与span元素、HTML全局属性
HTML额外知识补充(四)字符实体、URL地址、元素语义化、SEO优化、字符编码字符实体、URL地址、元素语义化、SEO优化、字符编码

1. 字符实体✨

在我们需要在内容中编写一个小于号(<),但是却被浏览器解析为一个tag,这时我们就可以使用字符实体

在这里插入图片描述

1.1 字符实体的构成⭐

  • HTML 实体是一段以连字号(&)开头、以分号(;)结尾的文本(字符串)

    1. 实体常常用于显示保留字符(这些字符会被解析为 HTML 代码)和不可见的字符(如“不换行空格”);
    2. 你也可以用实体来代替其他难以用标准键盘键入的字符

在这里插入图片描述

1.2 常见的字符实体⭐

&后多按了空格,因为markdown语法显示问题

描述实体名称实体编号
空格& nbsp;& #160;
<小于号& lt;& #60;
>大于号& gt;& #62;
&和号& amp;& #38;
"双引号& quot;& #34;
单引号& apos;& #39;
分(cent)& cent;& #162;
£镑(pound)& pound;& #163;
¥元(yen)& yen;& #165;
欧元(euro)& euro;& #8364;
§小节& sect;& #167;
©版权(copyright)& copy;& #169;
®注册商标&r eg;& #174;
商标& trade;& #8482;
×乘号& times;& #215;
÷除号& divide;& #247;

2. URL地址✨

  • 认识URL:URL代表着是统一资源定位符(Uniform Resource Locator)
  1. 通俗地说,URL 无非就是一个给定的独特资源在 Web 上的地址。
  2. 理论上说,每个有效的 URL 都指向一个唯一的资源。这个资源可以各种各样的形式,比如是一个 HTML 页面,一个 CSS 文档,一幅图像,等等;
    在这里插入图片描述
  • URL的标准格式如下:[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]
    在这里插入图片描述

URL和URI的区别:

  • URI = Uniform Resource Identifier 统一资源标志符,用于标识 Web 技术使用的逻辑或物理资源
    • 更加强调的是标识,比如一个服务器机房有很多主机,可以用URI来表示物理主机
    • URI在某一个规则下能把一个资源独一无二的识别出来。
  • URL = Uniform Resource Locator 统一资源定位符,俗称网络地址,相当于网络中的门牌号
    • 更强调的是定位到资源后返回需要使用对应的资源
    • URL作为一个网络Web资源的地址,可以唯一将一个资源识别出来,所以URL是一个URI,URL是URI的一个子集, URI并不一定是URL

换句话说:

  • 浏览器发送请求给服务器,服务器程序提供对应接口,就可以生成一个URL地址,而这个地址就可以定位到资源,这样的URL由于也能定位到唯一资源,符合URI定义标准,即URL是URI。
  • 而在服务器中,如果通过某些加密算法,形成一个id可以直接找到资源,那么这个id就是一个URI,但它不符合URL的定义标准。
    在这里插入图片描述

3. 元素语义化✨

在上篇笔记div和span的部分也有讲到了元素语义化,这里再总结一下

3.1 理解元素语义化

理论上来说,所有的HTML元素,我们都能实现相同的效果,对于浏览器来说没有太大的区别,但不意味着我们在开发的时候全部使用div,因此我们需要符合元素语义化,用正确的元素做正确的事情。
在这里插入图片描述

如果以下几个标签中,我们更推荐使用符合元素语义化的标签:
在这里插入图片描述

3.2 元素语义化的好处

  • 方便代码维护,减少让开发者之间的沟通成本;
  • 能让语音合成工具正确识别网页元素的用途,以便作出正确的反应;
  • 有利于SEO

4. SEO优化✨

SEO(search engine optimization) 搜索引擎优化: 通过了解搜索引擎的运作规则来调整网站,以及提高网站在有关搜索引擎内排名的方式。

搜索引擎会有对应的算法对网站进行排序并且算法是不公开的,那么如何排在前面呢?

  • 如今总结出来,就是利用好元素的语义化,比如h1就表示是需要强调的内容,当搜索引擎检索的词跟网页更加匹配,就让网站会排在更前面。但我们不能滥用元素语义化,不然可能被收录为一种违规的网站

搜索引擎爬虫的原理:
一般来说:
在这里插入图片描述
更详细的步骤:
在这里插入图片描述

在后续会学习SPA以及SSR的概念,它们也有SEO、首屏渲染速度有关,关注后续笔记。

5. 字符编码✨

计算机是干什么的?

  1. 计算机一开始发明出来用来解决数字计算问题的,之后发现计算机还可以做更多事情,例如文本处理。
  2. 计算机在底层硬件的实现就是用电路的开和闭两种状态来表示0和1两个数字的。
  3. 因此,计算机其实只认识010110111000…这样由0和1两个数字组成的二进制数字

计算机如何操作各种数据

  • 为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符,就必须将这些字符转换成二进制数字
  • 当然,必须是一个统一的、标准的转换规则,否则就会造成同一段二进制数字在不同计算机上显示出来的字符不一样的情况,

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值