ᠰᠦᠯᠵᠢᠶ᠎ᠡ ᠬᠢᠬᠦ ᠮᠡᠷᠭᠡᠵᠢᠯ ᠤᠨ ᠦᠨᠳᠦᠰᠦᠨ ᠮᠡᠳᠡᠯᠭᠡ html教程-第二章-2.pptx

第一章 网页设计与网站建设的基础知识 第二章 HTML超文本标记语言 第三章 网页设计工具Dreamweaver 第四章 CSS层叠样式表 第五章 JavaScript脚本编程,HTML超文本标记语言,第二章,主要内容,,,,,,,,,,HTML文档机构,,头部及主体标记,,文字、段落、列表及图片标记,,,,,超链接、多媒体及表格标记,,,框架及表单标记,,文字标记,文字标记主要用于设置网页中的所有有关文字方面的内容，具体包括普通文字、特殊字符、标题字、字体以及文字格式等方面的设置,文字标记,网页中涉及到的文字主要包括:普通文字、特殊符号以及页面的注释语句 普通文字的输入: 直接在和标记之间输入 特殊字符的输入: 在源代码中特殊字符使用其对应的符号码代替.,文字标记,注释语句 基本语法 ᠁ ᠁ 语法解释 上述两种表示法皆可代表注释语句 ；注释 语句不会显示在浏览器中,文字标记,例子 文字内容标记示例 对于页面中的普通文字直接在主体标记对之间输入即可。 北京工业大学计算机学院版权所有 2014 ,文字标记,标题字标记 所谓标题字就是以某几种固定的字号去显示文字，一般用于强调段落要表现的内容或作为文章的标题 具有加粗显示并与下一行产生一空行的特性 根据字号的大小分为六级，分别用标记H1~H6表示，字号的大小随数字增大而递减,文字标记, 标题字标记综合示例 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,文字标记,文字的修饰标记 用于对文字进行格式化 常用的修饰标记如下：,文字标记, 使用修饰标记设置文字格式 一个人的成功 ︵粗体标记b︶ 15%属于专业知识， ︵粗体标记strong︶ 85%靠人际沟通和处事技巧等综合因素 一个人的成功 ︵斜体标记i︶ 15%属于专业知识， ︵斜体标记em︶ 85%靠 ︵斜体标记cite︶ 人际沟通和处事技巧等综合因素 一个人的成功 ︵大字号标记big︶ 15%属于专业知识， ︵小字号标记small︶ 85%靠人际沟通和处事技巧等综合因素 一个人的成功 ︵下划线标记u︶ 15%属于专业知识，85%靠人际沟通和处事技巧等综合因素 一个人的成功 ︵删除线标记s︶ 15%属于专业知识， ︵删除线标记strike︶ 85%靠人际沟通和处事技巧等综合因素 代数方程式1 ︵上标标记sup︶ :3x2+9x+3=31 代数方程式2 ︵下标标记sub︶ :9x1+6x2=63 ,文字标记,字体标记 作用：设置文字的字体、字号及颜色 基本语法 ᠁ ,文字标记, 使用字体标记设置文字字体 使用字体族设置文字，并将文字颜色设置为#ffcc00 这 是 一本 专业 详尽 的 DHTML 书籍 谢谢 购买 ,,,段落标记,所谓段落，指得是一段格式上统一的文本 基本语法 语法解释 从开始处创建一个段落。使用双标记将使所包含的段落与上下文都有一空行的间隔；使用单标记将只使段落与上文有一空行的间隔,换行标记,作用: 产生一个换行效果 基本语法 ,居中标记,基本语法 ᠁ ᠁ 作用：使标记对之间的文字在浏览器窗口中居中对齐,段落、换行及居中标记综合示例, 创建并设置段落 这是第一行文本，没有使用任何标记进行设置 这是第二行文本，使用了p双标记，被设置为一个段落 这是第三行文本，没有使用任何标记进行设置 这是第四行文本，使用了p单标记，被设置段落居中对齐 这是第五行文本，使用了p单标记，被设置段落居右对齐 这是第六行文本，没有使用了p标记 ,预格式化标记,基本语法 ᠁ ᠁ 语法解释 预格式化，是指保留之间的文字在源代码中的格式，使其在页面中显示的效果和源代码中的效果几乎完全一致,预格式化标记示例,,水平线标记 ,水平线用于段落与段落之间的分隔，使文档结构更加清晰，使文字的编排更加整齐 基本语法 常用属性,水平线标记示例, 水平线综合示例 主流的网页设计软件 目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，现在追求的是网页的动态效果和交互性。 现在Macromedia公司的网页设计软件Dreamweaver正是交互性网页设计的杰出代表 前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设 ,,,列表标记,所谓列表，通俗的讲就是各列表项按一定的方式进行排列而成的一张表 按列表项排列方式的不同，可分成： 有序列表 无序列表 嵌套列表,列表标记,有序列表 以数字或字母等表示顺序的符号为项目前导符来排列列表项目的列表。例如: 无序列表 以无顺序的符号 ︵●、○、■等︶ 为项目前导符来排列列表项目或没有任何符号作项目前导符的列表。 嵌套列表 指多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等,列表标记,有序列表 基本语法 项目一 项目二 ᠁ ᠁ ,列表标记, 有序列表标记示例 图像设计软件 Photoshop Freehand Illustrator CorelDraw ,列表标记,,有序列表前导符和起始编号设置示例,无序列表,无序列表 项目列表 前导符默认为实心圆点,无序列表,基本语法 项目一 项目二 ᠁ ᠁ 常用属性,无序列表,,,,,嵌套列表,嵌套列表指的是多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等 嵌套列表类型： 定义列表的嵌套 无序列表和有序列表的嵌套 这种嵌套类型是最常见的，它主要是通过在 一种列表中的列表项中嵌套另一种列表的定 义来实现,无序列表和有序列表嵌套示例,,,,图片标记,网页中的常用图片格式 GIF ︵Graphics Interchange Format，图形交换格式︶ 最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜 色的图像，如站点图标、导航条等。 JPEG ︵Join Photograph Graphic，联合图像专家组标准︶ 又称JGP，用来显示照片等颜色丰富的精美图像 PNG ︵Portable Network Graphics，可移植网络图形︶ 既融合了GIF格式透明显示的颜色，又具有JPEG处 理精美图像的优势，是逐渐流行的网络图像格式，但目前浏览器对其支持并不一致,图片标记,基本语法 常用属性,,绝对地址与相对地址,绝对地址：互联网上的独立地址，在任何网站通过这个地址可以直接到达目标网页。包含主域名和目录地址。 相对地址：相对于网站的地址，当域名改变时，相对地址的“绝对地址”也发生变化。,绝对路径和相对路径,绝对路径: 指文件的完整路径 文件相对路径：指相对于当前文件的路径 文件相对路径有以下几种：,小结,字体标记的size属性的取值范围是1~7，其中“1”为最小字号，“7”为最大字号。 空格在源代码中的表示是”表示一个半角空格。另外一些特殊符号如“”等，在源代码中也要象空格的表示一样，使用字符码。 设置文字的格式 ︵如加粗显示文字︶ 需要使用文字修饰标记 标题标记的级别范围是h1~h6，其中“h1”的字号是最大的，“h6”的字号是最小的。,小结,标记可使显示的内容的格式与源代码的格式几乎完全一样。 段落标记和换行标记的一个显著的不同之处是在换行的同时，会与上 ︵下︶ 文产生一空行的间隔，而则没有。 水平线标记中的属性size用于设置水平线的高度。 图片标记必设置的一个属性是src,上机练习,使用文字标记、水平线标记、段落及换行标记创建如图模板的html页面。,上机练习,一个嵌套列表： 咖啡 茶 红茶 绿茶 1.中国茶 2.非洲茶 牛奶,