html、CSS笔记.doc

1、Html/Css 语言剖析 紫竹林- 1 -HTML 语言剖析 Html 简介-目录 全写： HyperText Mark-up Language 译名： 超文本标识语言 简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件 达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1. Html 特点： 描述性语言，结构语言，用于决定网页内容以什么样的形式显示； 通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用； 纯文本文件，可以使用各种文本编辑器编写； (Dreamweaver

2、 是首选) 文件扩展名： .htm 或 .html； html 文件必须在 Web 浏览器上运行；（运行环境） 具有跨平台性。 2. HTML 语法结构： HTML 文件是由一系列的元素和标签（tag）组成的； 元素：网页中的内容； 标签：用于规定元素的属性和它在文件中的位置； 格式：元素资料, 不区分大小写。 3. HTML 文件结构： 起始标记： 表示 HTML 网页的起始； 文件头部： 设置初始化文档信息和文档管理标注； 文件主体： 设置格式化的浏览器显示的文档（内容） ； 注释部分： 可以放在任何位置； 例:Html 简介 Html/Css 语言剖析 紫竹林- 2 - 标签写法： 任何

3、标签皆由“所包含，如 标签名与小于号之间不能留有空白字符。 某些标签 要加上参数，某些则不必。如 大家好 参数只可加于起始标签中。 在起始标签之标签名前加上符号“ / “便是其终结标签，如 标签字母大小写皆可。 成对标签与单标签：标签按型态分为成对标签与单标签1. 成对标签 顾名思义，它以起始标签及终结标签将文字围住，令其达到预期显示效果。例如 HTML 源码 ： 我愿意和大家显示成：我愿意和大家一起学好 html/css!大家有信 心吗？ 其中 便称为成对标签。 它以起始标签 及结尾标签 标示文字我愿意和大家一起学好 html/css!令它显示成粗体，两者失其一都会发生错误显示。 2. 单标

4、签 是指标签单独出现，只有起始标签没有终结标签。 例如 HTML 源码： I love my hometown. Its a beautiful place. 显示成： I love my hometown.Its a beautiful place. 其中换行标签便属单标签。 它的作用便是将标签后所有东西显示于下一行，可见结尾标签对于它是没意义的， 但有些人会为空标签加上终结标签，如果加上结尾标签，对 HTML 没有影响。 便于记忆。Html/Css 语言剖析 紫竹林- 3 -HTML 语言剖析 Html 标记一览-目录 标记 类型 译名或意义 作 用 备注文件标记 文件声明 让浏览器知道这

5、是 HTML 文件 开头 提供文件整体信息 标题 定义文件标题，将显示于窗口标题 本文 设计文件格式及内文所在段落标记 说明标记 为文件加上说明，但不被显示 段落标记 为文字、图片、表格等之间留一空白行 换行标记 令文字、图片、表格等显示于下一行 水平线 插入一条水平线 居中 令文字、图片、表格等显示于页面中央 不建议使 用 保留原格式 令文件按照原始格式的排列方式显示 区域标记 设定文字、图片、表格等的摆放位置 强制不分行 令文字不因太长而自动换行 根据宽度换 行 根据浏览器的大小显示文本字体标记 加重语气 产生字体加粗 Bold 的效果 粗体标记 产生字体加粗的效果 强调标记 字体出现斜体

6、效果 斜体标记 字体出现斜体效果 打字字体 Courier 字体，字母宽度相同 加上底线 加上底线 不建议使 用 一级标题标 记 变粗变大加宽，程度与级数反比 二级标题标 记 将字体变粗变大加宽 三级标题标 记 将字体变粗变大加宽 四级标题标 记 将字体变粗变大加宽 五级标题标 记 将字体变粗变大加宽 六级标题标 将字体变粗变大加宽Html/Css 语言剖析 紫竹林- 4 -记 字形标记 设定字形、大小、颜色 不建议使 用 基准字形标 记 设定所有字形、大小、颜色 不建议使 用 字体加大 令字体稍为加大 字体缩细 令字体稍为缩细 画线删除 为字体加一删除线 不建议使 用 程式码 字体稍为加宽如

7、 键盘字 字体稍为加宽，单一空白 范例 字体稍为加宽如 变数 斜体效果 传记引述 斜体效果 引述文字区 块 缩排字体 述语定义 斜体效果 地址标记 斜体效果 下标字 下标字 上标字 指数（平方、立方等）列表标记 有序列表 列表项目将以数字、字母顺序排列 无序列表 列表项目将以圆点排列 列表项目 每一标记标示一项列表项目 选单列表 列表项目将以圆点排列，如 不建议使 用 目录列表 列表项目将以圆点排列，如 不建议使 用 定义列表 列表分两层出现 定义条目 标示该项定义的标题 定义内容 标示定义内容表格标记 表格标记 设定该表格的各项参数 表格标题 做成一打通列以填入表格标题 表格列 设定该表格的

8、列 表格栏 设定该表格的栏 表格标头 相等于，但其内之字体会变粗表单标记 表单标记 决定单一表单的运作模式 文字区域 提供文字区域以输入更多文字 输入标记 决定输入形式 选择标记 建立下拉列表Html/Css 语言剖析 紫竹林- 5 - 选项 每一标记标示一个选项（下拉列表时使 用）图形标记 图形标记 用以插入图形及设定图形属性连结标记 链接标记 加入链接 基准标记 可将相对 URL 转绝对及指定链接目标框架标记 框架设定 设定框架 框窗设定 设定框窗 页内框架 于网页中间插入动态框架 IE 不支援框架 设定当浏览器不支援框架时的提示影像地图 影像地图名 称 设定影像地图名称 连结区域 设定各

