3.标签&选择符&超链接&SEO(SEM)

2018-02-03 10:27:14来源:网络收集作者:咖啡不加糖人点击

分享
常见标签
div

1. 表示“块”。


2. 例:“块”。


3. 常用做网页布局。


img [单标签]

1. 图片标签 。


2. 例:“图片名字” 。


a) src属性是图片的路径(相对/绝对)


b) alt属性的属性值是图片的名字,正常情况下不显示,当图片src定位不到资源时,才显示alt属性值。


i. 利于SEO 。 alt属性虽然正常情况下不显示,但对于搜索引擎却是很友好的,索搜引擎会抓取alt属性值。


a

1. 链接/锚点/下载


2. 例:


a) 超链接: “target="_blank">超链接” 。


i. target属性可以指定打开方式,默认覆盖当前页。


1. “target="_blank"”表示打开一个新的页面显示。


2. “target="_self"”表示覆盖当前页,这也是默认值。


3. target属性的其他值不常用,因为跟html框架有关,而现在html框架几乎废弃了。


ii. 使用技巧 (推荐)


1. 页面中有很多链接,如果每一个链接都添加“target="_blank"”属性会很麻烦且代码累赘,那么我们就可以在头元素中添加下面一句代码,就可以达到为页面中所有链接指定“_blank”打开方式(简化代码):


a) 


2. 另外,当我们在head元素中添加了此标签后,可能页面中有个别链接的打开方式不希望这样,那么你也不用担心,你只需要在这些个别的链接中再添加target属性和属性值即可,因为它的优先级大于base


b) 锚点 :“a锚点  id=”did”>” 。


i. 锚点与超链接区别就在于href属性的属性值是资源定位的路径,还是以“#”号开头的元素id


c) 下载 :“下载”


i. 当超链接定位的资源浏览器不认识时,浏览器就会显示下载


1. 利用这一特性可以实现下载功能,比如定位一个文件或压缩包等。


hn

1. 标题标签


2. 显示效果为加粗放大


3. 例:“标题1” 、
标题6


4. hn中n的取值范围为1到6


a) h1是最大的标题标签,h2其次以此类推往下递减,h6为最小标题标签。


b) h1标题标签相对特殊,一般一个页面最多只用一个。


i. h1用的太多,搜索引擎会认为你作弊,从而将页面拉入黑名单。


5. 利于SEO 。搜索引擎对页面中的标题标签会“另眼相看”,“另眼相看”的程度随着hn中的n数值递增而减小。


p

1. 段落标签


2. 显示效果为换行


3. 例:

段落


strong

1. 强调语气强烈,好比很重要的意思。


2. 显示效果为加粗


3. 例:“强调”


4. 利于SEO


a) 虽然利于SEO,但一个页面不要刻意用太多,按照正常的需求使用即可,一般占整个页面内容6%—8%为宜(不要让搜索引擎认为你作弊)。


em

1. 强调语气不强烈。


a) 与strong相同,都是强调语气,但没有strong那么强烈。


2. 显示效果为斜体。


3. 例:“强调” 。


4. 利于SEO


a) 虽然利于SEO,但一个页面不要刻意用太多,按照正常的需求使用即可,并且“em”标签自带斜体样式,实在不利于用户体验,在使用时也可以将样式清空。


span

1. 区分样式


2. span标签本身没有带样式


a) 我们经常用它来为一段文本中部分文本添加样式,如下:


i. “给我一个特殊对待”


1. 浏览器显示效果为: “给我一个特殊对待” 。


3. 应用场景


a) 当一段文字中其中一部分样式与其他不一样,这时就可以使用span标签来区分。


ol

1. 有序列表


2. 例:


a) 代码



     列表1


        列表2


        列表3



b) 效果


 


ul

1. 无序列表


2. 例:


a) 代码


    


     列表1


        列表2


        列表3


    


 


b) 效果


 


 


dl

1. 定义列表


2. 例:


a) 代码


    


     定义列表标题


        定义列表项


        定义列表项


        定义列表项


    


 


b) 效果


 


SEO

1. SEO(Search Engine Optimization),中文是“搜索引擎优化”的意思,是隶属于SEM(搜索引擎营销,英文:Search
Engine Marketing)之下。


2. 部分方法


a) 页面标签语义化


i. 如:该是段落就用段落标签“p”,该是标题就用标题标签“hn”,不要什么都用“div”标签来模仿。


ii. 例如:一个标题“我爱中国”,你用“div”标签配合样式虽然可以模拟出标题来,但搜索引擎也只会将你模拟出来的标题当作“块”,而不会当作标题,但你用“h”标签就不一样了,搜索引擎会将其作为标题处理。


b) 使用对SEO有利的标签


i. 如:h1/h2/h3/strong/em......


ii. 合理优化,不要刻意过分优化,免得被搜索引擎拉入黑名单。


c) 提高页面关键字密度


d) ......等等 。


选择符/选择器
原则:使用选择符要准确选择目标又不影响其他
选择符详解
Id选择符

1. 用“#”开头跟着页面中某个元素的id属性值


2. 特点:一个页面中元素id值不能重复,必须唯一。


3. 例:


a) 代码






选择符


    




box1


    box2




群组选择

1. 群组选择符是由多个选择符对象(如:”#id”或”.clazz”等)和逗号组成的。


a) 多个选择对象用逗号(“,”)隔开。


2. 产生原因:一群元素需要共用一组样式。


3. 例:


a) 代码






选择符


    




box1


    box2




类选择符
(class)[最常用]

