tite与h1的区别 、b与strong的区别 、i与em的区别

html语义化标签:

1)title与h1的区别

title与H1是不能划等号的

1.H1是大标题的意思。一般出现网页文章页面,作用如同一张报纸的大标题,使用读者在没看内容之前就

大概了解本文的旨意,它是直接给用户看的。而且在SEO中,搜索引擎也非常重视H1,目的是告诉搜索引擎,这

个地方的内容很重要,H1要求贴近文章内容,突出主题,言简意赅。

2.title是用来面对的是搜索引擎和用户,其范围相对于H1来说要广,title中可以包含H1,在搜索引擎中

tiele的权重要高于H1;一般来讲,H1做到突出主题目,title修饰主题关键字。

H1与title之间的联系

A.从网站角度而言,title则重于网站信息标题,突出网站标题或关键字用title,一篇文章,一个页面最好只

用一个H1,H1用得太多,会稀释主题;一个网站可以有多个title,最好一个单页用一个title以便突出网站页面

主题信息。

B.从文章角度而言,H1则概括的是文章主题,突出文章主题,用H1,面对的用户,要突出其视觉效果。

从SEO角度看,title的权重高于H1,其适用性要比H1广。

2)b与strong的区别

b和strong标签,在网页中默认的情况下均是加粗字体的作用;

标签是一个实体标签,它所包含的字符将被设为blod粗体,是html语言中的;—视觉化

标签是一个逻辑标签,作用是为了加强语气而加粗字体,是xhtml中的,其强调作用,可以用css标

签控制strong强调的方式。—-语义化标签

在符合w3c的标准,推荐使用strong标签—语义化

3)i与em的区别

标签告诉浏览器把其中的文本表示为强调的内容。标签可以用来把这些名称和其他斜体字区别

开来。

在文本中加入强调也需要有技巧。如果强调太多,有些重要的短语就会被漏掉;如果强调太少,就无法真

正突出重要的部分。这与调味品一样,最好还是不要滥用强调。

尽管标签修饰的内容都是用斜体字来显示,但这些内容也具有更广泛的含义,将来的某一天,浏览

器也可能会使用其他的特殊效果来显示强调的文本。

如果你只想使用斜体字来显示文本的话,请使用 标签。除此之外,文档中还可以包括用来改变文本显

示的级联样式定义。

除强调之外,当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候,也可以考虑使用

标签。例如,W3School 经常对重要的术语使用标签。标签可以用来把这些名称和其他斜体字

区别开来。

作者:蜻蜓之鱼
链接:https://www.jianshu.com/p/59691c0900d3
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

用css+html制作脑图–美化篇

上一篇介绍了如何用纯样式和html制作出简单版脑图的结构,这一篇就大概讲一讲实际运用中如何将技术落地

先看看用样式画完的脑图结构

简直low爆了,但是大家要透过现象看本质嘛,网上大多数的脑图都是用js来算位置的,这个直接就用html结构就解决了,只需要调整间距之类的就可以了,省心很多

下面呢就要来美化一下这个脑图,美化之后呢大概是这个样子滴

有没有一种野鸡变凤凰的感觉?~·
继续阅读用css+html制作脑图–美化篇

介绍几个开发前端动画不得不学的动画库

1. AniJS.js

基于 CSS3 的动画库

2. Velocity.js

Velocity 是一个简单易用、高性能、功能丰富的轻量级 JS 动画库。它能和 jQuery 完美协作,并和 $.animate() 有相同的 API, 但它不依赖 jQuery,可单独使用

3. vivus.js

继续阅读介绍几个开发前端动画不得不学的动画库

纯css3实现思维导图样式

思维导图又称之为脑图

他大概是这个样子滴:

 

网上大部分实现有用d3.js实现,有手动用svg实现,最近工作需要,本人很懒,在琢磨看看用css3能不能实现呢?

答案是肯定的 下面上代码

html代码


<div class="mainBody" id="node1">
    <h1>node1</h1>
    <div class="oneBody">
        <div class="mainBody">
            <h1>node2</h1>
            <div class="oneBody">
                <div class="mainBody">
                    <h1>node3</h1>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                    </div>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
            </div>
        </div>
        <div class="mainBody"><h1>node2</h1></div>
        <div class="mainBody"><h1>node2</h1></div>
    </div>
</div>

css3代码


.mainBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-start ;
}
.sbody{

}
.oneBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#node1{
    /*height: 200px;*/
    margin-top: 100px;
    margin-left: 100px;
}
h1{
    line-height: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

实际效果如图:

哦有点简陋····不过样式什么的你想怎么搞就怎么搞喽,其中节点的增加,你只需要html中增加相应的节点代码就行,高度位置都是自适应的,感谢css3的 flex,你们活在这个时代是幸福的

Git 原理入门

Git 是最流行的版本管理工具,也是程序员的必备技能之一。

即使天天使用它,很多人也未必了解它的原理。Git 为什么可以管理版本?git addgit commit这些基本命令,到底在做什么,你说得清楚吗?

这篇文章用一个实例,解释 Git 的运行过程,帮助你理解 Git 的原理。
继续阅读Git 原理入门

三角函数在前端动画中的应用

我是个很懒的人,开发过程中经常有意无意地刻意避开数学相关的知识,你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现,timer-function 随意选用,最多也就调一下 cubic-bezier,找到看着舒服的就行。但是怎样让动画更顺滑,写出更贴近自然的动画,说实话以前我没怎么考虑过。

每次当动效设计师提出,能不能这样那样的时候,我会理所当然地予以否决。所以有很长一段时间,我非常羡慕那些能用 canvas 绘制很酷炫的动画的程序员。

sad man in sine

 

先这样吧,又不是不会动。

继续阅读三角函数在前端动画中的应用

Google 的后端工程师都开始写小程序了?反编译 “猜画小歌”看看

 

今天 Google 在微信发布了一款小程序“猜画小歌”,都已经刷爆朋友圈了。没想到谷歌重返中国第一个应用竟然是小程序,而且还是基于 AI 的小程序。还没体验的可以扫码体验一下。

逻辑很简单,每局给你一个新的词,让你画对应的图案,我感觉应该是将你画的图,向提供的关键词去靠拢,很多其实沾一点边的图,都能识别上,产生了很多灵魂画师。我今天体验了一下发现根本停不下来,根本停不下来,忍不住在群里分享一波。

反编译小程序

在知乎上已经有人将“猜画小歌”反编译出来,发现目录结构特别具有 Java 工程师的风格,非官方消息也说到,是一名后端开发工程师自己独立完成的小程序开发任务。

感受一下目录风格:

反编译者还发现很多命名方式都是中英文混编以及命名规范不一致,还专门吐槽了一下。

还发现了例如一些引入第三方库不规范的例子,例如引入了 cryptojs 来作为接口加密,但是其实只用到了 SHA1 加解密。

知乎用户 @Kumakuma 还爆料称,此小程序就是后端工程师写前端,并且是一个人完成的,不过因为时间紧任务重,很多地方都不规范,后期应该会加强代码审核,也就不会出现这样的问题了。

“猜画小歌”隐藏功能

在反编译的文章中,还发现了很有意思的点,其实它还隐藏了很多有意思的功能,光小程序的页面竟然就有 14 个。

能看出来,确实有很多隐藏的页面,从反编译的效果来看,最少会有对战页面、注册码页面、打赏功能等等。

按现在的热度和传播效果来看,这个游戏的方向算是正确的,后续应该还会增加一些多人互动方向的新玩法,很值得期待。

灵魂画师会带坏 AI?

就如前面说的,“猜画小歌”就是一款 AI 小程序,它的匹配规则还是很宽泛的,所以很多灵魂画手就上线了,基本上靠一点边“画作”就可以被识别出来。

但是不必要担心,上线之前 AI 本身就已经提前喂了大量的数据给模型,所以现在这点用户量,并不会对 AI 的模型有任何冲击。

不排除之后用户量暴涨之后,会对模型造成冲击,不过话说回来,如果是中国人自己教的 AI,是不是更适合中国人的画风呢?

我想,自己教的孩子,自己一定喜欢。

“猜画小歌”的意义

本身 Google 志不在游戏,更多的应该是想通过游戏的形式,让大家了解 AI,毕竟 Google I/O 已经是 AI First 了。

我想 AI 发展到最后,基础设施会越来越完善,准入门槛会越来越低,发展到最后肯定就是拼创意、想法和数据。

AI 没有那么神奇,也没有那么智障,更多的是可以做到一些传统代码做不到的事情,可以解放很多工作,非常值得期待。

今日我的博客加入了一个新功能,阅读量统计···pdf电子书-css揭秘-下载

今日我的博客加入了一个新功能,阅读量统计···

感觉瞬间棒棒的

嗯,这个内容有点空洞,放出一个css资源

高清pdf电子书 css揭秘

快去下载

链接: https://pan.baidu.com/s/1q10_ikubVGTDhWNTIDwcjQ 密码: 5rf9

 

好书推荐–Node.js调试指南

购买地址大家自己百度吧!

序言

笔者和同事在过去一年多主要把工作精力放在如何提高Node.js 服务端的性能、稳定性和基础设施搭建上,随着公司业务量的快速增长,我们遇到了各种各样的挑战,也取得了不错的成绩:从起初啥都没有,到后来建立了比较完善的日志、监控和报警系统;从起初遇到问题不知道如何下手,到后来在遇到问题时能及时发现并定位问题。总之,付出得到了回报。
笔者曾将在这一段时间内遇到的调试、调优过程整理并记录成文章,发表在公司的知乎专栏上,本书就是在其基础上修改、补充和润色而成的,算是笔者对这几年在Node.js 开发中进行调试的经验和思路的总结,笔者希望授人以鱼,亦能授人以渔。
本书概要
本书从CPU、内存、代码、工具、APM、日志、监控、应用这8 个方面讲解如何调试Node.js,大部分小节都会以一段经典的问题代码为例进行分析并给出解决方案。
第1 章讲解CPU 相关的知识,涉及各种 CPU 性能分析工具及火焰图的使用。
第2 章讲解内存相关的知识,例如Core Dump 及如何分析 heapsnapshot 文件。
第3 章讲解代码相关的知识,例如如何避免在代码层面写出难以调试的代码,并涉及部分性能调优知识。
第4 章讲解工具相关的知识,涉及常用的Node.js 调试工具和模块。
第5 章讲解APM(Application Performance Management)相关的知识,例如两个不同的应用程序性能管理工具的使用。
第6 章讲解日志相关的知识,例如如何使用Node.js 的async_hooks 模块实现自动日志打点,并结合各种工具进行使用。
第7 章讲解监控相关的知识,例如如何使用 Telegraf + InfluxDB + Grafana 搭建一个完整的Node.js 监控系统。
第8 章讲解应用相关的知识,给出了两个完整的Node.js 应用程序的性能解决方案。
本书定位
本书并不适合Node.js 初学者,适合有一定Node.js 开发经验的人阅读。笔者倾向于将本书定位成参考书,每一小节基本独立,如果遇到相关问题,则可以随时翻到相应的章节进行阅读。
开发环境
MacOS 或 Linux(Ubuntu@16.04 64 位),Windows 用户请在使用虚拟机安装Ubuntu 后进行操作。
Node.js@8.9.4。
继续阅读好书推荐–Node.js调试指南