韩顺平html+css+javascript-----div+css笔记
韩顺平html笔记
HTML一、HTML有关知识点1.html介绍html是一种标记语言，主要的用途是开发网页，使用html可以展现文字、图片、视频、声音，html是我们web开发（网站开发）。
2.html可以做什么➢html可以编写静态网页➢该静态网页可以包括文字、图像、动画、声音、表格、链接。
从而构成一个个漂亮的网页3.Html发展历史4.Html的基本结构5.<html></html>是标记（也叫元素），标记的一般格式：<元素名[属性=“属性值”]>元素内容</标签>如果没有内容可以用：<元素名[属性=“属性值”]/>6.Html实体标记7.Html常用标记➢html超链接<a href=”” target=”_blank”></a>●_blank 新的窗口●_self 本窗口●_parent 父窗口●_top整个浏览器窗口➢html图像元素<img src=”文件路径” width=”宽度” height=”高度”/>➢html表格<table border=”边框宽度” width=”” cellspacing=”空隙大小” cellpadding=”填充大小”> <tr>--用于说明行<td></td>--用于说一小格</tr></table>➢无序列表<ul><li></li><li></li></ul>➢有序列表<ul><li></li><li></li></ul>➢框架<frameset frameborder=”边框的大小” cols=”按照列的百分比分隔” rows=”按照行的比分比分隔”><frame src=”” noresize /></frameset>➢表单元素<from action=”” method=”post/get”>文本框：<input type=”text name=””/>密码框：<input type=”password” name=””/>单选框：<input type=”radio”name=””>复选框：<input type=”checkbox” name=”” checked>checked是指默认选中的隐藏域：<input type=”hidden” name=””>图片按钮：<input type=”image” src=””></from>➢文本域：<textarea cols=”” rows=”” > wrap=off自动换行请在这里写····</textarea>➢下拉菜单：<select name=”” size= > size 是指显示大小<option value=””>-----请选择------</option><option value=”shanghai” selected> 上海</option> selected是指被选中<option value=”beijing”> 北京</option></select>➢<meta http-equiv="content-type" content="text/html " charset="utf-8" />➢<body bgcolor=# text=# alink=# vlink=#>#=rrggbb;这些是16进制的，红绿蓝(red-green-blue,RGB)值来表示<body topmargin=0px leftmargin=0px>➢标尺线：<hr size=>➢<a href=url target=”指向一个frame的名字”>➢文字布局标记●<p align=”#”></p>：表示一段#= left /center/right➢图像：<img src=” ” alt=”提示信息”>➢会移动的文字<marquee direction=”left/right” behavior=”scroll/slide/alternate” loop= 循环的次数scrollamount=速度></marquee>➢多媒体页面<embed src=”文件路径” width= height=></embed>➢背景音乐：<bg src=” ” loop=””>CSS1.div元素是用来HTML文档内大块(block-level)的内容提供结构和背景元素。
韩顺平+轻松搞定网页设计html_DIV_CSS_javascript视频笔记
<html> <head> <title>第一个网页</title> </head> <body> <!-1-><font color=red>hello world</font> color=red></font>来调整字体颜色--> </br> <!-2-><font size=7 color=blue>hello world1</font> size=7></font>来调整字体大小,但是size里面的取值是1—7--> </br> <!-3-><font style="font-size:150px" color=yellow>hello world2</font> <font style="font-size:40px"></font>将字体调整更大--> </br> <!-4-><p><font color=cyan>为字体更换颜色4</font></p> <b> <font color="red">hhhhh</font></b> <!-5-> </body> </html> <!-- 使 用 <font
4.01
Transitional//EN"
<title> New Document </title> </head> <body bgcolor=pink> <a href="right1.html"target="right">青花瓷 1</a></br> <a href="right2.html"target="right">青花瓷 2</a></br> </body> </html> Right1.html <html> <head> <title> New Document </title> </head> <body bgcolor=blue> <p>right1.html</p> </body> </html> Right2.html <html> <head> <title> New Document </title> </head> <body bgcolor=yellow> <p>right2.html</p> </body> </html> 韩顺平 html 第六讲
韩顺平老师全套php精华
韩顺平老师全套php精华播放列表第1讲. 第0讲开山篇第2讲. 第001讲html 介绍html运行原理①第3讲. 第002讲html运行原理② html文件基本结构html元素和属性第4讲. 第003讲符号实体url说明超链接发送电邮第5讲. 第004讲图像表格实际应用-菜谱课堂练习-课程表第6讲. 第005讲无序列表有序列表框架第7讲. 第006讲浮动窗口表单及表单控件①第8讲. 第007讲表单及表单控件②第9讲. 第008讲多媒体页面标签汇总① 地图映射第10讲. 第009讲多标签汇总② 线包字效果测试题第11讲. 第010讲div css开山篇第12讲. 第011讲初识css 类选择器id选择器html选择器第13讲. 第012讲通配符选择器父子选择器第14讲. 第013讲选择器使用细节块元素和行内元素盒子模型盒子模型经典应用①第15讲. 第014讲盒子模型经典应用② 作业布置第16讲. 第015讲div css作业评讲①第17讲. 第016讲div css作业评讲②第18讲. 第017讲div css作业评讲③(1)第19讲. 第018讲浮动第20讲. 第019讲网站推荐定位第21讲. 第020讲仿sohu 首页面布局可爱屋首页面第22讲. 第021讲解答学员问题第23讲. 第022讲可爱屋首页面(浏览器兼容)评讲第24讲. 第023讲动态网页技术介绍php基本介绍第25讲. 第024讲php快速入门bs和cs介绍第26讲. 第025讲web 服务器介绍apache服务器安装第27讲. 第026讲apache 服务器使用及配置① 启动和停止端口配置第28讲. 第027讲apache服务器使用及配置② apache目录结构第29讲. 第028讲apache服务器使用及配置③ apache虚拟目录第30讲. 第029讲apache服务器使用及配置④ apache虚拟主机web访问时序图第31讲. 第030讲apache服务器使用及配置⑤ 作业点评提出apache和php整合的需求第32讲. 第031讲php开发环境的搭建和使用① appserv套件安装第33讲. 第032讲php开发环境的搭建和使用② 自定义安装第34讲. 第033讲php开发环境的搭建和使用③ 安装并配置discuz论坛第35讲. 第034讲解答学生问题--一个ip绑定多个域名第36讲. 第035讲php运行过程时序图php书写规范第37讲. 第036讲php基本语法介绍php数据类型介绍第38讲. 第037讲整型细节说明第39讲. 第038讲布尔细节浮点数细节字符串细节算术运算符①第40讲. 第039讲算术运算符② 比较运算符逻辑运算符第41讲. 第040讲三元运算符类型运算符运算符优先级第42讲. 第041讲顺序控制分支控制(if ifelse switch) 程序流程图第43讲. 第042讲循环控制①(for)第44讲. 第043讲循环控制②(while dowhile) 打印金字塔案例第45讲. 第044讲打印金字塔案例评讲布置练习题第46讲. 第045讲break语句continue语句常量第47讲. 第046讲函数基本概念函数快速入门第48讲. 第047讲函数使用函数调用初步理解第49讲. 第048讲函数调用深入理解函数使用注意事项①第50讲. 第049讲函数使用注意事项② 函数作业布第51讲. 第050讲函数再回顾自定义函数第52讲. 第051讲位运算①第53讲. 第052讲位运算②第54讲. 第053讲数组介绍数组的创建数组的遍历第55讲. 第054讲数组的引用数组使用细节①第56讲. 第055讲数组使用细节② 数组运算符数组作业评讲① 数组小结第57讲. 第056讲排序介绍冒泡排序第58讲. 第057讲选择排序插入排序快速排序第59讲. 第058讲顺序查找二分查找第60讲. 第059讲多维数组数组作业评讲②第61讲. 第060讲数组作业评讲③第62讲. 第061讲类与对象的基本概念第63讲. 第062讲成员属性如何创建对象第64讲. 第063讲对象在内存中存在形式函数传递对象方式第65讲. 第064讲函数传递基本数据类型和数组方式成员方法①第66讲. 第065讲成员方法②第67讲. 第066讲作业评讲第68讲. 第067讲构造方法第69讲. 第068讲析构方法第70讲. 第069讲static关键字(静态变量)第71讲. 第070讲static关键字(静态方法) 面向对象编程三大特性①第72讲. 第071讲面向对象编程三大特性②第73讲. 第072讲面向对象编程三大特性③第74讲. 第073讲面向对象编程三大特性④第75讲. 第074讲面向对象编程三大特性⑤第76讲. 第075讲抽象类第77讲. 第076讲接口第78讲. 第077讲继承与实现比较final const 第79讲. 第078讲面向对象编程综合练习第80讲. 第079讲错误和异常处理介绍处理错误方式①-die第81讲. 第080讲处理错误方式②-错误处理器错误级别处理错误方式③-错误触发器第82讲. 第081讲php错误日志第83讲. 第082讲php异常处理第84讲. 第083讲php进阶预热篇-php执行流程时序图第85讲. 第084讲http协议深度剖析①-http请求详解防盗链技术第86讲. 第085讲http协议深度剖析②-http响应详解(302 304码运用)第87讲. 第086讲http协议深度剖析③-http响应详解(禁用缓存设置)第88讲. 第087讲http协议深度剖析④-http响应详解(文件下载)第89讲. 第088讲http协议深度剖析⑤-http响应详解(作业评讲)第90讲. 第089讲php数据库编程①-使用mysql扩展库第91讲. 第090讲php数据库编程②-使用mysql扩展库第92讲. 第091讲php数据库编程③-使用mysql扩展库第93讲. 第092讲php数据库编程④-使用mysql扩展库(在线词典案例)第94讲. 第093讲php数据库编程⑤-使用mysql扩展库(在线词典案例)第95讲. 第094讲php数据库编程⑥-使用mysqli扩展库第96讲. 第095讲php数据库编程⑦-使用mysqli扩展库第97讲. 第096讲php数据库编程⑧-使用mysqli扩展库(布置练习)第98讲. 第097讲php数据库编程⑨-使用mysqli扩展库增强(批量执行sql和事务控制)第99讲. 第098讲php数据库编程(10)-使用mysqli扩展库增强(预处理技术)第100讲. 第099讲php数据库编程(11)-使用mysqli扩展库增强(预处理技术)第101讲. 第100讲预定义超全局数组①-原理分析第102讲. 第101讲预定义超全局数组②-POST第103讲. 第102讲预定义超全局数组③-SERVER第104讲. 第103讲zend studio使用项目开发五个阶段雇员管理系统①第105讲. 第104讲雇员管理系统②-model1模式简单登录第106讲. 第105讲雇员管理系统③-model1模式数据库登录第107讲. 第106讲雇员管理系统④-model1模式雇员分页第108讲. 第107讲雇员管理系统⑤-分层模式管理员登录第109讲. 第108讲雇员管理系统⑥-分层模式雇员分页第110讲. 第109讲雇员管理系统⑦-分层模式整体翻页第111讲. 第110讲雇员管理系统⑧-分层模式通用分页模块第112讲. 第111讲雇员管理系统⑨-mvc模式介绍第113讲. 第112讲mvc模式①-用mvc模式改进网站结构第114讲. 第113讲mvc模式②-用mvc模式改进网站结构第115讲. 第114讲cookie①-cookie原理介绍创建cookie 获取cookie第116讲. 第115讲cookie②-更新cookie 删除cookie cookie运用案例第117讲. 第116讲cookie③-雇员管理系统使用cookie技术1.显示上传登录时间2.保留登录id第118讲. 第117讲session①-session原理介绍保存session第119讲. 第118讲session②-获取session 更新session 删除session session细节和原第120讲. 第119讲session③-购物车cookie禁用后如何使用session session防用户非法登录第121讲. 第120讲session④-验证码防恶意攻击第122讲. 第121讲session⑤-session配置session的gc机制自定义session处理器第123讲. 第122讲php文件编程①-文件操作原理如何获取文件信息如何读文件第124讲. 第123讲php文件编程②-如何写文件拷贝文件创建和删除(文件夹、文件)第125讲. 第124讲php文件编程③-文件的上传和下载文件上传细节讨论第126讲. 第125讲php文件编程④-mini文件共享网实现分析第127讲. 第126讲php绘图技术①-报表简介第128讲. 第127讲php绘图技术②-php绘图坐标体系第129讲. 第128讲php绘图技术③-php绘图原理及步骤第130讲. 第129讲php绘图技术④-php绘图核心技术第131讲. 第130讲php绘图技术⑤-绘制3d效果人口分布饼状图第132讲. 第131讲php绘图技术⑥-JpGraph-网民支持情况统计图(静态数据)第133讲. 第132讲php绘图技术⑦-JpGraph-网民支持情况统计图(实时数据)第134讲. 第133讲php绘图技术⑧-绘制验证码第135讲. 第134讲php xml编程①-xml基本介绍xml元素xml属性第136讲. 第135讲php xml编程②-cdata 实体字符处理指令dtd快速入门编程校验xml第137讲. 第136讲php xml编程③-内部dtd 外边dtd dtd元素dtd修饰符第138讲. 第137讲php xml编程④-dtd属性引用实体参数实体ide开发xml 第139讲. 第138讲php xml编程⑤-复杂的dtd综合练习第140讲. 第139讲php xml编程⑥-dom基本概念phpdom编程(1)第141讲. 第140讲php xml编程⑦-phpdom编程(2)第142讲. 第141讲php xml编程⑧-phpdom编程(3) 综合练习-基于xml的在线词典第143讲. 第142讲php xml编程⑨-综合练习-基于xml的在线词典phpdom使用xpath第144讲. 第143讲php xml编程(10)-SimpleXML第145讲. 第144讲php xml编程(11)-基于xml的在线词典评讲第146讲. 第145讲开发自己的网上支付平台①-网上支付的两种方式及其流程介绍第147讲. 第146讲开发自己的网上支付平台②-商家与易宝支付网关对接详解第148讲. 第147讲开发自己的网上支付平台③-发送支付请求第149讲. 第148讲开发自己的网上支付平台④-接收支付结果第150讲. 第149讲开发自己的网上支付平台⑤-防止回调页面刷新韩顺平老师全套php精华课程视频介绍今天给大家分享一套PHP目前国内讲得非常好的课程，本课程共149讲，由韩顺平老师主讲，这套课程我听过，韩老师讲课并不是照本宣科，他有着非常丰富的大型项目开发经验，并不这些经验融入到这套课程中，从而让大家分享他的开发经验，这是很多php课程难有的，要学php视频教程，那么我建议大家一定要学习韩顺平老师讲解的，这样你会少走弯路，智慧树学习网收集整理。
韩顺平PHP从入门到精通笔记-html
Html是什么1. html (hypertext mark-up language)是超文本标记语言,主要的用处是做网页, 可以在网页上显示文字、图像、视频、声音…<input type=”text” name=”xxx”/>☞标记==元素简单说明一下动态网页的示意图:Html历史1999 html-- xhtml (xhtml 可以理解成就是html的加强版) -xml2008 html5.0W3c的介绍是一个制定标准的组织 ( 比如给html ,xhtml ,css ,xml , wml…制定标准)☞不同的浏览器，去访问同一个网页，可能看到的效果是有差别!->hackHtml的运行原理Hello.htmlHtml的运行有两种方式Html文件的基本结构<html><head></head><body></BODY></html>1.本地运行所谓本地运行就是直接用浏览器打开2. 远程访问何为协议? 计算机互相通信(网络)的规则. ftp smtp pop http 远程访问的原理示意图:☞这里我们涉及到http协议，这里我们没有深入讲解，但是这是一个非常重要的知识点.Html的基本结构<html><head><元素属性1=”值” …./></head><body><元素属性1=”属性值” 属性2=“属性值” …>内容</元素><元素属性=”属性值”/></body></html>说明1. 标记通常是成对出现 <head></head>2. 单标记 <br/>案例:Demo1.htm<html><head></head><body><b>横看成林</b><br/><br/><font color="red">远近高低各不同</font><br/><!--size 值可以取 1..7 --><font style="font-size:30px;">不知庐山真面目</font><br/></body></html>面试: 请问后缀 html 和 htm 有什么区别?答: 1. 如果一个网站有 index.html 和 index.htm 默认情况下，优先访问 .html3. htm 后缀是为了兼容以前的dos 系统 8.3的命名规范html符号实体说明：当我们在网页中有一些特殊字符时候，可以考虑使用字符实体(char entity)超链接的案例:<br/>*****************<br/><a href="a.html" tar get=”_self,_blank,_top,_parent”>连接到a.html</a><br/><!--如果我们希望在点击该超链接后，就跳转到外网的某个地址，则应当写完整的url--><!--url 统一资源定位--><a href="">跳转到百度</a><br/><a href="mailto: hanshunping@">联系管理员</a>图片:<img src=”图片的路径/该图片也可是一个url” width=”宽度” heigth=”高度”/>Html的表格元素在以前对网页布局要求不高的情况下，使用 table 布局(即使用表格来显示数据，同时用于布局)快速入门:<html><body><table align="center" height="10px" bgcolor="yellow" border="3px" width="400px"><!--tr表示一行--><tr align="center"><td>1</td><td>2</td><td>3</td></tr><tr align="right"><td>2</td><td align="center">4</td><td>5</td></tr><tr><td>3</td><td>9</td><td>10</td></tr><tr><td>3</td><td>9</td><td>10</td></tr></table></body></html>应用案例：1. 确定行代码如下:<html><body><!--<table align="center" height="10px" bgcolor="yellow" border="3px" width="400px"><!--tr表示一行<tr align="center"><td>1</td><td>2</td><td>3</td></tr><tr align="right"><td>2</td><td align="center">4</td><td>5</td></tr><tr><td>3</td><td>9</td><td>10</td></tr><td>3</td><td>9</td><td>10</td></tr></table>--><table height="150px"><tr><td></td></tr></table><!--显示菜单--><table border="1" align="center" bordercolor="#E76BFF" height="225px" cellpadding="1px" cellspacing="0px" width="400px" ><tr><!--colspan="3" 表该列要占用三列--><td align="center" colspan="3">菜谱</td></tr><tr><td rowspan="2">素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr><tr><td>小炒韭菜</td><td>白豆腐</td></tr><tr><td rowspan="2">荤菜</td><td>清蒸龙</td><td>鱼香肉丝</td></tr><tr><td>小炒肉 <img src="dog.jpg" width="70px" /></td><td>水煮肉片</td></table></body></html>课堂练习:<html><title>俺第一个实例</title><head></head><body><Center>成绩表</center><br/><!--表格--><table align="center" align="center" bordercolor="579AFE" height="10px" border="3px" width="500px"><tr align="center"><td>项目</td><td colspan="5" align="center">上课</td><td colspan="2" align="center">休息</td></tr><tr bgcolor="pink" align="center"><th>星期</b></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><tr align="center"><td rowspan="4" align="center">上午</td> <td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="4" align="center">休息</td> </tr><tr align="center"><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr><tr align="center"><td>化学</td><td>语文</td><td>体育</td><td>计算机</td><td>英语</td><td>计算机</td></tr><tr align="center"><td>政治</td><td>英语</td><td>体育</td><td>历史</td><td>地理</td><td>计算机1</td></tr><tr></tr><tr align="center" ><td rowspan="2">下午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="2">休息</td> </tr><tr align="center"><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr></table></body></html>无序列表<ul><li></li></ul>案例:代码:<ul type="circle"> <li>英雄</li><li>精武门</li><li>西游记</li></ul>☞ type 可以取 disc 、 circle 、 square有序列表代码:<ol type="I" ><li>卢俊义</li><li>吴用</li><li>林冲</li></ol>☞ type用于指定用什么来显示, start 表示从第几开始计算. Frameset框架集用途主要是用于分割显示多个页面☞ framest 和 frame 配合使用，一般讲是用于后台页面快速入门:代码A2.html 页面用于保护其它页面<frameset cols="30%,*"><frame name="frame1" src="b.html" noresize frameborder="0"/> <frame name="frame2" src="c.html" frameborder="0"/></frameset>☞该页面不能有body和body体b.html<body bgcolor="pink"><!--target表示我们点击后，目标指向谁--><a href="zjl.html" target="frame2">周杰伦</a><br/><a href="qq.html" target="frame2">齐秦</a><br/></body>☞ target 属性值有四个_blank : 表示打开一个全新的页面_self: 替换本页面_top:_parent:* 还有一个就是在 target 值中直接写对应的那个 frame的名字.c.html:<body bgcolor="silver">歌词大全</body>其它页面Frameset的综合小案例:结构示意图:案例All.html<frameset rows="20%,*"><frame src="top.html" scrolling="no"/><frameset cols="20%,*"><frame src="left.html" noresize frameborder="0" /><frame src="right.html" name="myframe" frameborder="0"/> </frameset></frameset>Top.html<img src="title.JPG"/>Left.html<body bgcolor="pink"><ul><li><a href="zjl.html" target="myframe">青花瓷</a></li> <li><a href="qq.html" target="myframe">当兵的人</a></li> </ul></body>Right.html<body bgcolor="silver">歌词大全</body>晚上的练习:1. 按照笔记走一遍2. 作业2.1做一个自己的网页，显示自己的基本信息：姓名、性别等（注意使用文本格式标记，要做得好看啊），并显示自己的照片（图象的标记还记得吗？）2.2. 普通邮箱Iframe的使用？有时我们需要，在一个含有<body>的页面嵌入另外一个页面，形成画中画的效果,怎么处理->iframe元素(浮动窗口)入门案例Iframe.html<html><body><h1>hello,world</h1><a href="" target="iframe1" >连接到taobao</A><br/><a href="kk.html" target="iframe1" >连接到kk.html</A><br/><iframe name="iframe1" src="" width="500px" height="400px" /><iframe src="" width="400px" height="400px" /></body></html>表单元素为什么需要？从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素( 常见输入框、单选框、复选框、文本域、密码框、上传文件。
韩顺平div+css笔记(全)
div+css详解◆ div+css的介绍div是用于存放html元素，文字，图片，视频的元素css 是层叠样式表，用于指定div中的内容的样式原理图：div+css的快速体验案例：test.html：<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN"><html><head><title>div+css入门案例</title><link href="my.css" type="text/css" rel="stylesheet"/> </head><body><div class="style1"><table><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr > <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> </table></div></body></html>my.css中指定：.style1{width:300px;height:200px;border:1px solid red;margin:100px 0px 0px 200px;}.style1 table{border:1px solid black;width:298px;height:190px;}.style1 table td{border: 1px solid black;text-align:center;}<span style="font-size:30px;color: blue;">栏目一</span><br/> 从使用span元素我们可以看到，css的基本语法<元素名 style=”属性名：属性值；属性名：属性值2；”/> 元素可以是html的任意元素：属性名：属性值要参考 w3c组织给出的参考文档◆使用css可以统一网站的风格css分类：外部css 内部css<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>css1.html</title><meta http-equiv="keywords" content="杨萌,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css">.style1{}</style> font-size: 20px; color:red; font-weight: bold; font-style: italic;</head><body><span class="style1">栏目一</span><br/> <spanclass="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> <span class="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> </body></html>使用滤镜<style type="text/css">/*使用滤镜将图片变成黑白色*/img {}</style>/*使用滤镜*/a:link img { filter:gray;} filter:gray; a:hover img{ } filter:"";</style><!--<link rel="stylesheet" type="text/css"href="./styles.css">--></head><body><a href="#"><img src="images/1.jpg" width=170pxborder=1/></a> <a href="#"><img src="images/2.jpg" width=170px border=1/></a> <a href="#"><img src="images/3.jpg" width=170px border=1/></a> <a href="#"><img src="images/4.jpg" width=170px border=1/></a> <a href="#"><img src="images/5.jpg" width=170px border=1/></a> <a href="#"><img src="images/6.jpg" width=170px border=1/></a> <a href="#"><img src="images/7.jpg" width=170px border=1/></a> </body>1．类选择器的基本语法:.类选择器名{属性名:属性值;…}.style1{font-weight: bold;font-size: 20px;background-color: pink;}<link rel="stylesheet" href="my.css" type="text/css"></link> </head><body><span class="style1">新闻一</span><span class="style1">新闻二</span><span class="style1">新闻三</span><span class="style1">新闻四</span><span class="style1">新闻五</span></body>2．id选择器基本语法：#id选择器名{属性名：属性值；}案例：#style2{font-size: 30px;background-color: skyblue;}在html文件中如果要引用id选择器，则<元素 id=‘id选择器的名称’></元素><span id="style2">这是一则重要的新闻</span>3．Html选择器 /*html选择器body(button,input,form...)*/ body{color:silver;}结论：当一个元素同时被id选择器类选择器 html选择器修饰时，优先级为： id选择器>类选择器>html选择器>通配符选择器<span class="style1" id="style2">这是一则重要的新闻</span> 案例：假设，我们希望所有的超链接（1）默认样式是黑色，24px，没有下划线（2）当鼠标移动到超链接时，自动出现下划线（3）点击后，超链接变成红色。
jquery学习笔记-韩顺平
1,Jquery是一个javascript框架或者叫做javascript库；2，用Ajax我们可以给服务器发送一个请求，服务器可以给我回送一个请求；3，出现javascript框架的根本原因就是为了提高开发者的开发效率；4，jquery是一个轻量级的js库（压缩后只有21K），这是其他的js库所不及的，它兼容CSS3，还兼容各种浏览器；5，JQuery是一个快速的，简洁的javascript库，使用户能更方便的处理HTML document,events,实现动画效果，并且方便的为网站提供AJAX交互；6，JQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
7，jquery能够使用户的html页保持代码和html内容的分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可；8，所谓的库就是提供一些现成的方法供你去调用；9，当前流行的javascript库有：Jquery ，MooTools，Prototype，Dojo，YUI,EXTJS,DWR[主要是运行在服务器上的];10，$(document) //---这个表示一个jquery对象；11，如果使用jquery，则需要引入jquery库<script type="text/javascript" src="jquery-1.3.1.js"></script>12,jquery对象就是对dom对象的一系列包装，它包装完成后，就可以使用jquery对象提供的方法来进行操作；13，在使用jquery开发中，有两种对象，1，jquery对象，2，dom对象，如果是jquery对象则只能使用jquery库提供的方法，如果是dom对象，则只能使用js本身提供的方法；14，分析jquery库文件的运行原理：<script type="text/javascript">function Dog(){}//给Dog类添加一些属性和方法：我们用原型法Dog.prototype = {ready:function(){window.alert('ok');},jquery:'1.3.1' //这里jquery是Dog类的一个属性}var dog1 = new Dog();dog1.ready(); //在界面上打出okwindow.alert(dog1.jquery); //在界面上打印出1.3.1</script>15,因为jquery兼容各大浏览器，所以这就是为什么它这么流行；16，jquery对象就是通过jQuery包装DOM对象后产生的对象。
传智 韩顺平 html+css+javascrtpt 课程笔记3(吐血整理)
javascript 3=============================================================================== 1.Dom（文档对象模型）编程简介DOM = Document Object Model(文档对象模型)，根据W3C的DOM规范，DOM是HTML 与XML的应用编程接口（API），它将整个页面映射为一个由层次节点组成的文件。
编程人员通过访问dom 对象，就可以实现对浏览器本身、网页文档、网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。
2.html dom层次图dom编程的核心是各个dom 对象。
HTML DOM定义了访问和操作HTML文档的标准方法。
HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)，每个节点是一个HTML DOM内置对象。
3.BOM（浏览器对象模型）介绍通过使用BOM，可移动窗口、更改状态栏文本。
bom 是w3c 组织提出的，他建议所有的浏览器都应当遵循这样的设计规范。
可以说bom 和dom 关系密切, 相互影响，bom 为纲，dom为目，我们可以简单的理解，dom 是bom 中document的具体实现。
要求浏览器必须支持4.常用dom对象window对象window 对象表示一个浏览器窗口或一个框架。
在客户端JavaScript中，Window 对象是全局对象，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来用。
注：在使用window对象的方法和属性的时候，可以不带window，如下window.alert(“韩顺平!”)等价于：alert(“韩顺平”)。
常用方法和属性：✧alert() 显示消息和一个确认按钮的警告框✧confirm() 显示消息以及确认按钮和取消按钮的对话框✧setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达式✧clearInterval() 取消由setInterval()设置的定时器✧setTimeout() 指定的毫秒数后调用一次函数或计算表达式✧clearTimeout() 取消由setTimeout()设置的定时器✧moveTo() 把窗口的左上角移动到一个指定的坐标✧moveBy() 可相对窗口的当前坐标把它移动指定的像素✧resizeBy() 按照指定的像素调整窗口的大小✧resizeTo() 把窗口的大小调整到指定的宽度和高度✧open() 打开一个新的浏览器窗口或查找一个已命名的窗口✧close() 关闭窗口✧closed 返回窗口是否已被关闭✧status 设置窗口状态栏的文本✧opener 返回对创建此窗口的窗口的引用✧onload 页面装载✧onunload 关闭窗口案例：一个js版用户登录系统，当用户输入顺平密码是123，就跳到第二个页面，5秒后，自动跳转到第三个页面。
css和js韩顺平学习笔记
1,Web标准的组成：结构，表现和行为；结构标准对应的主要语言是XHTML表现标准对应的主要语言是CSS行为标准对应的主要语言是javascript制作成一个静态页面，主要用到的就是xhtml和css，所以制作标准页面的技术就是xhtml+css;2,css定义的技巧：1，为了将来的css代码优化，建议所有的属性值后面都要带上";";2,某些xhtml标签，有自己默认的css属性值；例如，h1标签就有自己默认的属性值。
3，为了兼容主流的浏览器，或者为了统一效果，建议我们在设置时，将所有元素的css属性，重置为一个标准的；4，不同的浏览器，有各自不同的css属性值---就是浏览器的兼容性5，css可以重新设置html标签的默认设置；3，CSS应用给网页的方法：1，内联式样式表：直接写在现有的标记中，如<p style="color:red">这里文字是红色的</p>2, 嵌入式样式表：使用<style></style>标签嵌入到HTML文件的<head>标签中。
如：<style type="text/css">body {background:white;color:black;}</style>3，外部链接式样式表：将样式表写在一个独立的.css文件中，然后在页面<head></head>标签内使用<link>标签调用它，主要用于实现表现与结构的分离，如：<link href = "main.css" rel="stylesheet" type="text/css"/>4, 导入式样式表[用的较少]：导入式样式表与链接式样式表的功能基本相同，只是语法与动作方式略有不同，同样也将导入样式代码写在<head></head>标记内。
传智 韩顺平 html+css+javascrtpt 课程笔记2(吐血整理)
javascript 2===============================================================================1.js面向/基于对象编程-----类（原型对象）与对象（实例）(1)js面向/基于对象特征介绍Javascript是一种基于对象（object-based）的动态脚本语言，你遇到的所有东西都是对象。
js的面向对象技术广泛应用于AJAX等优秀框架。
☞特别说明：基于对象也好，面向对象也好，实际上都是以对象的概念来编写程序。
从本质上并无区别，所以这两个概念在课程中是一样的。
因为javascript中没有class(类)，所以有人把类也称为原型对象。
其实这两个概念在编程中发挥的作用都看成一个意思。
(2)为什么需要原型对象（类）？例子：张老太养了两只猫猫：一只猫叫小白，今年3岁，白色；还有一只叫小花，今年5岁，花色。
(3)类（原型对象）————如何自定义类（原型对象）和对象创建类的方式有5中方法：工厂方法——使用new Object创建对象并添加相关属性使用构造函数来定义类（原型对象）：上面的Cat类就是用此种方法基本语法：function 类名/原型对象名(){}创建对象：var 对象名=new 类名/原型对象名();使用prototype构造函数及原型混合方式动态原型方式2.如何判断一个对象实例是不是Cat类型？✧if(a instanceof Cat){window.alert(“a是Cat的实例”)}✧if(a.constructor== Cat){window.alert(“a是Cat的实例”)}3.带var和不带var的区别var abc=89;function test(){abc=900;//在函数里，如果不带var，则表示使用全局的abc变量89。
//如果带var，则表示在函数中，定义一个新的私有的abc变量。
韩顺平java从入门到精通视频教程(全94讲)学习笔记整理(齐全)
java平台1、J2SE java开发平台标准版2、J2EE java开发平台企业版java程序需要在虚拟机上才可以运行，换言之只要有虚拟机的系统都可以运行java程序。
不同系统上要安装对应的虚拟机才可以运行java程序开发步骤1、编写源文件 (.java)2、编译源文件为类文件(.class)可用J2SE或J2EE编译3、在虚拟机上运行注释//单行注释/* */多行注释java内容介绍java编程可以分成三个方向：1、java se (j2se)桌面开发 java中的基础中的基础2、java ee (j2ee)web开发3、java me (j2me)手机开发java se课程介绍java面向对象编程(基础)java图开界面开发java数据库编程java文件io流编程java网络编程java多线程编程java ee基础1java面向对象编程--数据库编程-->java sejava 基础2html--css--javascript-->div+cssjava ee中级部分Servlet--Jsp-->mvc模式java ee高级部分Struts--Ejb--Hibernate--Spring--Ajax(ext,dw2)-->ssh框架java之父gosling1990 sun启动绿色计划1 | 4451992 创建oak语言-->java1994 gosling参加硅谷大会演示java功能，震惊世界1995 sun正式发布java第一个版本，目前最新是jdk7.0java开发工具记事本、(jcreator、jbuilder退出舞台了)、netbean、eclipse如何选择开发工具先选择记事本，对java有一定了解后再使用eclipse高级开发工具为什么呢？1、更深刻的理解java技术，培养代码感2、有利于公司面试java语言的特点1、java语言是简单的2、java语言是面向对象的3、java语言是跨平台(操作系统)的[即一次编译，到处运行]4、java是高性能的java第一个程序hello.java运行java程序要安装和配置jdkjdk是什么？1、jdk全称java dvevlopment kit中文java开发工具包2、jdk是sun公司开发的3、jdk包括jre(java runtime envirnment)java运行环境、一堆java工具和java基础的类库(类共3600左右，常用类在150个左右)4、可以在下载**开发安装jdk,用户执行需要安装jre配置JDK添加环境变量即可windows下配置jdk在计算机属性--高级设置--环境变量--添加PATH将JDK所在路径指定即可。
韩顺平html笔记
韩顺平html笔记HTML一、H TML有关知识点1.h tml介绍html是一种标记语言，主要的用途是开发网页，使用html可以展现文字、图片、视频、声音，html是我们web开发（网站开发）。
2.h tml可以做什么➢html可以编写静态网页➢该静态网页可以包括文字、图像、动画、声音、表格、链接。
从而构成一个个漂亮的网页3.H tml发展历史19931995htm1996htm2001xh2000xhtm1999htm2008ht 4.H tml的基本结构5.<html></html>是标记（也叫元素），标记的一般格式：<元素名[属性=“属性值”]>元素内容</标签> 如果没有内容可以用：<元素名[属性=“属性值”]/>6.H tml实体标记7.H tml常用标记➢html超链接<a href=”” target=”_blank”></a>●_blank 新的窗口●_self 本窗口●_parent 父窗口<html><head><title>html的基本结构</title> </head>●_top 整个浏览器窗口➢html图像元素<img src=”文件路径” width=”宽度”height=”高度”/>➢html表格<table border=”边框宽度” width=””cellspacing=”空隙大小”cellpadding=”填充大小”><tr> --用于说明行<td></td> --用于说一小格</tr></table>➢无序列表<ul><li></li><li></li></ul>➢有序列表<ul><li></li><li></li></ul>➢框架<frameset frameborder=”边框的大小”cols=”按照列的百分比分隔” rows=”按照行的比分比分隔”><frame src=”” noresize /></frameset>➢表单元素<from action=””method=”post/get”>文本框：<input type=”text name=””/>密码框：<input type=”password”name=””/>单选框：<input type=”radio”name=””>复选框：<input type=”checkbox”name=””checked> checked是指默认选中的隐藏域：<input type=”hidden”name=””>图片按钮：<input type=”image”src=””></from>➢文本域：<textarea cols=””rows=””> wrap=off自动换行请在这里写····</textarea>➢下拉菜单：<select name=”” size= > size 是指显示大小<option value=””>-----请选择------</option><option value=”shanghai”selected>上海</option> selected是指被选中<option value=”beijing”> 北京</option></select>➢<meta http-equiv="content-type"content="text/html " charset="utf-8" />➢<body bgcolor=# text=# alink=# vlink=#>#=rrggbb;这些是16进制的，红绿蓝(red-green-blue,RGB)值来表示<body topmargin=0px leftmargin=0px>➢标尺线：<hr size=>➢<a href=url target=”指向一个frame的名字”>➢➢文字布局标记●<p align=”#”></p>：表示一段#= left /center/right➢图像：<img src=”” alt=”提示信息”>➢会移动的文字<marquee direction=”left/right”behavior=”scroll/slide/alternate”loop= 循环的次数scrollamount=速度></marquee>➢多媒体页面<embed src=”文件路径”width= height=></embed>➢背景音乐：<bg src=”” loop=””>CSS1.d iv元素是用来HTML文档内大块(block-level)的内容提供结构和背景元素。
韩顺平轻松搞定网页设计htmlcssjs之javascript现场授课笔记完整版
2011顺平轻松搞定网页设计（html+css+js）之javascript现场授课笔记（完整版）视频18整和19的前半部分不用看Javascript的基本介绍•JS是用于WEB开发的脚本语言：•脚本语言是什么：•脚本语言不能独立使用，它和HTML/JSP/PHP/配合使用•脚本语言也有自己的变量，函数，控制语句（顺序，分支，循环）•脚本语言实际上是解释性语言（即在执行时直接对源码进行执行）•Java程序.java→.class→jvm , js→浏览器（js引擎来解释执行）•Js在客户端（浏览器）执行•因为js是由浏览器来执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><script language="javascript">function test(){window.alert("hello world!");}</script><title> New Document </title></head><body><input type="button" onclick="test()" value="点击一下吧"/></body></html>案例1要求：打开网页后，显示hello 1<html><head><!----js代码一般是放在head标签间,但实际上也可以放在别的位置--><script language="javascript">window.alert警告("hello!");</script><title> New Document </title></head><body><input type="button" onclick="test()" value="点击一下吧"/></body></html>问题：•js的位置可以随意放•js必须使用 <script language="javascript"> 代码</script>•在一个html文件中（JSP/PHP/）可以出现多对（script）片段，浏览器会按照先后顺序一次执行2:Hello world程序改进•如何定义变量：•如何运算：<html><head><title> New Document </title></head><body><!----js代码是放在head标签间,但实际上也可以放在别的位置--><script language="javascript">//js中变量的定义（js中变量用var表示，无论什么类型）var num1=1;var num2=60;var result=num1+num2;window.alert("结果是"+result); //alert函数window.alert表示弹出一个对话框</script></body></html>•Js的变量类型是怎样决定的1)Js是弱数据类型语言，即：在定义变量时候，统一使用var表示，甚至可以去点var这个关键字2)Js中的变量的数据类型是由js引擎决定的Var name=”shunping”; //name是字符串Var kk=2 //kk是数字Name=234; //这事name自动变成数（可以变化）•Js的命名规（函数/变量）：1)使用大小写字母，数字，$可以命名2)不能以数字打头3)不能使用js保留字和关键字（即java里的关键字）4)区分大小写5)单行注释：//6)多行注释：/*…….*/顺平JS第三讲•Js的数据类型：•基本数据类型•数值类型（number）•字符串类型（string）•布尔类型通过typeof可以看到变量的具体数据类型举例：<html><head><title> New Document </title><script language="javascript">var vi="abc";var v2=890;window.alert("v1是"+typeof v1);window.alert("v2是"+typeof v2);vi=456; //体现js是动态语言：即数据类型可以任意变化window.alert("v1是"+typeof v1);//体现js是动态语言</script></head><body></body></html>•复合数据类型•数组•对象•特殊数据类型•Null（空）即：var=null空值•Undefined即：如下代码<script language="javascript">window.alert(tt ); //直接报错：未定义var tt; //未给值</script>Nan：不是一个数 infinity：无穷大 isNaN:对“不是一个数的识别”（不是一个数true／是数fault）•Js定义变量，初始化，赋值•定义变量：即var=a•初始化：即在定义变量时就给值•赋值：即：比如你先定义一个变量 var=tt ，然后再给值：tt=780；例子：编写一个程序，判断两个数是否能够整除<script language="javascript">var a=90;var b=8;if(a%b==0){window.alert("能整除");}else{window.alert("不能整除");}</script>•++，运算符a++ = a=a+1a-- = b=b-1++a 表示先把自己加1再赋值--a 表示先把自己减1再赋值例子：Var a=56;Var b=++a; //b=++a等同于[a=a+1;b=a] b=a++等同于[b=a; a=a+1;] Window.alert(b);Window.alert(a);•--运算符•Var a=56;•Var b=--a; //b=--a等同于[a=a-1;b=a] b=a--等同于[b=a; a=a-1;] •Window.alert(b);•Window.alert(a);错误案例：更正：重要输出：myfuns.js代码：调用myfuns.js案例一：Js文件：调用：案例2：Js文件：调用：abc（5）；输出：3 3 4Js文件：调用：数组在存中的存在形式：存数据调用案例：输出：900存数据分析:输出：35 90 900 存数据调用分析：输出： hello world abc 顺平输出： h e l l o w o r l d a b c 顺平输出： hello world输出：0=451=902=0gg=9000二维数组的遍历：输出：shunping 123 4.5a b c优化排序：输出：输出：找到下标为4数组转置：输出：该javascript笔记是传智播客顺平老师2011年的培训随堂笔记完整版,写的深入浅出,突出重点,案例丰富,通俗易懂,适合要求快速入门并不遗漏细节的同学参考学习。
韩顺平_轻松搞定网页设计html+(DIV+CSS)+javascript视频笔记(全)
韩顺平html第二讲<html><head><title>第一个网页</title></head><body><!-1-><font color=red>hello world</font><!--使用<font color=red></font>来调整字体颜色--></br><!-2-><font size=7 color=blue>hello world1</font><!--使用<font size=7></font>来调整字体大小,但是size里面的取值是1—7--></br><!-3-><font style="font-size:150px" color=yellow>hello world2</font><!--使用CSS中<font style="font-size:40px"></font>将字体调整更大--></br><!-4-><p><font color=cyan>为字体更换颜色4</font></p><b><font color="red">hhhhh</font></b><!-5-></body></html>韩顺平html第三讲Html的超链接：例子：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><!--*****************html超链接案例***************--><!--*****************html超链接默认格式***************--><a href="">超链接</a> </br> <!--超链接基本格式--><!--**target常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**--><a href=""target= "-blank">在新窗口打开</a><!--超链接在新窗口下打开文件--></br><a href=""target= "-self">在本页面打开</a> <!--超链接在本页面打开文件--></br><ahref="mailto:**************************">给自己写信</a></body></html>Html图片元素（标记）：<img src ="图片路径" width="宽度" height=”高度” ></img>案例：（网页上显示图片）<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body><!--*****************图片元素***************--><img src ="a.jpg" width="100" > <!--***********插入图片************--><a href=""><img src ="a.jpg" width="100" ></a> <!--***********图片链接************--> <img src ="/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" ><img src ="a.jpg" width="100" border="10" > </img> <!--*******border表示为插入的图片加上边框********--></body></html>Table表格：<!--<table border=”边框宽度“cellspacing”两个列行间的距离大小”cellpadding”各行列间的内容被填充" align="表格的位置" bgcolor="设置表格背景颜色"></table <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***-->案例：<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body>******************表格,为表格添加背景****************</br><!--<table border=”边框宽度”cellspacing”空隙大小”cellpadding”填充大小" align="表格的位置" bgcolor="设置表格背景颜色"></table>--><table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan"> <tr align="center"><td >1</td><td>2</td><td>3</td></tr> <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***--></table></body></html>韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数<head><title> 表格</title>***********菜谱***********<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180> <tr align=center><td colspan=3>周一菜谱</td>></tr><tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr><tr align=center><td>豆腐</td>><td>白菜</td></tr><tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr><tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr></head><body></body></html>注释：<tr align=center></tr>在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表——无序列表<ul type=”属性值”><li>列表内容</li></ul><ul>的属性设定（常用）：例如：<ul tyre=”square”>Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********<html><body><ul type="circle"><li>1</li><li>1</li><li>1</li></ul></body></html>Html列表——有序列表ol称顺序列表标记<ol type=”属性值” start=”起始值”><li>列表内容</li></ol>的属性设定（常用）：例如：<ol type=”i” start=”4”></ol>type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字************有序列表代码例子*********<html><body><ol type="1"><li>1</li><li>1</li><li>1</li></ol><ol type="1" start=”5”><li>1</li><li>1</li><li>1</li></ol></body></html>Html框架标记（元素）frameset/frame<Frameset frameborder=”边框大小”cols=”按照列的百分比,隔开”>rows=”按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>实例：qq.html<html><body bgcolor=blue>歌词</body></html>ee.html<html><body bgcolor=red>费玉清</body></html>All.html<html><frameset cols="20%,*" frameborder=100><frame src="qq.html" noresise name=”song” /><frame src="ee.html" noresise name=”jun” / ></frameset></html>注释：all.html中不能带body标记综合案例：all.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title></head><frameset rows="30%,*" border="0"><frame src="top.html"noresize/><frameset cols="20%,*"><frame src="left.html" border=0 noresize/><!--frame元素中有一个属性，相当于给该frame取名--><frame src="right1.html"name="right"/></frameset></frameset></html>top.html<html><head><title> New Document </title></head><body ><img src="logo1.jpg" ></img></body></html>Left.html<html><head><title> New Document </title></head><body bgcolor=pink><a href="right1.html"target="right">青花瓷1</a></br><a href="right2.html"target="right">青花瓷2</a></br></body></html>Right1.html<html><head><title> New Document </title></head><body bgcolor=blue><p>right1.html</p></body></html>Right2.html<html><head><title> New Document </title></head><body bgcolor=yellow><p>right2.html</p></body></html>韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”> 各种元素（输入框，下拉列表，文本域，密码框）<input type=submit><input type=reset></form>代码：提交界面.html<html><head><title> 登陆界面</title></head><body><h1>登陆界面</h1><form action="ok.html" method="get" align=center>用户名：<input type="text" name="username"/></br>密 码：<input type="password" name="pwd"/></br><input type="submit" value="登录"/><input type="reset" value="重新填写"/></form></body></html>Ok.html<html><head></head><body>ok</body></html>表单中提供给用户的输入形式有：<input type=* name=**>*=text文本框, password密码框, checkbox复选框, radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子**=Symbolic Name for CGI scriptAction:指定把请求交给那个界面其他：<html><head><title> New Document </title></head><body>1****************复选框*******************</br><form action="" method="post" ><input type="checkbox" name="1"/>苹果<p><input type="checkbox" name="1"/>香蕉<p><p ><font color=red>*****************单选框******************</font></p></br><input type="radio" name="1"/>苹果<p><input type="radio" name="1" checked/>香蕉<p>2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br><input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p><p ><font*****************图片按钮******************</font></p></br> <input type="image" name="submit" src="a.jpg" width=30 align="top"/>苹果<p> *****************下拉列表******************</br><select name="like"><option valu= select>--请选择--</option><option valu=网游select>网游</option><option valu=足球select>足球</option><option valu=游泳select>游泳</option></select></br>*******文本区**<!--cols表示行，rows表示列-->*******</br><textarea name="comment" rows="4" cols="25">请输入文本</textarea></select></br>************请选择要上传的文件*************</br><input type="file" name="myfile">请选择文件</br>************按钮*************</br><input type="button" value="点击一下吧"/></input></form></body></html>韩顺平html第二讲<html><head><title>第一个网页</title></head><body><!-1-><font color=red>hello world</font><!--使用<font color=red></font>来调整字体颜色--></br><!-2-><font size=7 color=blue>hello world1</font><!--使用<font size=7></font>来调整字体大小,但是size里面的取值是1—7--></br><!-3-><font style="font-size:150px" color=yellow>hello world2</font><!--使用CSS中<font style="font-size:40px"></font>将字体调整更大--></br><!-4-><p><font color=cyan>为字体更换颜色4</font></p><b><font color="red">hhhhh</font></b><!-5-></body></html>韩顺平html第三讲Html的超链接：例子：<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><!--*****************html超链接案例***************--><!--*****************html超链接默认格式***************--><a href="">超链接</a> </br> <!--超链接基本格式--><!--**target常见的两个属性-blank(表示在新页面打开文件).-self(表示替换当前页面)**--><a href=""target= "-blank">在新窗口打开</a><!--超链接在新窗口下打开文件--></br><a href=""target= "-self">在本页面打开</a> <!--超链接在本页面打开文件--></br><ahref="mailto:**************************">给自己写信</a></body></html>Html图片元素（标记）：<img src ="图片路径" width="宽度" height=”高度” ></img>案例：（网页上显示图片）<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body><!--*****************图片元素***************--><img src ="a.jpg" width="100" > <!--***********插入图片************--><a href=""><img src ="a.jpg" width="100" ></a> <!--***********图片链接************--> <img src ="/photo/OqCsSUr6ytmOilpU0_1VaA==/4023121842125901437.jpg" width="400" ><img src ="a.jpg" width="100" border="10" > </img> <!--*******border表示为插入的图片加上边框********--></body></html>Table表格：<!--<table border=”边框宽度“cellspacing”两个列行间的距离大小”cellpadding”各行列间的内容被填充" align="表格的位置" bgcolor="设置表格背景颜色"></table <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***-->案例：<html xmlns="/1999/xhtml"><head><title>无标题文档</title></head><body>******************表格,为表格添加背景****************</br><!--<table border=”边框宽度”cellspacing”空隙大小”cellpadding”填充大小" align="表格的位置" bgcolor="设置表格背景颜色"></table>--><table border="15" height="1" cellpadding="20" cellspacing="0" width="477" align="center" bgcolor="cyan"> <tr align="center"><td >1</td><td>2</td><td>3</td></tr> <!--**tr表示行，td表示列,<tr align="设置字体对齐方式</tr>"***--></table></body></html>韩顺平html第四讲合并单元格：colspan=跨行列数roespan=跨列行数<head><title> 表格</title>***********菜谱***********<table border=1 bordercolor=red cellspacing=0 align="center" width=500px cellpadding="0" height=180> <tr align=center><td colspan=3>周一菜谱</td>></tr><tr align=center><td rowspan=2>素菜</td>><td>青菜</td>><td>土豆</td></tr><tr align=center><td>豆腐</td>><td>白菜</td></tr><tr align=center><td rowspan=2>荤菜</td>><td>肉丝</td>><td>大虾</td></tr><tr align=center><td>海参<img src="a.jpg" width=70></img></td>><td>鲍鱼</td>></tr></head><body></body></html>注释：<tr align=center></tr>在此处表示字体的对齐方式韩顺平html第五讲无序列表（html常用标记/元素-ui/li）格式: Html列表——无序列表<ul type=”属性值”><li>列表内容</li></ul><ul>的属性设定（常用）：例如：<ul tyre=”square”>Type=”squre”设定符号款式，其值有三种，如下，默认为Typr=”disc”Type=”disc”时的列项符号是实心圆点Type=”circle”时的列项符号为空心圆Type=”square”时的列项符号为空心正方形************无序列表代码例子*********<html><body><ul type="circle"><li>1</li><li>1</li><li>1</li></ul></body></html>Html列表——有序列表ol称顺序列表标记<ol type=”属性值” start=”起始值”><li>列表内容</li></ol>的属性设定（常用）：例如：<ol type=”i” start=”4”></ol>type=”i”设定数目款式的值有5种：阿拉伯数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字************有序列表代码例子*********<html><body><ol type="1"><li>1</li><li>1</li><li>1</li></ol><ol type="1" start=”5”><li>1</li><li>1</li><li>1</li></ol></body></html>Html框架标记（元素）frameset/frame<Frameset frameborder=”边框大小”cols=”按照列的百分比,隔开”>rows=”按照行的百分比><Frame name=”给frame取名” src=”html路径” noresize></frameset>实例：qq.html<html><body bgcolor=blue>歌词</body></html>ee.html<html><body bgcolor=red>费玉清</body></html>All.html<html><frameset cols="20%,*" frameborder=100><frame src="qq.html" noresise name=”song” /><fram e src="ee.html" noresise name=”jun” / ></frameset></html>注释：all.html中不能带body标记综合案例：all.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title></head><frameset rows="30%,*" border="0"><frame src="top.html"noresize/><frameset cols="20%,*"><frame src="left.html" border=0 noresize/><!--frame元素中有一个属性，相当于给该frame取名--><frame src="right1.html"name="right"/></frameset></frameset></html>top.html<html><head><title> New Document </title></head><body ><img src="logo1.jpg" ></img></body></html>Left.html<html><head><title> New Document </title></head><body bgcolor=pink><a href="right1.html"target="right">青花瓷1</a></br><a href="right2.html"target="right">青花瓷2</a></br></body></html>Right1.html<html><head><title> New Document </title></head><body bgcolor=blue><p>right1.html</p></body></html>Right2.html<html><head><title> New Document </title></head><body bgcolor=yellow><p>right2.html</p></body></html>韩顺平html第六讲html表单form：介绍：html的表单元素，主要用于让客户输入数据，并提交给服务器语法格式：<form action=”url” method=“提交方法（get，post）默认是get方法”> 各种元素（输入框，下拉列表，文本域，密码框）<input type=submit><input type=reset></form>代码：提交界面.html<html><head><title> 登陆界面</title></head><body><h1>登陆界面</h1><form action="ok.html" method="get" align=center>用户名：<input type="text" name="username"/></br>密 码：<input type="password" name="pwd"/></br><input type="submit" value="登录"/><input type="reset" value="重新填写"/></form></body></html>Ok.html<html><head></head><body>ok</body></html>表单中提供给用户的输入形式有：<input type=* name=**>*=text文本框, password密码框, checkbox复选框, radio单选框, image图片按钮, hidden , submit提交按钮, reset重置按钮name是你给表单元素取的名子**=Symbolic Name for CGI scriptAction:指定把请求交给那个界面其他：<html><head><title> New Document </title></head><body>1****************复选框*******************</br><form action="" method="post" ><input type="checkbox" name="1"/>苹果<p><input type="checkbox" name="1"/>香蕉<p><p ><font color=red>*****************单选框******************</font></p></br><input type="radio" name="1"/>苹果<p><input type="radio" name="1" checked/>香蕉<p>2******隐藏一个表单元素****用处是可提交数据，同时不影响界面**********</br><input type="hidden" name="add" value="a.jpg">这里有一个隐藏的表单元素<p><p ><font*****************图片按钮******************</font></p></br> <input type="image" name="submit" src="a.jpg" width=30 align="top"/>苹果<p> *****************下拉列表******************</br><select name="like"><option valu= select>--请选择--</option><option valu=网游select>网游</option><option valu=足球select>足球</option><option valu=游泳select>游泳</option></select></br>*******文本区**<!--cols表示行，rows表示列-->*******</br><textarea name="comment" rows="4" cols="25">请输入文本</textarea></select></br>************请选择要上传的文件*************</br><input type="file" name="myfile">请选择文件</br>************按钮*************</br><input type="button" value="点击一下吧"/></input></form></body></html>DIV+CSS部分笔记当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
韩顺平javascript笔记(全套)解析
韩顺平2011javascript笔记（全）JavaScript1.javascript基本介绍：(1)javascript是实现网页动态效果的基石，在web的开发中扮演重要的角色，被广泛的应用到各个领域：○1网页游戏○2地图搜索○3股市信息查询○4web聊天····(2)在web开发中，js是必不可少的技术，同时js也是ajax/jquery/extjs等框架的基础。
(3)javascript是一种广泛用于客户端WEB开发的脚本语言，常用来给HTML网页添加动态的功能，比如响应用户的各种操作。
2.脚本语言：(1)脚本语言往往不能独立使用(单独使用没有什么意义)，它一般与html/asp/jsp/php(2)脚本语言有自己的变量，函数，控制语句。
(3)脚本语言是一种解释性语言。
3.JS一般在客户端的浏览器执行。
但也可以对服务器进行编程(非常少)4.JavaScript简介JavaScript是一种解释型的语言。
Javascript并不是java的一种java脚本语言，除了名字都带有java这个此外，两者并没有任何关系。
Javascript的第一个版本出现在Netscape Navigator2浏览器中。
人们最初给javascript 起的名字是LiveScript。
然而由于，当时java技术的正是如日中天，netscape公司给livescript改名为javascript，以便是人们更加注意javascript。
随着javascript的发展，微软公司决定在IE浏览器中加入微软的品牌的javascript，即Jscript。
脚本语言不仅只有javascript的一种，还有其他的脚本语言，如VBscript和perl语言(1)<script>标记：第一个简单的javascript程序在网页中添加<script></script>标签中添加javascript代码，在<script></script>之间的代码块，不是用于显示html元素，而是需要浏览器进行处理的脚本代码，在<script>标记和对应的</script>标记之间包围的代码块，称为脚本块。
新手网页设计学习笔记(html+css部分)
HTML+CSS学习笔记此笔记用于记录视频[韩顺平]轻松搞定网页设计(html.css.js)中html和css部分，自己整理用于记忆的，便于以后查阅。
经供参考。
2014.08.26于北航图书馆hujunjob@目录一、第一个网页 (3)1.第一行文字 (3)2.超链接 (3)3.图片 (4)4.表格 (4)4.1 菜谱 (5)5.无序列表 (6)6.有序列表 (6)7.表单元素：文本框、密码框、复选框、单选框、隐藏域、提交按钮重置按钮 (7)二、html 加强 (11)1.超链接 (11)2.标尺线 (11)3.字体 (11)4.移动的文字 (12)5.嵌入多媒体 (13)6.综合2：邮箱 (13)三、CSS (13)1.div+css (13)2.CSS分类 (14)3.css的滤镜功能： (15)4.css选择器 (16)4.1 类选择器： (16)4.2 id选择器 (16)4.3 html选择器 (17)4.4 通配符选择器 (18)5.选择器深入探讨 (18)四、css核心内容——流 (20)4.1盒子模型： (20)4.2 浮动： (26)4.3 css核心内容——定位 (27)4.4综合案例：仿sina首页 (29)一、第一个网页<html><元素属性=‘属性值’。
>内容</元素>如果没有内容<元素属性=‘属性值’。
/><html><!--head--><head><title>我的第一个网页</title></head><body><!--html内容放在body体-->1.第一行文字<b>粗体文字</b><p>第二行文字，换行。
段落标记</p><p><b>第二行粗体文字，元素可以相互嵌套</b></p><p><font color=red>font color=red 红色字体</font></p><p><font size=6>font size=6 大字体</font></p><font size=7>利用br/实现这一行的换行</font><br/><font size=7>font size=7 最大的字体</font><br/>*********字符实体**********<br/><font size=7>© £</font></body></html>2.超链接<html><head><title>使用超链接</title><head><body><a href='Myhtml.htm'>老鼠爱大米，打开新链接，原页面替换</a><br/><!--target=_blank打开新的页面，默认是_self原页面替换--> <a href='Myhtml.htm' target=_blank>老鼠爱大米，打开新链接，打开新页面</a><br/><a href='' target=_blank>百度</a><br/><a href='/index.aspx' target=_blank>北航bt</a><br/> <a href="mailto:hujunjob@">给管理员写信</a></body></html>3.图片<html><head><title>显示图片</title></head><body><font size=5 color=red>图片显示</font><br/><img src='naruto.png' width=400px /><br/><img src='/templates/default/images/logo.png'width=700px border=2/></body></html>4.表格表格的用处：显示数据和图片，并且可以布局<html><head><title>表格</title></head><body><font size=5 color=red>********表格********</font><br/><table border=1width=500px align="center" bgcolor=yellowcellspacing=5 bordercolor=red><tr align="center"><td>1</td><td>2</td><td>3</td></tr><tr align="center"><td>1</td><td>2</td><td>3</td></tr><tr align="center"><td>1</td><td>2</td><td>3</td></tr></table></body></html><tr></tr>表示行<td></td>表示列cellspacing空隙大小，指两个列、行之间的距离cellpadding:表示填充大小，各行各列中的内容被填充，会在一定程度上撑大格子4.1 菜谱<html><head><title>菜谱</title></head><body><font size=5 color=red>********菜谱********</font><br/><table width=400px border=1 bordercolor=pinkcellspacing=0 height=180><tr><td colspan=3 align="center">星期一菜谱</td></tr><tr><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒</td></tr><tr><td>小臭豆腐</td><td>白菜</td></tr><tr><td rowspan=2>荤菜</td><td>鱼香肉丝</td><td>红烧肉</td></tr><tr><td>水煮鱼<img src="naruto.png" width=200px/></td><td>大虾</td></tr></table></body></html>5.无序列表<html><head><title>无序列表</title></head><body>********无序列表********<br/><ul ><li type=disc>dota</li><li type=square>wow</li><li type=circle>lol</li></ul></body></html>默认是实心小圆点type=”disc”默认实心小圆点type=”circle”空心圆type=square 实心方块6.有序列表<html><head><title>有序列表</title></head><body>********有序列表order list********<br/> <ol type=I><li >dota</li><li >wow</li><li >lol</li></ol></body></html>type属性有1,a,i,Istart=5框架frameset/frame将整个页面分为几个部分，分别进行编码。
Js_css_html_Note
韩顺平javascript，css，html第十天上午（已放假一次）HTML的介绍html是一种标记语言，主要的用途是开发网页，使用html可以展现文字、图片、视频、声音，html是我们web开发（网站开发）的基础。
w3c是制定web（html，xml，css，xhtml）标准的机构。
html的基本结构cellspacing表格间空隙大小，cellpadding填充大小html有序列表html的框架标记（元素）frameset/frameall.html（含frameset的html）中不能带body标记div+css的讲解div是用于存放html元素，文字，图片，视屏的元素css是层叠样式表，用于指定内容和样式从使用收盘元素我们可以看到，css的基本语法<元素名style="属性名：属性值；属性名：属性值2；">类选择器的基本语法.类选择器名{属性名：属性值；。
}id选择器基本语法：#id选择器名{属性名：属性值；}在html文件中如果要引用id选择器，则<元素id='id选择器名称…>html选择器通配符选择器如果希望所有的元素都符合某一种样式，可以使用通配符选择器如：*{margin:0;padding:0}可以让所有html元素的外边距和内边距都默认为零。
html中如何使用多个class选择器：<span class="style1 style2"></span>用空格隔开，发生冲突时，以在css文件中，最后出现的class选择器样式为准。
块元素和行内元素行内元素（inline element），特点是只占内容的宽度，默认不会换行，块元素：（block element），特点是不管内容有多少，也要换行，同时占满整行2.块元素和行内元素的转换如果我们希望一个元素按照块元素显示，则：display：block；如果我们希望一个元素按照。
html+css+javascript知识点总结
一，html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。
下面我们就来了解下这三门技术都是用来实现什么的：1. HTML是网页内容的载体。
内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。
就像网页的外衣。
比如，标题字体、颜色变化，或为标题加入背景图片、边框等。
所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。
如：鼠标滑过弹出下拉菜单。
或鼠标滑过表格的背景颜色改变。
还有焦点新闻（新闻图片）的轮换。
可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1-21，HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。
1-3一个HTML文件是有自己固定的结构的。
<html><head>...</head><body>...</body></html>代码讲解：1. <html></html>称为根标签，所有的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。
头部元素有<title>、<script>、<style>、<link>、<meta>等标签，头部标签在下一小节中会有详细介绍。
3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
HTML页面基本元素
<html> <head> <title>显示普通字符和实体字符</title> </head> <body> 不需要任何外观、布局修饰的文本可在<body>标记中 <!-- 此处有若干空格、换行 -->
直接输入。<br /> HTML文档中的空格、换行对浏览器页面的显示无效。<br /> 这里使用了&nbsp;空格符和 <br />换行标记。 <!-- 这是注释内容—页面不显示，但查看源代码可见 --> <comment>这也是注释内容</comment> </body> </html>
网页制作
学无止境 乐在其中
山东商业职业技术学院计算机系
吕凤顺 Email: lfshun@
第3章 HTML页面基本元素
3.1 HTML文本字符、注释及标记分类 3.2 文本与修饰 3.3 列表标记 3.4 插入图像标记 3.5 超链接标记 3.6 图像映射标记 3.7 表格标记 3.8 表格与DIV布局
4．等宽文本标记<tt>、<kbd>、<code>、<samp>
<tt>显示打字机风格的文本效果</tt> <kbd>显示键盘输入的文本效果</kbd> <code>显示计算机代码的文本效果</code> <samp>显示样本的文本效果</samp> <tt>、<kbd>、<code>、<samp>标记一般都显示为固定宽度的 字体。
html+css+javascript知识点总结
html+css+javascript知识点总结HTML和CSS的关系Web前端开发基础技术包括HTML、CSS和JavaScript语言。
HTML是网页内容的载体，包含文字、图片、视频等。
CSS样式是表现，用来改变内容外观，比如标题字体、颜色变化，或为标题加入背景图片、边框等。
JavaScript是用来实现网页上的特效效果，如鼠标滑过弹出下拉菜单或表格的背景颜色改变，以及焦点新闻的轮换。
HTML标签HTML标签不区分大小写，但建议使用小写。
一个HTML文件有固定的结构，包括根标签、头部标签和标签。
头部标签用于定义文档的头部，包括。
等标签。
在和标签之间的内容是网页的主要内容，如。
等网页内容标签。
head部分标签和注释head>标签中可用的标签包括。
等。
代码注释不仅方便程序员自己回忆以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
CSS中也有注释语句，用/*注释语句*/来标明。
1.Java基础入门2.Python编程实战3.前端开发入门4.数据库原理与应用5.人工智能基础入门ol>ol-li在网页中显示的默认样式一般为：每项li前都自带一个数字编号。
可以使用CSS样式表来修改其样式。
3,定义列表7dl-dt-dd用于对名词进行解释说明。
语法：dl>dt>名词1dd>解释1dt>名词2dd>解释2dl>举例：dl>dt>HTMLdd>超文本标记语言dt>CSSdd>层叠样式表dt>JavaScriptdd>一种动态的、基于事件的解释型脚本语言dl>dl-dt-dd在网页中显示的默认样式一般为：名词(dt)加粗，解释(dd)正常显示。
可以使用CSS样式表来修改其样式。
前端开发面试心法零基础研究HTMLJavaScript全攻略在网页中显示的默认样式一般为每项前都自带一个序号，序号默认从1开始。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
div+css详解◆div+css的介绍div是用于存放html元素，文字，图片，视频的元素css 是层叠样式表，用于指定div中的内容的样式原理图：div+css的快速体验案例：test.html：<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN"> <html><head><title>div+css入门案例</title><link href="my.css" type="text/css" rel="stylesheet"/></head><body><div class="style1"><table><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></table></div></body></html>my.css中指定：.style1{width:300px;height:200px;border:1px solid red;margin:100px 0px 0px 200px;}.style1 table{border:1px solid black;width:298px;height:190px;}.style1 table td{border: 1px solid black;text-align:center;}<span style="font-size:30px;color: blue;">栏目一</span><br/> 从使用span元素我们可以看到，css的基本语法<元素名style=”属性名：属性值；属性名：属性值2；”/>元素可以是html的任意元素：属性名：属性值要参考w3c组织给出的参考文档◆使用css可以统一网站的风格css分类：外部css 内部css<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>css1.html</title><meta http-equiv="keywords"content="杨萌,keyword2,keyword3"><meta http-equiv="description"content="this is my page"><meta http-equiv="content-type"content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">.style1{font-size: 20px;color:red;font-weight: bold;font-style: italic;}</style></head><body><span class="style1">栏目一</span><br/> <span class="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> <span class="style1">栏目二</span><br/> <span class="style1">栏目三</span><br/> </body></html>使用滤镜<style type="text/css">/*使用滤镜将图片变成黑白色*/img {filter:gray;}</style>/*使用滤镜*/a:link img {filter:gray;}a:hover img{filter:"";}</style><!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head><body><a href="#"><img src="images/1.jpg"width=170px border=1/></a> <a href="#"><img src="images/2.jpg"width=170px border=1/></a> <a href="#"><img src="images/3.jpg"width=170px border=1/></a> <a href="#"><img src="images/4.jpg"width=170px border=1/></a> <a href="#"><img src="images/5.jpg"width=170px border=1/></a> <a href="#"><img src="images/6.jpg"width=170px border=1/></a> <a href="#"><img src="images/7.jpg"width=170px border=1/></a> </body>1．类选择器的基本语法:.类选择器名{属性名:属性值;…}.style1{font-weight:bold;font-size:20px;background-color:pink;}<link rel="stylesheet"href="my.css"type="text/css"></link> </head><body><span class="style1">新闻一</span><span class="style1">新闻二</span><span class="style1">新闻三</span><span class="style1">新闻四</span><span class="style1">新闻五</span></body>2．id选择器基本语法：#id选择器名{属性名：属性值；}案例：#style2{font-size: 30px;background-color: skyblue;}在html文件中如果要引用id选择器，则<元素id=‘id选择器的名称’></元素><span id="style2">这是一则重要的新闻</span>3．Html选择器/*html选择器body(button,input,form...)*/body{color:silver;}结论：当一个元素同时被id选择器类选择器html选择器修饰时，优先级为：id选择器>类选择器>html选择器>通配符选择器<span class="style1" id="style2">这是一则重要的新闻</span>案例：假设，我们希望所有的超链接（1）默认样式是黑色，24px，没有下划线（2）当鼠标移动到超链接时，自动出现下划线（3）点击后，超链接变成红色。