1. 实际工作中相对于id选择符用的较多。


a) Id也用,但比类选择符少了很多。


2. 可以理解为可以重复使用的id


3. 产生原因:一大群元素需要共用同一组样式。


a) 这时再使用群组选择符就不方便了,代码会非常累赘


4. 特点:


a) 可重复使用,使用上非常灵活。


b) 一个元素可同时使用多个,只需要在多个类之间用空格隔开即可


i. 如 : “box2” 。


ii. 理论上可以同时指定无数个


5. 例:


a) 代码





 


选择符


    




box1


    box2 




类型选择符/元素选择符

1. 使用元素的类型来做选择符,举例如下:


a) “div{…样式…}” 。


2. 例:


a) 代码






选择符


    




 


        box1


        box2


        box3


        


        

p1


        

p2


        

p3


    




包含选择符/后代选择符

1. 格式:“
E  F {…样式…} ”


a) E和F都表示元素(不一定是元素,其实还可以是其它的选择符,如 “p
.clazz #myId {...}”),并且两元素之间使用空格隔开


b) 包含选择符,该选择器定位元素E的后代中所有元素F  。


2. 嵌套


a) 包含选择符可以包含多层,如:“E F G H…{…样式…}” 。


b) 一般开发中不会包含太多层,差不多3层已经算长的了。


3. 例:


a) 代码






选择符


    




 


        


        

p1


        


        


        


        


            

p2


            


        


        


        

p3


    




通配符

1. 格式:*{…样式..}


a) 直接用“*”跟样式。


2. 使用通配符会选中页面中所有的元素,所以通配符的性能自然就不高了,所以不推荐使用


3. 可以说是一个没用的选择符,一般不用


优先级
元素选择符
(“1”)

1. 可以将元素选择符的优先级看成1


2. 同级覆盖


a) 例:


i. 代码






优先级


    





        


            


            


        




ii. 效果


 


 


3. 结合包含选择符使用(不同级)


a) 同级样式默认后者覆盖前者


b) 将一个元素选择符看做1
,那么当元素结合后代一起使用时,就看谁嵌套的多了,每多嵌套一个元素就加1,最后数值累加最大的优先级最高。


c) 例:


i. 代码






优先级


    





        


            


            


        




ii. 效果


 


类选择符 (“10”)

1. 可以将类选择符的优先级看成10


a) 优先级:元素选择符(1)
< 类选择符(10)


b) 注意:虽然上面我们说元素选择符优先级可以看成1,但这并不代表10个元素选择符包含就等于一个类选择符,这是不可能的,它们是两个层面上的,无论元素选择符包含多少级都小于类选择符。


2. 例:


a) 代码






优先级


    





        


            


            


            


            


            


        




b) 效果


 


3. 同级覆盖


a) 注意:同级样式前者会覆盖后者,这里的前后顺序指的是样式的书写顺序,跟class属性值的顺序无关(容易弄错)。


b) 例:


i. 代码






优先级


    





              


            


        




ii. 效果


 


id 选择符

1. Id选择符优先级可以看成数值100


a) 元素选择符(1)<
类选择符(10)< id选择符(100)


b) 同样不是10个类选择符就能抵得上一个id选择符的,它们根本就不是一个层面上的。


2. 例:


a) 代码






优先级


    





            


            


        




b) 效果


 


行间样式

1. 行间样式的优先级可以看成数值1000


a) 元素选择符(1)<
类选择符(10)< id选择符(100)<
行间样式(1000)


2. 行间样式实际开发中基本上不用。


3. 例:


a) 代码






优先级


    





             


            


        




 


b) 效果


 


js动态样式

1. Js可以动态的修改样式,我们可以将它优先级看成数值10000


a) 元素选择符(1) <
类选择符(10) < id选择符(100) <
行间样式(1000) < js(10000)


b) css本身选择符的优先级到行间样式就到顶了,但如果硬要说有比行间样式优先级更高的话,那也就是js动态修改样式了。


2. 例 :


a) 代码






优先级


    





            


            


        


        




b) 效果


 


小测试

1. 问:下面两条样式,哪一条优先级高


a) A.  #header #div1 .box1 div .section p .link{…………}


b) B .  #some .base
#font #call a{…………}


2. 答:B


a) 不要认为长的优先级就高,需要看选择符的优先级。


i. 像上面问题中的样式,一般开发中不会这么写的,实际开发中包含两三层就差不多了。


伪类
什么是伪类

1. 元素后跟随一个冒号,如:“a:link{……}” 。


2. 伪类用于向被选中元素添加特定的样式,伪类是元素在特定情况下才具备的。


伪类的一些问题

1. IE6不支持a标签以外其他任何标签的伪类 。


2. IE6以上的浏览器支持所有标签的hover伪类 。


a) 这里“所有”指的是鼠标能放上去的标签,像“
”就除外。


a标签

1. a标签有四个状态,这四个状态就叫做a标签的四个伪类,四个分别如下:


a) link (未访问)[默认]


b) hover (鼠标悬停/鼠标划过)


c) active (链接激活/鼠标按下)


d) visited (访问过后/点击过后)


2. 四个伪类书写是有顺序的,如下:


a) 依次按照link、visited、hover、active的顺序来写


i. 如果将visited写在最后面,那么hover和active就始终会被visited伪类样式覆盖从而失效,visited是一个持久状态


3. 一般网站中很少四个伪类全用,而只用hover一个。


工作中首先会给a标签加一个样式去控制它所有状态,再给它加一个hover伪类。


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台