html栗子1

最新推荐文章于 2022-12-06 12:00:09 发布

qq_41672590

最新推荐文章于 2022-12-06 12:00:09 发布

阅读量314

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_41672590/article/details/80886412

版权

学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML基本文档格式—<head> 标记

图片素材：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码实例</title>
</head>
<body>

<a href="https://i-blog.csdnimg.cn/blog_migrate/9558a325c20e7adeb49768da009aca09.gif" 
   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://i-blog.csdnimg.cn/blog_migrate/9558a325c20e7adeb49768da009aca09.gif" 
		 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使用场景

盒子模型是css中一个重要的概念，其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来理解下两种不同的盒子：

从上图可以看到标准 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>

语法：

默认值：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 属性的值。

语法：

默认值：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相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

qq_41672590

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html栗子1

HTML基本文档格式—&lt;head&gt; 标记图片素材：代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;代码实例&lt;/title&gt;&lt;/head&gt;&lt;body&gt;
复制链接

扫一扫