python--第十三天总结（html ，css 语法）

概述

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

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

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" >

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

1. 写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、锚

A标签内常用属性：

1）、href：打开目标地址（网址），一般填写将要转到目标地址。如href="http://www.xxx.com/"这样浏览者在网页中鼠标点击对应此锚文本将打开到网页http://www.xxx.com/

2）、target：打开目标方式
如果a标签内没有此元素，默认是在浏览网页中重新载入对应链接网页
_blank ：新建标签窗口页，设置此属性，点击锚文本后对应新建标签网页窗口卡打开对应地址
_parent：父级打开网页，此属性可以理解为本页网页从新载入锚文本的网页，针对html框架iframe网页中，整个网页将重新载入打开目标网址地址

常用就此两种打开目标方式，一个是新建窗口、一个不设置target将本页重新载入锚文本地址指向URL、一个是整个网页父级重新载入（类似于没有设置target）相同效果。

2、锚（同页面内上下转到指定位置）
使用语法：
1、需要转到地方添加，<a href="#top">文字</a>，注意href值是#开头+英文字母命名
2、需要在被转到位置添加，<span id="top" name="top"></span>，注意id和name值相同并且与a命名相同

跳转到顶部例子：
1、首先我们在网页body内最上面添加一个<span id="top" name="top"></span>
2、我们再到body内，需要出现点击后转到顶部位置添加，<a href="#top">回到顶部</a>

这样就可实现点击“回到顶部”即可本页内快速浏览到网页顶部位置。

H 标签

在没有赋予H1 H2 H3 H4标签任何CSS样式时候，字体大小h1大于h2大于h3大于h4...

select 标签(下拉菜单)

select 我下拉列表菜单标签
Option为下拉列表数据标签
Value 为Option的数据值（用于数据的传值）

#显示选中的属性
<select>
    <option value='1'>上海</option>
    <option value='2'>北京</option>
    <option value='3' selected='selected'>广州</option>
</select>

#下拉菜单大小为2
<select size='2'>
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>广州</option>
</select>

#下拉菜单多选
<select multiple="multiple" size='2'>
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>广州</option>
</select>

#某些值不可选
<select>
    <optgroup label='河北省'>
        <option>石家庄</option>
        <option>邯郸</option>
    </optgroup>
    <optgroup label='山西省'>
        <option>太原</option>
        <option>平遥</option>
    </optgroup>
</select>

input  标签

属性值

值	描述
button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox	定义复选框。
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
file	定义输入字段和 "浏览..." 按钮，供文件上传
hidden	定义隐藏输入字段
image	定义图像作为提交按钮
number	定义带有 spinner 控件的数字字段
password	定义密码字段。字段中的字符会被遮蔽。
radio	定义单选按钮。
range	定义带有 slider 控件的数字字段。
reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search	定义用于搜索的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。
tel	定义用于电话号码的文本字段。
text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url	定义用于 URL 的文本字段。

Checkbox（多选复选框）

<input name="Fruit" type="checkbox" value="" />

使用html input标签，name为自定义，type类型为“checkbox”的表单

<input type='checkbox'/>
<input type='checkbox' checked/>
<input type='checkbox' checked='checked'/>

eg：

redio(单选框)

<input name="Fruit" type="radio" value="" />

使用html input标签，name为自定义，type类型为“radio”的表单，

注意对比以下两组，要实现单选，必须name 名称相同

男<input type="radio" value="man">
女<input type="radio" value="male">
保密<input type="radio" value="no">

男<input type="radio"  name="gender" value="man">
女<input type="radio"  name="gender" value="male">
保密<input type="radio" checked="checked" name="gender" value="no">

----按钮

button标签

<button> 标签定义一个按钮。
<button type="button">Click Me!</button>

重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

<input type="button" /> 定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按 钮中创建一个吸引人的标记图像。

Submit

<input type="submit" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上，submit会提交表单，button不会提交表单.

submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理（包括输入验证）后再提交的话，通常都必须把submit改成button，即取消其自动提交的行为，否则，将会造成提交两次的效果，对于动态网页来说，也就是对数据库操作两次。或者在使用submit时验证时加return true或false。

File

<input type="file" /> 用于文件上传。

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

textarea

<textarea rows="3" cols="20">
在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>

标签内属性说明
Name 为传值命名
Cols 为字符宽度（每行输入文字多少宽度），跟具体数字
Rows 为行数，默认输入框区域显示高度，跟具体数字

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

label 标签

定义和用法

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

效果如下：(实现点击单选按钮框文字 或 多选按钮框文字对应选择按钮被选择)

ul ol

• 有序列表（ol li）
• 无序列表(ul li)

dl dt dd

<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dl>

语法解释：
首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。
同时dd内可以放置<ul>标签使用(放在<ol> 中无序号，效果同ul)。

table

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

无边框表格
如果在定义表格时，没有指定border属性，那么表格就没有边框

table表格语法与结构
    <table border="1">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table> 
--------------------------------
<table>
<thead>
    <tr><th colspan='3'>1</th></tr>   #合并列
    <tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td rowspan='3'>1</td><td>3</td><td>3</td></tr>  #合并行
    <tr><td>3</td><td>3</td></tr>
    <tr><td>3</td><td>3</td></tr>
    <tr><td>3</td><td>3</td><td>3</td></tr>
</tbody>
</table>

fieldset

<fieldset>
    <legend>登录</legend>
    <p>用户名：</p>
    <p>密码：</p>
</fieldset>

登录

用户名：

密码：

form 表单

下面的表单拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 "form_action.asp" 的页面：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

CSS

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

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

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

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

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

规则定义
id方法：      #new{  }
class方法： .web{  }
标签方法：    div{  }

标签选择器

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（边框）

1、四个边框
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

2、四边相同边框border简写
#divcss5{border:1px solid #00F}
设置了divcss5对象盒子1px像素蓝色实线边框

3、边框三个样式
通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。

1）、边框颜色：border-color:#000

2）、边框厚度（宽度）：border-width:1px
使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。

3）、border边框样式：border-style:solid

边框样式值如下：
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid : 　实线边框（常用）
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边

eg：
<div style='border:1px solid red; height: 10px;'></div>
<br/>
<div style='border:1px dotted red; height: 10px;'></div>
<br/>
<div style='border:1px dashed red; height: 10px;'></div>