Web前端学习 02

复习：标签，css样式
1.结构标签：body,html,head,title,style
内容标签：h1-h6，p，div,a,span,em,strong,i
行内元素，块级元素
2.css
选择器：id>class>tag
通配符：*
后代 div span a
子选择器 div>span>a
交集: div.box
并集：div,span,a
内部，外部，行内
字体样式，文本样式，鼠标样式

今天目标：
1.背景图标的使用（重要）
2.a链接的使用（补充锚链接和伪类的使用）
3.列表
4.表格

补充：csdn
一.背景
背景图标的好处：减少服务器的压力，提升网页的性能
图标的标签：span,i
行内和块级元素的区别：
行内不会独占一行，不可以设置宽高，display的值默认是inline.默认缝隙无法通过*{ padding: 0; margin: 0}清除
块会独占一行，可以设置宽高,display的值默认是block
行内块级元素，可以设置宽高，不会独占一行，display默认值是inline-block默认缝隙无法通过*{ padding: 0; margin: 0}清除

标签的缝隙可以使用 *{ padding: 0; margin: 0}清除
行级标签和行内块元素通过 *{ padding: 0; margin: 0}无法清除
问题：为什么会出现缝隙？

<span>1</span>
<span>2</span>
<span>3</span>

答：行内元素和行内块元素使用 *{ padding: 0; margin: 0}无法清除缝隙
解决：方法1，写在同一行，方法2用浮动解决

小结：
背景图标的定位
图标时用span,i
?比如图标大小是100px*100px
行内元素无法设宽高，不会独占一行，span，a,i,strong,em
块级元素可以设置宽高，独占一行,div,p,h1-h6
行内块级元素不会独占一行可以设置宽高 img
display属性的使用：可以调整元素的行内，块级，行内块

二.a链接的使用
跳转页面
锚链接
伪类：a:link{} a:visited{} a:hover{} a:active{}

三.表格
常用：table,tr,td
table：tr>td
完整：table
table：thead>tr>th,tbody>tr>td,tfoot>tr>th
跨行：rowspan=“2”
跨列：colspan=“2”
边框：border:3px solid red;
合并单元格：table{
border-collapse:collapse
}
表格边框：外粗内细,table border=“1”
外细内粗,border:1px solid red
粗细一致：td ：border:1px solid red
table{border-collapse:collapse}

今天整体学的感觉很杂很乱，自己的表格感觉并没有特别理清…
**

但是什么事是几遍代码解决不了的呢？ 如果不行，那我就敲20遍…

**