【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 的滤镜体验请再思考一个问题 汶川大地震时,所以的网站的图片,都变成黑白的了