HTML&CSS 2|学习笔记

开发者学堂课程【高校精品课-上海交通大学 -互联网应用开发技术：HTML&CSS 2】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/76/detail/15740

HTML&CSS2

内容介绍

一、五兆问题

二、HTML5- WebWorker

三、HTML5-From：Input

四、HTML5-表单属性

五、CSS

六、CSS Selectors

七、External Style Sheet

八、Inline Style和Mutilple Sytple Sheet

九、DIV+CSS

十、作业讲解

 

一、五兆问题

接下来local storage 是针对浏览器的五兆问题，五兆问题是指对浏览器五兆而不是对单个的域名五兆，举个例子，以下网站feeldissk.com

就在不断的写的东西，已经点击停止，他开始往下删。它就是在不断的利用这个 local storage的这个特性，他在不断的往硬盘写东西，短时间便已经写1g的东西上来，再点 stop the madness之后，便不断的往下删，他是按五兆在删，每个浏览器都是五兆，其实它在模拟不同的域名再往里面这个写东西，当它现在删到500兆以下，它的颜色变大，刚开始红颜色变成这样，他就是在不断地利用不同的域名往里写，所以他一直写， 然后还可以看一下他这个链接，他在讲他是怎么工作的，实际上这个这个帖子已经很早就出现，它是在html引入之后，马上就写，是他告诉怎么样去使用这个local stories。

刷新一下，让他继续去一刷新它就开始往里写，大家看到这写的速度非常快，赶紧把它停下来，他就开始删。

二、HTML5- WebWorker

所以这是刚才说的logo story这个问题。然后相当于后台，就相当于重新起一个程序。 就是它相当于有一个新的线程在后面跑，出现这样的一个效果。然后就是在HTML5里面，有一个叫做服务器端发送事件，可以看到之前讲客户端和服务器端，必须发一个请求过来，然后给产生一个相应。

那么服务器端实际上是比较被动，就是请求响应式，不发请求，没法发响应。但是在有些情况下，能不能直接发一个时间给，就不要发请求，就只能直接给产生一个响应，就是发一个数据过来。这里面，如果未来再继续学的话，就是可以看到一个叫做 web socket协议，他就是让服务器端再把数据要给他推到主动推到客户端，就客户端不用发请求，他也能把数据推过来，那在HTML5里面就支持这个特性.

h1>获得服务器更新

cscript>

if(typeof(EventSource)!=="undefined")

Ivarsource=new EventSource("/example/html5/demo_sse.php");

source.onmessage=function(event)

document.getElementById("result").innerHTML+=event.data + "
";

比如大家看这个代码，这个代码他在这里说，定义一下一个实践，这个实验员是后台的某一个文件，比如说这是一个这个 Php的一个程序，就定义它作为实践员，也就是说它将来产生的事件，就都要去截获。去监听，实践员是它，然后每当有实践过来的时候，就激活的onmessaoe方法。然后这个事件本身作为参数传递进来，然后他就说这个 result就是把这个事件用事件的数据去替换的。、在这边产生一个这样的一个处理，那就是一个代码，它是在返回承担说这个服务器端的实践是什么，然后把这个实践给它刷走，那这是一个定时事件，它不断的刷不断刷，那这边就是不断的接收数据接收数据，然后就更新。 那所以可以看到实际上客户端没有发送任何请求，但是他就接收到服务器端发送过来的。

这就是说的它所谓的服务器端发送事件这个特性，他就跟之前想象的这个 Http里面的这个请求响应的模式是不一样的，没有请求没有响应。

 

三、HTML5-From：Input

在输入的时候，那么比如说认为这个type刚才看到的input有 text、让用户输入、有文字、有radio，要多选用checkbox，最后有一个swbink的，就是刚才给的例子里面，他现在把这个扩充一下，也有一个type，那也就是说在这里面如果没有这个 at符号，不是一个合法的EMAIL地址的话，他会报错。 那同样的还有URL，必须是个合法的UI，然后是这个底下是说它会有一个number，一个选择框，那在里面可以去选，指定它的最小值和最大值，就只能在上下按钮就增加它的值，然后只能输入这个范围内的值，就是 number这个这个类型的数，然后还有rings也是一样，但是它跟上面的做法不一样，不是一个上下点的镜头，还是在这里之间调这个东西。