9、连结区域多媒体 背景声音 于背景播放声音或音乐 IE 多媒体 加入声音、音乐或影像其他标记 滚动文字 令文字左右走动 IE 闪烁文字 闪烁文字 NC 页内寻找器 可输入关键字寻找于该一页 不建议使 用 开头定义 让浏览器知道这是 HTML 文件 关系定义 定义该文件与其他 URL 的关系StyleSheet 样式表 控制网页版面 自订标记 独立使用或与样式表同用注： 表示该标记属成对标记，即需要关闭标记如 。 表示该标记属空标记，即不需要关闭标记。 IE 表示该标记只适用于 Internet Explorer。 NC 表示该标记只适用于 Netscape Communicator。Html/C

10、ss 语言剖析 紫竹林- 6 -HTML 语言剖析文件标记-目录； ； ； ；-文件头部标签 HTML 基本架构：1. 以下 HTML Source Code(源代码) 便是一份 HTML 文件的基本架构 ：HTML 超文本标记语言在线教程网页的内容，很多标记都作用于此 2. 特点解说： 整个文件处于标记与之间。用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。 文件分两部分，由至称为开头 ，至称主体（或者称之为正文） 。 基本上两者各有适用的标记，如只可出现于开头部分。 开头部分用以保存重要信息，而只有主体部分会被显示。所以大部分标记会运用于主体部分。 所标示的是文件的

11、标题。会出现于窗口标题及别人加入收藏时显示的名称，所以每页有不同而明确的标题是有必要的。 上述标记中只有具有参数设定。 Html/Css 语言剖析 紫竹林- 7 -3. 标签相关属性 文档标题标签：HTML 超文本标记语言在线教程 作者： 关键字： 描述信息： 刷新： 跳转： 文档过期： 基础地址： 为当前文档提供了完整的 URL 链接文件： 定义在当前文档和其它文档之间的关系 属性 描述：href 提供被链接的文档的 Internet 地址。rel 提供向前链接的类型。rev 指明反向链接。title 提供一个建议的标题。type 指明连接的 style sheet 媒体类型。 页面过渡效果

12、： 之参数设定： 例: text =“#000000“ 用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text=“ black “ 。各种颜色的值及名称可参考【调色原理】一节。 Html/Css 语言剖析 紫竹林- 8 - link =“#0000FF“ 设定一般文字链接颜色。 （默认为蓝色） alink =“#FF0000“ 设定鼠标刚按下时文字颜色。 vlink =“#0000FF“ 设定链接访问后的颜色。 （被点击过） 。 background =“bg1.gif“ 设定背景图片。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。 bgcolor =“#FF

13、FFFF“ 设定背景颜色。当己设定背景图片时会失去作用，除非图片有透明部分。 leftmargin =2 设置网页的左边距，单位为像素。 只适用于 IE topmargin =2 设置网页的上边距。 只适用于 IE bgproperties =“fixed“ 固定背景图片，当滚动条拖动时背景图片不会跟着滚动。 只适用于 IE 注：标记及参数之字母大小都可以。HTML 语言剖析 字体标记-目录 实体标记与逻辑标记 ：实体标记与逻辑标记的区别：1. 实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。 例如逻辑标记的 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加下划线、粗体或

14、反白等，所以这一节是以它们在 IE 和 NC 中的效果作介绍。 2. 多个实体标记也可有效标示同一语句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。例如两个逻辑标记及同时标示一字句于旧浏览器常失去作用。 实体标记有： Html/Css 语言剖析 紫竹林- 9 - 逻辑标记有： 注：若要求真确的效果当然以实体标记为佳。 ：两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所标示的中文字不会于 Netscape Netvigator 显示粗体效果。 ：这些标记于 Internet Explorer 都产生斜体效果，而只有 于 Netscape Ne

15、tvigator 失去作用。这些标记中只有 较为特别，因为它自身具备换行效果所以不需要在它前面加上标记。 可令每字母有相等宽度且每字母之间的距离稍为加宽。但于 NC 不见得如此。 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。 加上删除线的标记。 令字体加大。 令字体变细。 为下标字， 则为上标字，仅剩的数学标记 ：这些是标题标记，由 至 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。 ： 可以 用于文件的开头部分，即 与 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。 是应用于文件的内文部分，即 与 之间的位置，只影

16、响 所标示的字句，是一个围堵标记。 两标记可同时存在，唯没被 所标示的字句才直接受 所影 响，而 本身亦受 的影响。 的参数设定： 例：我把青春献给你 Html/Css 语言剖析 紫竹林- 10 - face =“Arial“ 设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字 形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator 不会显示此标记 所指明的任何中文字形。 size =“+2“ 设定文字的大小。其值可以是 绝对 或 相对 ， 绝对的意思便是标记自己决定文字的大小，不受 的影响，如 size=“ 5

17、“ 表示其大小便是 5 ， 而 html 内定值为 3，即 size=“ 3 “和没有设定是一样的。 相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size=“ +2 “ 便等同绝 对表示法的 size=“ 5 “，但若已设定 则其实际大小便是 n+2 不 再是 3+2 了。只有绝对表示法。 color =“#008000“ 设定文字的颜色。 #008000 表示绿色 HTML 语言剖析 段落标记-目录； ； ； ； ； ； ； ； ： 为文中不同部份加上说明，方便日后修改。 例： 用作版权声明。 假如你不希望别人使用或复制你的网页，可加上警告字眼。 例： ：称为段落标记。作用：在文字、图、表格之间增加一空白行。 原来是一成对标记，标于一段落的头尾，但从 HTML 2.0 开始己不需要作结尾。的常用参数：如： align =“center“ 可选值：right, left, center。 内定值： align=“ left “