Python之路day12 web 前端（HTML+ css）

文档树：

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

有，用什么？

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

Python之路day12 web 前端（HTML+ css）

Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

描述

例如：cnblogs

X-UA-Compatible

微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Title

网页头部信息

Link

1.css

< link rel="stylesheet" type="text/css" href="css/common.css" >

2.icon

< link rel="shortcut icon" href="image/favicon.ico">

在页面中写样式

例如：
< style type="text/css" >
.bb{

}
< /style>

Script

引进文件

　　　　　　　　< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

2.写js代码

　　　　　　　　< script type="text/javascript" > ... </script >

常用标签

标签一般分为两种：块级标签和行内标签

a、span、select 等
div、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落，默认段落之间是有间隔的！

br 是换行

a标签

< a href="http://www.autohome.com.cn"> </a>

1、target属性，_black表示在新的页面打开

2、锚

H 标签

H1

H2

H3

H4

H5

H6

select 标签

Checkbox

redio

男女保密

男女保密

password

button

file

提交文件时： enctype='multipart/form-data' method='POST'

textarea

label

姓名：

ul ol dl

ul.li
ul.li
ul.li

ol.li
ol.li
ol.li

河北省: 邯郸; 石家庄
山西省: 太原; 平遥

table

1	2	3
1	2	3
1	2	3

1
1	2	3
1	2	3
1	2	3
1	2	3
1	3	3
	3	3
	3	3
3	3	3

fieldset

用户名：

密码：

form 表单

文件:enctype='multipart/form-data' method='POST'

作业

要求：
第一个页面：协议，选择【我同意】进入注册页面
第二个页面：用户名、密码、重复密码、省份（下拉菜单）、性别、爱好（多选），使用label来修饰。

对于路径：

/ 网站根目录
./ 当前目录(相当于什么也不加)
../ 父母路
../../ 父目录的父目录

CSS

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

标签选择器

div{ background-color:red; }
<div > </div>

class选择器

.bd{ background-color:red; }
<div class='bd'> </div>

id选择器

#idselect{ background-color:red; }
<div id='idselect' > </div>

关联选择器

#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>

组合选择器

input,div,p{ background-color:red; }

属性选择器

input[type='text']{ width:100px; height:200px; }

background

background-color

background-image

background-repeat（no-repeat;repeat-x;repeat-y）

background-position

border

margin

padding

display

display:none

original

display:block

contentcontent

display:inline

content

cursor

autohome 老衲

css提供的cursor值

pointer || help || wait || move || crosshair

伪造超链接

pointer

自定义(一般不用)

mine

浮动

left

right

left

right

position

http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

透明度

默认样式改造

首页
菜单1
菜单2

Python之路day12 web 前端（HTML+ css）

  1     - HTML
  2         - <h6>贺磊</h6>
  3         - <h1>贺磊</h1>
  4         - <img src=''>
  5         
  6       20个左右
  7     - CSS
  8         - <h6 style='color:green;display: inline-block;width: 18px;height: 14px;margin: 0 5px;'>贺磊</h6>
  9         => 看
 10         => 找模板
 11       20个左右
 12     
 13     - JavaScript
 14         
 15     - jQuery
 16 
 17     
 18     
 19 1. HTML
 20    超文本标记语言，规则
 21    
 22    作用：模板
 23    
 24     a. 请求周期
 25     b. 规则对应关系
 26         h1  -> 加大加粗
 27     c. 静态&动态
 28     
 29     学习规则：
 30         - meta系列
 31         - title
 32         
 33         - p
 34         - br
 35         - div
 36         - span
 37         - table  thead  tbody tr th td    :  colpan  rowspan
 38         - a: href  target
 39         - img: src   alt   title
 40         - ul li     ol li    dl dt dd
 41         - 提交数据
 42             - form : action   method  enctype
 43             - input： text password radio checkbox file   --> name value checked
 44             - input:  submit   button  reset              --> value
 45             - select option                               --> name  value(option)  selected multip
 46             - textarea: name 
 47 
 48     
 49 2.CSS
 50     层叠样式表
 51     
 52         - 找到某个或某些
 53             - 直接：头大  男   女   脑残    黑  ID
 54             
 55                 /* 标签选择器 */
 56                 /* a{
 57                     color: red;
 58                 }
 59                 */
 60                 
 61                 /* ID选择器 */
 62                 /*
 63                 #wc{
 64                     color: red;
 65                 }
 66                 
 67                 */
 68                 /* class选择器 */
 69                 /*
 70                 .c1{
 71                     color: red;
 72                 }*/
 73 
 74                 
 75                 /* 属性选择器 */
 76                 /*input[type="text"]{*/
 77                     /*color: rebeccapurple;*/
 78                 /*}*/
 79                 
 80                 组合
 81                 .c1,c2{
 82                     color: green;
 83                 }
 84             
 85             - 间接：
 86                 # 层级选择器
 87                 div p{
 88                     color: green;
 89                 }
 90                 div>p{
 91                     color: green;
 92                 }
 93             
 94             - 伪类
 95                 hover 当鼠标放在上部时，css生效
 96                 .c10:hover{
 97                     color: green;
 98                 }
 99                 
100                 <a class="c10">菜单一</a>
101             
102         
103             PS: 优先级
104                 1.  ID选择器  属性选择器 class选择器 标签选择器
105                 2. 相同选择器：就近原则
106                 3. !important
107             
108         
109         - “穿衣服”
110     
111             /*字体颜色*/
112             color: white;
113             
114             /*背景颜色*/
115             background-color: red;
116             
117             /*字体大小*/
118             font-size: 16px;
119             
120             /*font-weight: bold;*/
121             
122             /*高度*/
123             /*height: 200px;*/
124             /*height: 10%;*/
125             
126             /*宽度*/
127             /*width: 400px;*/
128             /*width: 40%;*/
129             
130             /* 背景图片 */
131             background-image: url(5.png);
132             background-repeat: no-repeat;
133             background-position-y: -111px;
134             background-position-x: -106px;
135     
136             隐藏标签
137             display: none;
138             隐藏设置内联&块级
139             display: block;
140             display: inline;
141             display: inline-block;
142             
143             边框
144             border: 3px solid rebeccapurple
145             border-left: 3px solid rebeccapurple
146             
147             边距
148                 内边距
149                     padding
150                 外边距
151                     margin
152                 
153             鼠标移动上方时，显示的图标    
154                 cursor: wait;
155             
156             position
157                 position: relative;
158                 position: absolute;
159                 position: fixed;
160             
161                 1. 场景一：
162                     position: fixed;
163                 2. 场景二：
164                     position: absolute;
165                 3. 场景三：
166                     position: relative;
167                     position: absolute;
168             float：
169                 float: left
170                 <div style="clear: both;"></div>
171                 
172             line-height & text-align
173                 上下居中：line-height:48px;
174                 左右居中：text-align:center;
175                 
176             body{
177                 margin:0;
178             }
179             
180             
181             布局属性：
182             .w{
183                 width: 980px;
184                 margin: 0 auto;
185             }
186             
187         CSS存在形式
188             - 标签
189             - 当前页面 <style></style>
190             - 文件 <link rel='stylesheet' href='' /> *
191     
192     
193     
194     
195 作业：
196     http://dig.chouti.com

课堂笔记