HTML基础知识及相关标签的用法.ppt

第1讲HTML的基础知识 陕西新华电脑软件学校 电子商务教研组 2 教学重难点 陕西新华电脑软件学校 电子商务教研组 3 1 Table布局与DIV布局的区别 1 制作效率 2 浏览器兼容性 3 扩展性与可读性 任务一Table与DIV布局的区别 区别 陕西新华电脑软件学校 电子商务教研组 4 2 DIV CSS布局优势 1 完美地实现结构层同表现层分享 2 页面下载速度快 3 页面修改更简单方便 4 搜索引擎搜索更加优化 任务一Table与DIV布局的区别 反思比较优势战略 打开弱者上升之门 陕西新华电脑软件学校 电子商务教研组 5 任务二HTML基本语法 2020 2 23 HTML标签双标签如 单标签如 陕西新华电脑软件学校 电子商务教研组 6 任务二HTML基本语法 HTML标签格式格式一内容格式二内容格式三 陕西新华电脑软件学校 电子商务教研组 7 任务三认识HTML标签 HTML基本结构HTML文件的正文 课程实例 a html 网站主体 body 陕西新华电脑软件学校 电子商务教研组 8 任务三认识HTML标签 HTML元素属性HTML元素可以有自己的相关属性 每一个属性还可以赋一定的值 元素属性出现在元素的内 并且和元素名之间有一个空格分隔 属性值用 引起来 实例 b html 陕西新华电脑软件学校 电子商务教研组 9 任务三认识HTML标签 HTML基本结构 HEAD属性元素出现在文档的开头部分 与之间的内容不会在浏览器的文档窗口显示 但是其间的元素有特殊重要的意义 元素定义HTML文档的标题 陕西新华电脑软件学校 电子商务教研组 10 HTML基本结构 HEAD属性元素用来标记搜索引擎在搜索页面的关键词 任务三认识HTML标签 陕西新华电脑软件学校 电子商务教研组 11 任务三认识HTML标签 元素用来标记文档的作者用来标记你的页面的解码方式 陕西新华电脑软件学校 电子商务教研组 12 任务三认识HTML标签 HTML基本结构 BODY属性 1 bgcolorbgcolor属性定义HTML文档的背景颜色 2 backgroundbackground属性定义HTML文档的背景图片 通常使用的图片格式有GIF JPG PNG等 陕西新华电脑软件学校 电子商务教研组 13 任务三认识HTML标签 3 bgproperties背景图片成水印效果 滚动属性 4 texttext属性定义HTML文档的正文文字颜色 陕西新华电脑软件学校 电子商务教研组 14 任务三认识HTML标签 5 超级链接颜色link vlink alink分别控制普通超级链接 访问过的超级链接 当前活动超级链接颜色 6 leftmargin和topmargin设置网页主体内容距离网页顶端和左端的距离 陕西新华电脑软件学校 电子商务教研组 15 任务三认识HTML标签 文字属性标记1 文字颜色指定颜色 2 文字字体 陕西新华电脑软件学校 电子商务教研组 16 任务三认识HTML标签 3 文字大小 1 2 3 4 5 6 7or 4 文字标题 1 2 3 4 5 6 陕西新华电脑软件学校 电子商务教研组 17 任务三认识HTML标签 5 文字效果加粗斜体斜体上标下标 实例 c html 陕西新华电脑软件学校 电子商务教研组 18 任务三认识HTML标签 下划线删除线删除线粗体斜体文字增大显示文字缩小显示 陕西新华电脑软件学校 电子商务教研组 19 任务三认识HTML标签 6 文字的对齐 n 1 2 3 4 5 6 left center right 陕西新华电脑软件学校 电子商务教研组 20 任务三认识HTML标签 行的控制段 Paragraph 可以看作是空行 换行空白占位符 实例 d html 陕西新华电脑软件学校 电子商务教研组 21 任务三认识HTML标签 标尺线 设定线宽 设定线长 设定对齐方式 left right 设定线的颜色 案例 e html 陕西新华电脑软件学校 电子商务教研组 22 任务三认识HTML标签 插入图片的元素标记简介格式 常用属性 src 图片源地址 alt 替换文字 width 宽度 height 高度 hspace 垂直边距 vspace 水平边距 border 边框 陕西新华电脑软件学校 电子商务教研组 23 本讲总结 Table布局与DIV布局的区别 陕西新华电脑软件学校 电子商务教研组 24 作业 1 完成课堂案例2 完成zy1 陕西新华电脑软件学校 电子商务教研组 25