静态网页设计(第11章 HTML).pptVIP

* 第11章 HTML HTML语言是网络Web语言的基础，是制作网页的基础，利用它就可设计出一般的静态网页。 HTML（超文本标记语言）是用来制作超文本文档简单标记语言，用该语言编写出的超文本文档称为HTML文档。 HTML的编写方式： 直接利用文本编辑器来编写（简单但不能马上见效果） 利用专业的网页设计软件来编写（界面复杂但能马上见效果） 11.1 HTML简介 11.1.1 HTML的特点 不是专门的编程语言，只是一种页面描述性标记语言 描述各种元素在浏览器中的显示效果 11.1.2 HTML的语法结构 1、HTML的基本结构 html head title网页标题/title /head body 网页内容 /body /html 2、HTML的语法规则 HTML文档以纯文本形式存放，扩展名为. html或.htm HTML文档中的每个标记以 界定，格式如下： 标记名称 属性1＝属性值 ……内容/标记名称 HTML文档中不区分大小写 HTML文档中标记可以嵌套，但不能交叉 HTML文档中标记可分多行写，也可以一行写多个标记 HTML文档中换行、回车、空格是不被浏览器识别 HTML文档中内容都应该受限于标记 浏览器不能识别的标记将忽略及其内容 3、 HTML标记的类型 不带属性的双标记：strong强调内容/strong 带属性的双标记：a 属性列表内容/a 单标记：br、hr、img 11.2 DW的HTML代码编辑功能 DW中的三种视图模式：设计、代码、拆分 其中代码模式可直接编辑HTML源代码 代码编辑工具 1、代码视图 代码的折叠 选择父标签 代码的注释 环绕标签 代码的缩进与凸出 显示/隐藏行号 自动换行 2、快速标签编辑器 设计视图中，属性面板中的“快速标签编辑器” 3、标签选择器与标签编辑器 标签选择器：在网页代码中插入新的标签 代码视图中定位插入标签选择器 标签编辑器：对网页代码中的标签属性添加或修改属性值 代码视图中选择标签修改编辑标签 4、代码片断 作用：可以减少代码编辑的工作量 插入代码片断 自定义代码片断 5、代码优化 减少冗余（多余、不可识别、错误、空）代码，提高网页浏览速度。 代码视图中命令清理HTML/XHTML 11.3 HTML标记 开始和结束标记html 功能：让浏览器了解html文档开始及结束位置。 语法格式： html HTML文档的所在内容 /html 2. 头部标记head 功能：让浏览器了解文档头部信息（注释、Meta、标题上） 语法格式： head 头部内容 /head 3. 标题标记title 功能：指定网页的标题（出现在浏览器的标题栏中的内容） 语法格式： title 标题内容 /title 4. 主体标记body 功能：标记网页主体的开始结束 语法格式： body 网页主体内容 /body 注：该标记中还可以设定网页背景的相关属性（如网页背景色、背景图、链接的颜色、网页上文字的颜色等等）。 bgcolor：设置背景色 Text：设置网页内文字的颜色 Link：链接颜色 Alink：连接超链接对象的颜色 Vlink：已连接超链接对象的颜色 Background：网页的背景图 语法格式： body bgcolor=? 其中颜色值可采用英文描述如red、blue等，也可用16进制描述如#FF0000（红色）等。 例： html head title 欢迎访问咸宁职院中专部 /title /head body bgcolor=“blue” text=“#ff0000” 这里是中专部网站 /body /html 11.3.4 文本格式标记 1.标题标记符hn（注：n取1-6的值，1最大，6最小） 功能：设定网页中文本标题和副标题样式 格式： hn标题内容/hn 例： html head title标题样式/title /head body h1一号样式标题/h1 h3三号样式标题/h3 h5五号样式标题/h5 /body /html 2. 字体控制标识符font 功能：控制网页中文本字符的样式如大小、颜色、字体等 语法： font 属性=值 文本内容 /font 注：属性有size表示大小、 color表示颜色、face表示字体 例：html head title字符样式/title /head body font size=4 color=red face=楷体咸宁职院中专部/font /body /html 3. 段落标记p和换行标记br 段落标记是用来标记段落，可用align属性来设置段落的对齐