(X)HTML与CSS.ppt

X HTML CSS 本章结构 x HTMLCSSWeb标准化布局 x HTML HTML语言背景知识HTML的定义XHTML语言 HTML语言背景知识 1982年 TimBerners Lee为使世界各地的物理学家能够方便的进行合作研究 建立了使用于其系统的HTML TimBerners Lee设计的HTML以纯文本格式为基础 可以任何文本编辑器处理 最初仅有少量标记 TAG 而易于掌握运用 随着HTML使用率的增加 人们不满足只能看到文字 1993年 还是大学生的MarcAndreessen在他的Mosaic浏览器加入标记 从此可以在Web页面上浏览图片 但人们认为仅有图片还是不够 希望可将任何形式的媒体加到网页上 因此HTML不断地扩充和发展 HTML的定义 HTML是 HypertextMark upLanguage 超文本标记语言 的缩写超 Hyper 是相对于线性 linear 来说的 早些时候 那时计算机程序还是线形运行的 当计算机程序执行完一个动作以后 转向下一行 这行结束后 继续下移 依次类推 但HTML则不同 你可以在任何时候跳转到任何地方 文本 Text 意味着是自解释的 self explanatory 标签 Markup 指的是你怎么处理文本 对文本作标记的方式 跟你在文本编辑程序里将文本加粗 或者将一行话设为标题或列表项目类似 语言 Language HTML就是一种语言 它使用了许多英文单词 HTML是由标签 元素 组成的纯文本 由浏览器解释成超文本的语言 XHTML XHTML是更严谨更纯净的HTML版本 XHTML指可扩展超文本标签语言 eXtensibleHyperTextMarkupLanguage XHTML的目标是取代HTML XHTML与HTML4 01几乎是相同的 XHTML是更严格更纯净的HTML版本 XHTML是作为一种XML应用被重新定义的HTML XHTML是一个W3C标准 XHTML与HTML的不同 XHTML元素必须被正确地嵌套 XHTML元素必须被关闭 标签名必须用小写字母 XHTML文档必须拥有根元素XHTML所有的属性必须要有值XHTML属性的值必须用引号定界 XHTML的结构 HTML 根 DOCTYPEHeadBody DOCTYPE DTD规定了使用通用标记语言 SGML 的网页的语法 存在三种XHTML文档类型STRICT 严格类型 TRANSITIONAL 过渡类型 FRAMESET 框架类型 Head 用来声明XHTML的头文件部分 通常会包括标题 title 外部文件 link 外部脚本 Script 和META等几个部分 在HEAD中声明的标签通常不会出现在网页中 Body 网页的正文部分 HTML中的注释与特殊字符 HTML文档中的注释注释的内容浏览器不会显示 只起到提示作用中不能嵌套HTML文档中的符号和特殊字符以 结尾 HTML标签的学习 基本标签表格标签表单标签头元素其他标签 基本标签 标题标签到定义标题 我们可以使用从到这几个标签 它们对应的终止标签分别为到 其中到字号顺序减小 重要性也逐渐降低 通常浏览器将在标题的上面和下面自动各空出一行距离 段落标签定义段落使用和 在和之间的内容会被识别为一个段落 它就类似我们通常所说的一个 自然段 与标题类似 浏览器也会在段落的开始之前和结束之后各加一行空白 基本标签 换行标签当我们在想另起一行书写文字却又不希望另起一个自然段的时候 我们就可以应用标签了 标签也是一个空标签 需要加上一个 以符合XHTML的要求 水平分割线标签实现水平分割线的标签是 和标签一样 也是一个空标签 为了遵守XHTML的规则 需要加上一个 基本标签 粗体显示斜体显示加下划线显示建立一个下标建立一个上标显示打字机风格的字体显示引用方式的字体显示需要强调的文本 通常是斜粗体 显示加重文本 通常是黑体加粗体 基本标签 超级链接标签页面上将要显示的文字或者图片等绝对路径和相对路径绝对路径绝对路径 absolutepath 指带域名的文件的完整路径 假设你注册了域名www dinghai org 并申请了虚拟主机 你的虚拟主机提供商会给你一个目录 比如www 这个www就是你网站的根目录 假设你在www根目录下放了一个文件index html 这个文件的绝对路径就是 http www dinghai org index html 假设你在www根目录下建了一个目录叫img 然后在该目录下放了一个文件index html 这个文件的绝对路径就是http www dinghai org img index html 基本标签 相对路径同目录如果源文件和引用文件在同一个目录里 直接写引用文件名即可 上级目录 表示源文件所在目录的上一级目录 表示源文件所在目录的上上级目录 以此类推下级目录引用下级目录的文件 直接写下级目录文件的路径即可 基本标签 无序列表 项目列表 创建一个标有数字的列表创建标有数字的列表创建标有圆点的列表创建列表项只能在或中间 基本标签 用来对文本进行预格式化浏览器显示网页文件中的文本时 会忽略多余空格和换行标签会阻止浏览器上面的行为预格式化标签中不能使用插入图片 也不能使用来插入ActiveX控件或Java小程序 Javaapplet 课堂实例 基本标签 图片标签标签用于在网页里插入图片 标签有一个必需的属性 src 它的属性值就是图片的地址 属性 border 图片的边框属性 alt 图片的说明性文字 HTML标签的学习 基本标签表格标签表单标签头元素其他标签 表格标签 关于表格在CSS流行之前 table被广泛应用于定位 在XHTML中 table不被推荐用来定位 W3C希望CSS可以取代在定位方面的地位 表格标签在XHTML中 创建表格的标签是 书写代码时 我们要先用标签将表格分成一行一行 再用标签把每行分成一格一格 表格标签 的属性border 表格的边框 为0表示没有边框 cellspacing 单元格间距 当一个表格有多个单元格时 各单元格的距离就是cellspacing cellpadding 单元格边距 指该单元格里的内容与cellspacing区域的距离width 表格的宽度 summary 表格的概述 相当于图片的alt属性 表格标签 colspan和rowspan这两个属性用于创建特殊的表格 colspan是 columnspan 跨列 的缩写 colspan属性用在标签中 用来指定单元格横向跨越的列数rowspan的作用是指定单元格纵向跨越的行数 设置表格标题 HTML4 01标准要求其必须紧跟在标签后 表格标签 Thead tbody tfoot可以将所有列标题放在THEAD元素中 这样就可以对这个区域单独地应用样式 如果选择使用THEAD或TFOOT 那么必须至少使用一个TBODY元素 THEAD和TFOOT在一个表中只用一次 但TBODY可以多个如果使用了THEAD 请不要使用TD标签而是TH HTML标签的学习 基本标签表格标签表单标签头元素其他标签 表单标签 表单在Web网页中用来给访问者填写信息 从而能获得用户信息 使网页具有交互的功能 表单标签 用来创建一个表单 即定义表单的开始和结束位置 在标志对之间的一切都属于表单的内容 常用属性 action属性 指定处理程序的程序名 URL地址 例如 method属性 指定处理程序从表单中获得信息的方式 值为GET或POSTGET方式是处理程序从当前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 CascadingStyleSheets 层叠样式表 用来在同一行文本中选取一个片断 Span和span之间不分行显示 我们称为行内元素 inline 本章结构 x HTMLCSSWeb标准化布局 CSS 什么是CSS 层叠样式表 CSS的几种设置方式CSS的选择器样式规则的注释与有效范围样式属性详解CSS专有属性 什么是CSS 层叠样式表 CSS是CascadingStyleSheets 层叠样式表 的简称 作为HTML的补充定制和改善网页的显示效果CSS的作用精确定位网页上的元素实现内容和格式控制的分离简化网页的格式代码易于改变整个站点的风格特色示例 淘宝网1 淘宝网2 CSS的几种设置方式 行内样式表 inlinestylesheets 样式可以使用style属性内联 style属性可以应用于任意body元素 包括body本身 除了basefont param和script 这个属性将任何数量的CSS声明当作自己的值 而每个声明用分号隔开 示例这段的样式是红色的 CSS的几种设置方式 嵌入样式表 embeddedstylesheets 使用style元素在文档中嵌入 style元素放在文档的head部分 type属性 可选 text css 指定其为样式表示例古老的浏览器不能识别标签 会显示中间的内容 所以提倡用包括起来 CSS的几种设置方式 标签中定义的样式规则的基本格式 选择器 属性名 属性值 属性名1 属性值1 属性名n 属性值n 通常用于控制当前这一个页面的风格 CSS的几种设置方式 外部样式表 linkedstylesheets 一个外部的样式表 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 表示鼠标悬停在超链接上的状态 表示所有的选择器空格表示嵌套选择器逗号表示并列关系HTML标签名 属性名 属性值 用来选择特定属性值的标签 该选择器为CSS2 0选择器 IE7以上 火狐1以上支持 样式规则的注释与有效范围 样式表中的注释格式 注释内容 注释不能嵌套样式规则的优先级规则1 从上到下 从总体到局部 优先级升高规则2 ID选择器 CLASS选择器 HTML标签选择器规则3 内联样式表 嵌入样式表 链接样式表规则可以用指定的 important特指为重要的 实例 不同的超链接不同的颜色 CSS样式属性详解 盒子 样式属性详解 大体包括字体 背景 文本 位置 布局 边缘 列表 其他等几类 字体font family设置字体系列 用逗号分开 例如 P font family NewCenturySchoolbook 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 上划线 line through 中划线 blink 闪烁效果 只能在Navigator中看到效果 等 同时设置多个值时用空格分开font weight指定粗体字的磅值 normal bold bolder lighter 100 200 300 400 500 600 700 800 900 normal等同400 bold等同700font variant字体变形属性决定了字体的显示是normal 普通 还是small caps 小型大写字母 当文字中所有字母都是大写的时候 小型大写字母 值 会显示比小写字母稍大的大写字符 样式属性详解 text transform设置关于字母大小写转换的属性 capitalize 单词首字母大写 uppercase 所有大写 lowercase 所有小写 none 不转换 color定义文本颜色 3种表示方法 RRGGBB rgb R G B CSS内定的颜色名称 font字体设置的整体定义 允许值 例如 P font italicbold12pt 14ptTimes serif 样式属性详解 背景background color设定一个元素的背景颜色 例如 BODY background color white H1 background color 000080 background image设定一个元素的背景图象BODY background image url images foo gif P background image url 样式属性详解 background position指定背景图象的初始位置 允许值 1 2 top center bottom left center right 关键字解释如下 topleft lefttop 0 0 top topcenter centertop 50 0 righttop topright 100 0 left leftcenter centerleft 0 50 center centercenter 50 50 right rightcenter centerright 100 50 bottomleft leftbottom 0 100 bottom bottomcenter centerbottom 50 100 bottomright rightbottom 100 100 样式属性详解 background背景属性的略写 例如 TABLE background 0c0url leaves jpg no repeatbottomright 文本word spacing设置单词之间的间距PEM 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 CascadingStyleSheetsPositioning 中的内容 是CSS的一个扩展 样式属性详解 position设置对象的定位方式 absolute绝对定位 relative相对定位和static无特殊定位 默认 left设置元素左边的水平位置top设置元素顶部的垂直位置width设置元素显示的宽度height设置元素显示的高度z index发生堆叠的各元素的层叠顺序 整数值 大的在上边 没有设置的相当于0常用标签定义层 来操作一组HTML元素 样式属性详解 布局visibility设定元素的可见状态 inherit继承父层的显示属性 visible显示和hidden隐藏元素display设定元素的显示状态 block元素前后都有换行 inline元素前后都不会换行 list item在block基础上增加了目录列表项标号和none不显示元素visibility属性设置的隐藏元素仍占据浏览器相应的位置 而display设置的不显示元素会被浏览器忽略clip定义使用绝对定位的元素的可视区域 属性值为一个矩形rect 例如 clip rect top right bottom left 每个值是相对于被剪辑元素左上角的位置 为绝对值和相对值 但不能是百分比 也可为auto 默认 样式属性详解 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 topmargin rightmargin bottommargin leftmargin上右下左的顺序 样式属性详解 padding类 设置元素边界与内部内容的空隙大小padding toppadding rightpadding bottompadding leftpaddingwidth类 设置元素边框的宽度 thin medium thick border top widthborder right widthborder bottom widthborder left widthborder width用一到四个值来设置元素的边界 值是一个关键字或长度 不允许使用负值长度 如果四个值都给出了 它们分别应用于上 右 下和左边框的式样 如果给出一个值 它将被运用到各边上 如果两个或三个值给出了 省略了的值与对边相等 样式属性详解 color类 设置元素边框的颜色border top colorborder right colorborder bottom colorborder left colorborder color 样式属性详解 style类 设置元素边框的样式none无 dotted点线 dashed虚线 solid实线 double双线 groove凹槽 ridge凸槽 inset凹边 outset凸边 等border top styleborder right styleborder bottom styleborder left styleborder style按边框类型 宽度 样式和颜色的缩写border topborder rightborder bottomborder leftborder 样式属性详解 列表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值 换行会移到标记下 而不是缩进 例如 Outsiderendering Listitem1secondlineoflistitemInsiderendering Listitem1secondlineoflistitem 样式属性详解 其它cursor属性 设置鼠标移动到某个元素上的形状 hand手型 crosshair 十 型 text I 型 wait等待 default默认 help帮助 e resize东箭头 ne resize东北箭头 n resize北箭头 nw resize西北箭头 w resize西箭头 sw resize西南箭头 s resize南箭头 se resize东南箭头和auto自动 CSS专有属性 语法 text shadow color length length opacity取值 color 指定颜色 length 由浮点数字和单位标识符组成的长度值 可为负值 指定阴影的水平延伸距离 length 由浮点数字和单位标识符组成的长度值 可为负值 指定阴影的垂直延伸距离 opacity 由浮点数字和单位标识符组成的长度值 不可为负值 指定模糊效果的作用距离 如果你仅仅需要模糊效果 将前两个length全部设定为0支持 CSS2 0 CSS专有属性 Outline 外边框基本属性同border例 p outline double5pxgreen 支持 operafirefoxborder collapse语法 border collapse separate collapse取值 separate 默认值 边框独立 标准HTML collapse 相邻边被合并支持 仅针对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 HTMLCSSWeb标准化布局 Web标准化布局 网页前台构成要素Web标准化布局定义网页中一般布局类型网页中常用元素的CSSCSS的浏览器兼容性问题实例 网页前台构成要素 结构用于构成网页的基本内容 比如文本 图片 FLASHXhtml表现用于表现网页的外观 如文本的对齐方式 颜色 大小 修饰性的图片 CSS行为网页同用户之间的交互 如表单的提交 网页的特效 cookie的判断等 ECMAScript JavaScript AJAX VBScript ActionScript Web标准化布局定义 Web标准化布局 div css 结构 表现 行为 三者分开 例 网页中一