第二单元常见HTML5标签及属性研究报告.pptx

网页设计课程（新大纲） 第二单元 常见的HTML5标签及属性 知识回顾： PHOTOSHOP常用的快捷键； 网站网页； 超文本标记； HTML的基本结构； 如何建立站点； Content： 1 2 3 4 HTML5的基本语法结构 标签属性及属性值 标题图片水平线 路径 案例展示： 案例分析： 导航使用什么标签实现； 图片使用什么标签实现； 段落使用什么标签实现； 段落中的加粗/倾斜/换行； 相关标签的基本语法结构； 如何正确使用标签保证页 面结构的合理性； HTML5的基本语法结构： html head meta / link / title/title style/style /head body h1/h1 p/p table/table /body /html ---------------------------元信息 ---------------------------链接外部样式表 --------------------页面标题 --------------------内嵌样式表 --------------------------- 一级标题 ----------------------------段落 ---------------------表格 Doctype声明和语言编码声明： !doctype html 位于文档的开头位置； 定义了所使用的语言规范； meta charset=“”/ 定义文档使用的字符编码； Utf-8“国际通用字符编码” Gb-2312“简体中文” 属性属性值 属性： 标签的特征； 属性值： 为属性所赋的值； 语法： 标记 属性=属性值 内容/标记 Kobe name=“” age=“” height=“” / 属性1 属性值1 属性2 属性值2 属性3 属性值3 当我退役的时候，我希望回头看我走过的路，每一天，我都付出了我的全部！ Kobe’s farewell,perfect! Unique and Unforgetable! 双标签单标签 双标签： p/p h1/h1 table/table …… 单标签： img / br / hr / …… 特殊符号： 特殊符号/字符实体？ 某些符号在html里面具有特定含义； 要表示纯文本意义的特殊符号，必须进行转义； 转义的格式以 “”号开头，分号“；” 结尾； 标题-标明文章、作品等内容的简短语句： 标记：h1/h1---h6/h6 字体自动加粗； 自动换行； 字号逐级递减； align属性： Left Center right Valign属性： Top Middle Bottom 图片： Src属性： 图片的路径 Alt属性： 图片非正常显示时的提示性文字； Title属性： 图片正常显示时的提示性文字； Width属性： 图片的宽度； Height属性： 图片的高度； Border属性： 图片的边框； 语法结构： img src=“图片路径” alt=“提示文字”height=“高度”width=“宽度”border=“边框”/ 常见的图片格式： .gif---256色；支持透明和动画； .jpg---颜色丰富，文件小； .png---无损压缩，支持透明，文件大； 注意： 不能应用在网页上的图片： .bmp .psd 切图的好坏，也会影响到网页的打开速度； 添加提示性文字，有助于提高浏览效率； 路径-一个文件或文件夹所在的位置： 绝对路径： 完整的描述文件位置的路径就是绝对路径； 相对路径： 自己相对于目标位置； 判断： 谁是相对路径？谁是绝对路径？ c:/website/img/photo.jpg img/photo.jpg 水平线： color属性： 水平线颜色； width属性： 水平线长度； size属性： 水平线粗细； align属性： 水平线对齐方式； 语法结构： hr color=“颜色” width=“水平线长度”size=“线条粗细”align=“对齐方式”/ 换行段落加粗倾斜 br / 对一行文字强制换行； p/p 定义网页中的一段文本; b/b 设置文本的粗体显示效果； i/i 设置文本将以斜体显示； 知识总结： 标题段落特殊符号换行 属性属性值 图片水平线 路径 课后作业-1： 课后作业-2： 完成案例： 正确建立站点； 利用表格布局； 正确使用标签； 预习案例：