然后底下是输入日期的，那以前写日期，选日期的话都需要用某1种JS小控件来实现的。但是现在他直接就已经有这种 date类型的Input。 然后这一类的Month，还有像week等等，就是直接在这空间里选，然后还有时间，还有这个时间加date。这个它而且是local，就是说跟刚才是需要是一样的等等。

四、HTML5-表单属性

现在选择这个 URL不是像刚才这样的说，输入一下，然后检查它是不是个合法URL，而是让在这个给定的一组URL里面，就是那其实不一定非是要是这一个类型其他的类型也有，就是说对这一种对某一个因库存可以是其他的也可以。 就是列出来必须只能在这几个里面去。那有三个不同选项，不管选哪一个，那只能是在这三个明确选以后，他的选中这个值，就是当前的整个这个 Ur的值，然后底下这个是让是输用户名，然后这里有一个加密，大家看这里有个加密，就是这个security。在点击的时候，他就会帮去生成一个就就是生成一种这个密钥，那这是提供验证用户的可靠性，就是身份的一种方法。 然后再往下这个就是自动填充，经常会看到这个自动填充，那这是之前填过的东西，它会把它记住以后，在这里可以看到把自动填充这个开关打开，他就会把之前填过的东西直接再给它露出来，直接填进去。然后，页面加载的时候直接这个框，他的焦点就在他这个地方，选的话是写东西的话直接就写到这里头去。

再往下就是之前看到的form，主要是连续的，但是在这个里面看到这个 form是分开的，在这里定义一个form开始标签，结束标签在这里要定一个lname，但是这个form是引用刚才定义的这个放在这，引用刚才定义的这个form ，所以尽管把这个 last name的这个input它是在这个form的开始和结束标签之外去写的，但是因为这里引用，它实际上它的内容也会变成这个 form的一部分。 所以真正的这个 form是这个 first name和last name合在一起的。

这样的话有利于的布局，没有必要把一个form所有东西全部要就近凑在一起存储，可以把它放到不同的地方，那这个布局就会更灵活一些。再往下就是表单重写就是在这里有一个EMAIL，但有不同的按钮的话，大家可以看到底下有三个不同的Submit的，就是这个有三个不同的Submit，而且这三个不同的Submit，大家可以看到它的值是不一样的，它的值不一样，就是它上面显示内容不一样，然后最关键的是点击以后产生的动作也不同，本来点这Submit的它产生的动作应该是这个然后他现在可以是换一个动作，所以就叫所谓的重写后延续的某些属性。

再往下这个是因为是有一个的input的本身，可以从image就是说本身这个这个这个 input的这个类型，这个宽度和高度属性规定

这个用inage类型的input，他可以来定义这个整个这个图像它是一个input，然后它这个 input它可以有这个高度和宽度，就是说增加一个叫image的类型的一个因素作为一个输入。底下是到底下这个，就是说可以把这个datalist给它列出来，那就是说比如说定义这是一个只能输入数字的东西，那么它的最小值多少，最大值多少 然后每一次只能输不仅是3，也就是说这里头要么是0，要么是3要么是6要么是9，一下出个50输不进去，就做这样一个约定。然后还有就是说上传文件的时候，可能一次性上上传多个文件，那如果想上传多个文件的话，那就可以看到这时候上传文件，所以它的file是input的理解，然后它是multiple可以上传多个，这是允许上传多个文件。然后再往下就是说还可以定义哪一些form是不做校验的，就是比如说这个 EMAIL，可以不要他的EMAIL，就写上他不是，那就把这个打开。

Pattern是说让别人去输入东西，然后给一个正则表达式，这个收入必须是按正则表达式的定义去写，否则的话就是错。比如说这里写个黑，下划线三，他就不允许，因为并没有下划线，在他的正则表达式里面是没有下划线的，必须是a三或者是小写的a三就是a到z都可以，然后后面是三，所以用综合表达式来约定，人家在输入的时候，它的一个输入内容必须要符合某一个模式，然后在输入的时候可以有一些黑，就是当还没有输的时候，它就有一种浅灰色的把这一个hint就是一个图，提示显示在这儿。

