Python学习笔记第十四周

目录：

　　一、HTML

　　　　1、概述

　　　　2、HTML

　　二、CSS

一、HTML

1、概述

　　HTML是英文Hyper Text Mark-up Lang（超文本标记语言）的缩写，他是一种制作万维网页面的标准语言，相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它

　　浏览器负责将标记翻译成用户看得懂的格式呈现给用户

2、HTML文档

　　文档树

　　Doctype

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

　　有与无的区别：

　　　1、BackCompat：标准兼容模式未开启（或叫怪异模式、混杂模式）

　　　2、CSS1Compat：标准兼容模式已开启（或叫严格模式）

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

　　用处：

　　DOCTYPE告诉浏览器使用什么样的html或者xhtml规范来解析html文档，dtd文件则包含了标记、attri、proprties、约束规则

　　Meta（metadata information）

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

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

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

　　2、刷新和跳转

 <meta http-equiv="refresh" content="30"/>
 <meta http-equiv="refresh" CONTENT="5;Url=http://www.baidu.com"/>

　　3、关键字

 <meta name="keywords" content="星际2,专访"/>

　　4、X-UA-Compatible

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

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

　　当IE8遇到未包含X-UA-Compatible网页时，将使用指令来确定如何显示该网页，如果该指令丢失或者未指定基于标准的文档模型，则IE8以IE5模式来显示

 <meta http-equiv="X-UA-COMPATIBLE" content="IE=IE7"/>

　　

　　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

　　在页面中写样式

　　例如：　

 < style type="text/css" >
 .bb{
       background-color: red;
    }
 < /style> 

　　Script 

　　1、引进文件

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

　　2、写JS代码

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

　　常用标签

　　标签一般分为两种：

　　1、块级标签

　　2、内联标签（行内标签）

　　

　　各种符号

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

　　例如：&nbsp； &gt；   &lt；

　　p和br

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

　　br表示换行

　　

　　a标签

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

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

　　2、锚 href=‘#ID’   ID不能重复

　　　例子：

 <a href="#1">第一章</a>  <!-- 通过id来锚定某一章节 -->
      <a href="#2">第二章</a>
      <a href="#3">第三章</a>
      <a href="#4">第四章</a>
      <p id='1' style="height: 900px;">第一章内容</p>
      <p id='2' style="height: 900px;">第二章内容</p>
      <p id='3' style="height: 900px;">第三章内容</p>
      <p id='4' style="height: 900px;">第四章内容</p>

　　H标签　　

　　H1~H6 均属于块级标签，字体大小依次减小，单位px或者%

　　

　　span标签

　　span属于内联标签，表示白板

　　

　　b标签：

　　<b>给字体加粗</b>

　　

　　em标签：　　

　　<em>变成斜体</em>

　　strike标签：不建议使用

　　<strike>去除</strike>

　　<del>替代strike标签</del>  #代替strike标签

　　

　　input标签与form标签（表单）

　　备注：所有的input标签单纯出现没有任何意义，它不知道将数据提交到哪个位置，需要将input标签嵌套在form标签中才能完成提交动作，同时form中需要涉及到<div>  <p>  <span>标签内容都不会提交，form中只会提交input的内容　

　　

　　form属性：

　　1、action 表示提交到哪个位置

　　2、method表示用何种方式提交，最常用的两种方式为get与post

　　

 <form action="localhost:8888" method="get">
 用户名:<input type="text" name="username"/> 
 密码:<input type="password"/ name="password"> 
 <input type="button" value="登录"/> 
 <input type="submit" value="上传"/>  </form>

在点击上传后，会提交一个字典给后台

　　例子：

　　通过搜狗搜索内容：

  <form action="https://www.sogou.com/web" target="_blank">
         <input type="text" name="query" />
         <input type="submit" value="搜索"/>
     </form>

　　input属性类型：

　　1、text　

　　 -name属性  value=XXX 表示可以通过value表示默认值

用户名:<input type="text"/>

　　2、password　

　　-name属性　

密码:<input type="password"/><!--显示密文-->

　　3、submit

　　-value=提交，提交按钮，表单

<input type="submit" value="上传"/>

　　4、button

　　-value=登录，单纯的按钮

<input type="button" value="登录"/>　

　　5、radio

　　-value，name属性（name相同会互斥） checked=checked表示默认值选择该值

 男<input type="radio" name="gender" value="1"/>
 女<input type="radio" name="gender" value="2"/>

　　备注：name相同就互斥

　　6、checkbox

　　-value，name属性（批量获取数据） checked=checked表示默认值

 篮球<input type="checkbox" checked="checked" name="a" value="1"/>
 排球<input type="checkbox"  name="a" value="2"/>
 足球<input type="checkbox" name="a" value="3"/>
 网球<input type="checkbox" name="a" value="4"/>

　　7、file

　　-依赖form表单的一个属性，enctype=multipart/form-data  会把本地文件一点一点上传到服务器

<input type="file" name="filename"/>

　　8、reset

　　-重置

<input type="reset" value="重置"/>

　　textarea属性

　　非自闭合标签，默认在两个标签中间，有name属性

<textarea name="demo">aaaaa</textarea>

　　select标签

　　有name属性，内部option，value提交后台，size表示多个，multiple会变为多选，optgroup变为分组，selected=“selected”表示默认值

<select name="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
            <option value="4" selected="selected">南京</option>
 </select>

