<img src="图片地址" alt="图片名"/> 图片（单标签）alt属性 是图片名字，是给百度搜索引擎抓取使用； a标签： 链接/下载/锚点 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{………………} A的四个伪类 伪类：伪类用于向被选中元素添加特殊的效果。（元素在特定情况下才具备的。） link 未访问（默认） hover 鼠标悬停（鼠标划过） active 链接激活（鼠标按下） visited 访问过后（点击过后） A四个伪类的顺序： link visited hover active （love hate 记忆方法！） a伪类的应用： a、四个伪类全用(搜索引擎、新闻门户、小说网站) b、一般网站只用（ a{} a:hover{} ） IE6不支持a以外其它任何标签的伪类； IE6以上的浏览器支持所有标签的hover伪类；
day01-常见标签
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <div>块</div> <img src="1.png" alt="美女"/><!-- 单标签 --> <a href="#">a标签（链接，下载，锚点）</a> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <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> </body> </html>
day02-2-常见标签a(链接)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <base target="_blank"/> <!-- 定义页面中所有链接打开方式 --> </head> <body> <a href="http://www.baidu.com/">a标签（链接）</a> <a href="http://www.baidu.com/" target="_self">a标签（打开新链接）last</a> </body> </html>
day03-2-常见标签a(锚点)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <a href="#box1">百步飞剑(锚点)</a> <a href="#box2">夜尽天明</a> <a href="#box3">诸子百家</a> <a href="#box4">万里长城</a> <a href="#box5">君临天下</a> <div style="height:1000px;" id="box1"> 百步飞剑<br/><!-- 折行符 --> ……………………………… </div> <div style="height:1000px;" id="box2"> 夜尽天明<br/><!-- 折行符 --> ……………………………… </div> <div style="height:1000px;" id="box3"> 诸子百家<br/><!-- 折行符 --> ……………………………… </div> <div style="height:1000px;" id="box4"> 君临天下<br/><!-- 折行符 --> ……………………………… </div> <div style="height:1000px;" id="box5"> 万里长城<br/><!-- 折行符 --> ……………………………… </div> </body> </html>
初始页面：
当点击诸子百家的时候-->>>
day04-常见a标签下载
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <a href="css2—常见标签（上）.ppt">a标签（下载）</a> </body> </html>
day05-选择符
--------包含----------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div span p{100px; height:100px; background:blue;} /* 包含 选择符 */ </style> </head> <body> <div> <p>p2</p> </div> <div> <p>p2</p> <span> <p>p3</p> </span> </div> <div>块</div> <p>p1</p> <p>p1</p> <p>p1</p> </body> </html> ------------------------
-------id选择器--------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{100px; height:100px; background:blue;} /* id 选择符 */ </style> </head> <body> <div id="box">块</div> </body> </html> -------id选择器---------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box2,#box1,#box3{100px; height:100px; background:blue;}
/*
群组 选择符
*/
</style>
</head>
<body>
<div id="box1">块</div>
<div id="box2">块</div>
<div id="box3">块</div>
</body>
</html>
---.class选择器------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .box{100px; height:100px; background:blue;} .box2{border:5px solid red;} /* class(类) 选择符[可以重复使用的id] */ </style> </head> <body> <div class="box">块</div> <div class="box box2">块</div> <div class="box">块</div> </body> </html> ---.class选择器-------
-----------------标签选择-------------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{100px; height:100px; background:blue;} /* 类型 选择符 */ </style> </head> <body> <div>块</div> <div>块</div> <div>块</div> <p>p1</p> <p>p1</p> <p>p1</p> </body> </html> -----------------标签选择--------------------
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> *{border:1px solid red;} /* * 通配符 */ </style> </head> <body> <div> <p>p2</p> </div> <div> <p>p2</p> <span> <p>p3</p> </span> </div> <div>块</div> <p>p1</p> <p>p1</p> <p>p1</p> </body> </html>
选择器的优先级：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> li{height:40px;} ol li{background:blue;}/* 1+1 */ li{background:green;}/* 1 */ .list{background:red;}/* 10 */ .list1{background:yellow;}/* 10 */ #box{background:pink;}/* 100 */ /* 同级样式默认后者覆盖前者； 样式优先级 类型(1) < class(10) < id(100) < style行间样式(1000) < js 测试： A、#header #div1 .box1 div .section p .link{………………} B、#some .base #font #call a{………………} 答案:B */ </style> </head> <body> <ol> <li class="list list1" id="box" style="background:purple;"></li> <li class="list1 list"></li> <li class="list"></li> <li></li> <li></li> <li></li> </ol> <script> document.getElementById('box').style.background='#000'; </script> </body> </html>
伪类：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> /* link 未访问（默认） hover 鼠标悬停（鼠标划过） active 链接激活（鼠标按下） visited 访问过后（点击过后） IE6不支持a以外其它任何标签的伪类； IE6以上的浏览器支持所有标签的hover伪类； */ a:link{ font-size:60px; text-decoration:none; color:green;} a:visited{color:black;} a:hover{color:red; text-decoration:underline;} a:active{color:yellow;} div{height:100px; background:blue;} div:hover{background:red;} </style> </head> <body> <a href="#">a标签（链接，下载，锚点）</a> <div></div> </body> </html>