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

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

有，用什么？

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

Meta(metadata information)

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

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

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

微软的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 模式）显示该网页。更多

常用标签

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

  1     - HTML
  2         - <h6>贺磊</h6>
  3         - <h1>贺磊</h1>
  4         - <img src=''>
  5         
  6       20个左右
  7     - CSS
  8         - <h6 style='color:green;display: inline-block; 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             /* 400px;*/
128             /* 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                  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

课堂笔记

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <!--head：标签-->
  4     <!--id="i1"： 标签属性-->
  5     <head>
  6         <!-- 页面编码 -->
  7         <meta charset="UTF-8" />
  8         <!-- 页面跳转 -->
  9         <!--<meta http-equiv="Refresh" Content="5; Url=http://www.oldboyedu.com" />-->
 10         <!-- 关键字 -->
 11         <meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" />
 12         <!-- 描述 -->
 13         <meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />
 14 
 15         <!-- 用IE最新的引擎去渲染HTML -->
 16         <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
 17 
 18         <!-- 头部图标 -->
 19         <link rel="shortcut icon" href="favicon.ico">
 20         <!-- 头部标题 -->
 21         <title>老男孩教育</title>
 22 
 23         <!--欠四个标签-->
 24 
 25     </head>
 26     <body>
 27 
 28         <!--块级标签-->
 29         <!--<h1>刘浩</h1>-->
 30         <!--<h1>吴春维</h1>-->
 31 
 32         <!--内联标签-->
 33         <!--<a>老男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;孩</a>-->
 34         <!--<a>Alex</a>-->
 35 
 36         <!--一大波符号-->
 37         <!--http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html-->
 38 
 39         <!-- p段落，br换行 -->
 40         <!--<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;<br/>laskjdf;kajsasdfasdfasdf<br/>kas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>-->
 41         <!--<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>-->
 42         <!--<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>-->
 43         <!--<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>-->
 44 
 45         <!--a标签 跳转,重定向 锚-->
 46         <!--
 47         <a href="http://www.oldboyedu.com" target="_blank">老男孩</a>
 48 
 49         <a href="#c1">第一章</a>
 50         <a href="#c2">第二章</a>
 51         <a href="#c3">第三章</a>
 52 
 53         <div id="c1" style="height: 700px;background-color: rebeccapurple;">
 54             辰东所著的第五部小说又称《遮天前传》，《圣墟》为后传首发于起点，辰东结婚后的第一部作品
 55 一粒尘可填海，一根草斩尽日月星辰，弹指间天翻地覆。群雄并起，万族林立，诸圣争霸，乱天动地；问苍茫大地，谁主沉浮？一个少年从大荒中走出，一切从这里开始
 56 16年11月完美荣登2016中国泛娱乐指数盛典中国IP价值榜-网络文学榜top10
 57         </div>
 58         <div id="c2" style="height: 700px;background-color: antiquewhite">
 59             辰东所著的第五部小说又称《遮天前传》，《圣墟》为后传首发于起点，辰东结婚后的第一部作品
 60 一粒尘可填海，一根草斩尽日月星辰，弹指间天翻地覆。群雄并起，万族林立，诸圣争霸，乱天动地；问苍茫大地，谁主沉浮？一个少年从大荒中走出，一切从这里开始
 61 16年11月完美荣登2016中国泛娱乐指数盛典中国IP价值榜-网络文学榜top10
 62 
 63         </div>
 64         <div id="c3" style="height: 700px;background-color: brown;">
 65             辰东所著的第五部小说又称《遮天前传》，《圣墟》为后传首发于起点，辰东结婚后的第一部作品
 66 一粒尘可填海，一根草斩尽日月星辰，弹指间天翻地覆。群雄并起，万族林立，诸圣争霸，乱天动地；问苍茫大地，谁主沉浮？一个少年从大荒中走出，一切从这里开始
 67 16年11月完美荣登2016中国泛娱乐指数盛典中国IP价值榜-网络文学榜top10
 68         </div>
 69         -->
 70 
 71         <!--标题-->
 72         <!--
 73         <h1>刘浩</h1>
 74         <h2>吴春维</h2>
 75         <h3>卢思琪</h3>
 76         <h4>王远根</h4>
 77         <h5>泥泞</h5>
 78         <h6>闫帅</h6>
 79         <h6>贺磊</h6>-->
 80 
 81         <!--纯洁标签-->
 82         <!--
 83         <div>我是块级</div>
 84         <div>我是块级</div>
 85         <span>我是内联</span>
 86         <span>我是内联</span>-->
 87 
 88         <!--列表-->
 89         <!--
 90         <ul>
 91             <li>菜单一</li>
 92             <li>菜单二</li>
 93             <li>菜单上</li>
 94         </ul>
 95 
 96         <ol>
 97             <li>菜单一</li>
 98             <li>菜单二</li>
 99             <li>菜单上</li>
100         </ol>
101 
102         <dl>
103             <dt>标题一</dt>
104             <dd>内容一</dd>
105             <dd>内容一</dd>
106             <dd>内容一</dd>
107 
108             <dt>标题一</dt>
109             <dd>内容一</dd>
110             <dd>内容一</dd>
111             <dd>内容一</dd>
112         </dl>
113         -->
114         <!--表格-->
115         <!--
116         <table border="1">
117             <thead>
118                 <tr>
119                     <th>序号</th>
120                     <th>主机名</th>
121                     <th>端口</th>
122                 </tr>
123             </thead>
124             <tbody>
125                 <tr>
126                     <td>1</td>
127                     <td colspan="2">c1.com</td>
128                 </tr>
129                 <tr>
130                     <td>2</td>
131                     <td>c1.com</td>
132                     <td>80</td>
133                 </tr>
134                 <tr>
135                     <td>3</td>
136                     <td rowspan="2">c1.com</td>
137                     <td>80</td>
138                 </tr>
139                 <tr>
140                     <td>4</td>
141                     <td>80</td>
142                 </tr>
143             </tbody>
144         </table>
145         -->
146 
147         <!--<label for="user">用户名</label> <input id="user" type="text" />-->
148 
149 
150         <!--<fieldset>-->
151             <!--<legend>登录</legend>-->
152             <!--asdfasdfasdfas-->
153         <!--</fieldset>-->
154 
155         <a href="http://www.xiaohuar.com">
156             <img src="2.jpg" alt="贺磊" title="我是贺磊，旋涡选我选我">
157         </a>
158         <form action="http://192.168.12.120:8000/index/" method="POST" enctype="multipart/form-data">
159             <!--普通文本框-->
160             <input  type="text" name="username" value="alex" />
161 
162             <!--<input  type="text" name="username" placeholder="请输入内容" />-->
163 
164             <!--邮箱格式文本框-->
165             <!--<input  type="email" name="em" />-->
166             <!--密码格式文本框-->
167             <input type="password" name="pwd"/>
168             <!--单选框-->
169             <div>
170                 <input type="radio" name="gender1" value="1"  />男
171                 <input type="radio" name="gender1" value="2" checked="checked" />女
172             </div>
173             <!--多选框-->
174             <div>
175                 <input type="checkbox" name="hobby" value="11" checked="checked" />男
176                 <input type="checkbox" name="hobby" value="12" />女
177                 <input type="checkbox" name="hobby" value="13" checked="checked" />男女
178                 <input type="checkbox" name="hobby" value="14" />多男女
179             </div>
180             <!--文件: enctype="multipart/form-data" -->
181             <div>
182                 <input name="fafafa" type="file" />
183             </div>
184             <!--城市-->
185             <div>
186                 <select name="city">
187                     <option value="bj">北京</option>
188                     <option value="sh" selected="selected">上海</option>
189                     <option value="ss">沙河</option>
190                 </select>
191 
192                 <select name="city2" multiple>
193                     <option value="bj">北京</option>
194                     <option value="sh" selected="selected">上海</option>
195                     <option value="ss" selected="selected">沙河</option>
196                 </select>
197             </div>
198 
199             <div>
200                 <textarea name="memo">默认值</textarea>
201             </div>
202 
203             <input type="submit" value="Submit提交" />
204             <input type="button" value="button提交" />
205             <input type="reset" value="重置" />
206         </form>
207 
208 
209 
210 
211     <div>
212         <div></div>
213         <div>
214             <a>
215                 <img src="2.jpg">
216                 <p>asdf</p>
217             </a>
218         </div>
219     </div>
220 
221 
222 
223     </body>
224 </html>

HTML代码

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

HTML文档

Doctype

有和无的区别

有，用什么？

Meta(metadata information)

Title

Link

Script

常用标签

各种符号

p 和 br

a标签

H 标签

H1

H2

H3

H4

H5

H6

select 标签

Checkbox

redio

password

button

file

textarea

label

ul ol dl

table

fieldset

form 表单

作业

CSS

标签选择器

class选择器

id选择器

关联选择器

组合选择器

属性选择器

background

border

margin

padding

display

cursor

浮动

position

透明度

默认样式改造