(X)HTML与CSS.doc

(X)HTML与CSS本文由小生_花贡献 ppt文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。 (X)HTML&CSS 本章结构 (x)HTML ? CSS ? Web标准化布局 (x)HTML HTML语言背景知识 ? HTML的定义 ? XHTML语言 HTML语言背景知识 1982 年，Tim Berners-Lee 为使世界各地的物理学家能够方便的进行 合作研究，建立了使用于其系统的 HTML。Tim Berners-Lee 设计的 HTML 以纯文本格式为基础，可以任何文本编辑器处理，最初仅有少量标记（TAG） 而易于掌握运用。随着 HTML 使用率的增加，人们不满足只能看到文字。 1993 年，还是大学生的 Marc Andreessen 在他的 Mosaic 浏览器加入 标记，从此可以在 Web 页面上浏览图片。但人们认为仅有图片还是不够，希 望可将任何形式的媒体加到网页上。因此 HTML 不断地扩充和发展。 HTML的定义 HTML是Hypertext Mark-up Language （超文本标记语言）的缩写 - 超（Hyper）是相对于线性（linear）来说的。早些时候，那时计算机程 ） 序还是线形运行的：当计算机程序执行完一个动作以后，转向下一行， 这行结束后，继续下移，依次类推。但HTML则不同，你可以在任何时候 跳转到任何地方。 - 文本（Text）意味着是自解释的（self-explanatory）。 文本（ ） - 标签（Markup）指的是你怎么处理文本。对文本作标记的方式，跟你在 标签（ ） 文本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。 - 语言（Language）。HTML就是一种语言，它使用了许多英文单词。 语言（ ） HTML是由标签(元素)组成的纯文本,由浏览器解释成超文 本的语言。 XHTML XHTML 是更严谨更纯净的 HTML 版本。 - XHTML 指可扩展超文本标签语言（eXtensible Hyper Text Markup Language）。 - XHTML 的目标是取代 HTML。 - XHTML 与 HTML 4.01 几乎是相同的。 - XHTML 是更严格更纯净的 HTML 版本。 - XHTML 是作为一种 XML 应用被重新定义的 HTML。 - XHTML 是一个 W3C 标准。 XHTML与HTML的不同 ? ? ? ? ? XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素 XHTML所有的属性必须要有值 XHTML属性的值必须用引号定界 XHTML的结构 HTML(根) - DOCTYPE - Head - Body DOCTYPE DTD 规定了使用通用标记语言(SGML)的网 页的语法。 ? 存在三种XHTML文档类型 - STRICT（严格类型） - TRANSITIONAL（过渡类型） - FRAMESET（框架类型） Head 用来声明XHTML的头文件部分，通常会包 括标题(title),外部文件(link),外部脚本(Script) 和META等几个部分。在HEAD中声明的标 签通常不会出现在网页中。 Body 网页的正文部分 HTML中的注释与特殊字符 HTML文档中的注释 - - 注释的内容浏览器不会显示，只起到提示作用 - 中不能嵌套 HTML文档中的符号和特殊字符 - 以&开头，以分号(;)结尾 HTML标签的学习 ? ? ? ? 基本标签 表格标签 表单标签 头元素 其他标签 基本标签 标题标签 到 - 定义标题，我们可以使用从 到 这几 个标签，它们对应的终止标签分别为到 ，其中 到 字号顺序减小，重要 性也逐渐降低。通常浏览器将在标题的上面和 下面自动各空出一行距离。 段落标签 - 定义段落使用 和，在 和之间的 内容会被识别为一个段落，它就类似我们通常 所说的一个自然段。与标题类似，浏览器 也会在段落的开始之前和结束之后各加一行空 白。 基本标签 换行标签 - 当我们在想另起一行书写文字却又不希望另起 一个自然段的时候，我们就可以应用 标 签了。 标签也是一个空标签，需要加上 一个/以符合XHTML的要求。 水平分割线标签 - 实现水平分割线的标签是 。和 标签 一样， 也是一个空标签，为了遵守XHTML 的规则，需要加上一个/。 基本标签 ? ? ? ? ? ? ? ? 粗体显示 斜体显示 加下划线显示 建立一个下标 建立一个上标 显示打字机风格的字体 显示引用方式的字体 显示需要强调的文本（通常是斜粗体） 显示加重文本（通常是黑体加粗体 基本标签 超级链接标签 - 页面 上将要显示的文字或者图片等 - 绝对路径和相对路径 绝对路径 - 绝对路径(absolute path)指带域名的文件的完整路径。 - 假设你注册了域名，并申请了虚拟主机， 你的虚拟主机提供商会给你一个目录，比如www，这个 www就是你网站的根目录。 - 假设你在www根目录下放了一个文件index.html，这个文 件的绝对路径就是： /index.html。 - 假设你在www根目录下建了一个目录叫img，然后在该目 录下放了一个文件index.html，这个文件的绝对路径就是 /img/index.html。 基本标签 - 相对路径 同目录 - 如果源文件和引用文件在同一个目录里，直接写引用文件 名即可。 上级目录 - ./表示源文件所在目录的上一级目录，././表示源文件所 在目录的上上级目录，以此类推 下级目录 - 引用下级目录的文件，直接写下级目录文件的路径即可 基本标签 无序列表（项目列表） 无序列表（项目列表） - 创建一个标有数字 的列表 - 创建标有数字的列表 - 创建标有圆点的列表 - 创建列表项 - 只能在 或 中间 基本标签 用来对文本进行预格式化 - 浏览器显示网页文件中的文本时，会忽略多余 空格和换行 - 标签会阻止浏览器上面的行为 - 预格式化标签中不能使用插入图片，也 不能使用来插入ActiveX控件或Java小 程序(Java applet) 课堂实例 基本标签 图片标签 图片标签 - 标签用于在网页里插入图片。标 签有一个必需的属性src，它的属性值就是图 片的地址。 - 属性 border -图片的边框 - 属性 alt-图片的说明性文字 HTML标签的学习 ? ? ? ? 基本标签 表格标签 表单标签 头元素 其他标签 表格标签 关于表格 - 在CSS流行之前，table被广泛应用于定位。在 XHTML中，table不被推荐用来定位，W3C希 望CSS可以取代 在定位方面的地位。 表格标签 表格标签 - 在XHTML中，创建表格的标签是 ，书 写代码时，我们要先用 标签将表格分成一 行一行，再用标签把每行分成一格一格。 表格标签 的属性 - border：表格的边框。 为0表示没有边框。 - cellspacing：单元格间距。当一个表格有多个 单元格时，各单元格的距离就是cellspacing. - cellpadding：单元格边距。指该单元格里的内 容与cellspacing区域的距离 - width：表格的宽度。 - summary：表格的概述。相当于图片的alt属性 表格标签 colspan和rowspan这两个属性用于创建特 殊的表格。 ? colspan是column span（跨列）的缩 写。colspan属性用在标签中，用来指 定单元格横向跨越的列数 ? rowspan的作用是指定单元格纵向跨越的行 数。 ? 设置表格标题 (HTML4.01标准要求其必须紧跟在 标签后) 表格标签 Thead,tbody,tfoot - 可以将所有列标题放在THEAD元素中，这样就 可以对这个区域单独地应用样式。 - 如果选择使用THEAD或TFOOT，那么必须至 少使用一个TBODY元素。 - THEAD和TFOOT在一个表中只用一次，但 TBODY可以多个 - 如果使用了THEAD，请不要使用TD标签而是 TH HTML标签的学习 ? ? ? ? 基本标签 表格标签 表单标签 头元素 其他标签 表单标签 表单在Web网页中用来给访问者填写信息， 从而能获得用户信息，使网页具有交互的 功能。 表单标签 - 用来创建一个表单，即定义表单的开始和结束 位置，在标志对之间的一切都属于表单的内容。 常用属性： - action属性，指定处理程序的程序名(URL地址) 例如： - method属性，指定处理程序从表单中获得信息 的方式，值为GET或POST GET方式是处理程序从当前HTML文档中获取数据， 但这种方式传送的数据量有限制，一般限制在1KB 以下。 ? POST方式与GET方式相反，是当前的HTML文档把 数据传送给处理程序，传送的数据量要比使用GET 表单标签 - 定义一个用户输入区，不同的type值决定输入 区的类别 表单标签 公共属性： - name属性，设定输入区域的名字，唯一 - id属性，设定输入区域的名字，唯一 - value属性，指定输入区域的缺省值 - 标志对用来创建一个下拉列表框或可以复选的列表 框，用于 标签中 ? 常用属性： - multiple属性，值同属性名相等，设置为多选框 - name/id属性，设置列表框的名字 - size属性，设置列表的高度，缺省时值为1，若没有设置 multiple属性，显示的将是一个弹出式的列表框 表单标签 - 标签用来指定列表框中的一个选项，放在 标签之间 ? 常用属性： - selected属性，指定默认的选项 - value属性，为选项赋值 表单标签 - 创建一个可以输入多行的文本框，此标签用于 标签之间 - 常用属性： cols属性，设置文本框的列数 ? rows属性，设置文本框的行数 ? 列与行是以字符数为单位的 表单标签 标签 - 对输入区的用途进行提示，并能提供快捷键访 问 - 常用属性： for属性，指定快捷键作用于的表单字段元素，设置 值须与某个表单字段的id值相同 ? accesskey属性，指定作用于for属性对应的表单字 段的快捷键：Alt键+指定快捷键 HTML标签的学习 ? ? ? ? 基本标签 表格标签 表单标签 头元素 其他标签 头元素 标签 - 定义当前文档和另一个文档或资源之间的关系 - 只能应用于文档的开头部分，即 之间 - 常用属性： REL属性和REV属性，定义LINK所链接的两个资源 之间的关系类型，两者必选其一 头元素 标签 - 通常应用于文件的开头部分，即 之间。 - 有两类标签，用不同的属性划分， name和http-equiv，都和属性content一起使用 - name属性，在页面中加入描述信息(关键字、 描述等) HTML标签的学习 ? ? ? ? 基本标签 表格标签 表单标签 头元素 其他标签 分区标签 区域标签 - 定义一个区域，用于整体设置属性和动作 - Div和div之间是分行显示,也就意味着div是块级 元素(block)。 - 常和CSS样式表一起工作 标签 - 本身没有意义，专门用于CSS (Cascading Style Sheets，层叠样式表)，用来在同一行文 本中选取一个片断。 - Span和span之间不分行显示,我们称为行内元 素(inline)。 本章结构 (x)HTML ? CSS ? Web标准化布局 CSS ? ? ? ? ? 什么是CSS(层叠样式表) CSS的几种设置方式 CSS的选择器 样式规则的注释与有效范围 样式属性详解 CSS专有属性 什么是CSS(层叠样式表) CSS是Cascading Style Sheets(层叠样式 表)的简称，作为HTML的补充定制和改善 网页的显示效果 ? CSS的作用 - 精确定位网页上的元素 - 实现内容和格式控制的分离 简化网页的格式代码 ? 易于改变整个站点的风格特色 示例：淘宝网1、淘宝网2 CSS的几种设置方式 行内样式表(inline style sheets) - 样式可以使用style属性内联。style属性可以 应用于任意body元素(包括body本身)，除了 basefont、param和script。这个属性将任何 数量的CSS声明当作自己的值，而每个声明用 分号隔开。 示例 - 这段的样 式是红色的 CSS的几种设置方式 嵌入样式表(embedded style sheets) -使用style元素在文档中嵌入，style元素放在文档的head部分。 -type属性，可选，text/css，指定其为样式表 示例 古老的浏览器不能识别标签，会显示中间的内容， 所以提倡用包括起来 CSS的几种设置方式 标签中定义的样式规则的基 本格式： 选择器 属性名:属性值; 属性名1:属性值1; . 属性名n:属性值n; 通常用于控制当前这一个页面的风格 CSS的几种设置方式 外部样式表(linked style sheets) - 一个外部的样式表(.css文件)可通过HTML的 link元素连接到HTML文档中 - - css样式表文件格式与嵌入样式表的格式一样 通常用于控制多个页面，或者控制整个站 点的CSS样式表。 CSS的选择器 HTML选择器 - 用来重新定义页面当中，某个HTML标签的格式 类选择器(class) - 声明时，用点打头。调用时，不需要写点。名字可以自定义，但 是不建议用数字开头。类可以被任何HTML标签所调用。 - HTML选择器和类同时使用表示，调用了该类的HTML元素 - 如h1.mya 是指调用了mya这个类的所有h1标签 ID选择器(id) - 声明时，用#打头。调用时，不需要写#。基本使用方法同类，区 别在于，类可以在一个页面中，由多个标签，多次引用。而ID在 一个页面只允许被调用一次。 CSS的选择器 伪类选择器 - a:link - a:visited - a:active 的状态 - a:hover 态 = 表示超链接未点击状态 = 表示超链接点击之后的状态 = 表示超链接在鼠标按下一刹那 = 表示鼠标悬停在超链接上的状 * 表示所有的选择器 ? 空格表示嵌套选择器 ? 逗号表示并列关系 样式规则的注释与有效范围 - 样式表中的注释 - 格式：/* 注释内容 */ - 注释不能嵌套 样式规则的优先级 - 规则1：从上到下，从总体到局部，优先级升 高 - 规则2：ID选择器CLASS选择器HTML标 签选择器 - 规则3：内联样式表嵌入样式表链接样式 表 - 规则可以用指定的! important 特指为重要的。 CSS样式属性详解 盒子 样式属性详解 大体包括字体、背景、文本、位置、布局、边缘、列表、其他等几类。 大体包括字体、背景、文本、位置、布局、边缘、列表、其他等几类。 字体 - font-family 设置字体系列，用逗号分开，例如：P font-family: New Century Schoolbook, Times, serif - font-size 设置字体大小，可使用数字和度量单位来设置字体大小， 也可使用相对的字体大小，还可以使用绝对的大小标记符 - 绝对大小：xx-small | x-small | small | medium | large | x-large | xx-large - 相对大小：larger或smaller - 数字或单位：px像素、pt磅(1/72英寸)、em当前字体的原始大小 的比例值，ex字母x的显示高度、%当前字体原始大小的百分比等 样式属性详解 - font-style 设置字体风格，normal (普通)， italic (斜体) 或oblique (倾斜)。 - text-decoration设置文本效果，none、 underline(下划线)、overline(上划线)、linethrough(中划线)、blink(闪烁效果，只能在 Navigator中看到效果)等，同时设置多个值时 用空格分开 - font-weight 指定粗体字的磅值。normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900，normal等同400，bold ， 等同700 - font-variant字体变形 字体变形属性决定了字体的显示是 字体变形 normal (普通) 还是small-caps (小型大写字 样式属性详解 text-transform 设置关于字母大小写转换的 属性，capitalize(单词首字母大写)、 uppercase(所有大写)、lowercase(所有小 写)、none(不转换)。 ? color 定义文本颜色，3种表示方法： #RRGGBB、rgb(R,G,B)、CSS内定的颜色 名称。 ? font 字体设置的整体定义，允许值 | | ? / ? 例如：P font: italic bold 12pt/14pt Times, 样式属性详解 背景 - background-color设定一个元素的背景颜色， 例如： BODY background-color: white H1 background-color: #000080 - background-image设定一个元素的背景图象 BODY background-image: url(/images/foo.gif) P background-image: url(/1.jpg) - background-repeat决定一个指定的背景图象如 何被重复。值为repeat-x时，图象横向重复， 为 当值为repeat-y时图象纵向重复。 - background-attachment指定背景图象是否跟随 样式属性详解 background-position指定背景图象的初始位置。 ? 允许值: | 1,2 | top | center | bottom 允许值 | left | center | right 关键字解释如下: - - - - - - - - - top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% 样式属性详解 - background背景属性的略写，例如： TABLE background: #0c0 url(leaves.jpg) norepeat bottom right 文本 - word-spacing 设置单词之间的间距 - P EM word-spacing: 0.4em - P.note word-spacing: -0.2em - letter-spacing 设置字符之间的间距 - vertical-align 设置内部元素的纵向位置， baseline | sub | super | top | text-top | middle | bottom | text-bottom | 样式属性详解 - text-align 排列块级元素的文本，left | right | center | justify(两端对齐) - text-indent 设置块级元素的文本缩进(第一行)。 - white-space 设置如何处理元素内的空白符， normal将空白符全部压缩、pre类似 标签 处理、nowrap定义只遇到 才换行 - line-height 设置文本所在行的行高，精确值或 百分比 位置 - 定义元素的位置，是CSS-P(Cascading Style Sheets Positioning)中的内容，是CSS的一个 样式属性详解 - position 设置对象的定位方式，absolute绝对定 位、relative相对定位和static无特殊定位(默认) - left 设置元素左边的水平位置 - top 设置元素顶部的垂直位置 - width 设置元素显示的宽度 - height 设置元素显示的高度 - z-index 发生堆叠的各元素的层叠顺序，整数值， 大的在上边，没有设置的相当于0 - 常用 标签定义层，来操作一组 HTML元素 样式属性详解 布局 - visibility 设定元素的可见状态，inherit继承父层 的显示属性、visible显示和hidden隐藏元素 - display 设定元素的显示状态，block元素前后 都有换行、inline元素前后都不会换行、listitem在block基础上增加了目录列表项标号和 none不显示元素 - visibility属性设置的隐藏元素仍占据浏览器相应 的位置，而display设置的不显示元素会被浏览 器忽略 - clip 定义使用绝对定位的元素的可视区域，属 性值为一个矩形rect，例如：clip:rect(top, right, bottom, left)每个值是相对于被剪辑元素左上角 样式属性详解 overflow 设置元素内容超过元素大小时的处理方式， visible增加元素显示的大小、hidden保持元素显示大小、 scroll总是显示滚动条和auto只是在内容超出元素大小的 时候显示滚动条 ? float 定义网页中其它文本如何环绕该元素，left文本在左 边、right文本在右边和none两边不允许有文本 ? clear 控制是否允许其他对象漂浮在元素的旁边，left不允 许左边有，元素会移动到左边元素的下方；right不允许右 边有，元素会移动到右边元素的上方；none允许两边都有； both不允许浮动对象 ? page-break-before 设置打印该元素前是否强制分页， always强制分页 ? page-break-after 设置打印该元素后是否强制分页， always强制分页 样式属性详解 边缘 - 元素边界的矩形区域的特性，由top、right、 bottom和left组成，每个部分都有相应的margin、 padding、width、color和sytle属性 - margin类，设置边界元素和其它元素的空隙大 小 - margin-top - margin-right - margin-bottom - margin-left - margin 上右下左的顺序 样式属性详解 padding类，设置元素边界与内部内容的空隙大小 - - - - - padding-top padding-right padding-bottom padding-left padding width类，设置元素边框的宽度，thin | medium | thick | - - - - - border-top-width border-right-width border-bottom-width border-left-width border-width用一到四个值来设置元素的边界，值是一个关键字或 长度。不允许使用负值长度。如果四个值都给出了，它们分别应 用于上、右、下和左边框的式样。如果给出一个值，它将被运用 到各边上。如果两个或三个值给出了，省略了的值与对边相等。 样式属性详解 color类，设置元素边框的颜色 - border-top-color - border-right-color - border-bottom-color - border-left-color - border-color 样式属性详解 style类，设置元素边框的样式none无 | dotted点线 | dashed虚线 | solid实线 | double双线 | groove凹槽 | ridge 凸槽 | inset凹边 | outset凸边，等 - - - - - - - - - - - border-top-style border-right-style border-bottom-style border-left-style border-style 按边框类型，宽度、样式和颜色的缩写 border-top border-right border-bottom border-left border 样式属性详解 列表 - list-style-type属性，disc实心圆 | circle空心圆 | square方块 | decimal阿拉伯数字 | lower-roman小写罗马数字 | upper-roman大 写罗马数字 | lower-alpha小写英文 | upper-alpha大写英文 | none 无项目符号 - list-style-image属性，设置用作列表项标记的图像，URL值，例如： UL.check list-style-image: url(/LI-markers/checkmark.gif) - list-style-position属性，inside内部 | outside外部(缺省)。整个属性 决定关于目录项的标记应放在那里。如果使用inside值，换行会 移到标记下，而不是缩进。 - 例如： Outside rendering: ? * List item 1 ? second line of list item ? Inside rendering: ? * List item 1 ? second line of list item 样式属性详解 其它 - cursor属性，设置鼠标移动到某个元素上的形 状，hand手型、crosshair十型、textI型、 wait等待、default默认、help帮助、e-resize东 箭头、ne-resize东北箭头、n-resize北箭头、 nw-resize西北箭头、w-resize西箭头、swresize西南箭头、s-resize南箭头、se-resize东 南箭头和auto自动。 CSS专有属性 语法： - text-shadow : color | length | length | opacity 取值： - color : 指定颜色。 - length : 由浮点数字和单位标识符组成的长度值。可为负值。 指定阴影的水平延伸距离。 - length : 由浮点数字和单位标识符组成的长度值。可为负值。 指定阴影的垂直延伸距离。 - opacity : 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 支持： - CSS2.0; CSS专有属性 Outline:外边框 - 基本属性同border - 例：poutline: double 5px green; - 支持：opera firefox border-collapse - 语法： border-collapse : separate | collapse - 取值： separate : ? collapse : 默认值。边框独立（标准HTML） 相邻边被合并 - 支持： 仅针对IE5.5以上 CSS专有属性 滚动条：(Scroll-bar) - 语法： scrollbar-3dlight-color : color - 说明： 设置或检索滚动条亮边框颜色。 - 语法： scrollbar-highlight-color : color - 说明： 设置或检索滚动条3D界面的亮边(ThreedHighlight) 颜色 CSS专有属性 - 语法： scrollbar-face-color : color - 说明： 设置或检索滚动条3D表面(ThreedFace)的颜色。 - 语法： Scrollbar-arrow-color : color - 说明： 设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时，此属 性失效。 - 语法： scrollbar-shadow-color : color - 说明： 设置或检索滚动条3D界面的暗边(ThreedShadow)颜色。 CSS专有属性 - 语法： scrollbar-darkshadow-color : color - 说明： 设置或检索滚动条暗边框(ThreedDarkShadow)颜色。 - 语法： 语法： scrollbar-base-color : color - 说明： 说明： 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。 - 语法： scrollbar-track-color : color - 说明： 设置或检索滚动条的拖动区域(TrackBar)颜色。 - 仅支持IE5.5以上 注：若设置页面滚动条选择器应为html. CSS专有属性 Writing-mode:tb-rl; 本章结构 (x)HTML ? CSS ? Web标准化布局 Web标准化布局 ? ? ? ? ? 网页前台构成要素 Web标准化布局定义 网页中一般布局类型 网页中常用元素的CSS CSS的浏览器兼容性问题 实例 网页前台构成要素 结构 - 用于构成网页的基本内容，比如文本，图片，FLASH - Xhtml 表现 - 用于表现网页的外观，如文本的对齐方式，颜色，大小，修饰性的图片。 - CSS 行为 - 网页同用户之间的交互，如表单的提交，网页的特效，cookie的判断等。 - ECMA Script(JavaScript，AJAX，VBScript，ActionScript)。 Web标准化布局定