第4章网页结构的设计与实现.ppt

第4章 网页结构的设计与实现 知识点回顾 页面编排基本原则 网页排版基本步骤 版面典型风格有哪些？ 网页布局的常用技术有哪些？ 色彩搭配的总原则是什么？ 色彩搭配的要点有哪些？ 首屏页面的设计原则有哪些？ 导航栏的设计原则有哪些？ 本章学习目标 (1) 了解HTML的基本语法和有关标记的使用方法； (2) 掌握网页基本结构的创建方法； (3) 掌握网页内容的编辑方法，能熟练地输入文本、插入图像、动画和视频。 (4) 理解路径概念并掌握各种链接结构的创建方法； (5) 掌握使用表格布局网页结构的方法； (6) 掌握网页表单结构的创建方法； (7) 了解HTML5的结构元素应用； 本章知识结构 4.1 关于HTML HTML(Hyper Text Markup Language，超文本标记语言)最早源于标准通用化标识语言（Standard General Markup Language,SGML）,诞生于1990年，其系列版本中最为著名的是1997年由W3C提出的HTML4标准。但是由于标准的混乱和混淆，使得W3C组织提出了XHTML标准。不过XHTML并没有成功，大多数的浏览器厂商认为XHTML作为一个过度化的标准并没有太大必要，而HTML5应运而生。 4.1 关于HTML HTML5的前身名为Web Applications1.0，由网页超文本技术工作小组（Web Hypertext Application Technology Working Group，WHATWG）在2004年提出，于2007年被W3C接纳。该组织的HTML团队于2009年公布了第一份HTML草案。HTML5将成为HTML和HTMLDOM的新标准。 4. 2 HTML编写规范 1．标记及其属性 标记 属性1=“属性值1” 属性2=“属性值2”…受标记影响的内容 /标记 标记的名称为相应的英文单词首字母或缩写。 每个标记都用“”、“”围住。 对于同一段要标记的内容，可以用多个标记来共同作用以形成所需要的效果。 2．HTML代码规范 (1)并不是所有的标记都有属性。 (2) 所有标记的名称和属性使用小写。 (3) 所有的标记都必须按顺序一层一层对称嵌套。 (4) 多数标记都由一个起始标记和一个结束标记成对组成，但也有一些标记是单独存在的，这类标记称为空标记，如br/。 2．HTML代码规范 (5) 每个标记中可以根据需要增加若干属性 。 如：hr width=“100%” size=“2” (6) 所有属性的值必须用双引号““””括起来，并且要赋一个值。 (7) 空格键、Tab键、回车键、、、等特殊字符在源代码中要用编码表示。 常用特殊字符编码 2．HTML代码规范 (8) 在源代码中添加的注释，可以方便阅读，但不会在浏览器中显示。（注释内容中不要包含--） 3. 文档结构 !doctype html html head meta charset=gb2312 title文档标题/title /head body 网页内容 /body /html 4.3 文字与段落排版 1 注释标签!--…-- 注释标签的格式为： !-- 注释内容 -- 2 强制换行标签br / 强制换行标签的格式为： 文字 br / 3 段落标签p…/p 段落标签的格式为： p align=left|center|right 文字 /p 4.3 文字与段落排版 4 定位标签div…/div 定位标签的格式为： div align=left|center|right 文本、图像或表格 /div 4.3 文字与段落排版 5 水平线标签hr / 水平线标签的格式为： hr align=left|center|right size=横线粗细 width=横线长度 color=横线色彩 noshade= noshade / 其中，属性size设定线条粗细，以像素为单位，默认值为2。 4.3 文字与段落排版 6 标题文字标签h#…/h# 标题文字标签的格式为： h# align=left|center|right 标题文字 /h# “#”用来指定标题文字的大小，#取1～6之间的值，取1时文字最大，取6时文字最小。 4.3 文字与段落排版 无序列表标签ulli…/ul 无序列表中每一个表项的前面是项目符号（如●、■等符号）。建立无序列表可使用ul标签和li表项标签。 type指定每个表项左端的符号类型，可为disc，circle，square以及自定义图片 格式为： ul type=符号类型 li typ