Skip to content

语义化元素seo及渲染过程

1.1. 元素语义化

概述

一种赋予页面内容意义和结构的做法,语义化扮演了页面内容的价值，语义化不仅仅只是为了样式的考虑。使用语义化的代码有很多的好处，包括能够让电脑、屏幕阅读器、搜索引擎、以及其他的设备更加充分的阅读和理解网页。而且。语义化的代码更加容易管理和使用

用正确的元素去做正确的事情
标签语义化的好处
方便代码维护；
减少让开发者之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
有利于SEO search engine optimization(优化)；

1.2. SEO优化

概述

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

SEO原理
过程/流程

Google 搜索引擎的工作流程主要分为三个阶段：

抓取：Google 会使用名为“抓取工具”的自动程序搜索网络，以查找新网页或更新后的网页。Google 会将这些网页的地址（即网址）存储在一个大型列表中，以便日后查看。我们会通过许多不同的方法查找网页，但主要方法是跟踪我们已知的网页中的链接。

编入索引：Google 会访问它通过抓取得知的网页，并会尝试分析每个网页的主题。Google 会分析网页中的内容、图片和视频文件，尝试了解网页的主题。这些信息存储在 Google 索引中，而 Google 索引是一个存储在海量计算机中的巨大数据库。

呈现搜索结果：当用户在 Google 上进行搜索时，Google 会尝试确定最优质的搜索结果。“最佳”结果取决于许多因素，包括用户的位置、语言、设备（桌面设备或手机）以及先前用过的搜索查询。例如，在用户搜索“自行车维修店”后，Google 向巴黎用户显示的答案与向香港用户显示的答案有所不同。支付费用不能提高网页在 Google 搜索结果中的排名，网页排名是完全依靠算法完成的。

1.3. 字符串编码

计算机的本质010101
编码/解码
历史: 文章链接(了解)

因为计算机只能直接储存处理2进制的数字,所以为了在计算机上也能显示,储存和处理像文字,符号等等之类的字符,就需要转换成计算机能识别的2进制数字,而字符编码就是统一标准转换规则

二. 邂逅CSS

2.1. 认识CSS

CSS的概念
作用: 美化网页，对页面进行布局
- 方式一: 添加各种样式;
- 方式二: 布局;
历史:
- CSS3 -> Modules

2.2. 三种编写规则

内联样式: 适用于简单样式在标签元素内编辑
内部样式: 放在head里,适用于当前页面样式
外部样式: 复用性较强的样式表
- link :外部资源链接元素
- @import 导入css样式

link和@import的区别

link 属于 html 标签。@import 在 css中使用表示导入外部样式表，只能在 css 文件中使用
页面被加载的时，link 会同时被加载，而@import引用的CSS会等到页面被加载完再加载，因此 link 方式的样式的权重高于@import的权重。
link 支持使用javascript改变样式（document.styleSheets），后者不可
@import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
@import 规则允许您将样式表导入另一张样式表中。

@import 规则必须位于文档顶部（但是在任何 @charset 声明之后）。

@import 规则还支持媒体查询，因此可以允许依赖媒体的导入。

2.3. 常见的CSS

div 和 div 元素之间换行会有留有空白

最常见的CSS
- font-size
  - 浏览器字体默认大小16px,最小12px
- color
- background-color
- width
  - 宽度对行内元素无效
- height
  - div默认高度是内容的高度撑起来的
- vertical-align
  - 用于指定行内元素,图片文字或表格单元格（table-cell）元素的垂直对齐方式。

三. 知识点补充

3.1. link元素外部链接资源元素

link链接站点图标
dns-prefetch(了解):dns-prefetch 提示浏览器该资源需要在一用户点击链接之前进行dns(dns域名解析服务器)查询和协议握手

3.2. 进制

人类十进制
计算机: 二进制/八进制/十六进制

3.3. 颜色表示方法*

color keywords(颜色关键字)
rgb(100%,100%,100%)
rgb(0~255, 0~255, 0~255)
十六进制: #aabbcc;
- 缩写: #abc

注意：透明度建议还是用rgba函数写，因为16进制的写法有些浏览器不适配是比较新的一种写法

3.4. Chrome调试工具

结束语:常识就是人类到18岁所积攒的所有偏见