zoukankan      html  css  js  c++  java
  • 页面的编写(二)

    标准流跟浮动

    像div,p标签这样的块级元素独占一行,而像span,a这样的行内元素或是input,button,img这样的行内块元素,可以一行显示多个,我们可以把这样的显示方式叫做标准流。

    在标准流中,块级元素自己独占一行,可以设置宽高,也可以设置margin,padding,或者说设置的margin和padding的上右下左都起作用。行内元素一行可以显示多个,设置了宽高后,不起作用,可以设置margin和padding,但是行内元素的上下不起作用,左右才起作用。行内块元素可以一行显示多个,而且还可以设置宽高,margin和padding的上右下左都起作用。

    关于浮动:

    1.浮动的元素不占据原来在标准流中的位置  --   (脱离标准流)

    2.浮动可以让块级元素在一行上显示,让行内元素可以设置宽高

    --  本质上是实现了模式的转换

    3.浮动的元素顶端对齐

    清除因为浮动带来的影响:

    因为盒子浮动了浮动之后,导致父盒子的高度为零,父盒子后面的盒子占据了符合自原来的位置,子盒子漂浮到了父盒子后面的盒子上了,这时候就需要清除浮动带来的影响。

    1.直接给父盒子设置高度:直接把陷的高度补充回来

    2.给父盒子设置overflow:hidden;触发css里的bfc原理。(面的子元素就自成一个体系,不会受到外部的影响)。

    3.在父盒子最后插一个子盒子,给子盒子设置属性clear:both;

    4.伪元素方法。给父盒子一个类clearfix。之后设置一下属性

     

    5.不过现在很多网站也会使用双伪元素清除浮动。

    关于定位

    关于定位有四种属性:

    position :static(静态定位)静态定位实际上就是标准流

    特点:

    1 占据原来的位置

    2 不能实现模式转换

    3 定位无论怎么设置,都没有效果

    position :relative(相对定位)

    特点:

    1 占据原来在标准流里的位置

    2 不能实现模式转换

    3 定位是相对于原来在标准流里的位置而言的

    position :absolute(绝对定位)

    特点:

    1 不占据原来在标准流中的位置

    2 可是实现模式的转换

    3 如果父元素设置了定位(除了static的任何一个属性的定位),绝对定位是相对于父元素而言的,否则就是相对于浏览器而言。

    position :fixed(固定定位)

    特点:

    1 不占据原来在标准流里的位置

    2 模式转换

    3 定位的基准是以浏览器为基准的

    提到定位的时候,不得不提一下层级,

    层级:

    z-index:number。(number是一个不带单位的整数)控制的是定位里层级,定位的元素都有一个层级的概念,默认的同样的定位的元素,层级都是0,相邻的定位的元素在同一位置显示的话,后面的元素会压住前面的元素。如果想让当前的元素显示在后面元素之上的话,需要设置z-index.static定位是无法使用z-index的。(同样的浮动的元素也是没有层级的)。

    让块级盒子居中

    基本上做过页面的人都会的小技巧,让设置了宽度的块级元素相对于父元素水平居中。让盒子的上下外边距为0,左右外边距为auto,就可以实现盒子的居中。

    margin0  auto

    除了这个方法之外,还有一种利用定位的方式让盒子居中。给父盒子设置定位,让子盒子相对于父盒子的left值为50%,然后在使用margin-left使子盒子向左移动他一半宽度的距离。

    SEO与标签权重(以下为摘录部分)

    strong标签是权重标签中的代表,在搜索引擎中能够得到的高度重视,主要针对锚文本连接的关键词加粗,针对体现核心意思的语句加错,一般不超过五个。通过<strong>应用到你想强调的文本或者关键词中,这部分内容将会得到读者和搜索引擎的重视。 

    h1标签的作用仅次于网站标题title,当搜索引擎来爬行我们的站点时,首先,搜索引擎是先找到h1标签,然后先对h1标签里面的文字进行抓取索引,之后再抓取站点的其它内容。这个时候,如果你的站点里面有运用h1标签来优化推广关键词的话,包含在h1标签里面的关键词可以被搜索引擎分配到很大的权重,这对提高站点关键词排名效果带来很大的作用。一个页面只能出现一次h1标签,与a标签搭配使用效果更好。  

    p标签表示定义一个段落,当搜索引擎读取到网页内容遇到P标签时候,立即就知道这是一个段落,而如果使用div或者br的话,就无法体现html语义化的优势了,搜索引擎就会认为整个是一段话。而且段落首句在seo中也占一部分权重。  

    ul、ol标签是列表标签,一般网页中的导航,面包屑等都是相同的,如果使用ul、ol来定义的话就可以让搜索引擎知道其意义,不会造成大量重复内容。  

    base标签是为当前页面上的所有链接规定默认路径或默认地址或者默认目标,可以减少网页代码,达到优化权重,还可以使得域名统一化,集中权重。 

    title标签表示一个网页的名称或一个视频的名称,或者一个连接意思的表达内容。标题中一定要出现一些关键词,但是不要大量的堆积,太多太长了反而可能会丢失关键词的权重。  

    meta标签是用来描述网页属性的语言,好的meta标签更有利于搜索引擎的收录排名,提高权重。其中最重要的有keywords和description,<meta name="keywords" content="关键词">,关键词不要写太多,每个页面要写不同的关键词,避免被认为是重复页面。<meta name="description" content="由关键词组成的短语">描述中最好刻意带入keywords中的相关关键词。  

    a标签是搜索引擎最敏感的标签之一,a标签是做外链内链锚文本的基础,a标签里面写上rel="nofollow"则标签禁止权重传递。 

    HTML标签权重分值排列

      内部链接文字:10分 

      标题title:10分

      域名:7分

      H1,H2字号标题:5分

      每段首句:5分

      路径或文件名:4分

      相似度(关键词堆积):4分

      每句开头:1.5分

      加粗或斜体:1分

      文本用法(内容):1分

      title属性:1分 (注意不是标题, 是title属性, 比如a href="" title="")

      alt标记:0.5分

      Meta描述(Description属性):0.5分

      Meta关键词(Keywords属性):0.05分

    面包屑:

      

    锚文本:

     

  • 相关阅读:
    今年暑假不AC
    亲和数
    改革春风吹满地
    hdu人见人爱A^B
    男人必看的10部电影
    富人和穷人之间的经典差异
    今日十句英文
    看透一个人起码要看的。
    人生经典20句
    解决ubuntu中mysql中文乱码问题
  • 原文地址:https://www.cnblogs.com/wqc5730/p/5705682.html
Copyright © 2011-2022 走看看