1 超链接
网页和网站的区别：
网页：由后缀名，html文件构成的
网站：由若干个网页拼接在一起组成的
超链接标签的使用(点击可以跳转到新的页面)
标签名称: a
默认样式
- 超链接标签默认有下划线
- 默认字体是有颜色的
- 鼠标指针移上去的时候会变成手型(引导用户点击)
属性
- href 跳转地址路径
在href中添加地址要加入http://（http协议）
- title 提示文本 鼠标移入当前文本时候会出现一段提示
- target 打开新窗口的方式
- _self 默认值 打开窗口覆盖原窗口
- _blank 打开一个新的窗口
在head里加入<base target="_blank">，控制当前页面中所有a标签打开新窗口的方式是一个新的标签页。
2 图片
标签名称: img
属性
- src 图片引入的路径
- alt 表示当图片加载失败的时候 一段提示文本
- title 提示文本
了解的属性(html属性的单位是可以省略的-web中的单位是像素px)
- width 宽度
- height 高度
- border 边框
注：可下载一个image preview插件，以提示图片是否加载成功
3 路径的使用
1.绝对路径(了解,不建议使用)
- 含有盘符的
2.相对路径
- 同级找同级 目标文件的名称
- 父级找子级 目标文件的文件夹名称/目标文件的名称
- 子级找父级 ../目标文件名称
- 命令 ../ 调出当前文件夹
3.解释：
- ./ 当前目录 同级找同级 是一样的
- ../ 跳出当前文件夹
- .../
4 div&span
html+css div+css
div:没有任何实际的含义 只是一个盒子 用来做网页布局
span:没有任何实际的含义 只是一个盒子 用来包裹文本内容
5 作业-标签之间的嵌套关系
标签之间的嵌套关系
- 常见的嵌套关系 加粗和倾斜、ul>li>ol>li
- p和h标签之间的嵌套
- p和p标签 不可
- h和h标签 不可
- p和h标签 h1可以嵌套p
- a>img
- 总结: div(块级元素) 可以嵌套一切
表格
表格的标签名称
- table 表示表格
- tr 表示表格中的行
- td 表格表格中的列(行与列相交部分的单元格)
表格的基本属性
- 宽度width/高度height/边界border（表格边框的宽度）
- bordercolor/bgcolor 边框的颜色/表格的背景颜色
- cellspacing/cellpadding 单元格与单元格之间的间距/单元格与内容的距离
- cell 细胞、单元格
- space 空间
- padding 内边距
- 对齐方式
- 水平方向 align:left right center
- 垂直方向 valign:top bottom middle
- 给table加控制表格位置，给tr加控制一行元素的位置，给td加控制某一个元素的位置
- 给table设置valign不会有变化
- 难点:行列合并
- 列合并 colspan
- 行合并 rowspan
- span作为属性出现的时候表示选中几个 行列合并的属性值要是一个数字 即格的数量
- rules="rows/cols/all/none/groups" 添加行列的分割线
-rows只有行有分割线，cols只有列有分割线
- groups 位于分组之间的分割线 ?
表格中的高级属性及标签
- 数据的行分组
- tbody 默认会生成一次 包裹住表格中的所有内容 无数个
- thead/tfoot 表格的头部和底部 成双成对 只有一个
- 数据的列分组
- 单标签 col
- 双标签 colgroup
- 属性:
- span 选择几个列
- width 控制这几个列的宽度
- 表格的列标题
- th 默认字体是加粗并且居中显示
- 表格标题
- caption
- 字体颜色style="color:palevioletred"
注：1.三行三列的表格简写：table>tr*3>td*3
3.合并单元格的时候注意竖着的即是列
aaaa