也就是说这个出来之后默认会把这个字写成，这而且灰色表示。刚才说要告诉别人这个域不能为空，表示这个域是必须写东西，不写东西直接会报错。这就是运行的时候截图截下来.

它会其实必须要写东西，那上面这些就是html的这些标签，所以它非常多，大多数常用的肯定能记住，然后再写代码都实际上也会去扫问他们，实在记不住的时候。

大家看就是刚才说w3school这个网站，实际上他在这边有一个有所有都有这个描述，然后他还有个快查手册，可以看到每一个标签大体上都应该怎么用，然后每分成哪些总标签，然后它的那个就是这这些标签它都有样例可以去看，就包括这种试一试，这边是运行代码以后的效果，这边是原始的代码，所以到这里面可以去查。

 

五、CSS

CSS像这样本质上它是一个内容和样式，混在一起的一个东西.那么它的样式要起什么作用样式就是在定义这个html这个 Html的这个页面，它是怎么把这些元素给它这些html的元素应该呈现成什么样子 它叫层叠样式表，先放开层叠这个意思。

先看样式表，名字还是比较直观的。就是就想知道这个html的元素应该是以什么样的样式呈现出来，那这是他要做的事情。那比如说这里看到了，这个页面看body，body就是两个div，非要放到一个div里，其实只是为了管理好看那这个地方，就没有放在一个div，其实最根本上还有一个跟标标签就是这个hml那这里面放的两个di v可以看到内容，这是一个div元素，但为什么这个是斜的 这个是正的。那就是因为他俩的样式不一样，他俩的样式是怎么指定的在这边可以看到，首先约定 div的样式是什么它的含义是说不管是什么，只要是个div就应该用这种样式。他说宽是100，高度是75，这就是看到的宽和高，然后背景色是黄色，就是看到的这个黄色，然后这个边框应该是一个像素的黑色，这是看到的，那所以字就显示在里头了。那第一个是div，他没有做任何特殊的标志记，所以它就呈现这个样子。第二个，当时表里面又定义了说在div里面如果它的ID为 div2，

<!DOCTYPE html><html><head><style>div{

width:100px;

height:75px;

background-color:yellow;

border:1px solid black;

div#div2{

transform:rotate(30deg);

-ms-transform:rotate(30deg);/*E9*/

-moz-transform:rotate(30deg);/* Firefox*/

-webkit-transform:rotate(30deg);/* Safari and Chrome*/

-o-transform:rotate(30deg);/* Opera*/

}

</style>

</head> 

这个 shop符号就像井号一样东西，就上符号就是表示要引用那个叫div二的这个东西。 于是看这边这个div，它的id就是div二，那 div二就不一样，他说首先它是个div，所以他肯定还是按这些方式去显示，所以看到他还是宽度高度，包括底色边框都还是符合上面定义。除此之外，他还指定了一下这个东西，就有点像讲的类的继承一样，他在继承了这个之后，他有额外的加的东西。再说要旋转30度，于是就看到是斜过来的东西，那底下这几个只是为了浏览器兼容性加了几行，是说如果的浏览器不支持这个语法，那么看看支持不支持底下这些语法。

反正只要有一个支持的，就把它换成底下这个就可以。自己去试一下，那可以看到两个div，实际上从内容上来说，他就没有这种没有任何的这个差异，从内容上来说没有任何差异，但是他们展现出来不一样，把它展现的内容给它搬出来，专门放到这个 head里面，刚才说了head里头有很多东西，其中有一个就是样式，把它放到Hyde里面来描述。这样的话从这里可以看到，把这边是内容，这边是样式，就给它分离开了。当然说这边是不是也包括样式，比如说到底是用这个地方没有做特殊说明，它只是按div来显示的，还是按head来审这部分东西还是留着的，确实还是留着的，但至少像刚才看到的这些每一个标签里的这些属性的内容全部给它拿出来，放到这一点。 那未来在这边，比如说在画第二个第三个第四个div的时候，就会发现他们都会套用这一个样式，那就就做到了一点，在把样式和内容做分离的时候，就把前面的这个样式在多个这种标签里面做复用，一方面是做分离，一方面是服用，那说这个专业软件工程写代码，一个基本道理就是不要写重复代码，如果写重复代码的话，一定这个代码写得不够好。那这次就相当于把共同的东西提取出来，集中在一个地方，大家都去引用它就可以。所以这就是样式表的好处。