<select name="mcity" multiple="multiple" size="3">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
            <option value="4" selected="selected">南京</option>
</select>
<!-- 多选-->

 <select name="ch-city">
             <optgroup label="河北省">
                 <option value="1">邯郸</option>
                 <option value="2">唐山</option>
             </optgroup>
             <optgroup label="山东省">
                 <option value="3">济南</option>
                 <option value="4">青岛</option>
             </optgroup>
 </select>

　　img标签

　　属性：

　　alt：图片不存在时显示的注释

　　title：图片的名称注释

　　src：图片出处

 <a href="https://www.baidu.com">
     <img src="a.jpg" style="height: 60px;width: 60px;" alt="QQ" title="QQ">
 </a>

　　列表(不常用，了解即可)

　　ul（非顺序）

　　　　li

　　ol（顺序）

　　　　li

　　dl（分层）

　　　　dt

　　　　dd

 <ul>
         <li>a</li>
         <li>b</li>
         <li>c</li>
         <li>d</li>
     </ul>
     <ol>
         <li>a</li>
         <li>b</li>
         <li>c</li>
         <li>d</li>
     </ol>
     <dl> <!-- 表示分层 ,dt第一层,dd第二层-->
         <dt>ttt</dt>
         <dd>ddd</dd>
         <dd>ddd</dd>
         <dd>ddd</dd>
         <dd>ddd</dd>
     </dl>

　　表格　

　　　table

　　　　thead（表格头部）

　　　　　　tr　　

　　　　　　　　th

　　　　tbody（表格内容部分）

　　　　　　tr

　　　　　　　　td

 <table border="1">
     <thead>
         <tr>
             <th>1</th>
             <th>2</th>
             <th>3</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>一</td>
             <td colspan="2">二</td> <!--合并单元格-->

         </tr>
         <tr>
             <td rowspan="2">一</td><!--合并列-->
             <td>二</td>
             <td>三</td>
         </tr>
         <tr>

             <td>二</td>
             <td>三</td>
         </tr>
         <tr>
             <td>一</td>
             <td>二</td>
             <td>三</td>
         </tr>
     </tbody>
 </table>

　　label标签

　　用于点击文字，使得关联的标签获取光标

 <form>
         <label for="username">用户名</label><!--和input合并,点击label直接进入输入框中-->
         <input type="text" name="user" id="username" />
         <input type="submit" value="提交"/>
     </form>

　　fildset标签　

 <fieldset>
         <legend>登录</legend>
         <form>
         <label for="username1">用户名</label>
         <input type="text" name="user1" id="username1" />
             <br/>
             <label for="pass">密码</label>
         <input type="password" name="password" id="pass" /><br/>
         <input type="submit" value="提交"/>
     </form>
     </fieldset>

二、CSS　

　　1、概述

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

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

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

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

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

　　备注：style的ID和CLASS均不能以数字开头，但是极少使用ID来标记CSS，CLASS选择器是最常用的

　　注释：/*      */表示注释

　　CSS样式：

　　1、id 选择器　　

 #a1{
             background-color: blueviolet;
         }

　　2、class选择器（着重推荐）

 .b1{
             background-color: red;
         }

　　3、标签选择器（推荐使用）

 div {
             background-color:black;
             color: white
         }

　　满足div下面的所有样式均改为此类型

　　4、层级选择器（空格）（推荐使用）

  span div{
             background-color:black;
             color: white;
         }

.c1 div{
            background-color:blue;
            color: white;
        }

<div class="c1">dd
        <span class="c1">
            <div>daaaaddaaa</div>
        </span>

　　5、组合选择器（逗号）（推荐使用）

  <style>
         #i1,#i2,#i3{
             background-color:blueviolet;
             color: white;
         }
     </style>

 <div id="i1">f1</div>
     <div id="i2">f2</div>
     <div id="i3">f3</div>

　　6、属性选择器（着重推荐）

　　 对选择到的标签再通过属性进行一次筛选

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

  <form>
             用户<input type="text"/>
             密码<input type="password"/>
         </form>

　　7、height/width/border/font-size/font-weight/line-height/font-weight/text-align

　　height:表示高度，可以使用px，一般不能用%  因为会产生进度条

　　width：表示宽度，可以使用px也可以使用%

　　border：边框

　　font-size：字体大小

　　font-weight：字体是否加粗，bold表示加粗

　　line-height：表示垂直居中，如果height为48px，line-height也填写为48px，表示垂直居中

　　text-align：表示水平居中

 <div style="height: 48px  ;width: 200px;border: 1px solid black;font-size:16px;text-align:center;line-height: 48px;font-weight: bold;">
     bbbbbbb
     </div>

　　8、float

　　让标签浪起来，块级别的标签也可以堆叠

　　父div控制子div：

　　<div style='clear: both'></div>

<div style="width: 20%;background-color: red;float: left;">a</div>
 <div style="width: 80%;background-color:blue;float: right;">b</div>

　　9、display

　　display：none；让标签显示消失　　

　　display: inline; 块级标签变为内联标签

　　display：block；内联标签变为块级标签

　　display：inline-block；具有inine：默认自己有多少占多少；block：可以设置高度、边框等属性

　　内联标签：无法设置高度、边距

　　块级标签：可以设置高度、边框

　

 <div style="background-color: red;display: inline;">a1</div>
 <span style="background-color: red;display: block;">b</span>

　　10、padding     margin(0,auto)

　　margin:外边距

　　padding：内边距