WEB WEB------------------------------------------------------------------------------------------------------------------------ 1 Day01 --------------------------------------------------------------------------------------------------------------- 1 1、html 基础----------------------------------------------------------------------------------------------- 1 2、主要标记 ----------------------------------------------------------------------------------------------- 2 (1)链接 ------------------------------------------------------------------------------------------------ 2 (2)表格 ------------------------------------------------------------------------------------------------ 3 (3)表单 ------------------------------------------------------------------------------------------------ 3 Day02 --------------------------------------------------------------------------------------------------------------- 5 css ------------------------------------------------------------------------------------------------------------- 5 1、什么是 css? ------------------------------------------------------------------------------------- 5 2、css 的基本语法 -------------------------------------------------------------------------------- 5 3、选择器 -------------------------------------------------------------------------------------------- 5 4, 样式的优先级 ----------------------------------------------------------------------------------- 6 5、样式的继承 ------------------------------------------------------------------------------------- 6 6,常用的属性 ------------------------------------------------------------------------------------- 6 Day01 1、html 基础 (1)什么是 html(hypertext markup language)? 制作网页的标记语言。 特点: a,以.html 或.htm 结尾来保存。 b,由浏览器解释执行。 c,大小写不敏感 d,容错性好 (2)w3c 推荐的网页设计标准 数据与结构: html 文件。 外观:样式文件(css 文件)。 行为:ECMAscript 文件(javasript 文件)。 (3)主要的浏览器 ie,firefox,chrome,safari,opera (4)html 文件的基本结构 标题 2、主要标记 (1)链接 a,基本用法 clickMe href:指定点击链接之后,跳转的地址。 target: "_self":在当前窗口中打开。 "_blank":在新的窗口中打开。 b,使用图形作为链接 其中,img 标记,src 指定图片的地址(地址不一定 是一张图片,可能是一个程序的地址,由程序来 生成相应的图片)。 c,使用热点(使用图形的某个区域作为链接) step1 使用 map 标记定义热点 step2 在图形标记当中,使用热点来划分区域。 d,使用锚点(在页面内部跳转) step1 定义一个锚点 top info... step2 使用锚点来跳转 to top e,发送邮件 给我发邮件 f,链接的伪样式 (2)表格 a,基本用法
cellpadding:单元格内部的数据与单元格之间的空隙。 cellspacing:单元格之间的空隙。 b,居中 水平居中: align(left,right,center) 垂直居中:valign(top,middle,bottom) c,单元格的合并 colspan:水平方向合并 rowspan:垂直方向合并 d,表格可以嵌套 td 的内容又是一个表格 e,表格的完整结构
标题
thead,tfoot:出现 0/1 次。 tbody:出现 1 次或多次 习惯上先写 thead,然后是 tfoot,最后是 tbody。 (3)表单 a,什么表单 用于收集用户的数据,并提交给服务器来处理。 b,表单属性
action:服务器端的一个程序的地址, 用于处理表单数据。 method:表单提交的方式。 c,常见表单元素 input 标记: 1)文本输入框: 其中 name 决定了浏览器是否将文本输入的内容提交 给服务器。value 设置缺省值。 2)提交按钮: 3)重置按钮: 4)密码输入框: 5)单选框: 其中,checked 设置缺省值。 6)多选框: 7)上传文件: 8)隐藏域: 非 input 标记 1)多行文本输入框: 2)下拉列表 可以给 select 添加一个"multiple=multiple", 此时,下拉列表可以当作多选框去用。 Day02 css 1、什么是 css? cascading stylesheet(级联样式表)。为网页提供 外观(也就是,网页的表现形式)。将网页的外观 写在一个 css 文件里,方便页面代码的维护(将 表现与数据分离)。 2、css 的基本语法 选择器{ 属性 1:属性值 1; ... 属性 n:属性值 n; } 符合选择器要求的标记,会添加对应的样式。 3、选择器 1)标记选择器(简单选择器) body{ font-size:30px; } 2) class 选择器 .s1{ font-size:60px; } 对 class 属性值匹配的标记起作用。 p.s2{ font-size:90px; } 只针对 p 标记,并且 class 属性值是 s2。 3) id 选择器 #d1{ width:200px; height:200px; background-color:red; } 只针对 id 属性值为 d1 的标记起作用。 注意,在同一个 html 文件当中,所有的标记的 id 属性值必须唯一。 4) 选择器的派生 #d2 p{ font-size:120px; } id 属性值是 d2,并且,在该标记下有一个子标记是 p。对 p 中的内容起作用。 5)选择器的分组 h1,h2,h3{ font-size:160px; } 对 h1,h2,h3 三个标记都起作用。 4, 样式的优先级 内联样式(即在标记里面,使用 style 属性定义的样式) 内部样式(即在 html 文件里,使用 style 标记定义的样式) 外部样式(即在.css 文件里定义的样式) 默认样式(浏览器提供的) 优先级从上外下,越来越低。 5、样式的继承 子标记会继承父标记的样式。 6,常用的属性 1)文本 font-size: 30px; //字体大小 color:red; //颜色 font-family: "宋体"; //字体 font-weight: 900; //粗细 text-align: right/center/left;//水平对齐 line-height: 30px;//行高 2)定位 width:200px; //宽度 height:200px;//高度 margin://外边距 margin-left: 200px; margin-right:100px; margin-bottom:80px; margin-top:60px; 也可以简化为: margin: 60px 100px 80px 200px; //顶,右,底,左 margin: 20px auto; //上,下 20px,左右居中。 padding://内边距 padding-left:100px; padding-right:80px; padding-bottom:60px; padding-top:40px; padding: 40px 80px 60px 100px;//顶,右,底,左 内边距会将父标记撑开。 块标记与行内标记: 块标记: 需要另起一行的标记。 div,img,p,form,table,ul,li,h1, 行内标记: 不需要另起一行,从左到右摆放。 , 3)背景 background-color:red;//背景颜色 background-image: url(t1.jpg);//背景图片 background-repeat: no-repeat/repeat-x/repeat-y; background-position: 20px 40px;//水平 垂直, //为负数,表示水平方向向左,垂直方向向上。 background-attachment: fixed/scroll(缺省);//依附方式 //没有平铺,水平平铺,垂直平铺 也可以简化为 background: 背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置 比如: background: url(nane.gif) no-repeat fixed 20px 40px; 4)边框 border: 1px solid red; //宽度、类型、颜色 border-left:1px solid red; border-right:1px solid red; border-bottom:1px solid red; border-top:1px solid red; 5)列表 list-style-type:none;//除掉列表的项目符号 6)浮动 取消标记独占一行的特性。 float: left/right; clear: both; //取消浮动 7)链接的伪样式 a:link { color: red} 没有访问时 a:visited { color: blue} 访问后 a:active { color: lime} 鼠标点击但还没有放开时 a:hover { color: aqua} 鼠标指向时
还剩6页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

shijiamoni

贡献于2012-08-09

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!