搜索
韩顺平J2EE视频教程第二版《轻松搞定网页设计html+css+javascript》全42讲笔记1/61注：笔记中所有示例，均通过测试!轻松搞定网页设计html+css+javascript内容介绍该教程用循序渐进的手法和项目驱动的案例，由浅入深的讲解网页设计的基础部分和高级部分，包括以下内容：1、html详解；2、css(块级元素、行内元素、标准流盒子模型、浮动定位)；3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局)；4、javascript深入讲解(js基本语法、数组、js面向对象编程，js系统函数、事件、jsdom编程详解、正则表达式)做web开发的程序员都知道，网页设计是web开发的重要部分，不管你是phpweb开发，还是javaweb、.netweb都需要网页设计，说白了就是你的web程序的界面，以前的程序员可能不大注重界面，但是一个布局合理，设计优雅，简洁易用的网站界面无疑会给我们的项目增光添彩，这就好比一个你去推销一个产品，如果这个产品的包装非常精美漂亮，显然就会受到客户的欢迎。我们这个视频专题就是详细深入的讲解如何做出符合商业要求的网页。html是什么HTML(HyperTextMark-upLanguage)即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。html可以做什么1、HTML可以编写静态网页；2、该静态网页可以包括文字、图形、动画、声音、表格、链接。从而构成一个个漂亮的网面html发展历史1993标记语言第一版→1995html2.0→1996html3.2w3c推荐标准韩顺平J2EE视频教程第二版《轻松搞定网页设计html+css+javascript》全42讲笔记2/61注：笔记中所有示例，均通过测试!↓2001xhtml1.1w3c推荐标准←2000xhtml1.0w3c推荐标准←1999html4.0.1w3c推荐标准↓2008html5蒂姆·伯纳斯--李万维网之父html设计者w3c创始人w3c的介绍W3C是英文WorldWideWebConsortium的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院的计算机科学实验室成立。创建者是万维网的发明者TimBerners-Lee。W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。html和xhtml区别html-xhtml-xmlhtml语言本身有一些缺陷(比如内容和形式不能分离，标记单一，数据不能复用等)，随着xml的兴起，xml越来越受到国际认可，所以人们希望xml来弥补html的不足，但是目前有成千上万的网页都是html编写的，所以完全使用xml来替代html还为时过早，于是w3c在2000推出xhtml1.0，建立xhtml的目的就是实现html向xml的过渡。html的运行原理1、本地运行；2、远程访问运行；[helloworld.html]示例：htmlheadtitle第一个网页/title/headbodyfontstyle=font-size:150pxsize=7color=redhello,world/font/body/htmlhtml的基本结构不管html文件有多复杂，它的基本结构如下:韩顺平J2EE视频教程第二版《轻松搞定网页设计html+css+javascript》全42讲笔记3/61注：笔记中所有示例，均通过测试!元素属性='属性值'...内容/元素如果没有内容，可以这样写元素属性='属性值'.../--注：中的都是标记，标记是要成对出现如:html内容/html元素也叫标记p段落标记/pfontsize=字体标记/font!--取值1到7--h#标题字体/h##=1,2,3,4,5,6b字体加粗/b[html001.html]字体案例html!--(!----)为注释--!--head是文件头部分--head!--title标题--title字体及颜色案例/title/head!--body是文件体--body!--我们html内容是放在body体中--p第一行文字/p!--p为段落标记--pb第二行文字粗体/b/ppfontcolor=#0269FE第三行文字蓝色字/font/ppfontsize=7第四行文字变大/font/pfontsize=3第五行字变小/fontbr/!--br为换行--/body/htmlHTML符号实体--介绍韩顺平J2EE视频教程第二版《轻松搞定网页设计html+css+javascript》全42讲笔记4/61注：笔记中所有示例，均通过测试!在网页上显示一些特殊的符号，我们需要使用html的符号实体，有些人把它称为字符实体。为在网页上显示版权符号，我们就需要使用html的符号实体©才能在网页上正确显示。[html002.html]字体实体案例htmlheadtitle字符实体案例/title/headbody!--字符实体--fontsize=5©--版权字符实体/fontbr/fontsize=5£--英磅字符实体/fontbr/fontsize=5®--注册商标字符实体/fontbr//body/html韩顺平J2EE视频教程第二版《轻松搞定网页设计html+css+javascript》全42讲笔记5/61注：笔记中所有示例，均通过测试!html常用标记/元素--超链接html超链接ahref=url地址显示内容/aahref=mailto:电子邮箱地址显示内容/aaname=label锚（显示在页面上的文本）/a使用超链接，可以让网页连接到另一个页面[html003.html]超链接案例htmlheadtitle超链接案例/title/headbodyahref=本窗口切换到网易/abr/ahref=mailto:123@163.com123的电子邮箱/abr/!--target的属性_blank为新窗口打开,_self为本窗口切换--ahref==_blank新窗口打开凤凰网/abr/pahref=#sina通过此标签找本页面中的新浪标签/a/paname=sian新浪在这里/ap新浪的内容在这里/p/body/html说明：href可连接到外部的文件html图像元素--imageimgsrc=图片的路径width=宽度height=高度标记名称/img[html004.html]图像元素案例韩顺平J2EE视频教程第二版《轻松搞定网页设计html+css+javascript》全42讲笔记6/61注：笔记中所有示例，均通过测试!htmlheadtitle图像元素案例/title/headbodyimgsrc='=150height=80/br!--只高width宽度，会自动调整高度--imgsrc='=150/br!--border给图片加边框--imgsrc='=150border=3/brimagesrc='=150height=80/image/body/html特别说明:src可以是外中网站的一个图片urlhtml常用标记/元素--table表格的主要用途是显示数据和图片，并且可以布局tableborder=边框宽度cellspacing=空隙大小cellpadding=填充大小/table表格元素名称是tabletr/tr表示行td/td表示列cellspacing表示列与列之间的距离有多大cellpadding表示各行各列内容的填充大小[html005.html]表格示例htmlheadtitle表格table元素案例/title/headbody!--border边框、align排列方向、bgcolor表格背景颜色、width表格宽度、height韩顺平J2EE视频教程第二版《轻松搞定网页设计html+css+javascript》全42讲笔记7/61注：笔记中所有示例，均通过测试!表格高度--tableborder=2align=centerbgcolor=#FF00FFwidth=500pxheight=200!--tr代表一行，td代表一列--!--tr中align控制内容排列方同--tralign=centertd1行1列/tdtd1行2列/tdtd1行3列/td/trtrtd2行1列/tdtd2行2列/tdtd2行3列/td/trtralign=righttd3行1列/tdtd3行2列/tdtd3行3列/td/tr/table/body/html-------------------------------------------------------------------------------[html006.html]表格table综合小练习htmlheadtitle表格table元素综合小练习/title/headbodytableborder=1bordercolor=#ED90F9cellspacing=0width=400pxheight=180px!--td中colspan是列合并--trtdcolspan=3align=center星期一菜谱/td/tr!--td中rowspan是行合并--tralign=centertdrowspan=2素菜/tdtd清炒茄子/tdtd花椒扁豆/td/trtralign=centertd小葱豆腐/tdtd炒白菜/td/trtralign=centertdrowspan=2align=center荤菜/tdtd油闷大虾/tdtd海参鱼翅/td/trtralign=centertd红烧肉imgsrc='html006_rou.jpg'width=80px//tdtd烤全羊/td/tr/table/body/html------------