1、韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记1 / 203注：笔记中所有示例，均通过测试!轻松搞定网页设计 html+css+javascript内容介绍该教程用循序渐进的手法和项目驱动的案例，由浅入深的讲解网页设计的基础部分和高级部分，包括以下内容：1、html 详解；2、css(块级元素、行内元素、标准流盒子模型、浮动定位)；3、div+css 网页布局(盒子模型经典案例、仿 sohu首页面布局)；4、javascript 深入讲解(js 基本语法、数组、js 面向对象编程，js 系统函数、事件、js dom编程详解、正则表达式)做
2、web开发的程序员都知道，网页设计是 web开发的重要部分，不管你是 php web开发，还是 java web、.net web都需要网页设计，说白了就是你的 web程序的界面，以前的程序员可能不大注重界面，但是一个布局合理，设计优雅，简洁易用的网站界面无疑会给我们的项目增光添彩，这就好比一个你去推销一个产品，如果这个产品的包装非常精美漂亮，显然就会受到客户的欢迎。我们这个视频专题就是详细深入的讲解如何做出符合商业要求的网页。html是什么HTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主
3、要语言。HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。HTML 的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。html可以做什么1、HTML 可以编写静态网页；2、该静态网页可以包括文字、图形、动画、声音、表格、链接。从而构成一个个漂亮的网面html发展历史韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记2 / 203注：笔记中所有示例，均通过测试!1993标记语言第一版 1995html2.0 1996html
4、3.2w3c 推荐标准2001xhtml1.1w3c推荐标准2000xhtml1.0w3c 推荐标准1999html4.0.1w3c 推荐标准2008 html5蒂姆伯纳斯-李万维网之父 html设计者 w3c创始人w3c的介绍W3C是英文 World Wide Web Consortium的缩写，中文意思是 W3C理事会或万维网联盟。W3C 于 1994年 10月在麻省理工学院的计算机科学实验室成立。创建者是万维网的发明者 Tim Berners-Lee。W3C 组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML 的标准就是由 W3C来定制。W3C 会员(大约 50
5、0名会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。html和 xhtml区别html-xhtml-xmlhtml语言本身有一些缺陷(比如内容和形式不能分离，标记单一，数据不能复用等)，随着 xml的兴起，xml 越来越受到国际认可，所以人们希望 xml来弥补 html的不足，但是目前有成千上万的网页都是 html编写的，所以完全使用 xml来替代 html还为时过早，于是 w3c在 2000推出 xhtml1.0，建立 xhtml的目的就是实现 html向 xml的过渡。html的运行原理1、本地运行
6、；2、远程访问运行；helloworld.html示例：第一个网页hello,worldhtml的基本结构韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记3 / 203注：笔记中所有示例，均通过测试!不管 html文件有多复杂，它的基本结构如下:内容如果没有内容，可以这样写-注：中的都是标记，标记是要成对出现如:内容元素也叫标记段落标记字体标记 标题字体 #=1,2,3,4,5,6字体加粗html001.html字体案例字体及颜色案例第一行文字第二行文字粗体第三行文字蓝色字第四行文字变大第五行字变小HTML符号实体-介绍韩顺平 J2EE视频教
7、程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记4 / 203注：笔记中所有示例，均通过测试!在网页上显示一些特殊的符号，我们需要使用 html的符号实体，有些人把它称为字符实体。为在网页上显示版权符号，我们就需要使用 html的符号实体才能在网页上正确显示。html002.html字体实体案例字符实体案例韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记5 / 203注：笔记中所有示例，均通过测试!html常用标记/元素-超链接html超链接显示内容显示内容锚（显示在页面上的文本）使用超链接，可以让网页连接到另一
8、个页面html003.html超链接案例超链接案例本窗口切换到网易123的电子邮箱新窗口打开凤凰网通过此标签找本页面中的新浪标签新浪在这里新浪的内容在这里说明：href 可连接到外部的文件html图像元素-image标记名称html004.html图像元素案例韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记6 / 203注：笔记中所有示例，均通过测试!图像元素案例特别说明:src 可以是外中网站的一个图片 urlhtml常用标记/元素-table表格的主要用途是显示数据和图片，并且可以布局表格元素 名称是 table表示行表示列cellspa
9、cing表示列与列之间的距离有多大cellpadding表示各行各列内容的填充大小html005.html表格示例表格 table元素案例1行 1列1 行 2列1 行 3列2行 1列2 行 2列2 行 3列3行 1列3 行 2列3 行 3列-html006.html表格 table综合小练习表格 table元素综合小练习星期一菜谱素菜清炒茄子花椒扁豆小葱豆腐炒白菜荤菜油闷大虾海参鱼翅红烧肉烤全羊-韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记8 / 203注：笔记中所有示例，均通过测试!html007.html表格 table综合练习-课程
10、表表格 table元素综合练习-课程表课程表项目上课休息星期星期一星期二星期三星期四星期五星期六星期日上午语文数学英语英语物理计算机休息数学数学地理历史化学计算机化学语文体育计算机英语计算机政治英语体育历史地理计算机下午语文数学英语英语物理计算机休息数学数学地理历史化学计算机韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记9 / 203注：笔记中所有示例，均通过测试!html常用标记/元素-ul/li列表内容的属性设定(常用)：例如：type=“square“设定符号款式，其值有三种，如下，默认为 type=“disc“:type=“disc
11、“时的列项符号为实心圆点。type=“circle“时的列项符号为空心圆。type=“square“时的列项符号为空心正方形。html008.html无序列表 ul/li示例无序列表-ul/li 示例三国演义水 浒 传红 楼 梦西 游 记html的有序列表-ol/li列表内容称为顺序列表标记。则用以标示列表项目。所谓顺序列表就是每一项有顺序，又称编号列表。的属性设定(常用):例如:type=“i“ start=“4“设定开始数目，不论设定了哪一数目款式，其值只能是 1,2,3.等整数，默认 start=“1“i可以取以下值中的任意一个：1阿拉伯数字 1,2,3.韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记10 / 203注：笔记中所有示例，均通过测试!a小写字母 a,b,c.A大写字母 A,B,C.i小写罗马数字 i,ii,iii.I大写罗马数字 I,II,III.html009.html有序列表-ol/li 示例有序列表-ol/li 示例三国演义水 浒 传红 楼 梦西 游 记html常用标记/元素-framesethtml列表-框架html010.html框架 frameset/frame使用示例(配合html010_1.htmlhtml010_1.html使用)框架 frameset/frame使用
