图片素材:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码实例</title>
</head>
<body>
<a href="https://img-blog.csdn.net/20180702164050516?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjcyNTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"
rel="nofollow"
style="box-sizing:border-box;
outline:0px;
color:rgb(0, 136, 204);
text-decoration:none;
cursor:pointer;
word-break:break-all;
font-family:微软雅黑, Verdana, Geneva, sans-serif;text-align:justify"
target="_blank">
<img alt="符号"
src="https://img-blog.csdn.net/20180702164050516?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjcyNTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"
style="box-sizing:border-box;
outline:rgb(7, 130, 193) solid 1px;
max-width:100%;
padding:1px;
margin:0px;
word-break:break-all;
cursor:zoom-in;
vertical-align:middle"
title="图片名--00 方块"></a>
<span style="box-sizing:border-box;
outline:0px;
font-weight:700;
word-break:break-all;
color:rgb(51, 51, 51);
font-family:微软雅黑, Verdana, Geneva, sans-serif;text-align:justify">
HTML基本文档格式—<head> 标记
</span>
</body>
</html>
"rel=nofollow"
"rel=nofollow"属性简介
nofollow是HTML元标签(meta)的content属性和链接标签(a)的rel属性的一个值,告诉机器(爬虫)无需追踪目标页,为了对抗blogspam(博客垃圾留言信息),Google推荐使用nofollow,告诉搜索引擎爬虫无需抓取目标页,同时告诉搜索引擎无需将的当前页的Pagerank传递到目标页。但是如果你是通过sitemap直接提交该页面,爬虫还是会爬取,这里的nofollow只是当前页对目标页的一种态度,并不代表其他页对目标页的态度。
nofollow的使用
nofollow有两种用法:
1.用于meta元标签:<meta name="robots" content="nofollow" />,告诉爬虫该页面上所有链接都无需追踪。
2.用于a标签:<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。
nofollow的作用
nofollow主要有三个作用:
1.防止不可信的内容,最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接,为了防止页面指向一些拉圾页面和站点。
2.付费链接:为了防止付费链接影响Google的搜索结果排名,Google建议使用nofollow属性。
3.引导爬虫抓取有效的页面:避免爬虫抓取一些无意义的页面,影响爬虫抓取的效率。
PR修剪(Pagerank Sculpting)
nofollow的滥用,一些SEO为了做到搜索引擎的最大优化,通过nofollow来控制PR的流动,可以很好的优化一些特定页面。当然这种优化比较适合一些已经积淀了相当数量PR的老站点。为了防止PR修剪和nofollow的滥用,Google已经减弱了nofollow的作用,以前的nofollow不仅仅不会造成PR流动,同时不会造成PR损失,现在的nofollow规定虽然也不会造成PR流向目标页,但是原本流向的目标页的将会损失掉。比方当前页PR为1,而且页面上有10个链接,其中一个是nofollow的链接,根据先前的nofollow的规定,每个非nofollow链接指向的目标页将获得1/9的PR,含nofollow的链接不能获得PR,而根据现在Google对nofollow的新规定,非nofollow链接指向的目标页只能获得1/10,nofollow链接同样不能获得PR,也就是损失了1/10的PR。
SEO建议
nofollow在Google的作用已经很弱,所以SEO要控制站点的PR的流动,避免链接指向垃圾页面,只能靠人工审核的方法。
box-sizing使用场景
从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
ie 盒子模型
从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。
例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px,盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;假如用ie 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。
1、考虑到盒子的大小设置会比较麻烦,有时设置的width,结果最后大小不是之前设置的大小,所以这时就要box-sizing登场了,当我们设置box-sizing:border-box以后,如果我们想要一个宽度100的盒子,直接设置width为100,就不用考虑该盒子是否为标准盒子了。这是box-sixing最实用的一个属性。等于:siting-width=border+padding+content-width;
2、当box-sizing设置成content-box后,等于标准情况:siting-width=conten-width;
outline
属性定义及使用说明
outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline简写属性在一个声明中设置所有的轮廓属性。
可以设置的属性分别是(按顺序):outline-color, outline-style, outline-width
如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。
text-decoration
属性定义及使用说明
text-decoration 属性规定添加到文本的修饰。
注意: 修饰的颜色由 "color" 属性设置。
默认值: | none |
---|---|
继承: | no |
版本: | CSS1 |
JavaScript 语法: | object.style.textDecoration="overline" |
属性值
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
blink | 定义闪烁的文本。 |
inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
语法:
text-decoration:<' text-decoration-line '> || <' text-decoration-style '> || <' text-decoration-color '>
默认值:看每个独立属性
适用于:所有元素
继承性:无
动画性:看每个独立属性
计算值:看每个独立属性
相关属性:<' text-decoration-skip '> || <' text-underline-position '>
取值:
- <' text-decoration-line '>:
- 指定文本装饰的种类。 相当于CSS2.1的 <' text-decoration '> 属性,可取值:none | underline | overline | line-through | blink
- <' text-decoration-style '>:
- 指定文本装饰的样式。
- <' text-decoration-color '>:
- 指定文本装饰的颜色。
说明:
- 所有浏览器均支持CSS2.1中的 <' text-decoration '> 属性,在CSS3中,该属性定义被移植到其新的分解属性 <' text-decoration-line '> 上;
- 对应的脚本特性为textDecoration。
兼容性:
cursor 光标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>光标(runoob.com)</title>
</head>
<body>
<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:zoom-in">zoom-in</span><br>
</body>
</html>
语法:
cursor:[<url> [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing]
默认值:auto
适用于:所有元素
继承性:有
动画性:否
计算值:指定值
取值:
- <url>:
- 使用绝对或者相对地址引入外部图像作为光标形状
- <url> <x> <y>:
-
- auto: 用户代理基于当前上下文决定光标形状
-
通过<x> <y>两个值指定具体需要显示的图像位置。类似 <'
background-position
'>
- default: 相关平台的默认光标形状,通常为箭头。
-
- none: 没有光标形状
-
其他待完成...
说明:
- 使用自定义图像作为光标类型,IE, Opera只支持*.cur等特定的图片格式;Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.png, *.gif, *.jpg等图片格式。
- cursor的属性值可以是一个序列
示例代码:
:link,:visited{ cursor:url(example.svg#linkcursor), url(hyper.cur), url(hyper.png) 2 3, pointer; }
本例用来给所有的超链接定义光标类型,客户端如果不支持SVG类型的光标,则使用下个"hyper.cur";如果cur类型也不支持,则使用下个"hyper.png";依次类推。
vertical-align
vertical-align属性设置一个元素的垂直对齐。
默认值: | baseline |
---|---|
继承: | no |
版本: | CSS1 |
JavaScript 语法: | object.style.verticalAlign="bottom" |
属性值
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 把元素的底端与行中最低的元素的顶端对齐。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
length | |
% | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
语法:
vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默认值:baseline
适用于:内联及 table-cell 元素
继承性:无
动画性:当值为 <length> 时
计算值:指定值
取值:
- baseline:
- 将支持valign特性的对象的内容与基线对齐
- sub:
- 垂直对齐文本的下标
- super:
- 垂直对齐文本的上标
- top:
- 将支持valign特性的对象的内容与对象顶端对齐
- text-top:
- 将支持valign特性的对象的文本与对象顶端对齐
- middle:
- 将支持valign特性的对象的内容与对象中部对齐
- bottom:
- 将支持valign特性的对象的文本与对象底端对齐
- text-bottom:
- 将支持valign特性的对象的文本与对象顶端对齐
- <percentage>:
- 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
- <length>:
- 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)
-
-
参考:深入理解line-height与vertical-align - 小火柴的蓝色理想 - 博客园
https://www.cnblogs.com/xiaohuochai/p/5271217.html
word-break
语法:
word-break:normal | keep-all | break-all
默认值:normal
适用于:所有元素
继承性:有
动画性:否
计算值:指定值
相关属性:<' word-wrap '>
取值:
- normal:
- 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。
- keep-all:
- 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。
- break-all:
- 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字母间断行。