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

HTML文档

文档树：

Doctype

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

有和无的区别
  1. BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
  2. CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

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

有，用什么？

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

Meta(metadata information)

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

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

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

    1. 刷新和跳转

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

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

    1. 关键词

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

    1. 描述

例如：cnblogs

    1. 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

    1. 引进文件

　　　　　　　　< 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

  • ul.li
  • ul.li
  • ul.li

ol

  1. ol.li
  2. ol.li
  3. ol.li

dl

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

table

1 2 3
1 2 3
1 2 3


1
123
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']{ 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
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

  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代码




【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liyongsan/p/6661630.html