样式表就把显示的内容和显示的风格给它剥离开。 这样的话万一将来更换显示的样式，这边内容是不做任何修改，他不需要做修改，所以代码可维护性好。而且所有的div可以共用相同的样式，都不需要在这个 di v的后面。按道理应该是这个 div写出来之后，它有属性是位置等于多少那那等等。

可以直接写这个div二是可以的，如果这个IP是唯一的，当然是可以的。具体这个地方怎么引用这个叫css的一个select，这是有一个语法的。 那要注意的是这个语法未来如果大家在使用的时候，如果会写这个网络爬虫，网络爬虫实际上就是要用到CS的select来指定要爬什么东西。

那 Cs大家要注意，就是说要实现的目的就一定要记住，一个是内容和风格的分离，一个是风格的复用。有了这个基本的想法之后，来看，这是一个非常纯粹的一个网站，一个网页

它没有用到任何的样式去进行修饰，然后用记住是相同的内容，用不同的样式修饰的时候，就会看到不同的风格，这是一种，这是第二种。 这是第三种，这是第四种。

 

六、CSS Selectors

这4个风格里面可以看到他们显示的内容是完全一样，然后只是给他套用了一个不同的样式表，他出来的风格完全不一样，所以说把风格和内容分离开，的代码就比较容易维护，可以比较快的去确定它指向哪里。作业里面描述的，要定义两种css实际上就是一方面就是指的上这里看到这个例子，就是同一个内容，写两种dss从而展示什么不同的风格。 当然不需要像这里搞得这么花里胡哨的，或者是像这样的，只是希望能比如说简单的颜色字体大小这些不一样就可以了。去自己体会一下，内容和风格分离之后有什么样的好处如果有同学问没有指定css会用浏览器默认css当然是的。就是不指定的话当然会使用默认浏览器官的。那么使用两种CSs的原因，一个是想让大家体会一下内容和风格分离它的好处，确实能看到这个效果。

还有更重要的一条就是要学会不同的样式表在同时去引用了之后，

他们之间如果产生冲突，

 

会产生冲突那就是层叠样式表的那个层叠它表示的意思，来看刚才再讲这个css，说css刚才在这个例子里面，那这个例子里面不是在说选中了一个 ID为div二的，然后对它进行描述。那 Css一般语法是啥样的Css的一般语法是刚才说的，要先选中一个元素，选中的可以是一类元素，也可以是单个元素，待会来再拆开来去看他想做。 说什么，然后去做声明，声明是用大括号括起来的，里面都是一些建制队，所有的建制队用分号分开，然后键值对是用冒号隔开，前面是积案，后面是值。他的意思就是说对h1这种标签，颜色是蓝色，字体就是12号字，那这是一个例子。他是在说对于所有 t标签文本要居中，颜色是红色，这是在指没有。对整个网页里面任何标签做ID的设置或者类的设置这种，他就指的所有的p那么刚才有同学说div，井号就这个 shop符号，然后d2v2说只写它也可以。 是可以。这里就讲了，第二种是想对整个页面里面某一个ID具有某一个ID的那个元素进行处理，那么就用的是这种符号，那就是前面这种写法前面是用一个上符号，这是基于ID进行选择。

再往下还有一个基于类进行选择，基于类进行选择是说在写的时候受人为的给这个标签设一个类，这个类一旦协定，那他就符合这个选择的依据。那他前面用的是点。第二三个就是说不管是一个p还是一个 h1，还是一个其他的什么控件，只要属于点center的，就来处理。 那所以底下比如说看看 p这个标签paragraph，设一下它class属性等于center，然后这是一个h1标签，也设了一下他的class。这样的话他俩就都符合这个点center这个类选择器的标准。所以这两个都居中，其中并且是红色，中间这个那它不是点center类型的，它没有class，所以他仍然按照默认的方式去审计，

