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
暂无评论内容