html和样式表分离,web前端之内容、样式和行为分离 | 木凡博客

web标准的核心理念就是结构标准、样式标准和行为标准，提倡结构、表现和行为相分离，即HTML-结构、css-表现、Javascript-行为分离。HTML标签给予内容含义，CSS表现层则定义HTML该如何显示(外观)，JavaScript行为成为页面增加交互。

内容、样式和行为分离有利于思考文档的语义结构，更容易维护和更改。语义化的结构有什么好处，简单说就是有利于搜索引擎爬虫更好的理解我们的网页，利于SEO优化。

内容、样式和行为分离如何分离我们看下面一个例子：

内容，样式和行为混合写法

上面可以看出，HTML内容、css样式和javascript行为是混在一起的。下面将它们分离

XHTML

web前端之内容、样式和行为分离

div {

border: 1px solid #ccc;

}

ul li {

cursor: pointer;

}

• mounui.com
• mounui.com
• mounui.com

var uls = document.getElementsByTagName('ul')[0];

uls.onclick = function(ev) {

var ev = ev || window.event;// 兼容IE浏览器

var uli = ev.srcElement || ev.target;

// 判断事件源是不是li

if (uli.nodeName.toLowerCase() == 'li') {

window.location.href = 'http://mounui.com';

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

web前端之内容、样式和行为分离

div{

border:1pxsolid#ccc;

}

ul li{

cursor:pointer;

}

• mounui.com
• mounui.com
• mounui.com

varuls=document.getElementsByTagName('ul')[0];

uls.οnclick=function(ev){

varev=ev||window.event;// 兼容IE浏览器

varuli=ev.srcElement||ev.target;

// 判断事件源是不是li

if(uli.nodeName.toLowerCase()=='li'){

window.location.href='http://mounui.com';

}

}