所以总结下来看就是说，第一种是说所有这一类标签按标签的名字分。 第二类就是说去挑某一个标签，按这个 ID来分。第三种是说，也不按标签的类型，也不按ID，就按class，class就像是人为划定的一种标准，打一个标签上去，它就是叫class，就给他叫center就把它划分了一下，这样的类这样的话无论是h1还是p还是其他，只要属于center类型，都套用这一个样式表。所以这里不同控件可以设置的属性有区别，那所以在这里面在这个center类里面只设定文本对齐和颜色，这两个属性在 h1和p里面都是有的，就是这个意思。 那非要去设置一个只有p有h1没有的属性那，对h1就没有意义，他当然就不会去理会他了。所以在这里面如果用class这种方式，那很显然这里面出现的应该是标定的这些class的所属的这些标签里面，它都应该有一些公共属性，所谓想想刚才说的CS s是为了复用，复用的原因是因为大家都有，没有的话，实际意义不大。然后这里看到的这个这个类标签，还可以组合就是刚才挑选方式还可以组合，比如说现在再改一下，是对 p里面所有的center类进行标注。 那么同样刚才的页面，虽然h1也是center0，但是它不属于p所以它就没有变成红颜色，也没有集中，所以可以看到可以用 p也可以是像刚才看到的p某一个叫比如说p1的东西，或者所有的center类等等，看有不同的组合去描述想要选定哪些元素来进行。然后如果设定了这些属于这个样式很多都是相同的，基于刚才说的软件在编写的时候，应该尽量不写重复元素，所以这些重复元素可以合并，所以h1h2p的这次图形可以写到一起，就是复用。 所以重复的代码写的越少越好。

 

七、External Style Sheet

然后底下也可以带这种注释就是很多语言，就是还告诉别人这个想来做什么。那么现在回到样式表，里面的，那个很重要的那个词就是层叠CSs里面的那个 层叠是说样式表，在放置的时候有三种方法，三三种方式，的方式有三种方式，这三种方式一个是外部的，一个是内部，一个是内联的。 这就是一个外部，那经常用的可能就是这种，比如说会觉得react的某一个css比较好，就套用它，或者去用bootcomp的某一个东西，看他的某一个cs比较好，就去链接它，也就是说别人写好了一个css，把它链接一下，就是刚才讲的可以在里面放进去。说要去引用外部的别人写好的一个CS s文件，那这样的话，这里面的这些内容在显示的时候，就会按照这个文件里的标识去写。那这个看起来比较平淡无奇，体现不出来刚才说的那个重叠，

再看，如果这个文件不是写了用它吗也许react只是说对h1对button这种常用的东西去做了一下处理。 假设对像radio没有做任何的描述，这种情况下怎么办如果不包含的，那他就还是要用这个默认的。、这里面没有包含的这些东西，它就还是用浏览器默认那个东西。默认的样式，然后所有这个外部的样式表它都是点css结束了，然后它里面写的内容就像是这样，就是把样式的内容组合到一起，写成一个c SS结尾的一个文件

这是看到的某一天访问搜狐网站看到了一个页面，然后因为网络的原因，css不是在外部是一个单独文件 某一天因为网络的原因，这个文件 css没有下来，但是这个html下来了，他引用的那个CSs还是没有下下来，所以他就展示成了这个样子，没有CSS的样子。这是有一次评这个学生投稿，就是学术期刊投稿的样子。  

但是同样的因为有一次访问说css没下来，看到就是这个样子。那可3以看到，看这个部分，然后它有很多，像这边是排到这，它就是这种它就不一样，就css当放到变成一个外部单独的文件的时候，有可能会碰到这样的问题，css没有下来，但是这个html下来了，所以的页面显示的方式就显得很原始，看起来不太好。

 

八、Inline Style和Mutilple Sytple Sheet

那除了那个第二个就是说刚开始举的例子也是这样的，就是把样式表放在了head的里头，就是说这个头部，那是叫一个内部样式表，头部比如说在头部去写，这个包的是什么，在一起什么，就反正写了一些这样的内容，那这个看起来也没什么。那么问题是在于反正把这个这是第二个。第三个先把这个所谓所谓内联的是什么，就是那就直接在标签里面直接后面直接写这个 Style，

