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基本语法,2019/6/4,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)bgcolor bgcolor属性定义HTML文档的背景颜色。 (2)background background属性定义HTML文档的背景图片。通常使用的图片格式有GIF，JPG,PNG等,陕西新华电脑软件学校-电子商务教研组,13,任务三 认识HTML标签,(3)bgproperties 背景图片成水印效果，滚动属性。 (4)text text属性定义HTML文档的正文文字颜色。,陕西新华电脑软件学校-电子商务教研组,14,任务三 认识HTML标签,(5)超级链接颜色 link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。 (6) leftmargin和topmargin设置网页主体内容距离网页顶端和左端的距离,陕西新华电脑软件学校-电子商务教研组,15,任务三 认识HTML标签,文字属性标记 1.文字颜色 指定颜色 . 2.文字字体 . ,陕西新华电脑软件学校-电子商务教研组,16,任务三 认识HTML标签,3.文字大小 . #=1, 2, 3, 4, 5, 6, 7 or +#, -# 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 =“边框“,陕西新华电