html+css学习笔记 2[标签]

img标签/a标签

<img src="图片地址" alt="图片名"/> 图片（单标签）alt属性是图片名字，是给百度搜索引擎抓取使用；

 a标签：链接/下载/锚点 href地址等于标签id
 target 链接打开方式
 blank 新窗口
 self 当前窗口
 <base target="_blank"/> 定义页面链接默认打开方式

常见标签

div 块
img 图片（单标签）
a 链接、下载、锚点
h1-h6 标题
p 段落
strong 强调（粗体）
em 强调（斜体）
span 区分样式
ul 无序列表
ol 有序列表
li 列表项
dl 定义列表
dt 定义列表标题
dd 定义列表项

SEO ：搜索引擎优化；

部分方法：
a、页面标签语义化；
b、使用对SEO有利的标签：h1/h2/h3/strong/em……
c、提高页面关键词密度；
d、……等等；

SEM：搜索引擎营销；（包含SEO）

选择符

id选择符（#）

群组选择符（，）

class选择符（.）

类型选择符(div……)

包含选择符（div p）

通配符（*）

选择符优先级

基础选择符的优先级
 类型 < class < id < style(行间) < js


测试：
 A、#header #div1 .box1 div .section p .link{………………}
 B、#some .base #font #call a{………………}

看高级选择符的个数 id最多的优先级越高当然这仅仅是测试

选择符使用原则：准确的选中元素，又不影响其它。还有一个性能问题

a的四个伪元素伪类

伪类：伪类用于向被选中元素添加特殊的效果。（元素在特定情况下才具备的。）

 link 未访问（默认）
 hover 鼠标悬停（鼠标划过）
 active 链接激活（鼠标按下）
 visited 访问过后（点击过后）

A四个伪类的顺序：
 link visited hover active
 （love hate 记忆方法！）
应用和兼容性问题

a伪类的应用：

a、四个伪类全用(搜索引擎、新闻门户、小说网站)

b、一般网站只用（ a{} a:hover{} ）

IE6不支持a以外其它任何标签的伪类；

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

标签样式初始化

css reset 原则：
但凡是浏览默认的样式，都不要使用。

body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}

常用重置代码

body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;} //内外边距重置
table {border-collapse: collapse; border-spacing: 0;} //表格边框两像素bug
img {border: 0;} //图片ie蓝色边框
ol,ul{list-style: none;} //去掉黑点
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;} //标签文字字体设置设置父级标签无效不继承
.clear:after{content:"";display:block;clear:both;} //清除浮动
.clear{zoom:1;} //触发haslayout

块状元素和内联元素

块的特征
 1、默认独占一行
 2、没有宽度时，默认撑满一排
 3、支持所有css命令

内嵌(内联、行内)的特征
 1、同排可以继续跟同类的标签
 2、内容撑开宽度
 3、不支持宽高
 4、不支持上下的margin和padding
 5、代码换行被解析

相互转换

display：block 显示为块

使内联元素具备块属性标签的特性

display：inline 显示为内嵌

使行块属性标签具备内联元素的特性

Inline-block的特点和问题

特性：
1、块在一行显示；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度

问题：
1、代码换行被解析；
2、ie6 ie7 不支持块属性标签的inline-block;

inline-block的应用、cursor

a、分析结构（div 包一排a）
b、a标签支持宽高，并且在一排显示
c、有hover效果
d、当前状态不能点！

cursor 指针样式（规定要显示的光标的类型）
cursor：pointer | text | move ……
cursor:url(hand.cur),pointer;

面试题

这么一段HTML，请挑毛病：

   哥写的不是HTML，是寂寞。   我说： 不要迷恋哥，哥只是一个传说

  空格符

标准：
哥写的不是HTML，是寂寞。
我说： 不要迷恋哥，哥只是一个传说

最佳：
哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>，是寂寞。
<cite>我</cite>说： <q>不要迷恋哥，哥只是一个传说</q>

title 元素的额外信息
html标签：http://www.w3school.com.cn/tags/index.asp

前端规范

1、所有书写均在英文半角状态下的小写；
2、id，class必须以字母开头；
3、所有标签必须闭合；
4、html标签用tab键缩进；
5、属性值必须带引号；
6、
7、/* css注释 */
8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；
9、p,dt,h标签里面不能嵌套块属性标签；
10、a标签不能嵌套a；
11、内联元素不能嵌套块；

巴特西

html+css学习笔记 2[标签]

最新文章

热门文章