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

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

 

块状元素和内联元素

块的特征
    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

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

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

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

 

面试题

这么一段HTML,请挑毛病:

    <P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br>&nbsp;&nbsp;我说:<br>不要迷恋哥,哥只是一个传说

&nbsp; 空格符

 

标准:
<p>哥写的不是HTML,是寂寞。</p>
<p>我说:<br/>不要迷恋哥,哥只是一个传说</p>

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

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

前端规范

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

上一篇:关于新书《修炼之道:.NET开发要点精讲》的各种说明


下一篇:将一幅图像取平均值缩小N倍实现方法