一之濑双叶的博客

前端任务

2018/01/22

元月一号至元月三十一号

==1==.块级元素的特点:

  • 独占一行
  • 支持所有样式
  • 不设置宽度时宽度为父元素宽度
  • 换行符不解析
  • 可以容纳内联元素和其他块元素

内联元素的特点:

  • 可以在一行显示
  • 不支持宽高,上下margin和padding等样式会有问题
  • 宽度由内容撑开
  • 换行符会被解析成空格

内联块元素的特点:

  • 内联块元素同时具备块级元素和内联元素的特点

常见的元素的特点属性:

href:用于a标签里的链接方式或链接css文件

src:用于链接js文件或图片

alt:用来指定替换文字,只能用在img、area和input元素中,用于网页中图片无法正常显示时给用户提供文字说明使其了解 图像信息 alt是替代图像作用而不是提供额外说明文字

title:作为属性时用来为元素提供额外的说明信息;作为标签时里面写入网页标题

==2==.html语义化:

what:根据内容的结构化,选择合适的语义化标签,便于开发者阅读和代码美观

why:

  • 为了在没有css的情况下,页面也可以很好的体现内容结构代码结构
  • 有利于用户体验
  • 有利于SEO
  • 便于团队开发和维护,语义化更具有可读性

SEO的原理:

SEO一共包括三个过程:网页搜索、预处理信息、建立索引。
细化分为:爬行—抓取—处理抓取信息—建立索引—呈现排名

一、爬行

爬行的目的:建立待抓取列表

爬虫:谷歌爬虫(ddos)百度爬虫(spider)

1.发现:

对于一个网站来说,分为被动等待和主动引爬虫

被动等待:设置好Robots.txt文件,放在服务器等待爬虫自己过来爬取

主动引爬虫:写带有链接的软文花钱放在高质量高权重的网站中、利用权重高的博客、在质量高的论坛里发外链

2.内容:

争取权重高的位置放

Banner不如幻灯片,幻灯片不如文字,文字优先,图片写alt属性

二、抓取

网页本身需要符合W3C标准,编码建议使用“utf-8”,“title”尽量靠前,我们想让爬虫进入到某个页面就看到我们的主旨内容,内容尽量原创

正文:关键词出现的次数要合适,位置要靠前

“h1标签”:唯一性,整个页面最重要,含关键字,尽量靠前

“h2标签”:可以添加其他属性

“alt属性”:只能用于“img”,意在告诉蜘蛛图片的解释

“title属性”:为链接添加描述性文字,可为用户提供更清楚表达的意思

“锚文本”:锚文本得有相关的关键词,且面面相关

三、处理抓取结果

爬虫抓取后压缩成数据包返回数据库

相关性:因为百度算法语境分析+语义分析的原因,所以网站不要出现不相关的内容出现,否则搜索引擎也会撇掉你的网站权威性(网络拼比,信任度等)

注:不权威造成的影响:同一篇文章,由于信任度高低,有可能自己被转载发布的文章自己的反倒在别人网站后面

去重:一个链接不能有多个页面、同一个关键词不能指向不同链接、同一页面下不要出现不同链接相同的关键词

四、建立索引

搜索引擎的索引是反向建立的
(一个关键词对应许多文件[网站/网页])

什么是爬虫?

爬虫一般指网络爬虫,是一种按照一定的规则,自动的抓取万维网信息的程序或脚本

如何去写一个爬虫?

==3==!Doctype的作用:

Doctype是document type的简写,声明叫做文件类型定义(DTD),声明的作用是为了告诉浏览器该文件的类型,让浏览器解析器知道用哪个规范来解析文档,!Doctype必须放在HTML文档的第一行,它不是一个HTML标签

严格模式和混杂模式的区别以及如何触发两种模式

严格模式:又称为标准模式,是指浏览器按照W3C标准解析代码

混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码

区别:浏览器解析时到底使用严格模式还是混杂模式,与网页中的DTD相关

1.如果文档包含严格的DOCTYPE,那么它一般以严格模式呈现。(严格DTD——严格模式

2.包含过渡DTD和URL的DOCTYPE,也以严格模式呈现,但有过渡DTD而没有URL(统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。(有URL的过渡DTD——严格模式;没有URL的过渡DTD——混杂模式

3.DOCTYPE不存在或形式不正确会导致文档以混杂模式呈现。(DTD不存在或者格式不正确——混杂模式

4.HTML5没有DTD,因此也就没有严格模式与混杂模式的区别,HTML5有相对宽松得语法,实现时,已经尽可能大的实现了向后兼容。(HTML没有严格与混杂之分

==4:==.DOM树

什么是DOM?

DOM是Document Object Model(文档对象模型)的缩写,是W3C的标准,它定义了访问HTML和XML文档的标准:“W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM标准被分为3个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对XML文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

什么是HTML DOM?

HTML DOM 是:

  • HTML 的标准对象模型
  • HTML 的标准编程接口
  • W3C 标准

HTML DOM定义了所有HTML元素的对象和属性,以及访问它们的方法。

换言之,HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准

如何去优化DOM结构?

1
把DOM和Javascript各自想象成一个岛屿,它们之间用收费桥梁连接

因此要避免去操作DOM,还要减少去访问DOM的次数。

==5==.标签嵌套规则及HTML转义

1.块级元素

div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、nooframes、noscript、ol、p、pre、table、ul...

特点:总是在新行上开始,高度、行高以及顶和底边距都可控制,宽度缺省是它的容器的100%,除非设定一个宽度

功能:主要用来搭建网站架构、页面布局、承载内容

2.行内元素

span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var ...

特点:和其他元素都在一行上,高、行高及顶和底边距不可改变,宽度就是它的文字或图片的宽度,不可改变

功能:用于加强内容显示,控制细节,例如:加粗、斜体等等

HTML转义

CATALOG