-
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其余一样 -
特殊字符
&+字母+;