HTML

　　在服务器端就是一个文件，文件内部：

　　学习：HTML标签的对应关系

　　HTML打开方式：

　　　　- socket服务端

　　　　- 直接利用浏览器打开

　　　　- pycharm创建服务端

Doctype

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

有和无的区别

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

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

有，用什么？

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

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

描述

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=edge" />

Title

网页头部信息

Link

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

icon

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

Style

在页面中写样式

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

}
< /style>

Script

引进文件

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

写js代码

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

常用标签

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

块级标签：div(默认什么都不是，可以被改造)、h1、p等
行内标签：a、span（默认什么都不是，可以被改造）、select等

各种符号

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

p 和 br

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

<br> 是换行

    <p>asdfasdfasdfasd<br/>fasdfasdf</p>

a标签

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

href是a标签特有的

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

<a href="http://www.baidu.com" target="_blank">百度</a>

2、锚点

    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <div id="i1" style="background-color: green;height: 900px;"></div>
    <div id="i2" style="background-color: red;height: 900px;"></div>
    <div id="i3" style="background-color: pink;height: 900px;"></div>

input标签

输入框text

输入密码password

lable可以点用户名的时候，鼠标定位到输入框。

    <div> <label for="user">用户名：</label> <input id="user" type="text" /></div>
    <div>密码：<input type="password" /></div>

单选radio

        <div>男 <input type="radio" name="fd" /></div>
        <div>女 <input type="radio" name="fd"/></div>

select单选

    <div>
        城市：
            <select>
                <option>上海</option>
                <option>北京</option>
                <option>广州</option>
                <option>沙河</option>
            </select>
    </div>

select多选

           <select multiple="" size="10">
                <option>上海</option>
                <option>北京</option>
                <option>广州</option>
                <option>沙河</option>
            </select>

select分组

           <select multiple="" size="10">
                <optgroup label="河北">
                    <option>石家庄</option>
                    <option>保定</option>
                    <option>廊坊</option>
                    <option>邯郸</option>
                    <option>沙河</option>
                </optgroup>
                <optgroup label="河南">
                    <option>石家庄</option>
                    <option>保定</option>
                    <option>廊坊</option>
                    <option>邯郸</option>
                    <option>沙河</option>
                </optgroup>
            </select>

多选checkbox

    <div>
        爱好：男<input type="checkbox" />  女<input type="checkbox" />  海涛<input type="checkbox" />
    </div>

输入文本textarea

    <div>
        简介：
        <textarea></textarea>
    </div>

上传文件file

    <div>
        上传： <input type="file" />
    </div>

lable获取焦点

    <div> <label for="user">用户名：</label> <input id="user" type="text" /></div>

form标签

    <div>
        <form action="http://192.168.12.90:8000/index/" method="POST" enctype="multipart/form-data">
        <h1>用户登录</h1>
        <p>用户名：<input type="text" /></p>
        <p>密码：<input type="password" /></p>
        <input type="button" value="提交" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
        </form>
    </div>

    <div>
        <form action="http://192.168.12.90:8000/index/" method="POST" enctype="multipart/form-data">
        <h1>用户登录</h1>
        <p>用户名：<input type="text" /></p>
        <p>密码：<input type="password" /></p>
        <input type="button" value="提交" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
        </form>
    </div>

上传文件要在form里加入enctype="multipart/form-data

submit提交包裹当前submit的form里面的表单

form表单

-GET 提交的数据放置在url里面

-POST 提交的数据放置在请求体中

默认值

value设置默认值

            <p>用户名：<input type="text" name="username" value="root" /></p>
            <p>密码：<input type="password" name="pwd" value="root" /></p>

checked设置默认值

            <div>性别：
                <div>男 <input type="radio" name="geasdf" value="1"  /></div>
                <div>女 <input type="radio" name="geasdf" value="0" checked="checked"/></div>
            </div>

checked设置默认值

            <div>
                爱好：男 <input type="checkbox" name="hobby" value="11" checked="checked" />
                     女  <input type="checkbox" name="hobby" value="22" checked="checked"/>
                    海涛 <input type="checkbox" name="hobby" value="海涛"/>
            </div>

selected设置默认值

实例一：

             <select name="city1">
                <option value="88">上海</option>
                <option value="89" selected="selected">北京</option>
                <option value="uu">广州</option>
                <option value="sh">沙河</option>
             </select>
            <select name="city2" multiple>
                <option value="88">上海</option>
                <option value="89" selected="selected">北京</option>
                <option value="uu" selected="selected">广州</option>
                <option value="sh">沙河</option>
             </select>

实例二：

<body>
    <form id="edit_host" action="/edit_host" method="POST">
        <p><input id="hostname" type="text"  value="{{ obj.hostname }}" name="hostname"></p>
        <p><input id="ip" type="text"  value="{{ obj.ip }}" name="ip"></p>
        <p><input id="port" type="text" value="{{ obj.port }}" name="port"></p>
        <select id="b_id" name="caption">
            {% for i in business_obj %}
                <option value='{{ i.id }}'>{{ i }}</option>
            {% endfor %}
        </select>
        <p><input type="submit" value="提交"></p>
    </form>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $('#edit_host').find('select').val({{ obj.b_id }})
    </script>
</body>

            <textarea name="memo" >来杯鸡汤...</textarea>

颜色显示淡

            <p>用户名：<input type="text" name="username" placeholder="请输入用户名" /></p>

            <textarea name="memo" placeholder="鸡汤..."></textarea>

加图片

<img src="img/1.png" alt="我是图片" title="把鼠标给我拿走...">

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

表格

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

CSS

　　height: 48px #定义高度

　　width: 100px #定义宽度

　　background-color: red #定义颜色

　　color: white #字体颜色

　　font-size: 20px #字体大小

　　line-heigth: 48px #定义文字放在多少像素中间

　　text-align: left #定义文字放置在左边，中间或右边

　　display: inline　　#内联标签属性

　　display: block　　#块级标签属性

　　display: inline-block　　#既有内联又有块级标签的属性

　　margin: 50px auto　　#设置上下边距为50px，auto为水平居中

        <p>
            <label for="user" style="width: 100px;display: inline-block;text-align: right;">用户名：</label>
            <input id="user" type="text" />
        </p>
        <p>
            <label style="width: 100px;display: inline-block;text-align: right;">密码：</label>
            <input type="text" />
        </p>

<div style="width: 400px;margin: 50px auto; border: 1px solid #dddddd;">