HTMLCSS教学.ppt

HTML+CSS 刘胜才 QQ：920540489 Tel常用html标记 table/table div/div form/form frameset/frameset ifram/ifram img/img marquee/marquee a/a table标记 tabletrtd/td/tr/table tr—定义表行，将数据维持在一行 td—定义表元，表格的具体数据 属性：border 边框 Demo:table-demo1.html 属性：colspan跨多列，rowspan跨多行的表元 Demo:table-demo1.html 属性：cellspacing （外边距） cellpadding （内边距） cellspacing-表元间隙设置 cellpadding-表元内部空白设置 Demo:table-demo1.html form标记 input type=“?”/input ?:{radio,text,password,submit,reset,checkbox, image,hidden} input type=“image”/input--创建一个图像控件，该控件单击后将导致表单立即被提交 input type =“hidden”/input--用于隐藏一个表单域，在页面中显示不了，但是在提交到服务器端的时候可以取得表单的数据 textarea name=* rows=** cols=** textarea--可以通过textarea设置一个几行几列的文本区域 Demo:form-demo.html frameset/frameset标记 framesetframe/frame/frameset标记放置在/head和/html之间，不需要再使用body了 Demo:frameset-demo.html frameset属性： framespacing:各窗口间空白区域 frameborder:各窗口的边框 frame属性： noresize:不可调整框架的大小 scrolling：设置滚动条是否显示（yes,no,auto可选） name：标记该窗口，方便响应的内容找到该窗口 Demo:frameset-demo1.html iframe/iframe标记 iframe元素也就是文档中的文档，或者好像浮动的框架(FRAME) img/img标记 图文混排 属性： src:图片的链接 alt:在浏览器尚未完全读入图象时，在图象位置显示的文字。 align:设置图像和文字的对齐方式。{left,middle,right….} vspace:离窗口的垂直距离 hspace:离窗口的水平距离 Demo：image-demo.html marquee/marquee标记 marquee/marquee用于显示会移动的字体 属性： Direction=？-- 移动的方向，{left,right,up,down} Bihavior=？--设置移动的模式，{slide，alternate，scroll} scrollamount=？设置移动的速度 Scrolldelay=？设置移动延时 Demo:marquee-demo.html a标记 属性href:用于链接一个地址 a href=“url”/a a href=“mailto:”/a------发送邮件 伪类： a: hover{}—设置对象在其鼠标悬停时的样式表属性 a: visited{}—链接点击过后的样式 a: link{}—链接未点击时的样子 Demo:a-demo.html CSS样式表历史 自W3C（The World Wide Web Consortium）制定了代号为Cougar的HTML的4.0版本以来，存在于Web页面中的动态效果首次被正式的承认了，W3C把动态超文本（Dynamic HTML）的实现分为了三个部分：脚本、支持动态效果的浏览器和CSS; CSS是Cascading Style Sheet的缩写，有些书上把它译为层叠样式表或级联样式表 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以控制一个或多个页面的外观和格式。它的作用可以达到： 在几乎所有的浏览器上都可以使用。 以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 你可以轻松地控制页面的布局 。 你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网