笔记(持续更新中)教程.doc

第一节：走进html 1.什么是html？用什么工具开发？（一般）html是一种标记语言，不是编程语言，描述网页的语言。我们一般用webstrom.(智能补全，代码提示，自动保存)2.基本标签段落p/p 标题h1/h1------h6/h6斜体em/em 字加粗strong/strong(单标签) 换行br/ 水平hr/3.图片格式 (jpg gif bmp png) img src=图片路径 alt=/ (注：图片路径可为绝对路径、相对路径) alt的作用：当图片不能正常显示，为图片提示文字。4.超链接 a href=链接地址 target=目标窗口位置文本或图片/a （注：链接地址可为绝对路径、相对路径） 应用： 页面间的链接A页到B页的链接 锚链接跳至自身固定位置或A页跳至B页固定位??? 功能性链接电子邮箱、QQ、MSN等链接。（例如：a href=”mailto：邮箱地址”/a） 5.特殊字符与注释 空格：nbsp; 大于号：gt; 小于号：lt; 引号：quot; 版权符号：copy; Html注释：--注释内容— css注释：/* 注释内容 */ 第二节：Css 什么是Css？ 层叠样式表（Cascading style sheet）优势：内容、表现分离 网页表现 统一、易修改 减少代码量，加快浏览速度 丰富样式，使页面布局更加灵活。 选择器 标签选择器：选择器和标签一致、 类选择器：以点开头 ID选择器：以#号开头 （颜色可用单词，也可用十六进制RGB） 怎么用： 内部样式：eg:style/style 内联样式 ：eg:p style=””/p 外部样式：建个文件 谁用谁引用，用link标签 优先级 ID选择器类选择器标签选择器 内联样式内部样式外部样式 链接式与导入式区别 link/标签属于XHTML，@import属于css2.1 使用link/链接的css文件先加载到网页中，再编译显示。 使用@improt导入的css文件，客户端显示HTML结构，再把css文件加载到网页中。 @import属于CSS2.1特有，对于不兼容css2.1的浏览器来说是无效的。 第三节 文本样式 font(字体) font-style eg：“italic” font-weight：“bold” font-size eg：“大小” font-family(类型) eg：“隶书” 注：Css文件中设置的中文类型不起作用，怎么解决？（Css文件设置编码格式为UTF-8） 如果页面中有英文，还有中文，英文在前，中文在后。（eg:font-family=”carsive”,”微软雅黑”） text(文本) color:”red” text-align：left center right (文本对齐方式) text-indent: (首行缩进) line-height:（行高） text-decoration(文本装饰)｛none line-through underline｝ letter-spacing（字符间距） 3.语法：标签名：伪类名｛声明｝ a:link{} (未单击访问时超链接样式) a:visited{} （单击访问后链接样式） a:hover{} (鼠标放上去，超链接变化) a:active{} (单击未放开时超链接样式) 在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。 4．Css设置鼠标形状 cursor: default Default(默认光标) text(指示文本) pointer(指针变小手) crosshair(呈现十字状) wait(等待) help（帮助） 块元素与行元素区别 span不独占一行，p独占一行（我们就认为span为行内元素，p为块元素） 块元素可设置宽高,而行元素设置宽高不起作用 背景（background） 背景色（background-color） 背景图像路径：background-image:url() 重复方式：background-repeat:no-repeat 背景位置：background-position:center center; 背景大小：background-size:10px 20px; 列表与表格 无序列表 ulli/li/ul 有序列表 olli/li/ol 自定义列表 dldt/dtdd/dd/dl 4.(重点) list-style-type list-style-image list-st