实用页面设计方法 ——HTML 全套教学课件.ppt

课程结构 第一章： HTML简介 1.1 HTML概念 HTML 超文本标记语言（Hyper Text Markup Language） 以htm或者html为扩展名 包含标记的文本文件 通过浏览器解析标记来显示页面 HTML的编辑器 简单文本编辑器即可，可在纯文本中编写代码 常用编辑器-Dream Weaver、FrontPage、EditPlus等 1.2 基本结构 HTML文件通常由文档头、正文两部分构成；在外层以html……/html标识为Html文件： 1.3 第一个网页-解释执行 1.4 标记 HTML文档是由HTML标记及内容组成的文本文件 HTML标记的组成 通常成对出现，在开始标记和结束标记之间的文本是内容 大小写无关，b和B表示的意思是一样的 1.5 标记的属性 标记的属性 属性为页面上的HTML元素提供附加信息，如： body bgcolor=“red”……/body table border=“0”……/table 属性通常以 name=“value” 对出现，写在起始标记中；一个标记可以有多个属性 属性值应该被包含在引号中，常用双引号。可嵌套使用单引号 body style=font-size:40pt;color:red……/body 第二章： 基本标记 2.1 行控制 布局 浏览器解析HTML页面时，忽略源代码中多余的空格、空行等，如——line.html 如果我们需要给文字设置换行样式，需要使用特定的标记 br nobr p 2.1 行控制-无换行-示例 2.1.1 行控制-p 段落：p……/p 将标记间的文字置为一个新的段落 可以设置以下属性 p示例——newline.html 2.1.1 行控制-p-示例 2.1.2 行控制-br、nobr 换行：br/——newlinebr.html 强制进行换行操作 不换行：nobr……/nobr 禁止标记中间的文本换行 ——nonewline.html 建议换行：wbr 将此标记加在建议换行的位置 如：页面中显示网址，一般不会在网址字符串中间换行，加此标记后可能会换行 wbr示例——wbr.html 2.1.2 行控制-br-示例 2.1.2 行控制-nobr-示例 2.2 文字分区-div 分区：div……/div ——div.html 把标记中的内容做为单独的一块处理 可设置以下属性 span……/span也类似 2.2文字分区-div-示例 2.3 预设格式文本-pre 预设格式文本：pre……/pre HTML在显示时一般会吃掉过多的空白字符（只显示一个）和换行符（不显示），但我们可以用pre和/pre让空白字符、换行字符保存下来 常用于计算机程序的表达 ——pre.html 2.3 预设格式文本-pre-示例 2.4 字体-font 字体：font……/font ——font.html 还有basefont标记可以设置页面的默认字体，通常放在head标记中 可设置以下属性 2.4 字体-font-示例 2.5 标题字体-hn 标题字体：hn……/hn ——headattr.html n的取值由1到6，h1最大 显示黑体字，并自动插入空行 可以设置如下属性： 2.5 标题字体-hn-示例 2.6 物理字体 物理字体（固定效果）： ——phystyle.html 设置字体显示样式，主要有以下标记： 2.6 物理字体-示例 2.7 逻辑字体（一） 逻辑字体（与浏览器相关）： 表现文字含义，主要有以下标记： 2.7 逻辑字体（二） 逻辑字体： ——logstyle.html 续： 2.7 逻辑字体-示例 2.8 水平线-hr 水平线：hr ——hr.html 用于分割同一文本的不同部分 可以设置如下属性： hr align=left width=400 size=50 color=#ff0000 2.9 居中-center、注释 居中：center…/center 设置标记中的文本或者图像居中显示 注释：!--…-- ——hr.html 浏览器中不显示注释内容 !--本句不会显示在浏览器中-- 2.10 文字移动-marquee 移动：marquee…/marquee 设置标记中的文本移动——marquee.html 可以设置如下属性： 2.10 文字移动-marquee-示例 2.11 列表 列表： 用于列举内容 列表分类 无序列表（unordered list） 有序列表（ordered list） 定义列表（definition list） 2.11.1 无序列表-ul 无序列表：ul…/ul 列表项以li…/li标识——ulist.html 可以设置如下属性： 2.11.