ZG前端学习系统day02 2020-11-3

• HTML语义化（合理的标签做合理的事情）
  根据页面的内容选择合适的标签
  语义化的优点：
  1 在没有css的情况下页面也能够很好的呈现出内容结构
  2 有利于SEO让搜索引擎爬虫更好的理解网络
  3 便于团队开发和维护
  4 有利于其他设备解析

• Css引入方式
  1 内联 行内样式
  2 内部样式
  3 外链样式
  引入样式的优先级 ： 行内样式>内部样式 和 外链样式
  内部样式和外链样式同时存在的时候采用就近原则 及当两者有共同的样式的时候后者会覆盖前者

• 表格标签

<table border="1" width="300" height="400">    
  <tr>   
  <td rowspan="2" colspan="2"></td>            
  <td></td>       
  </tr>  
  <tr>       
  <td></td>     
  </tr>    
  <tr>         
 <td></td>    
<td></td>         
<td></td>        
</tr>       
<tr>            
 <td></td>          
<td></td>           
<td></td>        
 </tr>    
</table>

table外层容器 tr 表格的行 th 表头 td定义表格单元
语义化标签
thead tbody tfoot（一般情况下只有前二个）
caption 标题
表格的属性
table 中 border cellspacing 单元格和单元格之间的间距 cellpadding 单元格内的边距 width height
td中 ** **（合并列）和rowspan（合并行）
跨行用rowspan 跨列用colspan 不管跨行和跨列的个数都是从自身数 删掉除去自身所跨的单元格
style中使用的属性 border-collapse ：collapse 合并单元格的边线（解决了使用cellspacing的两线合并线粗的问题）
border-spacing 单元格与单元格之间的间距 但是和cellspacing 中的不同是在于 cellspacing只能设置一个值 然而 当border-spacing为一个值的时候表示横向纵向间距 当2个值的时候 第一个表示横向第二个表示纵向

• 列表
  无序列表 ul —li
  有序列表ol—li 使用场景 ： 排行榜或者有序的轮播点
  自定义列表 dl —— dt——dd

• vs的快捷键

• a链接标签
  a链接中的锚节点问题
  1同一页面中的指定位置
  <a href="#name"></a>
  <div id=“name”>…</div>
  a标签中href使用#和javascropt:viod(0)的区别 #实际也是一个锚节点但是返回了顶部javascript是一个死标签。
  2 不同页面的指定位置
  使用的时候只是 地址+#name其余一样

• 特殊字符
  &+字母+；