那这时候他就会按照他写的这个 style来显示，所以这个 h1就显示成了这种蓝色。 然后他前面这块有30个像素填充，这一个一个单看没什么所谓层叠的意思是说如果外部的样式表里面，定义的一种样式，然后在内部的样式表里面也定义了它，也就是说引用的外部的一个点css的文件里面包含了对h1的一个描述。

它应该是一种海军灰，然后在的hi的这个 html的这个地方，也定义了h1它是orange，这时候会发生什么，就是他俩是有一些它俩是有一些差异的，是有冲突的。就要看他俩是怎么定义的。刚才看到无论是外部引用层叠、样式表，就是这个 link，还是在内部，要把style写的头部，它都是在这个 hi的里面写，那如果把link写在前面，把style这个会举手的写到后头。 那他在解释的时候，后面的按顺序解释的话，那后面这个就会把前面的在这个样式表里面，就是刚才定义的这个海军蓝的把这个海军灰的这个样式给它替换掉，所以是以他为主的。那如果把它俩顺序颠倒一下，就是先定义这个内部的h1再定义这个在外联这个外部的一个样式表，外联就相当于类似于们看到的，这个 c++里面定义了一个宏一样，它实际上是把这一个css内容给它拿过来放到这里。那所以它的定义会把前面的冲淡掉，所以它显示出来的就是一样。

后面在这个 my style.css里面定义这个样式为主，那两个之间就不一样，看到按照税就不一样，就是说在要表里面，如果存在着一些冲突，谁在后面谁为主，刚才说的让大家写两个css的目的，一个是让们去用不同的cssg切换，去看一下浏览器的内容不变，但是CSs变化看到的效果是什么这是第一点。第二点就是想让大家解决这个问题，假如说未来在开发一个比较复杂的网站的时候，比如说认为 extjs这个库比较好，这个库里面有很多的标签，看着颜色还不错，或者是形状看着渲染出来的效果很好。

引用了他的css后来又看到Echat的不错，然后在画图的时候希望引用它，那如果的一个页面里面同时有他俩的时候，那以谁为准 它俩之间如果有冲突，那怎么办要学学会知道这个东西要怎么去做这个，就是至少知道它俩的效果是啥样的，然后要去看怎么去引用它，所以让大家写两次SS的目的还在这，也可以去试一试。像这种效果，所以将来一很显然复杂的网站里面，可能引用的CS s不止一个，有多个，那在同一个页面里面真的出现了多了，就怎么摆放是符合要求的，这是要去考虑一个问题。那所谓层叠的顺序，意思就是说在一个网页里面既有外部的样式表，又有内部的样式表，又有内联的样式表的时候，应该以谁为主，就是浏览器以谁为准去解析它它的顺序 就是先是内联，也就是说，无论有外部的还是内部的，只要这个标签单独，他的使用的时候，它里面直接写进去了一个内联的样式，就像这里看到的这个 H1，那无论这个页面是有没有一个外部的，还是一个一个引用了，在这里直接写了一个style，写这个h1是什么他都以这个为准，所以内联的优势是就是它的这个优先权是最高的，其次是外部的和内部的，他俩是一样的，他俩一样的啥意思刚才说了是按照他们出现的顺序来排的，看这里面就是他俩出现的顺序来排的，所以可以理解为css类似于c++里面那个 include的，把他拉过来，所以谁在后面出现，谁就把前面的定义给覆盖掉了。

如果什么都没有，是讲的，那最后就用到浏览器默认了，所以可以看到是不是用chrome去跑的应用和用比如说这个 IE去跑或者suffer跑，可以看到即使同一个网页出来的效果也会不一样，原因是什么这个网页没有定义任何样式表，他就使用了浏览器默认，那所以他们出来不一样，或者说这个网页定义了cSS，但它不是对网页里所有的元素全定义了一下，它只对特定的定义了一下，然后剩下那些没有定义的部分就用的是浏览器末的样式表，他们三个不一样，所以看到不一样。 最典型的就是弹窗，比如说在浏览器里面让它执行一个加abert脚本，这三个看起来就完全不一样，因就是这样的。

用浏览器默认的，那为什么要叫层叠这就叫层叠的一个顺序，就是既有浏览器默认的，又外部的，又有内部的，也有内联的，到底谁说了算要知道最后呈现出来的效果是以谁为优，是以谁为准的，这就是所谓CSS所以让大家写两个css然后就解决冲突，也要也是在考虑怎么去排放他们的顺序，想要的结果。

 

