一.自己做个案例(demo1.html)
利用第一天所学知识制作一个网页
制作过程:
1.先分析页面结构,这个页面内容的大概分为几个部分
2.在适合的html标记中,加入页面的内容(文字,图片)
引出今天的主要知识点:网页布局
二.传统的网页布局方式
使用table表格,用于保存这种有格式清晰的数据
现状: table----div table已没落 div将兴起
排版原则:
1.从大向小排版
2.从左向右,从上向下排版,按视觉习惯来做
三.表格标记
1.各种样式表格的设计(demo2.html)
2.结构形式:
<table>
<tr>
<td></td>
</tr>
</table>
表格的好处: 表格在网页排版中可以固定宽度
EditPlus 代码折叠功能(视图菜单-代码折叠)
四.表格的边框
合并的思想：将多个内容合并时，就会有多余的东西需要删除
一个合并删除td公式：删除的个数=合并的个数-1
3.立体表格效果，其实就是将表格的亮边框颜色与暗边框颜色进行对比
注意表格自身有边框，单元格自身也有边框。
通常用于按钮的立体效果
4.细线表格
细线表格效果公式：
(1）将表格自身的border=0
(2) 给表格设置背景颜色 ===细线颜色
(3) 给表格设置单元格之间距离===细线粗细
5.<th></th>定义标题栏（居中加粗效果）
五.仿站---hao123
1.结构分析图(如下图)
2.布局有小技巧,可以通过标签嵌套来实现一些复杂布局;用合适的html标签来布局
尽量做到代码精简,可以提高网页的打开速度
3.理解表格的格式化
<thead></thead> ---表头
<tbody></tbody> ---表体
<tfoot></tfoot> ---表尾
4.了解表格的直列化 <colgroup></colgroup>
可以理解成控制列的属性
六.超级链接
1.作用
超级链接就像人的血液,它是互联网的血液,有了链接就可以将互联网资源联系起来
2.概念
实现由当前文档到目标文档的一种跳转,链接重要的使用原则,必须是回路,可以后退和前进
在搜索引擎优化中还需要考虑相关链接
3.语法
<a href="链接地址" title="注释文字提示" target="打开链接窗口的形式">
显示内容
</a>
target 属性
_blank 在新窗口中打开
_self在自身窗口中打卡(默认)
_parent在上一级窗口中打开,框架会经常使用
_top在浏览器的整个窗口中打开,忽略任何框架
4.分类
(1).内部链接
当前文档与目标文档在同一个站点内(本地文件名)
(2).外部链接
当前文档与目标文档不在同一站点内(URL网址)
(3).Email链接
并允许访问者向指定的地址发送邮件
格式:<a href="mailto:邮件地址"></a>
(4).局部链接(锚点)
可以跳转到某个页面的某个位置
格式:<a href="#锚点名称"></a>
(5).空链接
没有目标端点的链接
格式:<a href="#"></a>
用途:用于一些网页效果,比如加入收藏夹,设为首页等
(6).脚本链接
是一种特殊的链接,当单击脚本链接的文本或图像时,可以运行相应的javaScrpt语句
常用的脚本链接:
<a href="javascript:window.open('文件名')">打开窗口</a>
<ahref="javascript:window.close()">关闭窗口</a>
