搜索
1网页设计html+css+js第0讲开山篇内容介绍该课程用循序渐进的手法和项目驱动的案例，由浅入深的讲解网页设计的基础部分和高级部分，包括以下内容：1html详解2css（块级元素，行内元素，标准流盒子模型，浮动定位）3div+css网页布局（盒子模型经典案例，放sohu首页布局）4javascript深入讲解（js基本语法，数组，js面向对象编程，js系统函数，事件jsdom编程详解，正则表达式）。做web开发的程序员都知道，网页设计web开发的重要部分，不管你是phpweb开发，还是javaweb,netweb都需要网页设计，说白了就是你的web程序的界面，以前的程序员可能不大注重界面，但是一个布局合理，设计优雅，简洁易用的网站界面无疑会给我们的项目争光添彩，这就好比一个你去推销一个产品，如果这个产品的包装非常精美漂亮，显然就会受顾客的欢迎。我们在这个视频专题就详细深入的讲解如何做出符合商业要求的网页。J2ee课程体系Javaee基础javasediv+cssJava面向对象编程数据库编程sqlserveroraclemysqlhtmlcssjavascript2Web开发---网页设计1phpweb开发2javaweb开发3.netweb开发Javaee的体系(架构)Javase面向对象数据库网络文件。。文件。。桌面程序（管理系统/游戏/qq）c/sJavaweb开发（各大门户网站）（基于web(网站)的管理系统）（bbs/淘宝网/网络银行。。。服务器tomcat/issieJavaee中级（2）Javawebmvc模式Javaee高级部分ssh框架xmlservletjspStrutsHibernateSpringAjax(jquery,ext,dw2)3第1讲html介绍内容介绍1html介绍2优秀网页欣赏3html项目演示4html运行基本原理（hello，顺平）5html的基础知识学习目的1了解html的基本概念2理解html的运行原理3掌握html的一些基本用法4能写出简单的网页html是什么HTML(HyperTextMark-upLanguage)即超文本标记语言或者超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形，动画，声音，表格，链接等。HTML的结构包括头部（Herd）、主体、（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。html的介绍html是一种标记语言，主要用途是开发网页，使用html可以展现文字，图片，视频，声音等等html是我们web开发（网站开发）的基础html可以做什么1html可以编写静态网页2该静态网页可以包括文字，图形，动画，声音，表格，链接从而构成一个个漂亮的网页1993标记语言第一版1995html2.01996html3.2w3c推出标准2001xhtml1.1w3c推出标准2000xhtml1.0w3c推出标准1999html4.0.1w3c推出标准2008html5Html发展史4w3c的介绍W3C是英文WorldWideWebConsortium的缩写，中文意思是W3C理事会或者万维网联盟，W3C于1994年10月在麻省理工学院计算机科学实验室成立，创建者是万维网的发明者TimBerners-lee.W3C组织是对网络标准制定的一个非盈利组织，想HTMLXHTMLCSSXML的标准就是有W3C来制定，W3C会员（大约500名会员）包括生产技术产品及服务的厂商，内容供应商，团体用户，研究实验室，标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。html和xhtml区别html—》xhtml—》xmlhtml语言本身有一些缺陷（比如内容和形式不能分离，标记单一，数据不能复用等）随着xml的兴起，xml越来越受国际认可，所以人们希望xml来弥补html的不足，但是目前有成千上万个网页都是html编写的，所以完全使用xml来替代html还为时过早，于是w3c在2000退出xhtml1.0，建立XHTML的目的是实现HTML向XML过度。第2讲html项目演示运行原理开发工具html文件结构标记和元素属性符号实体html运行的基本原理第一个小案例：htmlheadtitle第一个网页/title/headbodyfoatstytle=“foat-size:70px”color=redhello,word/foat/body/html1本地运行我的电脑Hello。html浏览器5在100%情况（除了自己测试外），都是远程访问html文件快速体验我看法hello.html我就放在tomcat下html的开发工具1记事本2dw3frontpage4vs5myeclipse6其他ide..html基本结构从下面test.html我么可以看出html的基本结构html元素名[属性]元素内容/元素名headtitle这是我的第一个网页/title/headbody这是我的第一个网页b你好！/b/body/html不管html文件有多复杂，它的基本结构元素属性=‘属性值’。。。内容/元素如果没有内容，可以这样写元素属性=‘属性值’。。。/元素属性=‘属性值’。。。/元素特别注释：元素就是标记html元素的属性每个元素都有多个属性，每个属性有不同的属性值来修饰，从而达到不同的显示效果，举例2运程访问运行我的电脑浏览器远程服务器Hello。html你可能产生疑问?1ie是怎么访问Hello。Html？（ur1）2万维网是个什么东西可以用tomcat来测试一下这个运行的效果6html!--head元素表示头部分--headtitle第一个网页/title/headbody!—我们html内容是放在body体中--b第一行文字/bpfontcolor=red或者#FOEE4表自定义截取演色第二行文字/font/pfontsize=7第三行文本/fontbr/表示换行fontsize=3第四行文本/font!—字符实体案例--fontsize=6©£/font/body/htmlp段落标记/pfontsize=””字体标记/fontsize取值1到7h#标题字体/h##=1,2,3,4,5,6，b/b字体加粗html的元素的属性关于每个元素，所包含的各个属性以及各个属性对应的属性值，请查看html语言教程（html版）第3讲超链接href图像image表格tableHTML符合实体---介绍在网页上显示一些特殊的符合，我们需要使用html的符号实体，有些人把它称为字符实体，比如我们看一个小小的案例：7为了在网页上显示版权符号，我么就需要使用html的符号实体©才能在网页上正确显示HTML中有用的字符实体注释：实体名称对大小写敏感！显示结果描述实体名称实体编号空格 小于号<<大于号>>&和号&&引号""'撇号'(IE不支持)'￠分¢¢£镑££¥日圆¥¥€欧元€€§小节§§©版权©©®注册商标®®™商标™™×乘号××÷除号÷÷html的超链接8使用超链接，可以让网页链接到另外一个页面举例!—target常见的两个属性值“_blank”(开新的页面)”_self”（替换当前页面）--aherf=’a.html’target=“_blank”或者”self”老鼠爱大米/abr/aherf=’’target=”_self”到sohu/aaherf=””target=”_blank”测试/a说明href可以连接到外部的文件ahref=”mailto:电子邮箱地址”/aahref=”mailto:sunjian@163.com”给管理员写信/ahtml常用标记/元素—imagehtml图像元素imgsrc=”图片的路径”width=”宽度”height=”高度”/img案例imgsrc=’dog.jpg’width=150px/imgsrc=’’width=300px/imgsrc=’dog.jpg’width=150pxborder=1/注释：border表示图片的边框imgsrc=’dog.jpg’width=150pxborder=1/imgsrc=’dog.jpg’width=150pxborder=1/imgsrc=’dog.jpg’width=150pxborder=1/结果会显示3个狗图片特别说明：src可以是外部网站的一个图片utLhtml表格基本语法tableborder=”边框宽度”cellspacing=”空隙大小”cellpadding=”填充大小”/table9表格的主要用途是显示数据和图片，并且而且布局案例tableborder=5align=”center”bgcolor=”yellow”width=500pxtralign=”center”td1/tdtd2/tdtd4/td/trtralign=”center”td1/tdtd2/tdtd4/td/trtralign=”center”td1/tdtd2/tdtd4/td/tr/table结论：表格的元素名称是tabletr/tr表示行td/td表示列cellspacing=”空隙大小：指两个列，行间的距离。cellpadding=”填充大小：各行各列中的内容被填充，这样就会在一定程度上撑大格子。第4讲html菜谱页面练习html表格小练习bodytablealign=centerwidth=500pxborder=1bordercolor=#E674FAcellspacing=0heigjt=180tralign=centertdcolspan=3星期一菜谱/td/trtralign=centertdrowspan=2素菜/tdtd青草茄子/tdtd花椒土豆/td/trtralign=centertd小葱豆腐/tdtd炒白菜/td/trtralign=centertdrowspan=2荤菜/tdtd鱼香肉丝/tdtd油闷大虾/td/trtralign=centertd海参鲍鱼imgwidth=70src=”dog.jpg”//tdtdimgwidth=70src=”dog.jpg”//td/tr/table/body10第5讲html无序列表有序列表框架和综合练习html列表---无序列表ultype=”属性值”li列表内容/li/ul案例：htmlbodyultype=”disc或者circle或者square”li传奇/lili反恐/li/ul/body/htmlht