九、DIV+CSS

css，在网上搜了一个，最后把它列出来，就是css怎么用了，他给了一个这么个例子，就是这样的一个网站页面，

这上面是是一个就是刚才看的像hard底下这个offer，中间是这样排，然后有这块是三个并列的，就是要回答刚才一个问题。为什么有的一个就占了一行，有的是站完之后右边可以继续站，那么他给了一个例子，觉得这个例子写的还不错，所以直接来看，这个页面里面，整个这个里面，他说所有的东西放到一个contain那里头，这是一个div。

打在这div里面，首先有一个head，然后是中间的这个 container，然后是底下有一个克clear就是这块看不见看起来没有东西的一个东西。就是空的这一块，然后最底下是一个Footer。然后在这个content里面实际上是有三个，就是一个列表，和相关功能就是中间的中间的左边的和右边。那现在的问题就是他为什么这样排，他为什么中间这三个中间这三个就可以这样横着排，而其他的都是占一行，为什么不是中间这三个也是各占一行那就是跟它的样式表写的有关系，那后面就是它在这个页面的head里面放进去的样式表，可以看一下，

这个样式表他用的是内部的样式表，他在说 container那注意这个是导致ID因为在整个页面里面只有一个ID是 container，所以他就直接找到了外部container。

他要说整体占1000个宽，两边是没有东西的，然后背景是一个颜色，他要说整个容器在浏览器的中间居中，这个问题也就可以回答，刚才有同学问，那既然只有一个，为什么把它去不去掉，就直接排这三个实际上他是想把所有东西全装在它里面，然后让它整体居中，他要做到这样一个效果。然后再看header，拍的在这个里面同样是只有一个，所以他就用header，他说80，然后他有这个背景，于是就在这里看到的这一条之之所以是绿色和这样一行，就是刚才的样式决定了，然后这是里面它显示的内容。

然后再看logo，然后就是这个这个 div。这个div他会说左边填这么多，上边填这么多，底下填这么多，所以看这个字他没有顶着这个地方写，而是有一些空谢谢在这里它定义好了，拍电影就需要给它左边填多少，上面填多少，下面填多少个像素，给它挤出一个空，然后再往下去container，肯定那是有600个宽，然后上面是20，然后有个背景，那就是刚才看到这个container在这里，然后底下比较重要，就是说这三个为什么排成这样，他们分别是听着 left container map container，right 他们都是 ID，都是ID叫这。然后所以在这里全部是用选ID的符号，这左边来定义了左边这个高度是这么多，宽度这么多，边上留20，中间有个float，float left的意思就是说不会占一行，它就占占满它的宽度之后，它的右边是可以其他的列，这是实现多列效果的一个很重要的东西。大家看一个这个例子，他没有顶着这个地方写，而是有一些空谢谢在这里它定义好了，拍电影就需要给它左边填多少，上面填多少，下面填多少个像素，给它挤出一个空了，然后再往下去container，有600个宽，然后上面是20，然后有个背景，那就是刚才们看到这个很艰难在这里。那所以们现在来看它的效果是什么它就是说这是350，这是400。他占完这一块之后，他向左靠过来之后，它的右边是空出来，可以让其他的 DNA继续在上面拍。有了这个之后那就看那也是一样，400个高150个宽，然后它的float仍然是left，它的20就表示这两个中间是有宽度的，是要填的，然后这边占20这边占20，所以它总共有40，然后它有它的背景色，这是中间这个它挤过来之后它还是float还是left，所以它右边可以继续拍。 然后看最后一个，最后一个其他的就不用说再看他的float之外，就表示他要占满了，占满了之后自然底下不可能再有，右边不可能再拍东西，那所以他站到这头站吧。所以现在这三个是并列了。然后底下是footer，footer就表示的是有40个高，就是抵押这一块。它用的是class。所以在这块们在定义class的时候，用的是点就是class selector，而不是前面这种然后他用的是clear

#Content-Right{

background:#90C;

height:40px;

background:#90C;margin-top:20px;

