1、韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记1 / 62注：笔记中所有示例，均通过测试!轻松搞定网页设计 html+css+javascript内容介绍该教程用循序渐进的手法和项目驱动的案例，由浅入深的讲解网页设计的基础部分和高级部分，包括以下内容：1、html 详解；2、css(块级元素、行内元素、标准流盒子模型、浮动定位)；3、div+css 网页布局(盒子模型经典案例、仿 sohu首页面布局)；4、javascript 深入讲解(js 基本语法、数组、js 面向对象编程，js 系统函数、事件、js dom编程详解、正则表达式)做 w
2、eb开发的程序员都知道，网页设计是 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 / 62注：笔记中所有示例，均通过测试!1993标记语言第一版 1995html2.0 1996html3.
4、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 会员(大约 500名
5、会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。html和 xhtml区别html-xhtml-xmlhtml语言本身有一些缺陷(比如内容和形式不能分离，标记单一，数据不能复用等)，随着 xml的兴起，xml 越来越受到国际认可，所以人们希望 xml来弥补 html的不足，但是目前有成千上万的网页都是 html编写的，所以完全使用 xml来替代 html还为时过早，于是 w3c在 2000推出 xhtml1.0，建立 xhtml的目的就是实现 html向 xml的过渡。html的运行原理1、本地运行；2
6、、远程访问运行；helloworld.html示例：第一个网页hello,worldhtml的基本结构韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记3 / 62注：笔记中所有示例，均通过测试!不管 html文件有多复杂，它的基本结构如下:内容如果没有内容，可以这样写-注：栏目一栏目二栏目三栏目四栏目五栏目一从使用 span元素我们可以看到，css 的基本语法内容元素可以是 html的任意元素；属性名与属性值:不同的元素属性名不同；(可参考 W3C组织给出的文档)使用 css可以统一网站的风格韩顺平 J2EE视频教程第二版轻松搞定网页设计 h
7、tml+css+javascript全 42讲笔记22 / 62注：笔记中所有示例，均通过测试!css分类：内部 css，外部 csscss1_1.html使用 style统一风格css1_1.html.style1font-size: 20px;color:red;font-weight: bold;font-style: italic;text-decoration: underline;栏目一栏目二栏目三栏目四栏目五css的滤镜体验韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记23 / 62注：笔记中所有示例，均通过测试!css2.h
8、tml将图片通过滤镜变成灰色(注：此方法在 IE10以上浏览器中不被支持)css2.html/*使用滤镜*/a:link img filter:gray;a:HOVER imgfilter:“;css的三种选择器选择器选择器是 css中非常重要的概念，css 中有三种不同的选择器1、类选择器，又叫 class选择器2、id 选择器3、html 元素选择器4、通配符选择器简单的说，选择器就是在 css中创建，而在网页页面(html,jsp,php,)中使用韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记24 / 62注：笔记中所有示例，均通过测
9、试!类选择器基本语法.类选择器名属性名:属性值;.css3.html 类选择器示例css3.html类选择器示例新闻 1新闻 2新闻 3新闻 4新闻 5mycss3.css类选择器/*.style1就是类选择器*/.style1font-weight: bold;font-size:20px;background-color: pink;-id选择器基本语法韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记25 / 62注：笔记中所有示例，均通过测试!#id选择器名属性名:属性值;css4.htmlID选择器示例css4.htmlID选择器示例
10、新闻 1新闻 2新闻 3新闻 4新闻 5这是一则非常重要的新闻mycss4.cssID选择器/*.style1就是类选择器*/.style1font-weight: bold;font-size:20px;background-color: pink;/*#style2就是 ID选择器*/#style2font-size: 30px;background-color: silver;韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记26 / 62注：笔记中所有示例，均通过测试!在 html文件中如果要引用 id选择器，则内容-html选择器基本
11、语法：html元素名称属性名:属性值;css5.htmlhtml选择器示例css5.htmlHTML选择器示例你好，北京!新闻 1新闻 2新闻 3新闻 4新闻 5这是一则非常重要的新闻mycss5.csshtml选择器/*.style1就是类选择器*/.style1font-weight: bold;font-size:20px;background-color: pink;color:black;韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记27 / 62注：笔记中所有示例，均通过测试!/*#style2就是 ID选择器*/#style2
12、font-size: 30px;background-color: silver;color:black;/*html的选择器*/bodycolor:orange;-css6.htmlhtml选择器综合示例css6.htmlHTML选择器综合示例前行 SOHU前行 SINAmycss6.csshtml选择器a:linkcolor:black;text-decoration: none;a:hover text-decoration: underline;a:visited color:blue;韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记
13、28 / 62注：笔记中所有示例，均通过测试!-通配符选择器如果希望所有的元素都符合某一种样式，可以使用通配符选择器*margin:0;padding:0可以让所有 html元素的外边距和内边距都默认为 0，有时特别有用。css7.html通配符选择器示例css7.html通配符选择器示例新闻 1新闻 2新闻 3新闻 4新闻 5这是一则非常重要的新闻mycss7.css通配符选择器/*.style1就是类选择器*/.style1font-weight: bold;font-size:20px;background-color: pink;/*#style2就是 ID选择器*/#style2fo
14、nt-size: 30px;韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记29 / 62注：笔记中所有示例，均通过测试!background-color: silver;/*使用通配符选择器，对外边距和内边距清零*/*/*margin: 0;*/margin:10px 0px 0px 10px;/*上、右、下、左*/*margin:10px 0px 0px /*上下、右、左*/*/padding: 0; /*padding规范和 margin规范是一样的*/-选择器深入探讨1、父子选择器css8.html父子选择器示例css8.html父子
15、选择器示例你好，北京!新闻 1新闻 2新闻 3新闻 4新闻 5这是一则非常重要的新闻css8.css父子选择器/*.style1就是类选择器*/韩顺平 J2EE视频教程第二版轻松搞定网页设计 html+css+javascript全 42讲笔记30 / 62注：笔记中所有示例，均通过测试!.style1font-weight: bold;font-size:20px;background-color: pink;color:black;/*#style2就是 ID选择器*/#style2font-size: 30px;background-color: silver;color:black;/*父子选择器*/#style2 spanfont-style:italic;color:red;/*html的选择器*/bodycolor:orange;/*使用通配符选择器，对外边距和内边距清零*/*margin: 0;padding: 0;注意：1、子选择器标签是 html可以识别的标签；2、父子选择器可以有多层级；3、父子选择器适用于 id选择器和类(class)选择器。-选择器深入探讨2、一个元素可以同时有 id选择器和类选择器要考虑优先级：id 大于类选择器css9.htmlid与类选择器复用示例
