- img标签和a标签
1. img标签 (单标签)
<img src="xx.jpg" alt=xxx> 单标签 alt后是名字,被搜索引擎识别
alt的命名有图片出现时不显示,若图片无法加载,某些浏览器会显示名字
2. a标签
- 连接作用
<a herf="http://cnblog.com/" >a标签链接</a>
点击“a标签链接”会跳转至网页
target="_blank" 会新打开一个空白页
target="_self"在当前页面打开
<base target="_blank"> 定义页面中所有链接打开方式
- 下载作用
<a href="xxx.ppt">点击下载</a>
当a标签href内是文件时,点击会直接下载文件
- 跳转作用(锚点)
<a href="#b1">1111</a>
<a href="#b2">2222</a>
<div style="height:10000px;" id="b1">
1111
</div>
<div style="height:10000px;" id="b2">
2222
</div>
点击1111或2222会跳转相应的模块
- 常用标签
<hx></hx>(x 1~6) 标题
从上往下重要度减小,标题字号减小
<p></p> 段落
<strong>强调(页面展示为粗体)</strong>
<em>强调(页面展示为斜体)</em>
<span>区别样式</span>
<ol><!--有序列表-->
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<ul><!--无序列表-->
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<dl><!--定义列表-->
<dt>定义列表标题</dt>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
</dl>
- SEO(搜索引擎优化)
部分方法:
1.页面标签语义化
2.使用对SEO有利的标签:h1/h2/strong....(尽量合理)
3.提高页面关键词密度
4......
SEM:搜索引擎营销(包含SEO)
- 基础选择符
id 选择符(选择唯一) #box1{xxx}
群组选择符 #box1,#box2{xxx}
class(类)选择符【可以重复使用的id】
包含 选择符 父级内加空格 div p{xxx}
- 选择符优先级
同级默认后者样式覆盖前者
样式优先级
类型选择符(1)<class (10)< id(100)< style(行间样式)(1000)< js
名字的先后顺序和样式优先级的顺序无关!!
- a伪类详解
<a href="#">a 标签(链接,下载,锚点)</a>
伪类:元素在特定情况下出现的样式。
/*
link 未访问(默认) a:link{font-size:20px;text-decoration:none;color:green;}
visited 访问过后(点击过后)a:{visited:color:black;}
hover 鼠标悬停(鼠标划过)a:{hover:color;text-decoration:underline;font-size:100;}
active 链接激活(鼠标按下)a:{active:color:yellow;}
顺序不可变!!!!
*/
div等可以让鼠标划过的基本支持使用伪类。
IE6不支持a标签以外的任何标签的伪类。
IE6以上的浏览器支持所有标签的hover伪类。
伪类应用
1.四个伪类全用(搜索引擎,新闻门户,小说网)
2.一般网站只有两个(a{} a:hover{})