.Clear{

clear: both;

等于报那具体这个属性的值，可以去查一下。 他的意思就是说但这里面啥都没有。那这样的排完之后，大家可以看到它的样式表实际上比这个真正的内容可能还要多，但是他这么做了以后有一个好处，再看这一个内容的时候会非常简洁明了，然后要呈现的内容是和样式是完全隔开。可以想象一下，如果把这些样式，比如说这里面container有三个属性，把直接当内联的在这后面去写，其他的也是一样。这一个页面看起来会非常的难看，它的样式和内容全部混在一起。对一个编程的人员来说，这是一个极大的挑战，看起来非常的混乱。 所以们要用层面压缩表来处理，而且层的样式表呢们说这是一个最重要的一块就是们用div来布局，在整个页面里面的布局。那们讲到这个 write和real所实际上他们都是在针对页面里面进行操作的时候，也要用到div这个概念，非常重要。这就是css的它的含义。有这个页面的内容，这个标签好多，但好在呢它也不是很复杂，然后 css也是一样，内容也不少，那么要注意的是在这个网站上面，html5是专门拿出来的，它是在html的刚才的内容之上，它把html5的增加的内容放到这里，基本上把这里面内容都给大家讲一遍，如果没有听清楚，到这个网站上可以来看一下这些实例，具体跑的样子，

比如说刚才说的视频，那视频在跑的时候，它实际上就是有有这样的一个效果。 自己跑一下就能知道,不支持这个这个类型看一下另外一个这就是这一边的代码跑出来的样子，所以说如果不是很清楚的话，回到这来看，仔细详细看他的这个例子。Html5的所有的新的特性，刚才给大家讲过一次，那么hml的页面里面，大多数的标签讲了，少量的标签可能没讲，然后css和它的和刚才那个 it's an outlet。 方法，它的处置方法也是一样。

先讲了css，然后再讲了CS s3，里面最新版本是conter三，讲里面的一些新特性，们可能都会去用一个现成的css因为现在很多框架它带css他而且写的比较漂亮，去改写它的可能性不大，所以没有写很复杂。当然如果想自己做，要做一个非常炫的效果，可以来到这里去，然后进一步去学习的。 那们要想让大家知道的只是CSS这种层叠的效果，它表示什么含义，然后怎么去解决里面的冲突,具体的这些内容如果真的很感兴趣，可以花时间去看一看

 

十、作业讲解

这个作业就是希望大家去把的页面画出来，可以适当页面画出来，然后去 css写两个，现在应该清楚刚才说写两个的目的是什么，然后作业可能写得更清楚一点。就是要去画这个页面，然后这个用两个CS在渲染界面，不需要包含所有的页面元素，希望能够仅仅通过CSI的修改，可以展示出不同的风格，就是刚才说的这个意思。 然后至于这个画页面，说要画多少，这件事情在作业一的验收里面做了一个说明，因为大家未来可能是靠框架来生成这个页面，现在画很复杂的html页面，确实没有太大的意义。所以在这个验收这个作业里面讲了，应该着眼于整体网页的编写，但是如果是将来就使用 react或者vivo这样的框架的生成页面元素的话，那至少应该把这个页面的框架打好，就说比如说设计好多少个页面，每个页面大概的元素有哪些，说里面有很多将要去靠框架来生存，但至少应该把这些框架给它生成。 然后在第一次验收的时候，希望不是说要把前台所有功能开发完，但是一定要注意，最终提交的应该是一个完整的系统，不能说就做了一个点，这个点包含了所有要考察的内容，这是不行的。

但是在第一次迭代的时候，考虑到大家有个上手的一个过程的问题，还有一个现在这种特殊情况，大家可能效率不是那么高的问题，所以至少应该用这个框架把们上课要给那个图书浏览的例子，他能够浏览能够搜索，如果就是那天给们演示了一下，写的比较简单的那个例子，不是一开始前后台都跑那个例子，要把这个给它开发完，放上去的这一个可能是有下载了那个 bookstore的那个文件可能跑不起来。 就是在里面可能下载了，这个不知道这个例子是只包含前台了，后台的没有放上去，那所以跑起来可能会有问题，但是可以跑其他的例子，其他例子是把将带给写死了，就是数据在前端写死就可以跑了。