【Jsp精品源码栏目提醒】:网学会员在Jsp精品源码频道为大家收集整理了“学习韩顺平笔记(HTML,CSS,JavaScript,RegExp) - 其它资料“提供大家参考,希望对大家有所帮助!
Web 应用开发详解 ----------------------Jasun ------------------2012.7.15 HTML 详解 Html 的介绍 Html 是一种标记语言,主要的用途是开发网页,使用 html 可以展现 文字,图片,视频,声音… Html 是我们 web 开发(网站开发)的基础 :网页设计师(htmlcssjsflash美工) 发展历程 1993 第一个版本---…-1999 有 html4.01-2008html5.0 Xhtml(发展) W3c W3c 是制定 webhtmlxmlcssxhtml…标准的机构 Html 的基本结构 不管这个 html 文件有多复杂,它的基本结构式 。
。
gt内容lt/元素gt lt元素 属性‘属性值’。
如果没有内容,可以这样写 。
。
/gt lt元素 属性‘属性值’。
。
。
gtlt/元素gt lt元素 属性‘属性值’。
元素就是标记 元素就是标记 案例: Html 的字符实体 Html 的超链接 使用超链接,可以让网页链接到另外一个页面 Html 表格案例 表格的主要用途是显示数据和图片,并且而且布局 lttable border5 align”center” bgcolor”yellow” width500pxgt lttr align”center”gtlttdgt1lt/tdgtlttdgt2lt/tdgtlttdgt3lt/tdgtlttdgt4lt/tdgtlt/trgt lttr align”center”gtlttdgt1lt/tdgtlttdgt2lt/tdgtlttdgt3lt/tdgtlttdgt4lt/tdgtlt/trgt lttr align”center”gtlttdgt1lt/tdgtlttdgt2lt/tdgtlttdgt3lt/tdgtlttdgt4lt/tdgtlt/trgt lt/tablegt基本语法:lttable border”边框宽度” cellspacing”空隙大小”Cellpadding”填充大小”gtlt/tablegt 表格的元素 名称是 table lttrgtlt/trgt表示行 lttdgtlt/tdgt表示列 Cellspacing 表格空隙大小:指两个列,行间的距离 Cellpadding 表示填充大小:各行各列中的内容被填充,这样就会在一定程度,撑大格子案例: Html 无序列表 ul—li 案例:代码:案例:选择水果ltinput type”checkbox” name”v1”gt香蕉ltbr/gt DivCss 详解 divcss 的介绍 div 是用于存放 html 元素,文字,图片,视频的元素。
css 是层叠样式表,用于去指定 div 中的内容的样式。
原理图: 初始 CSS-使用 css 的必要性 请看一个问题: 案例:这是一个栏目风格不同的页面,如果我希望统一设置它们的样式该怎么办? 使用ltspangt元素来编写: ltspan stylequotfont-size: 30pxcolor: bluequotgt栏目一lt/spangtltbr/gt 从使用 span 元素我们可以看到,css 的基本语法 lt元素名 style“属性名:属性值;属性名:属性值 2;”/gt 元素可以使 html 的任意元素: 属性名:属性 要参考 w3c 组织给出的文档 使用 css 可以统一网站的风格 Css 分类:内部 css 外部 css lt--DOCTYPE:文档类型 用于指定DTD(说明当前这个html版本)--gt ltDOCTYPE HTML PUBLIC quot-//W3C//DTD HTML 4.01 Transitional//ENquotgt lthtmlgt ltheadgt lttitlegtcss1.htmllt/titlegt lt-- 这个keywords是给搜索引擎看 --gt ltmeta http-equivquotkeywordsquot contentquotkeyword1keyword2keyword3quotgt ltmeta http-equivquotdescriptionquot contentquotthis is my pagequotgt lt-- 告诉浏览器文件是什么编码 --gt ltmeta http-equivquotcontent-typequot contentquottext/html charsetUTF-8quotgt lt-- 引入css文件 --gt lt--ltlink relquotstylesheetquot typequottext/cssquot hrefquot./styles.cssquotgt--gt ltstyle typequottext/cssquotgt .style1 font-size: 20px color: red font-weight: bold font-style: normal text-decoration: underline lt/stylegt lt/headgt ltbodygt ltspan classquotstyle1quotgt栏目一lt/spangtltbr/gt ltspan classquotstyle1quotgt栏目二lt/spangtltbr/gt ltspan classquotstyle1quotgt栏目三lt/spangtltbr/gt ltspan classquotstyle1quotgt栏目四lt/spangtltbr/gt ltspan classquotstyle1quotgt栏目五lt/spangtltbr/gt lt/bodygtlt/htmlgt Css 的滤镜体验请再思考一个问题 汶川大地震时,所以的网站的图片,都变成黑白的了,这个是怎么实现的呢? 这里用到了滤镜技术 ltstyle typequottext/cssquotgt lt/stylegt a:link img lt/headgt filter:gray ltbodygt lta hrefquotquotgtltimg a:hover img srcquotimage/Sunny.jpgquot/gtlt/agt filter:quotquot lt/bodygt CSS 的四种选择器 选择器是 css 中非常重要的概念 css 中有三种不同的选择器 类选择器,又叫 class 选择器 Id 选择器 Html 元素选择器 通配符选择器 简单的说,选择器就是在 css 中创建,而在网页页面(html,
jsp,php,asp.net)中使用。
类选择器 我们在 htmlpage1.html 就使用到了类选择器,这里再给大家举一个例子: 类选择器的基本语法: .类选择器名属性名:属性值; 案例: /.style1是类选择器/ ltspan classquotstyle1quotgt新闻一lt/spangt .style1 ltspan classquotstyle1quotgt新闻二lt/spangt font-weight: bold ltspan classquotstyle1quotgt新闻三lt/spangt font-size: 20px ltspan classquotstyle1quotgt新闻四lt/spangt background-color: pink ltspan classquotstyle1quotgt新闻五lt/spangt Id 选择器 我们在 htmlpage.html 中给大家演示 id 选择器的用法如图: id 选择器的基本语法: id 选择其名属性名:属性值; 案例: /style2就是一个id选择器/ style2 font-size: 30px background-color: silver 在 html 文件中如果要引用 id 选择器,则lt元素 id’id 选择器的名称’gtlt/元素gt Html 选择器 我们在 htmlpage.htm 中给大家演示 html 选择器的用法如图: 如果我们希望网页中默认字体是橙色,我们应当怎么处理。
/html的选择器/ body color: orange 再比如,我们希望所有的超链接 (1) 默认样式是黑色,24px,没有下划线 (2) 当鼠标移动到超链接时,自动出现下划线 (3) 点击后,超链接变成红色。
这又该怎么实现呢?【test.html】 案例: a:link text-decoration: underline color: black text-decoration: none a:visited color:red a:hover 结论:当一个元素同时被 id 选择器 类选择器 html 选择器修饰,则优先级是: idgt类gthtml 选择器 通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器。
margin:0padding:0 可以让所有 html 元素的外边距和内边距都默认为 0,有时特别有用。
实例: /使用通配符选择器,在外边距和内边距清0/ /margin:0px/ /margin-top:10px margin-left:10px margin-right:0px margin-bottom:0px/ margin:10px 0px 0px 10px/如果margin给出四个值,则表示上右下左/ margin:10px 0px 0px/如果margin给出3个值,则表示上(左右)下/ padding:0px/padding规范和margin一样/ 选择器深入探讨 我前面讲的都非常简单,实际上 css 的选择器使用还有很多您需要注意的地方,如果不注意根本就不能驾驭 css 父子选择器 请大家看一下图:【htmlpage.htm】2. 类选择器和 id 选择器都可以有父子选择器。
3.父子选择器可以有多级: style2 span span Font-size:50px 4.父子选择器适用于 id 选择器和 class 选择器 块元素和行内元素 行内元素(inline element):特点是只占内容的宽度,默认不会换行,行内元素一般放文本或者其它的行内元素。
常见内联元素ltspangtltagt 块元素block element:特点不管内容有多少,他要换行,同时沾满整行,块元素可以放文本,行内元素,块元素。
常见块元素ltdivgtltpgt ltspan class”s1”gtspan1 helloworldlt/spangt ltspan class”s1”gtspan1 helloworldlt/spangt ltspan class”s1”gtspan1 helloworldlt/spangt ltdiv class”s2”gtdiv1lt/divgt ltdiv class”s2”gtdiv2lt/divgt 块元素和行内元素的转换 如果我们希望一个元素按照块元素方式显示,则: Display:block; 如果我们希望一个元素按照行内元素方式显示,则: Display:inline; 块元素和行内元素----区别 行内元素只占内容的宽度,块元素内容不管内容多少要占全行。
行内元素只能容纳文本和其它行内元素,块元素可以容纳文本,行内元素和块元素。
(与浏览器类版本和 类型有关) 一些 CSS 属性对行内元素不生效,比如 margin left right width height。
建议尽可能使用块元素定 位。
(与浏览器版本和类型有关) CSS 核心内容------流 流:在网页设计中就是指元素(标签)的排列方式。
标准流:排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现。
这是默认的布局方式。
非标准流:当某个元素(标签)脱离了标准流【比如因为相对定位】排列,我们统称为非标准流排列。
盒子模型----概念 在网页设计中常用的属性名:内容(content) ,边框(border) ,填充(padding) ,边界(margin)CSS 盒子模式都具备这些属性。
细节说明: html 元素都可以看成一个盒子 盒子模型的参照物不一样,则使用的 css 属性不一样。
比如:从 div1 的角度看,是 margin-right,从 div2 看, 则是 margin-left。
如果你不希望破坏外观,则尽量使用 margin 布局,因为 padding 可能会改变盒子的大小(相当于这个盒子有弹 性),margin 如果过大,盒子内容被挤到盒子外边去,但盒子本身没有变化。
盒子模型属性:几个属性值解释:border: 1px solid red/这里我们给 body 指定了 border 的宽度,样式,颜色(顺序可以随意)/margin: 0 auto/0 表示上下,auto 表示左右居中/ 盒子模型的综合案例(可当做模板):box2.html 源代码:ltbodygt ltdiv classquotdiv1quotgt ltul classquotfaceulquotgt ltligtltimg altquotSunnyquot srcquotimgages/小黄.jpgquotgtlt/imggtlt/ligt ltligtltimg altquotSunnyquot srcquotimgages/小黄.jpgquotgtlt/imggtlt/ligt ltligtltimg altquotSunnyquot srcquotimgages/小黄.jpgquotgtlt/imggtlt/ligt ltligtltimg altquotSunnyquot srcquotimgages/小黄.jpgquotgtlt/imggtlt/ligt ltligtltimg altquotSunnyquot srcquotimgages/小黄.jpgquotgtlt/imggtlt/ligt lt/ulgt lt/divgt lt/bodygtBox2.css 源代码:body list-style-type: none margin: 0px margin-left: 0px padding: 0px /这个用于控制单个图片区域的大小//div1用于控制显示的位置/ .faceul li.div1 width: 50px width: 500px height: 50px height: 300px border: 1px solid blue border: 1px solid b4b4b4 float: left/左浮动/ margin-left: 100px margin-left: 5px margin-top: 20px margin-top: 5px /faceul用于控制显示图片区域的宽度和高度/ .faceul img.faceul width: 40px width:200x margin-left: 5px height:250px margin-top: 5px border:1px solid red 案例 2:Box3.html 源代码:ltheadgt lttitlegtbox3.htmllt/titlegt ltlink relquotstylesheetquot typequottext/cssquot hrefquot./box3.cssquotgtlt/headgtltbodygt ltdiv classquotdiv1quotgt ltspan classquotspan1quotgtltfont classquotfont1quotgt优酷牛人lt/fontgtlta hrefquotquotgt更多牛人lt/agtlt/spangt ltul classquotfaceulquotgt ltligtltimg srcquotimgages/20120705095418.jpgquotgtltbrgtlt/imggtlta hrefquotquotgtJasunlt/agtlt/ligt ltligtltimg srcquotimgages/20120705095437.jpgquotgtltbrgtlt/imggtlta hrefquotquotgtSunnylt/agtlt/ligt ltligtltimg srcquotimgages/20120705095447.jpgquotgtltbrgtlt/imggtlta hrefquotquotgtAlisonlt/agtlt/ligt lt/ulgt lt/divgtlt/bodygtBox3.css
源码:body text-decoration: none margin: 0 auto width: 1000px .faceul height: 800px width:350px border: 1px solid blue height:85px font-size: 12px /background-color:yellow/ list-style-type: none.div1 margin: 0px width: 350px height: 110px .faceul li /border: 1px solid silver/ float: left/定义几个常用的字体样式/ width: 107px.font1 height: 78px font-weight: bold /background-color: pink/ font-size: 20px margin-left: 7px margin: 2px 0 0 2px margin-top: 5px text-align: center/text-align表示放在.span1 该元素的其他元素会左右居中/ /background-color: pink/ display: block .faceul img margin-top: 5px.span1 a width: 50px margin-left: 180px height: 50pxa:link padding-bottom: 2px CSS 核心内容---浮动 浮动是 CSS 中很重要的概念,必须掌握。
浮动涉及到左浮动,右浮动,清除浮动。
左浮动:是指让该元素,尽量向左边移动,让出自己右边空间,给下一个元素显示。
右浮动:是指让该元素,尽量向右移动,直到碰到他的父元素的右边界。
(特别强调:浮动对块元素和行内元素都生效!) 如果我们的 div 框很多,外面的框无法容纳水平排列的浮动 div 元素,那么其它浮动块向下移动,直到有足够 的空间。
如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”,如下图:浮动---清除浮动 如果不希望别的元素在某个元素的左边或者右边,可以使用清除浮动的方法 clear:right clear:leftclear:both CSS 核心内容----定位 CSS 定位(positioning)属性允许你对元素进行定位。
Position 属性值: static默认值:元素框正常生成。
快级元素生成一个矩形框,作为文档流/标准流的一部分,行内元素则会 创建一个或者多个行框,置于其父元素中。
(对定位 left,right 不生效。
) relative:元素框偏移某个距离。
元素仍保持其未定位前的形状,他原来所占的空间仍保留,从这一角度看, 好像改元素仍然在文档流/标准流中一样。
absolute:元素框从文档流完全删除,并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初 始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
元素定位后生成一个块 级框,而不论原来它在正常流中生成何种类型的框。
fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
(以 body 本身来 定位) 案例(相对定位(relative)): (决定定位(absolute)): .s1width:100px Relative.html 源代码: height: 60px ltdiv classquots1quotgtSunnylt/divgt background-color: yellow ltdiv idquotspecialquot classquots1quotgtAlisonlt/divgt margin-left: 10px ltdiv classquots1quotgtAlicelt/divgt float: left ltdiv classquots1quotgtJasunlt/divgt specialposition: relative/这里我们使用了相 Relative.css 源代码: 对定位/ left:40px/在原来的位置,向右移动大小(如果向 左移动,则值是负数)/ top:70px/在原来的位置,向下移动大小(如果向上 移动,则值是负数)/ 把 relative 换成 absolute 即为绝对定位! 特别说明: relative 的参照点是它原来的位置.进行一定。
1. 2. absolute 定位是对离自己最近的那个非标准 流盒子而言的。
JavaScript 详解 JavaScript 介绍 JavaScript 是一种广泛用于客户端 Web 开发的脚本语言。
脚本语言是什么?(1) 脚本语言往往不能独立使用,它和 html/
jsp/php/asp/asp.net 配合使用。
(2) 脚本语言有自己的变量,函数,控制语句(顺序,分支,循环) 。
(3) 脚本语言实际上是解释性语言(即在执行的时候,直接对
源码进行执行。
(4) Java 是 JVM 执行;JavaScript 是浏览器解释执行。
JavaScript 由客户端(浏览器)执行。
(不同类型的浏览器可能对 JS 支持不一样)案例 1: 需求:打开网页后,显示 helloworld lthtmlgt window.alerthelloworld ltheadgt lt/scriptgt lt--JS 代码一般是放在 hea.
上一篇:
4轴姿态控制算法讨论贴
下一篇:
经典心理语录净化心灵